/* =============================================================================
   ONEfourMe public marketing site  —  body.site-page
   -----------------------------------------------------------------------------
   Loaded ONLY by the one-pager (v2/public/lib/site/home.php), after theme.css.
   theme.css supplies the design tokens (:root) and the page background; this
   file owns everything the marketing page adds on top.

   Kept separate from theme.css on purpose: theme.css is already ~10.7k lines and
   serves every authenticated screen, while marketing markup churns constantly.
   Every selector here is scoped to .site-page so none of it can reach the app
   or a member's public Business Page.

   DESIGN INTENT
   The page has to sell, and it has to stay calm. Those are not in tension: the
   drama comes from scale, contrast and space, not from density. One idea per
   section, one primary action per section. Glow is a scarce resource — it marks
   the hero, the availability result, and the closing CTA. Nothing else.
   ========================================================================== */

.site-page {
    --site-max: 1120px;
    --site-narrow: 920px;
    --site-gap: clamp(84px, 11vw, 168px);
    --site-pad: clamp(20px, 5vw, 44px);
}

.site-page main { position: relative; z-index: 1; }

/* theme.css fades the page background from --bg-deep to the much lighter
   --bg-fade across the FULL element height. That is right for an app screen of
   roughly one viewport; across a 9000px sales page it means the bottom third
   washes out to pale teal, and the closing CTA's glow disappears into it.
   Re-stated here so the page is dark at both ends with the lift in the middle,
   which keeps the close the strongest moment on the page. */
body.site-page {
    background: linear-gradient(180deg,
        var(--bg-deep) 0%,
        var(--bg-mid) 40%,
        var(--bg-mid) 60%,
        var(--bg-deep) 100%);
}

/* The perspective grid background lives in theme.css (body.site-page and
   body.bg-perspective) so the registration page can share it. */

/* NB: no radial glows on the body here. A radial gradient sized in percentages
   resolves against the ELEMENT box, so on a 9000px sales page a "transparent
   26%" glow becomes a ~2300px wash that greys out the whole masthead. The hero's
   own ::before aurora supplies the top glow and is sized in px/vw, so it stays
   the same regardless of how long the page grows. Any glow added to the body
   later must use explicit lengths, never percentages. */

/* ============================ HEADER ==================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, rgba(1, 7, 13, 0.94), rgba(1, 7, 13, 0.66));
    border-bottom: 1px solid rgba(118, 221, 244, 0.14);
    backdrop-filter: blur(16px);
}

.site-header-inner {
    position: relative; /* anchors the mobile nav panel */
    display: flex;
    align-items: center;
    gap: 26px;
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 15px var(--site-pad);
}

.site-logo { display: inline-flex; margin-right: auto; }
.site-logo img { display: block; height: 29px; width: auto; }

.site-nav { display: flex; gap: 28px; }

/* :not() matters here. `.site-nav a` (0,1,1) outweighs `.btn-primary` (0,1,0),
   so without it this colour wins on the in-panel CTA and paints pale blue text
   onto a bright cyan gradient - unreadable. */
.site-nav a:not(.site-nav-cta),
.site-link-btn {
    font-size: 0.92rem;
    color: var(--text-soft);
    text-decoration: none;
    transition: color var(--ease);
}

.site-nav a:not(.site-nav-cta):hover,
.site-link-btn:hover { color: var(--primary-2); }

.site-nav-cta { text-decoration: none; }

.site-header-actions { display: flex; align-items: center; gap: 18px; }
.site-link-btn { font-weight: 500; white-space: nowrap; }

/* ---- mobile menu toggle ----
   Hidden at desktop, where .site-nav is already inline. The CTA inside the nav
   panel is hidden here for the same reason. */
.site-menu-toggle { display: none; }
.site-nav-cta { display: none; }

/* Without the script the toggle cannot open anything, so do not show a dead
   button. site.js removes .no-js from <html> as soon as it runs. */
.no-js .site-menu-toggle { display: none !important; }

/* The app's .btn-primary is tuned for form layouts — neutralise those here. */
.site-page .btn-primary {
    justify-self: auto;
    min-width: 0;
    margin-top: 0;
}

.site-cta-sm { padding: 10px 18px; font-size: 0.82rem; }

/* ============================ HERO ====================================== */

/* Wider than the reading sections so the headline's third line ("An AI that
   answers for you.") fits on one line at desktop instead of orphaning "you."
   The lede and claim box keep their own narrower max-widths. */
.site-hero {
    position: relative;
    max-width: var(--site-max);
    margin: 0 auto;
    padding: clamp(66px, 11vw, 122px) var(--site-pad) var(--site-gap);
    text-align: center;
}

