/**
 * File: marketing-pages.css
 * Module: Website
 * Purpose: Shared mega-menu, detail-page, homepage showcase, support, legal, and footer presentation.
 * Dependencies: site/layout.php theme tokens
 * Author: Codex Builder
 * Created: 2026-08-09
 * Last Modified: 2026-08-10
 */

:root {
    --wapi-accent: #d8d3cc;
    --wapi-accent-soft: rgba(216, 211, 204, 0.08);
    --wapi-panel: #111111;
    --wapi-panel-raised: #181716;
    --wapi-warm-line: rgba(216, 211, 204, 0.18);
    --wapi-section-gap: clamp(72px, 8vw, 112px);
}

.wapi-home-hero-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.wapi-home-hero-section > .container {
    position: relative;
    z-index: 2;
}

.wapi-home-hero {
    max-width: 880px;
}

.wapi-home-market-lockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 12px;
}

.wapi-home-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f4f2ef;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.wapi-home-brand-chip img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.wapi-home-signal {
    width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #aaa39a;
}

.wapi-home-signal svg {
    width: 30px;
    height: 24px;
}

.wapi-home-signal path {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.wapi-home-market-slogan {
    margin: 0 0 26px;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.wapi-home-hero h1 {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(2.25rem, 4.4vw, 4rem);
}

.wapi-home-edge-visual {
    position: absolute;
    z-index: 1;
    width: clamp(150px, 13vw, 210px);
    overflow: hidden;
    border: 1px solid rgba(216, 211, 204, 0.12);
    border-radius: 18px;
    opacity: 0;
    filter: grayscale(0.82) sepia(0.06) brightness(0.74) contrast(0.96);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36);
    pointer-events: none;
    will-change: transform, opacity;
}

.wapi-home-edge-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.wapi-home-edge-visual.is-left { left: 0; }
.wapi-home-edge-visual.is-right { right: 0; }
.wapi-home-edge-visual.is-left.is-top { top: 18%; animation: wapi-edge-enter-left 1000ms 260ms cubic-bezier(.2,.72,.2,1) forwards; }
.wapi-home-edge-visual.is-left.is-bottom { top: 58%; animation: wapi-edge-enter-left 1100ms 620ms cubic-bezier(.2,.72,.2,1) forwards; }
.wapi-home-edge-visual.is-right.is-top { top: 12%; animation: wapi-edge-enter-right 1050ms 420ms cubic-bezier(.2,.72,.2,1) forwards; }
.wapi-home-edge-visual.is-right.is-bottom { top: 54%; animation: wapi-edge-enter-right 1150ms 760ms cubic-bezier(.2,.72,.2,1) forwards; }

@keyframes wapi-edge-enter-left {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 0.42; transform: translate3d(-20%, 0, 0); }
}

@keyframes wapi-edge-enter-right {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 0.42; transform: translate3d(20%, 0, 0); }
}

.nav-wrap {
    position: relative;
}

.wapi-nav-links {
    align-items: center;
}

.wapi-nav-item,
.wapi-nav-parent {
    display: flex;
    align-items: center;
}

.wapi-nav-item {
    align-self: stretch;
    justify-content: center;
}

.wapi-nav-parent {
    min-height: 100%;
}

.wapi-nav-parent > a {
    padding-right: 6px;
}

.wapi-mega-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: var(--text-soft);
    background: transparent;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
}

.wapi-mega-toggle span {
    display: block;
    line-height: 1;
    transform: translateY(-2px);
    transition: transform 180ms ease;
}

.wapi-mega-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
}

.wapi-mega-toggle:hover,
.wapi-mega-toggle:focus-visible,
.wapi-mega-toggle[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.wapi-mega-toggle[aria-expanded="true"] span {
    transform: translateY(1px) rotate(180deg);
}

.wapi-mega {
    position: absolute;
    z-index: 70;
    top: 76px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    max-height: min(76vh, 720px);
    padding: 28px;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: 0 0 24px 24px;
    background: #111111;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.wapi-mega-wide {
    grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr);
}

