/* ==========================================================================
   GrowOpsHQ — ReviewMax
   Design system: layered corporate dark.

   Depth here is built the way Apple builds it, from four stacked cues rather
   than from decoration:
     1. a real luminance step between the page and the surfaces on it
     2. a soft, large, very dark ambient shadow that grounds each plane
     3. a 1px inset highlight along the top edge, which reads as a light
        source above the page and is what makes a surface feel physical
     4. generous vertical space, so planes are perceived as separate objects
   No mesh gradients, no glow, no colour washes. The accent stays a single flat
   blue, used sparingly.
   ========================================================================== */

:root {
    /* Surfaces. Off-black base rather than #000: pure black against light text
       maximises contrast, which is what causes halation and eye strain on a long
       read. #09090b keeps the page reading as black while taking that edge off.

       Every surface above it is shifted by the same amount, so the ladder keeps
       the exact spacing it had — the step from --bg to --surface-1 stays at 15
       levels of luminance, large enough to be visible on a dim laptop screen. */
    --bg:            #09090b;
    --recessed:      #050507;
    --band:          #0e0e11;
    --surface-1:     #18181b;
    --surface-2:     #1f1f23;
    --surface-hover: #222226;
    --surface-3:     #2a2a2f;

    --border:        rgba(255, 255, 255, 0.08);
    --border-mid:    rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.20);

    /* Elevation. Near-black shadows only; a coloured shadow on a dark UI reads
       as a glow, and glow is the thing that makes a page look synthetic.

       These do more work now than they did on a pure-black page, where a black
       shadow falling on a black background was invisible and elevation only read
       where elements overlapped. Against an off-black base the ambient shadow
       actually lands, so the opacities are raised to match. */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.6), 0 16px 40px rgba(0, 0, 0, 0.62);
    --shadow-deep: 0 8px 20px rgba(0, 0, 0, 0.65), 0 32px 72px rgba(0, 0, 0, 0.72);

    /* The top-edge highlight. This single line does more for perceived depth
       than the shadow does. */
    --edge:        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.09);

    /* Type */
    --text:           #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary:  #6e6e73;

    /* One accent. Used sparingly, never as a gradient. */
    --accent:       #2997ff;
    --accent-hover: #47a9ff;
    --accent-quiet: rgba(41, 151, 255, 0.10);
    --accent-edge:  rgba(41, 151, 255, 0.28);

    --positive:  #30d158;

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;

    --maxw: 1120px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    /* System font stack only — no third-party font request, which keeps the
       "no external tracking" claim in the privacy policy literally true. */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--surface-3); color: var(--text);
    padding: 12px 20px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-mid); box-shadow: var(--shadow-lift);
}
.skip-link:focus { left: 16px; top: 16px; }

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

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Room to breathe. Section rhythm is the cheapest premium signal there is. */
.section { padding: 128px 0; border-top: 1px solid var(--border); position: relative; }

/* Alternating tint bands. Barely perceptible on their own, but they give the
   page a rhythm so sections read as distinct chapters rather than one scroll. */
#how, #faq { background: var(--band); }

.section-head { max-width: 680px; margin-bottom: 64px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
    font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 14px;
}

h1, h2, h3, h4 { letter-spacing: -0.022em; line-height: 1.1; font-weight: 600; }
h1 { font-size: clamp(2.5rem, 5.5vw, 3.75rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.1875rem; }

.lede { font-size: 1.125rem; color: var(--text-secondary); line-height: 1.6; margin-top: 18px; }

/* ------------------------------------------------------------------- Nav */

.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(9, 9, 11, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.28);
}
.nav-inner {
    max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 56px;
    display: flex; align-items: center; justify-content: space-between;
}
.logo {
    display: flex; align-items: center; gap: 9px;
    font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em;
}
.logo:hover { color: var(--text); }
.logo svg { color: var(--accent); }
.logo .product { color: var(--text-tertiary); font-weight: 400; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 0.8125rem; color: var(--text-secondary); transition: color 0.2s var(--ease); }
.nav-links a:hover { color: var(--text); }

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
    padding: 12px 22px; border-radius: 980px; border: 1px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
                box-shadow 0.2s var(--ease), transform 0.2s var(--ease-out), opacity 0.2s var(--ease);
}
.btn-primary {
    background: var(--accent); color: #fff;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover {
    background: var(--accent-hover); color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: var(--surface-1); color: var(--text);
    border-color: var(--border-mid);
    box-shadow: var(--shadow-sm), var(--edge);
}
.btn-secondary:hover {
    background: var(--surface-2); border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card), var(--edge-strong);
}
.btn-secondary:active { transform: translateY(0); }

