/* ============================================================
   haru-pages.css — shared design tokens + base styles for
   standalone Haru pages (/demo, /assessment, etc.).

   The landing page (/) ships Framer-generated CSS with its own
   variables; we mirror those tokens here so our new pages feel
   native alongside it without relying on Framer runtime.

   Design tokens extracted during the original landing build — see
   ROADMAP.md §4 for the extraction notes.
   ============================================================ */

/* ---------- Fonts ------------------------------------------------
   Satoshi (Fontshare, free) for display + body — same face as the
   original Haru React app. Instrument Serif italic (Google Fonts,
   free) for serif accents inside headings; accent text is rendered
   in Haru sage (the teal-green accent) via `.heading-serif`.
   ---------------------------------------------------------------- */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

/* ---------- Tokens ---------------------------------------------- */

:root {
    /* Typography — Satoshi for sans (display + body), Instrument Serif for italic accents */
    --font-display: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body:    "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-mono:    "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;

    --fs-display:  clamp(56px, 8vw, 96px);   /* hero h1 */
    --fs-h1:       clamp(40px, 5.4vw, 64px); /* page title */
    --fs-h2:       clamp(28px, 3.6vw, 40px); /* section title */
    --fs-h3:       22px;                     /* card title */
    --fs-lead:     18px;                     /* pitch subtitle */
    --fs-body:     16px;
    --fs-small:    14px;
    --fs-xs:       13px;                     /* eyebrow / pill labels */

    --lh-tight:    1.05;                     /* big display headings */
    --lh-snug:     1.2;                      /* h2/h3 */
    --lh-body:     1.55;
    --lh-loose:    1.7;

    --ls-display:  -0.03em;                  /* tighter for display copy */
    --ls-tight:    -0.01em;
    --ls-normal:   0;
    --ls-wide:     0.14em;                   /* uppercase eyebrows */

    /* Color — primary (light) surface */
    --color-bg:        #ffffff;
    --color-bg-subtle: #fafafa;               /* input / chip default surface */
    --color-text:      #1e1e1e;               /* primary text */
    --color-text-muted:#797979;               /* secondary text */
    --color-text-faint:#a0a0a0;               /* footer copyright tone */
    --color-border:    #ebebeb;               /* subtle card outline / divider */
    --color-border-strong: #d7d7d7;           /* focused input */

    /* Color — dark surface (for footer + dark section treatments) */
    --color-bg-dark:      #1d1d1d;            /* dominant hex on the landing */
    --color-bg-dark-deep: #161616;
    --color-text-on-dark:        #e8eee3;     /* cream for text on dark */
    --color-text-on-dark-muted:  #b9bdb5;
    --color-text-on-dark-faint:  #979a94;

    /* Haru brand palette (source of truth: Docs/NARRATIVE.md) */
    --color-sage:          #81a698;           /* primary brand accent — "Haru teal" */
    --color-mint:          #a9d9b1;           /* soft accent — footer dot, glow */
    --color-cream:         #e8eee3;           /* text color on dark surfaces */
    /* Back-compat aliases (prefer the sage/mint/cream names above in new code). */
    --color-accent:        var(--color-sage);
    --color-accent-soft:   var(--color-mint);
    --color-accent-cream:  var(--color-cream);

    /* Semantic */
    --color-error:         #c75348;
    --color-error-bg:      #fdf3f2;
    --color-error-border:  #f1d3cf;

    /* Radii */
    --radius-sm:   8px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-pill: 999px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Layout */
    --max-w:       1120px;                    /* content max-width */
    --page-px:     clamp(24px, 5vw, 56px);    /* gutter */
    --section-py:  clamp(96px, 11vw, 160px);  /* top/bottom of major sections — matches landing rhythm */

    /* Motion */
    --ease-out-soft:  cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast:   150ms;
    --t-base:   240ms;
    --t-slow:   400ms;
    --t-reveal: 1100ms;

    /* Focus ring (keyboard) */
    --focus-ring: 0 0 0 3px rgba(129, 166, 152, 0.35);
}

/* ---------- Reset + base ---------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-normal);
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;          /* Satoshi Bold — matches landing's heading weight */
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Serif italic accent inside headings — "Loyalty that <em>runs itself</em>."
   Renders in Haru sage so the contrast reads like brand voice, not emphasis. */