.wapi-mega-compact {
    left: auto;
    width: min(700px, 92vw);
    grid-template-columns: 1fr;
}

.wapi-nav-item:focus-within > .wapi-mega,
.wapi-mega.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.wapi-mega-group h2 {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.wapi-mega-group-full {
    grid-column: 1 / -1;
}

.wapi-mega-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
}

.wapi-mega-wide .wapi-mega-group:last-child .wapi-mega-list,
.wapi-mega-compact .wapi-mega-list {
    grid-template-columns: 1fr;
}

.wapi-mega-link {
    min-width: 0;
    min-height: 64px;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 10px !important;
    border: 1px solid transparent;
    border-radius: 14px !important;
    background: transparent;
}

.wapi-mega-link:hover,
.wapi-mega-link:focus-visible {
    border-color: var(--wapi-warm-line);
    background: #1a1918 !important;
}

.wapi-mega-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wapi-warm-line);
    border-radius: 12px;
    color: #e0dcd6;
    background: #1c1a19;
}

.wapi-mega-icon svg {
    width: 21px;
    height: 21px;
}

.wapi-mega-link strong,
.wapi-mega-link small {
    display: block;
}

.wapi-mega-link strong {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

.wapi-mega-link small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.42;
}

.wapi-detail-hero {
    padding-top: clamp(48px, 5vw, 72px);
}

main > section:first-of-type.section.wapi-detail-hero {
    padding-top: clamp(48px, 5vw, 72px);
    padding-bottom: clamp(72px, 7vw, 100px);
}

.wapi-home-feature-card {
    display: block;
    min-height: 100%;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.wapi-home-feature-card:hover,
.wapi-home-feature-card:focus-visible {
    border-color: var(--wapi-warm-line);
    background: rgba(255, 255, 255, 0.035);
    transform: translateY(-2px);
}

.wapi-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--wapi-accent);
    font-size: 0.82rem;
    font-weight: 600;
}

.wapi-feature-overview-section {
    padding-top: var(--wapi-section-gap);
}

.wapi-overview-heading {
    max-width: 820px;
    margin-bottom: 36px;
}

.wapi-overview-heading h2 {
    margin-top: 12px;
}

.wapi-overview-heading .body-copy {
    margin-top: 18px;
}

.wapi-feature-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.wapi-feature-link-grid.is-premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wapi-feature-link-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 15px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.022);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.wapi-feature-link-card:hover,
.wapi-feature-link-card:focus-visible {
    border-color: var(--wapi-warm-line);
    background: rgba(255, 255, 255, 0.045);
    transform: translateY(-2px);
}

.wapi-feature-link-card strong,
.wapi-feature-link-card small,
.wapi-feature-link-card em {
    display: block;
}

.wapi-feature-link-card strong {
    color: #fff;
    font-size: 1.04rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.35;
}

.wapi-feature-link-card small {
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.wapi-feature-link-card em {
    margin-top: 14px;
    color: var(--wapi-accent);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
}

.wapi-feature-link-card.is-premium {
    background: #131211;
}

.wapi-detail-hero-grid,
.wapi-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(36px, 6vw, 84px);
}

.wapi-premium-hero,
.wapi-solution-hero,
.wapi-integration-hero {
    display: grid;
    gap: clamp(28px, 4vw, 48px);
}

.wapi-premium-hero > .wapi-product-stage {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.wapi-premium-hero > .wapi-product-stage img {
    aspect-ratio: 2.15 / 1;
}

.wapi-premium-hero-copy {
    width: min(880px, 100%);
    margin: 0 auto;
    text-align: center;
}

.wapi-premium-hero-copy h1,
.wapi-premium-hero-copy .hero-subtext {
    margin-right: auto;
    margin-left: auto;
}

.wapi-premium-hero-copy .wapi-hero-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: left;
}

.wapi-premium-hero-copy .action-row {
    justify-content: center;
}