.btn-sm { padding: 7px 16px; font-size: 0.8125rem; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.cta-note { font-size: 0.8125rem; color: var(--text-tertiary); margin-top: 14px; }

/* ------------------------------------------------------------------ Hero */

.hero { padding: 112px 0 128px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }

.pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary);
    background: var(--surface-1); border: 1px solid var(--border);
    padding: 6px 14px; border-radius: 980px; margin-bottom: 24px;
    box-shadow: var(--shadow-sm), var(--edge);
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-trust {
    display: flex; flex-wrap: wrap; gap: 22px;
    margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--border);
}
.hero-trust div { font-size: 0.8125rem; color: var(--text-tertiary); }
.hero-trust strong {
    display: block; font-size: 1.375rem; color: var(--text);
    font-weight: 600; margin-bottom: 3px; letter-spacing: -0.02em;
}

/* Dashboard mock — the most elevated object on the page, so it sits clearly
   in front of the hero copy rather than beside it. */
.mock {
    background: var(--surface-1); border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-deep), var(--edge);
}
.mock-bar {
    height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 16px;
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.mock-body { padding: 24px; }
.mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.mock-stat {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
    box-shadow: var(--shadow-sm), var(--edge);
}
.mock-stat .label { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 8px; }
.mock-stat .value { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.mock-stat .value small { font-size: 0.8125rem; color: var(--positive); font-weight: 500; margin-left: 6px; letter-spacing: 0; }
.mock-chart { display: flex; align-items: flex-end; gap: 8px; height: 92px; }
.mock-chart i { flex: 1; background: var(--surface-3); border-radius: 3px 3px 0 0; }
.mock-chart i.on { background: var(--accent); box-shadow: var(--shadow-sm); }

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

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 34px;
    box-shadow: var(--shadow-card), var(--edge);
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
                box-shadow 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.card:hover {
    background: var(--surface-hover);
    border-color: var(--border-mid);
    box-shadow: var(--shadow-lift), var(--edge-strong);
    transform: translateY(-3px);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.65; }

.card-icon {
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--accent-quiet); color: var(--accent);
    border: 1px solid var(--accent-edge);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
    box-shadow: var(--edge);
}

/* Ranking comparison */
.rank-list { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.rank-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 13px 16px;
    box-shadow: var(--shadow-sm), var(--edge);
}
.rank-row.highlight {
    border-color: var(--accent-edge); background: var(--accent-quiet);
    box-shadow: var(--shadow-card), var(--edge);
}
.rank-n { font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); width: 22px; flex-shrink: 0; }
.rank-name { font-size: 0.875rem; font-weight: 500; }
.rank-meta { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2px; }

/* Steps */
.steps { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; }
.step-row { display: flex; gap: 16px; padding: 14px 0; }
.step-n {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    background: var(--surface-3); border: 1px solid var(--border-mid);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
    box-shadow: var(--shadow-sm), var(--edge);
}
.step-row.on .step-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-row strong { display: block; font-size: 0.9375rem; font-weight: 500; margin-bottom: 3px; }
.step-row span { font-size: 0.8125rem; color: var(--text-tertiary); }

.quote-box {
    margin-top: 20px; padding: 16px 18px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-left: 2px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6;
    box-shadow: var(--shadow-sm);
}

/* Flow — every customer receives the review request */
.flow { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.flow-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; font-size: 0.875rem;
    box-shadow: var(--shadow-sm), var(--edge);
}
.flow-row .from { color: var(--text-secondary); min-width: 152px; }
.flow-row .arrow { color: var(--text-tertiary); }
.tag {
    font-size: 0.75rem; font-weight: 500; padding: 5px 11px; border-radius: 980px;
    background: var(--accent-quiet); color: var(--accent); border: 1px solid var(--accent-edge);
}
.tag.neutral { background: var(--surface-3); color: var(--text-secondary); border-color: var(--border); }

/* Illustrative scenarios */
.scenario { display: flex; flex-direction: column; }
.scenario-tag {
    align-self: flex-start; font-size: 0.6875rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary);
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 4px 9px; border-radius: 5px; margin-bottom: 18px;
    box-shadow: var(--edge);
}
.scenario h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.scenario .sector { font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 18px; }
.scenario-stats { display: flex; gap: 28px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--border); }
.scenario-stats div { font-size: 0.75rem; color: var(--text-tertiary); }
.scenario-stats strong { display: block; font-size: 1.25rem; color: var(--text); font-weight: 600; margin-bottom: 3px; letter-spacing: -0.02em; }

