/* ============================================================================
 * STRATAMIZE — ONBOARDING FUNNEL (customer surface, LIGHT theme)
 * ----------------------------------------------------------------------------
 * Derived from the stratamize-brand light theme (warm paper, ink, rationed mint
 * #3BF5B0 with mint TEXT dropped to --mint-700 for AA). Editorial composition:
 * a magazine masthead, an asymmetric two-column body, a deliberate spacing
 * rhythm, and one accent used as a light source — not a default card grid.
 *
 * D8: no bank / processor name lives anywhere in the funnel surface. This file
 * is pure presentation; the server chooses the processor and never renders it.
 * ============================================================================ */

:root {
  /* Brand anchors */
  --mint-500: oklch(86.4% 0.174 163);   /* #3BF5B0 equity */
  --mint-700: oklch(50%   0.150 165);   /* AA mint TEXT on paper */
  --mint-300: oklch(92%   0.110 165);
  --paper:    oklch(98.4% 0.006 95);

  /* Light surfaces */
  --surface-page:   oklch(98.4% 0.006 95);
  --surface-raised: oklch(100%  0     0);
  --surface-sunken: oklch(96.4% 0.008 95);
  --surface-ink:    oklch(20%   0.018 250);

  /* Ink tiers (vs paper) */
  --ink:   oklch(20% 0.018 250);
  --ink-2: oklch(34% 0.016 250);
  --ink-3: oklch(46% 0.018 250);
  --ink-4: oklch(52% 0.016 250);
  --on-accent: oklch(26% 0.07 163);

  --accent:      var(--mint-500);
  --accent-text: var(--mint-700);
  --accent-wash: color-mix(in oklab, var(--mint-500) 18%, var(--surface-raised));
  --accent-edge: color-mix(in oklab, var(--mint-700) 45%, transparent);

  --hairline:        color-mix(in oklab, var(--ink) 13%, transparent);
  --hairline-strong: color-mix(in oklab, var(--ink) 24%, transparent);
  --hairline-faint:  color-mix(in oklab, var(--ink) 7%,  transparent);

  --danger: oklch(50% 0.21 13);
  --danger-wash: color-mix(in oklab, var(--danger) 12%, var(--surface-raised));

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --r-2: 4px; --r-3: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;
  --shadow-2: 0 1px 2px -1px oklch(20% 0.02 250 / 0.12), 0 12px 28px -16px oklch(20% 0.02 250 / 0.16);
  --shadow-3: 0 2px 4px -2px oklch(20% 0.02 250 / 0.14), 0 30px 60px -28px oklch(20% 0.02 250 / 0.22);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --measure-max: 760px;
}

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

body {
  font-family: var(--font-text);
  background: var(--surface-page);
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* subtle paper grain via layered radial — atmosphere, not decoration */
  background-image:
    radial-gradient(60% 50% at 50% -10%, color-mix(in oklab, var(--mint-500) 7%, transparent) 0%, transparent 60%);
  background-repeat: no-repeat;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: var(--r-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Top rail — the only brand tell (the "Powered by Stratamize" caret) ── */
.fn-rail {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.1rem clamp(1.25rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hairline-faint);
}
.fn-mark { width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.fn-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: 1.05rem; }
.fn-rail-meta { margin-left: auto; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .04em; color: var(--ink-4); text-transform: uppercase; }

/* ── Masthead ── */
.fn-shell { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); }
.fn-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem); }
.fn-kicker {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text);
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem;
}
.fn-kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent-edge); }
.fn-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
  line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch;
}
.fn-h1 .accent { color: var(--accent-text); }
.fn-lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--ink-2);
  max-width: 54ch; margin-top: 1.3rem;
}

/* ── Trust strip — editorial inline meta, not pills-soup ── */
.fn-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--hairline-faint); }
.fn-trust-item { display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--ink-3); font-weight: 500; }
.fn-trust-item .tick { color: var(--accent-text); font-weight: 700; }