.wapi-solution-hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: end;
    gap: clamp(34px, 6vw, 84px);
}

.wapi-solution-hero-copy h1 {
    max-width: 760px;
}

.wapi-solution-hero-copy .hero-subtext {
    margin-top: 0;
}

.wapi-solution-hero > .wapi-product-stage {
    width: 100%;
}

.wapi-solution-hero > .wapi-product-stage img {
    aspect-ratio: 2.35 / 1;
}

.wapi-integration-hero-copy {
    width: min(920px, 100%);
}

.wapi-integration-hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    align-items: stretch;
    gap: 24px;
}

.wapi-integration-hero-body > .wapi-product-stage {
    height: 100%;
}

.wapi-integration-hero-body > .wapi-product-stage img {
    height: 100%;
    min-height: 390px;
}

.wapi-integration-facts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--line-strong);
    border-radius: 26px;
    background: #141312;
}

.wapi-integration-facts .action-row {
    align-items: stretch;
    flex-direction: column;
}

.wapi-integration-facts .btn {
    width: 100%;
}

.wapi-detail-copy,
.wapi-detail-section-copy {
    min-width: 0;
}

.wapi-detail-copy h1 {
    max-width: 760px;
    font-size: clamp(1.625rem, 2vw, 1.875rem);
    font-weight: 400;
    line-height: 1.22;
}

.wapi-detail-hero h1 {
    max-width: 760px;
    font-size: clamp(1.625rem, 2vw, 1.875rem);
    font-weight: 400;
    line-height: 1.22;
}

.wapi-detail-copy .hero-subtext {
    max-width: 700px;
    margin: 24px 0 0;
}

.wapi-integration-type {
    display: inline-flex;
    width: fit-content;
    margin: -4px 0 16px;
    padding: 6px 10px;
    border: 1px solid var(--wapi-warm-line);
    border-radius: 999px;
    color: var(--text-muted);
    background: #171615;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
}

.wapi-hero-highlights,
.wapi-check-list {
    display: grid;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.wapi-hero-highlights li,
.wapi-check-list li {
    position: relative;
    padding-left: 26px;
    color: var(--text-soft);
    line-height: 1.55;
}

.wapi-hero-highlights li::before,
.wapi-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 9px;
    border: 2px solid var(--wapi-accent);
    border-radius: 50%;
}

.action-row-left {
    justify-content: flex-start;
}

.wapi-product-stage {
    position: relative;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 26px;
    background: #151413;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
}

.wapi-product-stage img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    display: block;
    object-fit: cover;
    object-position: top center;
    border-radius: 16px;
    background: #e8ecf1;
}

.wapi-visual-caption {
    margin: 10px 4px 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
    text-align: left;
}

.wapi-product-stage--supplied {
    background: #080808;
}

.wapi-product-stage--supplied img,
.wapi-solution-hero > .wapi-product-stage--supplied img,
.wapi-integration-hero-body > .wapi-product-stage--supplied img {
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    background: #080808;
}

.wapi-route-line {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 46px;
    width: 82px;
    height: 3px;
    border-radius: 999px;
    background: #b8b1aa;
}

.wapi-detail-section {
    padding-top: var(--wapi-section-gap);
    padding-bottom: 0;
}

.wapi-detail-grid.is-reversed .wapi-detail-section-copy {
    order: 2;
}

.wapi-detail-grid.is-reversed .wapi-product-stage {
    order: 1;
}

.wapi-detail-section-copy h2 {
    margin-top: 12px;
}

.wapi-detail-section-copy .body-copy {
    margin-top: 20px;
}

.wapi-final-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 36px;
    padding: clamp(30px, 5vw, 58px);
    overflow: hidden;
    border: 1px solid var(--wapi-warm-line);
    border-radius: 28px;
    background: #121110;
}

.wapi-final-cta h2 {
    max-width: 820px;
    margin-top: 12px;
}

