/*
 * main.css  —  layout, sections, components.
 *
 * Load order: reset.css → tokens.css → typography.css → this file.
 * This file assumes all three above are already applied.
 *
 * Structure:
 *   0. Promo bar (launch offer)
 *   1. Page frame + container
 *   2. Section rhythm
 *   3. Hero
 *   4. Body sections (what it is, who it's for)
 *   5. Capability rows
 *   6. CTA block (second waitlist)
 *   7. Footer
 *   8. Waitlist form (shared component)
 *   9. Reveal-on-scroll utility
 */

/* Skip-to-content link — off-canvas until a keyboard user tabs onto it,
   then lifts into view at top-left. WCAG 2.1 AA bypass mechanism. */
.skip-link {
    position: absolute;
    top: 0;
    left: var(--space-md);
    transform: translateY(-120%);
    z-index: 100;
    padding: var(--space-sm) var(--space-lg);
    background: var(--text);
    color: var(--bg);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    border-radius: var(--radius-md);
    transition: transform var(--dur-med) var(--ease-out);
}

.skip-link:focus-visible {
    transform: translateY(var(--space-sm));
    outline: none;
    box-shadow: var(--focus-ring);
}

/* 0. Promo bar -------------------------------------------------------- */

.promo-bar {
    background: var(--promo-bg);
    color: var(--promo-text);
    min-height: var(--promo-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
}

.promo-bar__count {
    color: #FFFFFF;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .promo-bar {
        font-size: 0.6875rem;
        letter-spacing: 0.06em;
        padding: var(--space-sm) var(--space-md);
    }
}

/* 1. Page frame + container ------------------------------------------- */

body {
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;  /* defence against accidental horizontal scroll */
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.container {
    width: var(--container-max);
    margin-inline: auto;
}

/* 2. Section rhythm ---------------------------------------------------- */

.section {
    padding-block: var(--section-gap);
}

.section--hero {
    /* Hero gets its own spacing so it feels anchored to the viewport
       top on desktop but breathes on small screens. */
    padding-block: clamp(56px, 8vw, 96px) var(--section-gap);
    /* Full-viewport hero — on first load, the section fills the screen
       so "What it is" sits exactly one scroll below the fold rather
       than peeking in from the bottom edge. `100svh` (small viewport
       height) handles mobile browser chrome that expands/collapses on
       scroll, avoiding the classic iOS jumping-hero bug with 100vh.
       Content stays top-aligned via flex-start — matches the existing
       layout, just with the section now stretching to viewport height
       so the next section doesn't peek above the fold. */
    min-height: calc(100svh - var(--promo-height));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.section--footer {
    padding-block: var(--space-4xl) var(--space-xxl);
}

/* Horizontal rule used between capability rows. Same colour as
   separators elsewhere in the system. */
.rule {
    height: 1px;
    background: var(--separator);
    border: 0;
    margin: 0;
}

/* 3. Hero --------------------------------------------------------------
 *
 * Spacing rhythm: the wordmark and the tagline read as one unit (tight
 * gap), then a wider gap to the sub-line, then a wider gap again to
 * the form. The form is the destination — everything above breathes
 * toward it, not away from it.
 */

.hero {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hero__wordmark {
    /* Uses .wordmark from typography.css */
    margin-bottom: var(--space-md);
}

.hero .wordmark {
    /* Optical alignment — Tektur's V has a visually-wide left
       side-bearing that, combined with the wordmark's 0.22em
       letter-spacing, pushes VITAL's first stroke noticeably right
       of the K below it. Nudging back so the V and the K share a
       leading edge. Adjust the em value if it looks off at other
       viewport widths. */
    margin-left: -0.06em;
}

.hero__tagline {
    font-size: var(--fs-h1);
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: var(--tracking-display);
    max-width: 18ch;
    color: var(--text);
    margin-bottom: var(--space-xl);
}

.hero__sub {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    max-width: 52ch;
    margin-bottom: var(--space-xl);
}

/* Hero meta — signup count + launch countdown. Sits between the
   sub-copy and the form. Thin separator above anchors it visually;
   monochrome keeps it from competing with the green promo bar. */
.hero__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-md);
    margin-bottom: var(--space-3xl);
    border-top: 1px solid var(--separator);
    max-width: 520px;
}

.hero__counter {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    line-height: 1.2;
}

.hero__counter-num {
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.hero__counter-prefix {
    color: var(--text-secondary);
    font-weight: 500;
}

.hero__counter-label {
    margin-left: var(--space-xs);
}

.hero__countdown {
    display: flex;
    align-items: flex-end;
    gap: var(--space-xs);
    font-family: var(--font-display);
}

.hero__countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 2ch;
}

.hero__countdown-num {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 0.95;
}

.hero__countdown-label {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
}

.hero__countdown-sep {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1;
    padding-bottom: 14px;
}

@media (max-width: 480px) {
    .hero__countdown-num {
        font-size: 24px;
    }
    .hero__countdown-sep {
        font-size: 20px;
        padding-bottom: 10px;
    }
    .hero__countdown-label {
        font-size: 0.5625rem;
        letter-spacing: 0.12em;
    }
}

/* 4. Body sections ----------------------------------------------------- */

.prose-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 68ch;
}