.heading-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--color-sage);
    letter-spacing: 0;
}

p {
    margin: 0;
    color: var(--color-text);
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
}

input, select, textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Step headings inside the page card get tabindex="-1" + .focus() so screen
   readers announce the new step. They're not interactive, so suppress the
   sage focus ring — the heading change is already a visual cue. */
.page-card [tabindex="-1"]:focus,
.page-card [tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ---------- Layout primitives ----------------------------------- */

.container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--page-px);
}

.page {
    min-height: 100vh;
    padding-top: clamp(96px, 12vh, 140px);
    padding-bottom: var(--section-py);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* ---------- Typography utilities -------------------------------- */

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-text-muted);
}

.lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
    max-width: 52ch;
}

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

/* ---------- Pills / badges -------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.2;
}

.pill-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    box-shadow: 0 0 0 3px rgba(169, 217, 177, 0.25);
}

/* ---------- Buttons --------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--t-fast) var(--ease-in-out),
        color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out),
        transform var(--t-fast) var(--ease-in-out),
        opacity var(--t-fast) var(--ease-in-out);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--color-text);       /* near-black, matches landing nav "Sign in" */
    color: #ffffff;
    border: 1px solid var(--color-text);
}
.btn-primary:hover  { background: #000000; border-color: #000000; }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover {
    border-color: var(--color-text);
    background: var(--color-bg-subtle);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
    padding: 8px 14px;
}
.btn-ghost:hover { color: #000000; }

/* Underlined inline nav link with animated underline on hover. */
.link-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    color: var(--color-text);
    transition: color var(--t-fast) var(--ease-in-out);
}
.link-underline::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-slow) var(--ease-out-soft);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ---------- Cards ----------------------------------------------- */

.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: clamp(24px, 3.5vw, 40px);
}

.card-dark {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    border-color: transparent;
}
.card-dark .muted  { color: var(--color-text-on-dark-muted); }
.card-dark h1, .card-dark h2, .card-dark h3 { color: var(--color-text-on-dark); }

/* ---------- Form controls --------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}
.field .optional {
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-bg-subtle);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    line-height: 1.4;
    transition:
        background-color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out),
        box-shadow var(--t-fast) var(--ease-in-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--color-text-faint); }

.input:focus,
.select:focus,
.textarea:focus {
    background: var(--color-bg);
    border-color: var(--color-text);
    box-shadow: var(--focus-ring);
    outline: none;
}

.input.has-error,
.select.has-error,
.textarea.has-error {
    border-color: var(--color-error);
    background: var(--color-bg);
}

.textarea {
    min-height: 96px;
    resize: vertical;
    font-family: inherit;
}

.select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
        linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.error-msg {
    font-size: 12px;
    color: var(--color-error);
    margin-top: 2px;
}

.error-block {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: var(--fs-small);
}

/* Honeypot — kept accessible to automated form fillers but
   invisible to humans / AT via the aria-hidden attribute. */
.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Chips (date strip + time-slot grid) ----------------- */

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 10px 16px;
    background: var(--color-bg-subtle);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out),
        color var(--t-fast) var(--ease-in-out);
}
.chip:hover { border-color: var(--color-border-strong); }

.chip.is-active {
    background: var(--color-text);
    color: #ffffff;
    border-color: var(--color-text);
}

.chip:disabled,
.chip[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
}

.chip-strip {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
}