.wapi-final-cta-actions {
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.wapi-premium-showcase {
    padding-top: var(--wapi-section-gap);
    padding-bottom: var(--wapi-section-gap);
}

.wapi-premium-heading {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
}

.wapi-premium-heading h2 {
    margin-top: 12px;
}

.wapi-premium-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 54px);
}

.wapi-premium-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 26px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.025);
}

.wapi-premium-card-copy h3 {
    margin-top: 10px;
    font-size: clamp(1.65rem, 2.7vw, 2.2rem);
}

.wapi-premium-card-copy .body-copy {
    margin-top: 16px;
}

.wapi-premium-card-copy .btn {
    margin-top: 22px;
}

.wapi-ai-home {
    padding-top: var(--wapi-section-gap);
}

.wapi-ai-home-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: clamp(32px, 6vw, 80px);
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #111111;
}

.wapi-ai-artwork {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid var(--wapi-warm-line);
    border-radius: 24px;
    background: #11100f;
}

.wapi-ai-phone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(270px, 66%);
    padding: 12px;
    border: 7px solid #1f2527;
    border-radius: 34px;
    background: #171615;
    transform: translate(-50%, -50%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.wapi-ai-phone-head {
    padding: 11px 13px;
    border-radius: 18px 18px 8px 8px;
    color: #ffffff;
    background: #282522;
    font-size: 0.82rem;
    font-weight: 600;
}

.wapi-ai-message {
    max-width: 88%;
    margin-top: 11px;
    padding: 10px 12px;
    border-radius: 13px;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.75rem;
    line-height: 1.45;
}

.wapi-ai-message.is-user {
    margin-left: auto;
    color: #ffffff;
    background: #2b2825;
}

.wapi-ai-node {
    position: absolute;
    width: 112px;
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    color: var(--text-soft);
    background: #171615;
    font-size: 0.7rem;
    line-height: 1.35;
}

.wapi-ai-node.is-left { left: 6%; top: 18%; }
.wapi-ai-node.is-right { right: 5%; bottom: 15%; }

.wapi-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(34px, 6vw, 80px);
    align-items: start;
}

.wapi-contact-panel,
.wapi-support-option,
.wapi-onboarding-timeline-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
}

.wapi-contact-panel {
    padding: clamp(22px, 4vw, 38px);
}

.wapi-contact-form {
    display: grid;
    gap: 18px;
}

.form-layout > *,
.form-panel,
.wapi-recaptcha-frame {
    min-width: 0;
}

.wapi-recaptcha-frame {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.wapi-contact-form label {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

.wapi-contact-form input,
.wapi-contact-form select,
.wapi-contact-form textarea {
    width: 100%;
}

.wapi-honeypot {
    position: absolute !important;
    left: -9999px !important;
}

.wapi-support-options {
    display: grid;
    gap: 16px;
}

.wapi-support-option {
    padding: 22px;
}

.wapi-help-entry h1,
.wapi-support-grid h1,
.support-page-head h1,
.support-ticket-head h1 {
    max-width: 720px;
    font-size: clamp(1.625rem, 2vw, 1.875rem);
    font-weight: 400;
    line-height: 1.22;
}

main > section:first-of-type.section.wapi-help-entry,
main > section:first-of-type.section-tight.wapi-help-entry {
    padding-top: clamp(58px, 6vw, 84px);
    padding-bottom: clamp(58px, 6vw, 84px);
}

main > section:first-of-type.section.wapi-onboarding-page {
    padding-top: clamp(62px, 7vw, 92px);
    padding-bottom: clamp(70px, 8vw, 108px);
}

.wapi-onboarding-intro {
    width: min(780px, 100%);
    margin: 0 auto;
    text-align: center;
}

.wapi-onboarding-intro h1 {
    font-size: clamp(1.625rem, 2vw, 1.875rem);
    font-weight: 400;
    line-height: 1.22;
}

.wapi-onboarding-intro .hero-subtext {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.75;
}

.wapi-onboarding-timeline {
    position: relative;
    width: min(1060px, 100%);
    display: grid;
    gap: 24px;
    margin: clamp(52px, 7vw, 82px) auto 0;
}

.wapi-onboarding-timeline::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 50%;
    width: 1px;
    background: var(--wapi-warm-line);
    transform: translateX(-50%);
}

.wapi-onboarding-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    align-items: center;
}