/* Deliberately recessed rather than elevated — a disclosure should read as a
   footnote, not compete with the content it qualifies. */
.disclosure {
    margin-top: 36px; padding: 18px 20px;
    background: var(--recessed); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.8125rem; color: var(--text-tertiary); line-height: 1.6;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------- FAQ */

.faq {
    max-width: 780px; margin: 0 auto;
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 8px 28px;
    box-shadow: var(--shadow-card), var(--edge);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
    list-style: none; cursor: pointer; padding: 22px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    font-size: 1rem; font-weight: 500;
    transition: color 0.2s var(--ease);
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: ""; width: 10px; height: 10px; flex-shrink: 0;
    border-right: 1.5px solid var(--text-tertiary); border-bottom: 1.5px solid var(--text-tertiary);
    transform: rotate(45deg) translateY(-2px); transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item p { padding: 0 0 24px; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.7; max-width: 68ch; }

/* --------------------------------------------------------------- Closing */

.closing { text-align: center; padding: 128px 0; border-top: 1px solid var(--border); }
.closing h2 { margin-bottom: 16px; }
.closing .lede { margin: 0 auto 34px; max-width: 520px; }

/* ---------------------------------------------------------------- Badges */

.badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 44px; }
.badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: 980px; padding: 9px 16px;
    font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary);
    box-shadow: var(--shadow-sm), var(--edge);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
                box-shadow 0.2s var(--ease), transform 0.2s var(--ease-out);
}
.badge:hover {
    background: var(--surface-2); border-color: var(--border-mid);
    box-shadow: var(--shadow-card), var(--edge-strong);
    transform: translateY(-1px);
}
.badge svg { color: var(--positive); flex-shrink: 0; }

/* ---------------------------------------------------------------- Footer */