/* Time slot grid uses square-ish chips instead of pill-shape. */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    min-height: 100px;
}
.slot {
    padding: 12px 0;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-small);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition:
        background-color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out),
        color var(--t-fast) var(--ease-in-out);
}
.slot:hover { border-color: var(--color-text); }
.slot.is-active {
    background: var(--color-text);
    color: #ffffff;
    border-color: var(--color-text);
}
.slot:disabled,
.slot[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Progress bar (assessment) --------------------------- */

.progress {
    width: 100%;
    margin-bottom: var(--space-8);
}
.progress-track {
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--color-text);
    border-radius: inherit;
    transition: width var(--t-slow) var(--ease-out-soft);
}
.progress-label {
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: right;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* ---------- Top nav (demo + assessment pages) -------------
   Simple, on-brand header that stays out of the way. The landing
   page has its own Framer nav; we don't try to share them. */

.top-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px clamp(24px, 5vw, 56px);
    background: #ffffff;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast) var(--ease-in-out);
}
.top-nav.is-scrolled { border-bottom-color: var(--color-border); }
.top-nav-brand {
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
    text-decoration: none;
    line-height: 0;              /* strips leading whitespace around the logo img */
}
.top-nav-brand img {
    height: 26px;
    width: auto;
    display: block;
}
.top-nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Inline text nav link (e.g., "Book a demo"). Native text-decoration so
   the hover underline follows the actual glyphs (no preset-box truncation).
   Matches Framer landing's Careers-slot visual weight. */
.top-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .2s ease, text-decoration-color .35s cubic-bezier(.2, .8, .2, 1);
}
.top-nav-link:hover,
.top-nav-link:focus-visible {
    color: #000;
    text-decoration-color: currentColor;
}

/* Nav override for the small Sign-in pill — match landing's compact size. */
.top-nav-right .btn-primary {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 520px) {
    .top-nav { padding: 18px 20px; }
    .top-nav-right { gap: 14px; }
    .top-nav-link { display: none; }
}

/* Locale dropdown — plain text + chevron, inline with other nav items. */
.locale-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.locale-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
    background: transparent;
    border: none;
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease;
}
.locale-dropdown-trigger:hover,
.locale-dropdown-trigger[aria-expanded="true"] { color: #000; }
.locale-dropdown-chev {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}
.locale-dropdown-chev svg { display: block; }

.locale-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 60;
}
.locale-dropdown-menu[hidden] { display: none; }
.locale-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color .15s ease;
    user-select: none;
}
.locale-dropdown-item:hover       { background: var(--color-bg-subtle); }
.locale-dropdown-item.is-active   { background: rgba(129, 166, 152, 0.08); }
.locale-dropdown-item-code {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    min-width: 20px;
}
.locale-dropdown-item-label {
    font-size: 13px;
    color: var(--color-text);
}

/* ---------- Two-column pitch + card layout --------------------- */

.pitch-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}
.pitch-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-top: var(--space-4);
}
.pitch-col h1 {
    font-size: clamp(48px, 6.4vw, 80px);
}
.pitch-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.pitch-bullets li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.pitch-bullet-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-sage);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    font-family: var(--font-body);
    margin-top: 3px;
}
.pitch-bullet-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}
.pitch-bullet-sub {
    font-size: 13.5px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-top: 2px;
}
.pitch-helper {
    font-size: 13px;
    color: var(--color-text-muted);
}
.pitch-helper a { color: var(--color-sage); }
.pitch-helper a:hover { color: var(--color-text); }

/* Card shell + header with mini stepper */

.page-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);          /* 28px — matches landing's card radius */
    padding: clamp(28px, 3.5vw, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}
.page-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
}
.page-card-header h2 {
    font-size: 20px;
    letter-spacing: -0.01em;
    font-family: var(--font-display);
    margin: 0;
    /* weight inherits from h2 base (Satoshi 700) */
}

/* Mini stepper — small numbered circles connected by a line. */

.mini-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.mini-step {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    transition:
        background-color var(--t-fast) var(--ease-in-out),
        color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out);
}
.mini-step.is-active {
    background: var(--color-sage);
    border-color: var(--color-sage);
    color: #ffffff;
}
.mini-step.is-done {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #ffffff;
}
.mini-divider {
    width: 14px;
    height: 1px;
    background: var(--color-border-strong);
}

/* Form layout inside card */

.demo-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.demo-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.privacy-line {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}
.privacy-line a {
    color: var(--color-sage);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast) var(--ease-in-out);
}
.privacy-line a:hover { border-bottom-color: var(--color-sage); }

/* Actions row (Back / Confirm) */

.card-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* Calendar-specific */

.cal {
    display: flex;
    flex-direction: column;
    gap: 22px;                          /* breathing room between tz line, date strip, time grid, actions */
}
.cal .card-actions { margin-top: 4px; }