/* Slow aurora drift. One decorative flourish for the whole page. */
.site-hero::before {
    content: "";
    position: absolute;
    top: -14%;
    left: 50%;
    width: min(1180px, 165vw);
    aspect-ratio: 1.6;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 38% at 30% 34%, rgba(29, 226, 238, 0.24), transparent 62%),
        radial-gradient(ellipse 38% 34% at 72% 28%, rgba(83, 255, 232, 0.17), transparent 64%),
        radial-gradient(ellipse 46% 40% at 52% 66%, rgba(27, 205, 247, 0.14), transparent 68%);
    filter: blur(8px);
    animation: siteAurora 22s ease-in-out infinite alternate;
}

@keyframes siteAurora {
    0%   { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 0.9; }
    100% { transform: translateX(-50%) scale(1.1) rotate(5deg); opacity: 1; }
}

.site-kicker {
    display: inline-block;
    margin: 0 0 24px;
    padding: 7px 16px;
    border: 1px solid rgba(118, 221, 244, 0.32);
    border-radius: 999px;
    background: rgba(6, 26, 38, 0.6);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--primary-2);
}

.site-hero h1 {
    margin: 0 0 26px;
    font-size: clamp(2.7rem, 7.4vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.site-hero h1 em {
    font-style: normal;
    background: linear-gradient(112deg, var(--primary) 0%, var(--primary-2) 52%, var(--primary-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site-lede {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(1.04rem, 2.1vw, 1.22rem);
    line-height: 1.66;
    color: var(--text-soft);
    text-wrap: pretty;
}

/* ---- username availability checker: the hero's whole job ---- */

.site-claim { max-width: 540px; margin: 42px auto 0; }

.site-claim-label {
    margin: 0 0 12px;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.site-claim-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 9px 9px 9px 18px;
    border: 1px solid var(--input-line);
    border-radius: 999px;
    background: var(--input-bg);
    transition: border-color var(--ease), box-shadow var(--ease);
}

.site-claim-row:focus-within {
    border-color: var(--input-line-focus);
    box-shadow: 0 0 0 4px rgba(29, 226, 238, 0.14);
}

.site-claim-prefix {
    align-self: center;
    font-family: var(--font-mono);
    font-size: 0.98rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.site-claim-row input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 0.98rem;
    outline: none;
    padding: 12px 0;
}

.site-claim-row input::placeholder { color: rgba(126, 172, 184, 0.62); }

.site-claim-row .btn-primary { flex: 0 0 auto; padding: 12px 22px; font-size: 0.8rem; }

.site-claim-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 30px;
    margin: 16px 0 0;
    font-size: 0.93rem;
    color: var(--text-muted);
    transition: color var(--ease);
}

.site-claim-result[data-state="available"] {
    color: var(--primary-2);
    text-shadow: 0 0 22px rgba(83, 255, 232, 0.42);
}

.site-claim-result[data-state="taken"],
.site-claim-result[data-state="invalid"] { color: var(--error-text); }

.site-claim-result a {
    color: inherit;
    text-underline-offset: 3px;
}

.site-hero-note {
    margin: 26px 0 0;
    font-size: 0.84rem;
    color: var(--text-muted);
}

/* ============================ SECTIONS ================================== */

.site-section {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 var(--site-pad) var(--site-gap);
}

.site-section--narrow { max-width: var(--site-narrow); }
.site-section--center { text-align: center; }
.site-section--center .site-body { margin-inline: auto; }

.site-eyebrow {
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary);
}

.site-section h2 {
    max-width: 20ch;
    margin: 0 0 24px;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.024em;
    text-wrap: balance;
}

.site-section--center h2 { margin-inline: auto; }

.site-body {
    max-width: 60ch;
    margin: 0;
    font-size: clamp(1rem, 1.9vw, 1.1rem);
    line-height: 1.76;
    color: var(--text-soft);
    text-wrap: pretty;
}

.site-body + .site-body { margin-top: 20px; }
.site-body strong { color: var(--text-main); font-weight: 600; }

/* ---- the two-page reveal ---- */

.site-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    margin-top: 48px;
}

.site-card {
    position: relative;
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    transition: border-color var(--ease), transform var(--ease);
}

.site-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.site-card-tag {
    display: inline-block;
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.site-card h3 {
    margin: 0 0 12px;
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.26;
}

.site-card p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.68;
    color: var(--text-soft);
}

/* ---- pillars ---- */

.site-pillar {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 var(--site-pad) var(--site-gap);
}

.site-pillar-num {
    display: block;
    margin: 0 0 18px;
    font-family: var(--font-mono);
    font-size: clamp(2.6rem, 6vw, 3.8rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(118, 221, 244, 0.42);
}

.site-pillar h2 {
    max-width: 20ch;
    margin: 0 0 22px;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.024em;
    text-wrap: balance;
}

.site-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.site-chips li {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(6, 26, 38, 0.5);
    font-size: 0.86rem;
    color: var(--text-soft);
}

/* ---- without / with contrast ---- */

.site-versus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    margin-top: 44px;
}

.site-versus-col {
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.site-versus-col--after {
    border-color: rgba(83, 255, 232, 0.42);
    background: linear-gradient(170deg, rgba(29, 226, 238, 0.09), rgba(6, 26, 38, 0.72));
}

.site-versus-col h3 {
    margin: 0 0 20px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-versus-col--after h3 { color: var(--primary-2); }

.site-versus-col ul { margin: 0; padding: 0; list-style: none; }

.site-versus-col li {
    position: relative;
    padding: 0 0 0 26px;
    margin-bottom: 15px;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--text-soft);
}

.site-versus-col li:last-child { margin-bottom: 0; }

.site-versus-col li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--text-muted);
}

.site-versus-col--after li::before { content: "→"; color: var(--primary-2); }

/* ---- pricing ---- */

.site-price-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: 20px;
    max-width: 780px;
    margin-top: 44px;
}