.wapi-onboarding-timeline-card {
    grid-column: 1;
    padding: 24px;
}

.wapi-onboarding-timeline-item.is-right .wapi-onboarding-timeline-card {
    grid-column: 3;
}

.wapi-onboarding-timeline-card h2 {
    margin-bottom: 10px;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 400;
    line-height: 1.3;
}

.wapi-onboarding-timeline-card .body-copy {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.7;
}

.wapi-onboarding-timeline-item .wapi-step-number {
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.wapi-step-number {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--wapi-warm-line);
    color: #ffffff;
    background: #24211f;
    font-size: 0.82rem;
    font-weight: 600;
}

.wapi-onboarding-prep-grid {
    width: min(900px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: clamp(52px, 7vw, 78px) auto 0;
}

.wapi-legal-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 34px 0 46px;
}

.wapi-legal-index a {
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.4;
}

.wapi-legal-index a:hover,
.wapi-legal-index a:focus-visible {
    color: #fff;
    border-color: var(--wapi-warm-line);
    background: var(--wapi-accent-soft);
}

.wapi-legal-note {
    margin: 28px 0;
    padding: 18px 20px;
    border-left: 3px solid var(--wapi-accent);
    border-radius: 0 12px 12px 0;
    color: var(--text-soft);
    background: #141312;
}

.wapi-footer-grid {
    grid-template-columns: minmax(210px, 1.4fr) repeat(6, minmax(120px, 1fr)) !important;
    gap: 30px 22px !important;
}

.wapi-footer-brand p {
    max-width: 260px;
    margin-top: 22px;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.6;
}

.wapi-footer-grid .footer-heading {
    margin-bottom: 18px;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
}

.wapi-footer-grid a {
    margin-bottom: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
    .wapi-mega,
    .wapi-mega-toggle span,
    .wapi-mega-link,
    .wapi-product-stage,
    .wapi-home-edge-visual {
        transition: none !important;
        animation: none !important;
    }

    .wapi-home-edge-visual {
        opacity: 0.36;
    }

    .wapi-home-edge-visual.is-left {
        transform: translate3d(-20%, 0, 0);
    }

    .wapi-home-edge-visual.is-right {
        transform: translate3d(20%, 0, 0);
    }
}

@media (max-width: 1280px) {
    .wapi-home-edge-visual {
        width: 150px;
    }

    .wapi-home-edge-visual.is-left.is-bottom,
    .wapi-home-edge-visual.is-right.is-top {
        display: none;
    }
}