.cal-tz {
    font-size: 13px;
    color: var(--color-text-muted);
}
.cal-tz strong {
    color: var(--color-text);
    font-weight: 500;
}
.cal-state {
    padding: 28px 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

/* Success screen */

.success {
    padding: 12px 0 8px;
    text-align: center;
}
.success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-sage);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: var(--space-5);
}
.success h2 {
    font-size: 28px;
    margin-bottom: var(--space-3);
}
.success-when {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}
.success-body {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 auto var(--space-8);
    max-width: 42ch;
}

/* ---------- Retention Check (single-column wizard) -------------- */

/* Wizard background — soft sage gradient + two blurred floating
   blobs, scoped to body.wizard-bg so demo + landing aren't affected.
   Adapted from the v1 React app's `.ra-page` treatment. */
body.wizard-bg {
    position: relative;
    overflow-x: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f5f9f6 25%,
            #ebf2ec 55%,
            #ddebe0 80%,
            #cde0d3 100%);
}
body.wizard-bg::before,
body.wizard-bg::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;                /* sits behind page content but above body bg */
    will-change: transform;
}
body.wizard-bg::before {
    top: 12%;
    left: -10%;
    width: 480px;
    height: 480px;
    background: rgba(169, 217, 177, 0.45);     /* mint */
    animation: wizard-float-a 14s ease-in-out infinite;
}
body.wizard-bg::after {
    bottom: 8%;
    right: -10%;
    width: 540px;
    height: 540px;
    background: rgba(129, 166, 152, 0.4);      /* sage */
    animation: wizard-float-b 18s ease-in-out infinite;
}
@keyframes wizard-float-a {
    0%, 100% { transform: translate(0, 0)      scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.08); }
}
@keyframes wizard-float-b {
    0%, 100% { transform: translate(0, 0)      scale(1); }
    50%      { transform: translate(-50px, 40px) scale(0.95); }
}

/* Wizard container — narrower than the 2-col demo, centered. */
.wizard {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    position: relative;          /* lift content above the blob layer */
    z-index: 1;
}

/* On the wizard background, make the card slightly translucent so the
   sage gradient shows through softly behind it. */
body.wizard-bg .page-card {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
}

/* Step content — wraps each renderable step so we can fade them in. */
.step {
    animation: step-in 0.32s var(--ease-out-soft) both;
}
@keyframes step-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Question header */
.question h2 {
    font-size: clamp(28px, 3.4vw, 36px);
    line-height: 1.2;
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-3);
}
.question .subtitle {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: var(--space-6);
    max-width: 56ch;
}

/* Option layouts ------------------------------------------------ */

.options-cards-2col,
.options-cards-3col {
    display: grid;
    gap: 12px;
}
.options-cards-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.options-cards-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.options-compact-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.options-compact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Card-style option (emoji + label + sub) */
.option-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out),
        transform var(--t-fast) var(--ease-in-out);
}
.option-card:hover {
    border-color: var(--color-text);
    transform: translateY(-1px);
}
.option-card.is-selected {
    border-color: var(--color-sage);
    background: rgba(129, 166, 152, 0.08);
}
.option-emoji {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.option-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.option-card-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
}
.option-card-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* Compact option (emoji + label inline) */
.option-compact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out);
}
.option-compact:hover { border-color: var(--color-text); }
.option-compact.is-selected {
    border-color: var(--color-sage);
    background: rgba(129, 166, 152, 0.08);
}
.option-compact-emoji {
    font-size: 16px;
    line-height: 1;
}

/* Intro screen --------------------------------------------------- */

.intro {
    text-align: center;
    padding: 16px 0 8px;
}
.intro h1 {
    font-size: clamp(40px, 5.4vw, 64px);
    line-height: 1.05;
    letter-spacing: var(--ls-display);
    margin-bottom: var(--space-5);
}
.intro .lead {
    margin: 0 auto var(--space-8);
    max-width: 52ch;
}
.intro .skip {
    display: block;
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    font-size: 14px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--t-fast) var(--ease-in-out);
}
.intro .skip:hover {
    color: var(--color-text);
}