.site-footer { border-top: 1px solid var(--border); padding: 72px 0 48px; background: var(--band); }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 48px; }
.footer-brand { max-width: 330px; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { font-size: 0.8125rem; color: var(--text-tertiary); line-height: 1.65; }
.footer-nav { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: 14px; font-weight: 600; }
.footer-col a, .footer-col button {
    display: block; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 10px;
    background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; text-align: left;
    transition: color 0.2s var(--ease);
}
.footer-col a:hover, .footer-col button:hover { color: var(--text); }
.footer-bottom {
    border-top: 1px solid var(--border); padding-top: 24px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 0.75rem; color: var(--text-tertiary);
}

/* -------------------------------------------------------------- Floating */

.floating {
    position: fixed; bottom: 24px; right: 24px; z-index: 90;
    opacity: 0; pointer-events: none; transform: translateY(12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.floating.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.floating .btn { box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

/* ----------------------------------------------------------------- Modal */

.modal {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.modal.hidden { display: none; }
.modal-box {
    position: relative; width: 100%; max-width: 520px;
    background: var(--surface-1); border: 1px solid var(--border-mid);
    border-radius: 20px; padding: 40px;
    max-height: calc(100vh - 40px); overflow-y: auto;
    box-shadow: var(--shadow-deep), var(--edge-strong);
}
.modal-close {
    position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-3); border: 1px solid var(--border); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.modal-close:hover { background: rgba(255,255,255,0.16); border-color: var(--border-mid); color: var(--text); }

.quiz-header { margin-bottom: 28px; }
.progress { height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
.progress-bar { height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width 0.35s var(--ease); }
.step-indicator { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 10px; }

.screen { opacity: 0; transform: translateY(6px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-out); }
.screen.active { opacity: 1; transform: translateY(0); }
.screen.hidden { display: none; }
.screen h2 { font-size: 1.5rem; margin-bottom: 10px; }
.screen > p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 26px; }

.modal-icon {
    width: 46px; height: 46px; border-radius: 11px;
    background: var(--accent-quiet); color: var(--accent);
    border: 1px solid var(--accent-edge);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
    box-shadow: var(--edge);
}

.offer-strip {
    display: flex; align-items: center; gap: 10px;
    background: var(--accent-quiet); border: 1px solid var(--accent-edge);
    border-radius: var(--radius); padding: 13px 16px; margin-bottom: 24px;
    font-size: 0.8125rem; color: var(--text); font-weight: 500;
    box-shadow: var(--shadow-sm), var(--edge);
}
.offer-strip svg { color: var(--accent); flex-shrink: 0; }

.options { display: flex; flex-direction: column; gap: 9px; }
.option-btn {
    width: 100%; text-align: left; font-family: inherit; font-size: 0.9375rem;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    padding: 14px 16px; border-radius: var(--radius); cursor: pointer;
    box-shadow: var(--shadow-sm), var(--edge);
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
                box-shadow 0.18s var(--ease), transform 0.18s var(--ease-out);
}
.option-btn:hover {
    background: var(--surface-3); border-color: var(--border-strong);
    transform: translateY(-1px); box-shadow: var(--shadow-card), var(--edge-strong);
}
.option-btn:active { transform: translateY(0); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 7px; }
.field input[type="text"], .field input[type="email"] {
    width: 100%; font-family: inherit; font-size: 0.9375rem;
    background: var(--recessed); border: 1px solid var(--border-mid); color: var(--text);
    padding: 12px 14px; border-radius: var(--radius);
    /* Inputs are recessed, not raised — an inset shadow is how a field reads
       as something you type into rather than something you press. */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder { color: var(--text-tertiary); }
.field input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 3px var(--accent-quiet);
}

.consent { display: flex; gap: 11px; align-items: flex-start; margin: 20px 0 22px; }
.consent input[type="checkbox"] {
    width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0;
    accent-color: var(--accent); cursor: pointer;
}
.consent label { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.55; cursor: pointer; }

.spinner {
    width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* Results */
.score-wrap { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.score-ring { width: 92px; height: 92px; flex-shrink: 0; }
.ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 2.6; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; transition: stroke-dasharray 1.1s var(--ease); }
.ring-text { fill: var(--text); font-size: 9px; font-weight: 600; text-anchor: middle; font-family: inherit; letter-spacing: -0.02em; }
.score-label { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 5px; }
.score-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; }
.score-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

.insights-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: 600; margin-bottom: 12px; }
.insights { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.insight {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    box-shadow: var(--shadow-sm), var(--edge);
}
.insight-mark { flex-shrink: 0; margin-top: 1px; }
.insight.strength .insight-mark { color: var(--positive); }
.insight.opportunity .insight-mark { color: var(--accent); }
.insight strong { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 3px; }
.insight p { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

.result-cta {
    background: var(--surface-2); border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg); padding: 26px;
    box-shadow: var(--shadow-card), var(--edge);
}
.result-cta h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.result-cta p { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.6; }

/* ------------------------------------------------------------ Legal pages */

.legal { max-width: 780px; margin: 0 auto; padding: 80px 24px 112px; }
.legal h1 { font-size: 2.25rem; margin-bottom: 12px; }
.legal .updated { font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.legal h2 { font-size: 1.3125rem; margin: 48px 0 14px; }
.legal h3 { font-size: 1rem; margin: 28px 0 10px; }
.legal p, .legal li { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.75; }
.legal p { margin-bottom: 14px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal li { margin-bottom: 9px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    margin: 20px 0 24px; font-size: 0.875rem;
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-card), var(--edge);
}
.legal th, .legal td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal tbody tr:last-child td { border-bottom: none; }
.legal th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.legal td { color: var(--text-secondary); }
.legal .back { display: inline-flex; align-items: center; gap: 7px; font-size: 0.875rem; margin-bottom: 36px; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 900px) {
    .hero { padding: 64px 0 80px; }
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .section { padding: 84px 0; }
    .closing { padding: 84px 0; }
    .section-head { margin-bottom: 44px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .card { padding: 28px; }
    .faq { padding: 4px 20px; }
    .nav-links a { display: none; }
    .footer-nav { gap: 36px; }
    .modal-box { padding: 28px 22px; }
    .floating { left: 16px; right: 16px; bottom: 16px; }
    .floating .btn { width: 100%; }
}

@media (max-width: 560px) {
    .score-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
    .scenario-stats { gap: 20px; }
    .hero-trust { gap: 18px; }
}

/* Hover lift is decoration; on a touch screen it only ever fires as a stuck
   state after a tap, so it is removed rather than left to misbehave. */
@media (hover: none) {
    .card:hover, .badge:hover, .btn:hover, .option-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .card:hover, .badge:hover, .btn:hover, .option-btn:hover { transform: none; }
}