.site-section--center .site-price-row { margin-inline: auto; }

.site-price {
    padding: 34px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-strong);
    text-align: left;
}

.site-price--feature {
    border-color: rgba(83, 255, 232, 0.46);
    box-shadow: 0 16px 48px rgba(8, 178, 202, 0.14);
}

.site-price-name {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.site-price-amount {
    margin: 0 0 16px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.024em;
}

.site-price-amount span {
    font-size: 0.84rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

.site-price-note {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.66;
    color: var(--text-soft);
}

/* Relaunch offer: a third block, so the row widens. It carries the feature
   glow instead of PRO, because it is the one being promoted. */
.site-price-row--three { max-width: 1080px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.site-price--offer {
    position: relative;
    border-color: rgba(83, 255, 232, 0.62);
    box-shadow: 0 0 0 1px rgba(83, 255, 232, 0.18), 0 18px 56px rgba(8, 178, 202, 0.24);
}

.site-price-flag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(83, 255, 232, 0.14);
    color: var(--primary-2);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}

.site-price-amount s.site-price-was {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(255, 120, 120, 0.85);
    margin-right: 6px;
}

/* ---- closing CTA: the last place glow is allowed ---- */

.site-close {
    position: relative;
    max-width: var(--site-narrow);
    margin: 0 auto;
    padding: clamp(60px, 9vw, 96px) var(--site-pad) var(--site-gap);
    text-align: center;
}

.site-close::before {
    content: "";
    position: absolute;
    inset: -6% -10% 12%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 52% 50% at 50% 42%, rgba(29, 226, 238, 0.2), transparent 68%);
}

.site-close h2 {
    max-width: 18ch;
    margin: 0 auto 22px;
    font-size: clamp(2.1rem, 5.4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.site-close .site-body { margin: 0 auto; }
.site-close .site-claim { margin-top: 38px; }

/* ============================ FOOTER ==================================== */

.site-footer {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 34px var(--site-pad) 54px;
    border-top: 1px solid rgba(118, 221, 244, 0.14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
}

.site-footer-logo { height: 21px; width: auto; opacity: 0.78; }
.site-footer-nav { display: flex; flex-wrap: wrap; gap: 24px; margin-right: auto; }

.site-footer-nav a {
    font-size: 0.89rem;
    color: var(--text-soft);
    text-decoration: none;
    transition: color var(--ease);
}

.site-footer-nav a:hover { color: var(--text-main); }
.site-footer-copy { margin: 0; font-size: 0.81rem; color: var(--text-muted); }

/* Legal pages (Terms and Conditions). A reading column, not a sales section:
   no glow, generous line height, and a highlighted cycle-close order because
   that clause is the one members most need to find. */
.site-legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 120px var(--site-pad) 72px;
    line-height: 1.7;
    color: var(--text-soft);
}
.site-legal h1 { margin: 0 0 6px; font-size: clamp(2rem, 5vw, 2.6rem); color: var(--text-main); }
.site-legal h2 { margin: 42px 0 12px; font-size: 1.2rem; color: var(--text-main); scroll-margin-top: 90px; }
.site-legal p, .site-legal li { font-size: 0.98rem; }
.site-legal strong { color: var(--text-main); }
.site-legal ul, .site-legal ol { padding-left: 1.3rem; }
.site-legal li { margin-bottom: 8px; }
.site-legal a { color: #76ddf4; }
.site-legal-updated { margin: 0 0 28px; font-size: 0.85rem; color: var(--text-muted); }
.site-legal #cycle-close-order { scroll-margin-top: 90px; }
.site-legal-steps {
    margin: 14px 0 22px;
    padding: 18px 20px 10px 2.4rem;
    border: 1px solid rgba(118, 221, 244, 0.22);
    border-radius: 12px;
    background: rgba(118, 221, 244, 0.05);
}

/* Visually hidden, still read by screen readers. Not defined in theme.css. */
.site-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================ SCROLL REVEAL =============================
   Deliberately NOT hidden by default. If the stylesheet loaded but the script
   did not, a default-hidden rule would leave the entire page blank. Instead the
   script arms each element (.is-armed) and then releases it (.is-visible), so
   with no JS nothing is ever hidden in the first place. */

.site-page [data-reveal].is-armed {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 620ms ease, transform 620ms ease;
}

.site-page [data-reveal].is-armed.is-visible { opacity: 1; transform: none; }

/* ============================ RESPONSIVE ================================ */

/* ---- below 860px: nav collapses into a toggled panel ----
   The bar keeps the logo, Login and the toggle. Login stays visible at every
   width - members reaching for it should never have to open a menu first. The
   claim CTA moves into the panel so the bar has room to stay calm. */
@media (max-width: 860px) {
    .site-header .site-cta-sm { display: none; }

    .site-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(6, 26, 38, 0.6);
        color: var(--text-main);
        cursor: pointer;
        transition: border-color var(--ease), background var(--ease);
    }

    .site-menu-toggle:hover { border-color: var(--line-strong); }

    .site-menu-bars {
        display: block;
        width: 18px;
        height: 12px;
        position: relative;
    }

    .site-menu-bars i {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform var(--ease), opacity var(--ease), top var(--ease);
    }

    .site-menu-bars i:nth-child(1) { top: 0; }
    .site-menu-bars i:nth-child(2) { top: 5px; }
    .site-menu-bars i:nth-child(3) { top: 10px; }

    .site-menu-toggle[aria-expanded="true"] .site-menu-bars i:nth-child(1) {
        top: 5px;
        transform: rotate(45deg);
    }
    .site-menu-toggle[aria-expanded="true"] .site-menu-bars i:nth-child(2) { opacity: 0; }
    .site-menu-toggle[aria-expanded="true"] .site-menu-bars i:nth-child(3) {
        top: 5px;
        transform: rotate(-45deg);
    }

    /* The panel. Hidden with display:none rather than opacity so its links are
       genuinely out of the tab order while closed. */
    .site-nav {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: var(--site-pad);
        right: var(--site-pad);
        flex-direction: column;
        gap: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: rgba(2, 14, 21, 0.97);
        box-shadow: 0 22px 48px rgba(1, 7, 13, 0.6);
        backdrop-filter: blur(16px);
    }

    .site-nav.is-open { display: flex; }

    /* :not() keeps these rules off the CTA, which is a .btn-primary and must
       keep its own gradient, padding and hover. */
    .site-nav a:not(.site-nav-cta) {
        padding: 14px;
        border-radius: 10px;
        font-size: 1rem;
        transition: background var(--ease), color var(--ease);
    }

    .site-nav a:not(.site-nav-cta):hover { background: rgba(29, 226, 238, 0.08); }

    .site-nav-cta {
        display: inline-flex;
        margin-top: 8px;
        justify-content: center;
    }
}

@media (max-width: 760px) {
    .site-header-inner { gap: 14px; }
    .site-section h2,
    .site-pillar h2,
    .site-close h2 { max-width: none; }
    .site-footer-nav { width: 100%; margin-right: 0; }
}

@media (max-width: 480px) {
    .site-logo img { height: 25px; }

    /* The claim row becomes a stack so the input keeps a usable tap target. */
    .site-claim-row {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        border-radius: var(--radius-lg);
    }

    .site-claim-prefix { align-self: flex-start; }
    .site-claim-row input { padding: 4px 0; width: 100%; }
    .site-claim-row .btn-primary { width: 100%; }
}

/* ============================ MOTION PREFERENCES ======================== */

@media (prefers-reduced-motion: reduce) {
    .site-hero::before { animation: none; }
    .site-card:hover { transform: none; }
    .site-page .btn-primary:hover { transform: none; }

    .site-page [data-reveal].is-armed {
        opacity: 1;
        transform: none;
        transition: none;
    }
}