/* Lead form (assessment) — stacks single-column inside the card */
.assessment-lead h2 {
    font-size: clamp(28px, 3.4vw, 36px);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}
.assessment-lead .subtitle {
    color: var(--color-text-muted);
    font-size: 15px;
    margin-bottom: var(--space-6);
    max-width: 56ch;
}

/* Results page --------------------------------------------------- */

.results {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Hero opportunity number */
.results-hero {
    text-align: center;
    padding: var(--space-4) 0 var(--space-2);
}
.results-hero-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-text-muted);
    margin-bottom: 12px;
}
.results-hero-amount {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 96px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--ls-display);
    color: var(--color-sage);
}
.results-hero-caption {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: var(--space-3);
}

/* Three metric cards */
.metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.metric {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    text-align: center;
}
.metric-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.metric-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: 4px;
}
.metric-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 6px;
    line-height: 1.4;
}

/* Refine inputs */
.refine {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.refine-header {
    margin-bottom: 16px;
}
.refine-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}
.refine-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
}
.refine-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.refine-field {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}
.refine-field label {
    font-size: 12px;
    color: var(--color-text-muted);
}
.refine-field input {
    width: 100%;
    padding: 10px 12px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
}
.refine-field input:focus {
    outline: none;
    border-color: var(--color-text);
    box-shadow: var(--focus-ring);
}
.refine-unit {
    font-size: 11px;
    color: var(--color-text-faint);
    text-align: right;
    margin-top: 4px;
}

/* Recommendations */
.recs h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}
.recs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.recs li {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.rec-emoji {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.rec-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 2px;
}
.rec-body {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.55;
}

/* Results CTA + disclaimer */
.results-cta {
    text-align: center;
    padding: var(--space-2) 0;
}
.results-cta-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 12px;
}
.results-disclaimer {
    font-size: 12px;
    color: var(--color-text-faint);
    line-height: 1.55;
    text-align: center;
}
.results-disclaimer p { margin: 0 0 4px; }

/* Wizard footer nav (Back / optional Continue) */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* Responsive breakpoints */

@media (max-width: 960px) {
    .pitch-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .pitch-col { padding-top: 0; }
}
@media (max-width: 640px) {
    .page { padding-top: 100px; }
    .page-card { padding: 24px; border-radius: var(--radius-lg); }
    .demo-form-row { grid-template-columns: 1fr; }
    .card-actions { flex-direction: column-reverse; }
    .card-actions .btn { width: 100%; }
    .options-cards-2col,
    .options-cards-3col,
    .options-compact-2col { grid-template-columns: 1fr; }
    .metrics { grid-template-columns: 1fr; }
    .refine-inputs { grid-template-columns: 1fr; }
    .wizard-nav { flex-direction: column-reverse; }
    .wizard-nav .btn { width: 100%; }
}

/* ---------- Legal pages (/privacy, /terms) --------------------- */

.legal-page {
    max-width: 720px;
    margin: 0 auto;
}
.legal-page article > * + * { margin-top: var(--space-5); }
.legal-page h1 {
    font-size: clamp(40px, 5.2vw, 56px);
    margin-bottom: var(--space-2);
}
.legal-page h2 {
    font-size: 22px;
    margin-top: var(--space-10);
    letter-spacing: -0.01em;
}
.legal-page p,
.legal-page li {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
}
.legal-page p.lead { color: var(--color-text); }
.legal-page p.muted em { font-style: normal; color: var(--color-text-muted); }
.legal-page ul {
    padding-left: 20px;
    margin: 0;
}
.legal-page li + li { margin-top: 8px; }
.legal-page a {
    color: var(--color-sage);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast) var(--ease-in-out);
}
.legal-page a:hover { border-bottom-color: var(--color-sage); }
.legal-page .legal-back {
    margin-top: var(--space-12);
    color: var(--color-text-muted);
}

/* Bilingual legal pages: ship EN + ES in the same document, show only
   the article that matches <html lang>. A tiny inline head script sets
   the lang attribute from localStorage before first paint, so no flash. */
.legal-page article[lang]                  { display: none; }
html[lang="en"] .legal-page article[lang="en"],
html[lang="es"] .legal-page article[lang="es"] { display: block; }

/* ---------- Motion preferences ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}