/* ── Body grid — asymmetric: editorial column + sticky action card ── */
.fn-body { display: grid; gap: clamp(1.5rem, 3vw, 3rem); padding-bottom: 5rem;
  grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .fn-body { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  .fn-aside { position: sticky; top: 2rem; }
}

.fn-section + .fn-section { margin-top: 2.5rem; }
.fn-eyebrow { font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 1rem; }

/* Benefit list — leading rule + generous rhythm */
.fn-benefits { list-style: none; display: flex; flex-direction: column; gap: 1.05rem; }
.fn-benefit { display: grid; grid-template-columns: 26px 1fr; gap: .85rem; align-items: start; }
.fn-benefit .num { font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  color: var(--accent-text); padding-top: .15rem; }
.fn-benefit b { font-weight: 600; display: block; color: var(--ink); }
.fn-benefit span { color: var(--ink-3); font-size: .95rem; }

/* ── Action card (offer) ── */
.fn-card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 2.5vw, 2.25rem);
  box-shadow: var(--shadow-2); position: relative; overflow: hidden;
}
.fn-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.fn-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; }
.fn-card-sub { color: var(--ink-3); font-size: .9rem; margin: .35rem 0 1.4rem; }
.fn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1rem;
  border: none; border-radius: var(--r-md); padding: .95rem 1.5rem; cursor: pointer;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  font-family: var(--font-text);
}
.fn-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px var(--accent); text-decoration: none; }
.fn-cta:active { transform: translateY(0); }
.fn-fineprint { font-size: .72rem; color: var(--ink-4); text-align: center; margin-top: .9rem; line-height: 1.5; }

/* ── Application form ── */
.fn-form { display: grid; gap: 1.5rem; }
.fn-fieldset { border: none; }
.fn-legend { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -0.01em; padding-bottom: .4rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline); width: 100%;
  display: flex; align-items: baseline; gap: .6rem; }
.fn-legend .step { font-family: var(--font-mono); font-size: .75rem; color: var(--accent-text); font-weight: 600; }
.fn-grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .fn-grid.two { grid-template-columns: 1fr 1fr; } .fn-grid.three { grid-template-columns: 1fr 1fr 1fr; } }
.fn-field { display: flex; flex-direction: column; gap: .35rem; }
.fn-field.span-2 { grid-column: 1 / -1; }
.fn-field label { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.fn-field label .req { color: var(--accent-text); }
.fn-field input, .fn-field select, .fn-field textarea {
  font-family: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface-sunken); border: 1px solid var(--hairline);
  border-radius: var(--r-3); padding: .65rem .8rem; transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.fn-field input:focus, .fn-field select:focus, .fn-field textarea:focus {
  outline: none; border-color: var(--accent-edge); box-shadow: 0 0 0 3px var(--accent-wash);
}
.fn-field .hint { font-size: .7rem; color: var(--ink-4); }
.fn-field .lock { font-size: .68rem; color: var(--accent-text); font-weight: 600; }

/* honeypot — visually + a11y hidden, bots fill it */
.fn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fn-banner { border-radius: var(--r-3); padding: .8rem 1rem; font-size: .9rem; font-weight: 500; }
.fn-banner.err { background: var(--danger-wash); border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent); color: var(--danger); }

/* ── Status page ── */
.fn-status-wrap { max-width: 620px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 2rem); }
.fn-status-card { background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: clamp(1.75rem, 4vw, 3rem); }
.fn-status-token { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-4); letter-spacing: .02em; }
.fn-steps { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 1.75rem; }
.fn-step { display: grid; grid-template-columns: 28px 1fr; gap: .9rem; padding: .55rem 0; align-items: start; position: relative; }
.fn-step .dot { width: 14px; height: 14px; border-radius: 50%; margin: .25rem auto 0; border: 2px solid var(--hairline-strong); background: var(--surface-raised); }
.fn-step.done .dot { background: var(--accent); border-color: var(--accent); }
.fn-step.current .dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.fn-step.done::after, .fn-step.current::after, .fn-step:not(:last-child)::after {
  content: ""; position: absolute; left: 13px; top: 1.4rem; bottom: -0.55rem; width: 2px; background: var(--hairline); }
.fn-step.done::after { background: var(--accent); }
.fn-step b { font-weight: 600; font-size: .95rem; }
.fn-step span { color: var(--ink-3); font-size: .85rem; }
.fn-status-head { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; }
.fn-status-detail { color: var(--ink-2); margin-top: .6rem; }

/* ── Footer ── */
.fn-foot { border-top: 1px solid var(--hairline-faint); padding: 2rem clamp(1.25rem, 5vw, 4rem);
  font-size: .76rem; color: var(--ink-4); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.fn-foot .caret { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}