.prose-block__headline {
    font-size: var(--fs-h1);
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: var(--tracking-display);
    color: var(--text);
    line-height: var(--lh-heading);
}

.prose-block__body p + p {
    margin-top: var(--space-md);
}

.prose-block__body p {
    color: var(--text-secondary);
}

.prose-block__body strong {
    color: var(--text);
    font-weight: 500;
}

/* 5. Capability rows --------------------------------------------------- */

.capabilities {
    display: flex;
    flex-direction: column;
    gap: 0;  /* rule-separated, no extra gap */
}

.capability {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    /* Inner padding per row kept tight — rule separators between
       rows already do most of the visual-divider work, and the
       capability section sits inside a section with its own padding
       on both sides. Don't compound the gaps. */
    padding-block: var(--space-xl);
}

.capability__headline {
    font-size: var(--fs-h2);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: var(--tracking-heading);
    color: var(--text);
    line-height: var(--lh-heading);
}

.capability__body {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    max-width: 68ch;
}

/* ≥768px — two-column: headline left, body right. Reads as an editorial
   spread rather than a stacked wall of text. */
@media (min-width: 768px) {
    .capability {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        gap: var(--space-3xl);
        padding-block: var(--space-xxl);
    }
    .capability__headline {
        font-size: var(--fs-h2);
    }
}

/* 6. CTA block --------------------------------------------------------- */

.cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 56ch;
}

.cta__headline {
    font-size: var(--fs-h1);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    color: var(--text);
}

.cta__sub {
    color: var(--text-secondary);
}

/* 7. Footer ------------------------------------------------------------ */

.footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    border-top: 1px solid var(--border);
    padding-top: var(--space-3xl);
}

.footer__copy {
    color: var(--text-muted);
}

/* 8. Waitlist form ----------------------------------------------------- */

.waitlist {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 520px;
}

.waitlist__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.waitlist__label {
    /* Visually hidden but readable by screen readers. We use a visible
       placeholder; the <label> exists only for assistive tech. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.waitlist__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    align-items: stretch;
}

@media (max-width: 480px) {
    .waitlist__row {
        grid-template-columns: 1fr;
    }
}

.waitlist__input {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--fs-body);
    font-family: var(--font-body);
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-med) var(--ease-out),
                background var(--dur-med) var(--ease-out);
    min-height: 52px;
}

.waitlist__input::placeholder {
    color: var(--text-muted);
}

@media (hover: hover) {
    .waitlist__input:hover:not(:focus) {
        border-color: rgba(255, 255, 255, 0.14);
    }
}

.waitlist__input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    background: var(--card-elevated);
}

.waitlist__input[aria-invalid="true"] {
    border-color: var(--bad);
    box-shadow: 0 0 0 1px var(--bad);
}

.waitlist__button {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--fs-body);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--bg);
    background: var(--text);
    border-radius: var(--radius-md);
    min-height: 52px;
    min-width: 180px;
    cursor: pointer;
    transition: background var(--dur-med) var(--ease-out),
                opacity var(--dur-med) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

@media (hover: hover) {
    .waitlist__button:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.92);
    }
}

.waitlist__button:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.84);
}

.waitlist__button:disabled {
    background: var(--text-muted);
    color: var(--bg);
    cursor: not-allowed;
}

.waitlist__button[data-state="submitting"] {
    pointer-events: none;
}

.waitlist__button[data-state="submitting"]::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--bg);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .waitlist__button[data-state="submitting"]::after {
        animation: none;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.waitlist__message {
    font-size: var(--fs-small);
    color: var(--text-tertiary);
    min-height: 1.4em;  /* reserve vertical space to prevent layout shift */
}