@media (max-width: 1120px) {
    .wapi-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .wapi-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1120px) {
    .mobile-toggle {
        display: inline-flex !important;
        min-height: 44px;
    }

    .wapi-nav-links {
        display: none !important;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .wapi-nav-links.open {
        display: flex !important;
    }

    .wapi-nav-item,
    .wapi-nav-parent {
        width: 100%;
    }

    .wapi-nav-item {
        flex-direction: column;
        align-items: stretch;
    }

    .wapi-nav-parent {
        align-self: stretch;
    }

    .wapi-nav-parent > a {
        flex: 1;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .wapi-mega-toggle {
        flex: 0 0 44px;
    }

    .wapi-mega {
        box-sizing: border-box;
        position: static;
        width: 100%;
        max-height: none;
        display: none;
        grid-template-columns: 1fr;
        gap: 22px;
        margin: 4px 0 10px;
        padding: 18px;
        overflow: visible;
        border-radius: 18px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
    }

    .wapi-nav-item:hover > .wapi-mega,
    .wapi-nav-item:focus-within > .wapi-mega {
        display: none;
    }

    .wapi-mega.is-open {
        display: grid !important;
    }

    .wapi-mega-list,
    .wapi-mega-wide .wapi-mega-group:last-child .wapi-mega-list {
        grid-template-columns: 1fr;
    }

    .wapi-detail-hero-grid,
    .wapi-detail-grid,
    .wapi-solution-hero-copy,
    .wapi-integration-hero-body,
    .wapi-ai-home-panel,
    .wapi-support-grid {
        grid-template-columns: 1fr;
    }

    .wapi-integration-hero-body > .wapi-product-stage img {
        min-height: 0;
    }

    .wapi-feature-link-grid.is-premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wapi-detail-grid.is-reversed .wapi-detail-section-copy,
    .wapi-detail-grid.is-reversed .wapi-product-stage {
        order: initial;
    }

    .wapi-detail-grid.is-reversed .wapi-detail-section-copy {
        order: 1;
    }

    .wapi-detail-grid.is-reversed .wapi-product-stage {
        order: 2;
    }

    .wapi-final-cta {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .wapi-final-cta-actions {
        justify-content: flex-start;
    }

    .wapi-ai-artwork {
        min-height: 380px;
    }

    .wapi-home-edge-visual {
        display: none;
    }
}

@media (max-width: 700px) {
    .form-panel {
        padding: clamp(12px, 4vw, 20px) !important;
    }

    .wapi-premium-grid,
    .wapi-legal-index,
    .wapi-feature-link-grid,
    .wapi-feature-link-grid.is-premium,
    .wapi-footer-grid,
    .wapi-onboarding-prep-grid {
        grid-template-columns: 1fr !important;
    }

    .wapi-home-market-lockup {
        gap: 10px;
    }

    .wapi-home-hero h1 {
        font-size: clamp(2rem, 11vw, 2.75rem);
    }

    .wapi-onboarding-timeline {
        gap: 18px;
        margin-top: 44px;
    }

    .wapi-onboarding-timeline::before {
        left: 21px;
        transform: none;
    }

    .wapi-onboarding-timeline-item {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
    }

    .wapi-onboarding-timeline-card,
    .wapi-onboarding-timeline-item.is-right .wapi-onboarding-timeline-card {
        grid-column: 2;
        grid-row: 1;
        padding: 20px;
    }

    .wapi-onboarding-timeline-item .wapi-step-number {
        grid-column: 1;
        grid-row: 1;
        width: 38px;
        height: 38px;
        margin-top: 12px;
    }

    .wapi-premium-hero-copy .wapi-hero-highlights {
        grid-template-columns: 1fr;
    }

    .wapi-premium-hero > .wapi-product-stage img,
    .wapi-solution-hero > .wapi-product-stage img {
        aspect-ratio: 2 / 1;
    }

    .wapi-footer-brand {
        grid-column: auto;
    }

    .wapi-product-stage {
        padding: 7px;
        border-radius: 18px;
    }

    .wapi-product-stage img {
        border-radius: 12px;
    }

    .wapi-premium-card {
        padding: 20px;
        border-radius: 22px;
    }

    .wapi-premium-card.is-invoice .wapi-premium-card-copy { order: 1; }
    .wapi-premium-card.is-invoice .wapi-product-stage { order: 2; }

    .wapi-ai-artwork {
        min-height: 350px;
    }

    .wapi-ai-node {
        display: none;
    }
}

@media (max-width: 380px) {
    .wapi-recaptcha-frame {
        height: 72px;
    }

    .wapi-recaptcha-frame .g-recaptcha {
        width: 304px;
        transform: scale(0.92);
        transform-origin: left top;
    }
}

@media (max-width: 340px) {
    .wapi-recaptcha-frame {
        height: 69px;
    }

    .wapi-recaptcha-frame .g-recaptcha {
        transform: scale(0.88);
    }
}

@media (max-width: 380px) {
    .wapi-mega {
        padding: 14px;
    }

    .wapi-mega-link {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 8px !important;
    }

    .wapi-mega-icon {
        width: 38px;
        height: 38px;
    }
}