.waitlist__message[data-kind="error"] {
    color: var(--bad);
}

.waitlist__message[data-kind="info"] {
    color: var(--text-secondary);
}

.waitlist__message[data-kind="success"] {
    color: var(--good);
}

.waitlist__legal {
    color: var(--text-muted);
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
    margin-top: var(--space-xs);
}

/* No-JS fallback. Only renders when <noscript> unwraps — styled to
   look like an amber-ish warning banner so the user sees the
   alternative path is a graceful fallback, not a broken form. */
.waitlist__noscript {
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--fs-small);
    color: var(--text-secondary);
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    max-width: 520px;
}

.waitlist__noscript a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (hover: hover) {
    .waitlist__noscript a:hover {
        color: var(--accent);
    }
}

/* Success state — replaces the form when a signup succeeds. */
.waitlist__success {
    display: none;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-xl);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-width: 520px;
}

.waitlist__success[data-visible="true"] {
    display: flex;
}

.waitlist__success-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-body);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
}

.waitlist__success-check {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    color: var(--accent);
}

.waitlist__success-sub {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* When the success state is visible, hide the form. */
.waitlist[data-status="done"] .waitlist__row,
.waitlist[data-status="done"] .waitlist__message,
.waitlist[data-status="done"] .waitlist__legal {
    display: none;
}

/* 9. Reveal-on-scroll utility ----------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
}

.reveal[data-visible="true"] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 10. Mobile (≤768px) ------------------------------------------------- *
 *
 * Phone-first polish: centre every column, tighten the hero's vertical
 * balance, stack the form, respect iOS safe areas, kill sticky hover
 * states on touch. Desktop (≥769px) is untouched.
 */

@media (max-width: 768px) {

    /* Respect iOS notch + home-indicator in landscape. */
    .page {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Hero centres horizontally and vertically; the form becomes the
       visual destination of a balanced column. */
    .section--hero {
        justify-content: center;
        padding-block: clamp(40px, 10vw, 72px) var(--section-gap);
    }

    .hero {
        align-items: center;
        text-align: center;
    }

    .hero .wordmark {
        /* Optical nudge only helps when left-aligned. Centred, it
           pulls the wordmark off-axis. Neutralise on mobile. */
        margin-left: 0;
    }

    .hero__tagline,
    .hero__sub {
        max-width: none;
    }

    /* Meta (counter + countdown) follows the centred column. Without
       these overrides, max-width 520px + default left-alignment leaves
       it sitting off-centre against the rest of the hero. */
    .hero__meta {
        align-items: center;
        margin-inline: auto;
    }

    .hero__counter {
        justify-content: center;
        text-align: center;
    }

    .hero__countdown {
        justify-content: center;
    }

    .hero__countdown-unit {
        align-items: center;
    }

    /* Prose sections + CTA centre, and the ch-based caps get relaxed
       so the centred text actually uses its column. */
    .prose-block,
    .cta {
        margin-inline: auto;
        text-align: center;
        align-items: center;
        max-width: none;
    }

    .prose-block__body,
    .capability__body {
        max-width: none;
    }

    /* Capability rows (still single-column at this width) centre too. */
    .capability {
        text-align: center;
        justify-items: center;
    }

    /* Footer centres. */
    .footer {
        align-items: center;
        text-align: center;
    }

    /* Waitlist: stack earlier than the existing 480px breakpoint,
       and let the button breathe edge-to-edge in its column. */
    .waitlist {
        max-width: 100%;
        margin-inline: auto;
        width: 100%;
    }

    .waitlist__row {
        grid-template-columns: 1fr;
    }

    .waitlist__button {
        min-width: 0;
        width: 100%;
    }

    .waitlist__success,
    .waitlist__noscript {
        max-width: 100%;
    }

    /* Centre inline form messages so they sit under the centred column. */
    .waitlist__message,
    .waitlist__legal {
        text-align: center;
    }

    /* Kill the Android/Chrome grey tap-flash; :active state already
       provides press feedback. */
    a,
    button,
    .waitlist__input,
    .waitlist__button {
        -webkit-tap-highlight-color: transparent;
    }
}