/* Easy Splitter — landing theme.
   Token architecture: the ONLY literal values live in @layer tokens as brand
   seeds and scale units. Everything else is derived with native CSS —
   light-dark() for scheme switching, relative color syntax for elevation,
   color-mix() for tints — so both themes are computed from one set of seeds.
   No frameworks. Layers: reset < tokens < base < components. */

@layer reset, tokens, base, components, utilities, overrides;

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  img { display: inline-block; vertical-align: middle; }
  h1, h2, h3, p { margin: 0; }
}

/* --------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* Scheme wiring: follow the OS by default; data-theme forces one. */
    color-scheme: light dark;

    /* ---- 1. Brand seeds (the only hand-picked colors) ---- */
    --brand:        oklch(63.5% 0.126 163);  /* Mint    */
    --brand-2:      oklch(71.5% 0.132 160);  /* Mint 2  */
    --accent:       oklch(76%   0.140 40);   /* Coral   */

    /* Warm neutral anchors, one per scheme (hue band 75–90, low chroma). */
    --surface-page: light-dark(oklch(93.5% 0.025 90), oklch(23% 0.015 75));
    --text-strong:  light-dark(oklch(34% 0.020 85),  oklch(93% 0.012 88));
    --on-brand:     oklch(97.5% 0.012 92);   /* cream, both schemes */

    /* ---- 2. Derived surfaces (computed, never picked) ---- */
    --elev-1: 0.040;  /* raised-card lightness delta; scheme blocks flip it —
                         light-dark() is colors-only, numbers would be invalid */
    --surface-raised: oklch(from var(--surface-page) calc(l + var(--elev-1)) c h);
    --surface-sunken: oklch(from var(--surface-page) calc(l - 0.028) c h);
    --line:           oklch(from var(--surface-page) calc(l - 0.065) c h);
    --text-muted:     color-mix(in oklab, var(--text-strong) 72%, var(--surface-page));
    --veil:           color-mix(in oklab, var(--surface-page) 92%, transparent);

    /* ---- 3. Interaction & status ---- */
    --link:       var(--brand);
    --focus-ring: color-mix(in oklab, var(--brand) 55%, var(--surface-page));
    --ok:         var(--brand-2);
    --warn:       var(--accent);
    --danger:     light-dark(oklch(55% 0.19 28), oklch(70% 0.16 28));
    /* Text-safe brand shades: the raw seeds fail 4.5:1 (Mint) and 3:1 even
       for large text (Coral) on the light surface, so text roles take the
       same hue at a passing lightness; dark keeps the brighter seed. */
    --brand-text:  light-dark(oklch(45.5% 0.100 163), var(--brand));
    --accent-text: light-dark(oklch(55% 0.130 40),   var(--accent));

    /* ---- 4. Elevation (espresso-tinted, two layers by convention) ---- */
    --shadow-color:   oklch(from var(--text-strong) l c h / 12%);
    --shadow-contact: 0 1px 2px var(--shadow-color);
    --shadow-ambient: 0 2px 8px -3px var(--shadow-color);
    --shadow-float:   0 30px 60px -30px oklch(from var(--text-strong) l c h / 32%);
    --edge-highlight: inset 0 1px 0 oklch(from var(--surface-raised) calc(l + 0.02) c h / 85%);

    /* ---- 5. Texture (grain lens; blend flips with the scheme) ---- */
    --grain-alpha: 0.055;
    --grain-blend: multiply;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* ---- 6. Space, radius, type scales ---- */
    --unit: 4px;
    --space-1: calc(var(--unit) * 1);
    --space-2: calc(var(--unit) * 2);
    --space-3: calc(var(--unit) * 3);
    --space-4: calc(var(--unit) * 4);
    --space-6: calc(var(--unit) * 6);
    --space-8: calc(var(--unit) * 8);
    --space-12: calc(var(--unit) * 12);
    --space-16: calc(var(--unit) * 16);
    --space-24: calc(var(--unit) * 24);

    /* Radius follows BRAND.md §6.6 (8 / 12 / 16 / 22), shared with the Mini
       App's tokens.css — one scale across both surfaces. */
    --radius-s: calc(var(--unit) * 2);
    --radius-m: calc(var(--unit) * 3);
    --radius-l: calc(var(--unit) * 4);
    --radius-xl: calc(var(--unit) * 5.5);
    --radius-round: 999px;

    --font-display: Outfit, system-ui, sans-serif;
    --font-body: Inter, system-ui, sans-serif;
    --step--1: clamp(0.81rem, 0.79rem + 0.11vw, 0.88rem);
    --step-0:  clamp(0.95rem, 0.92rem + 0.17vw, 1.06rem);
    --step-1:  clamp(1.14rem, 1.09rem + 0.26vw, 1.31rem);
    --step-2:  clamp(1.42rem, 1.32rem + 0.51vw, 1.75rem);
    --step-3:  clamp(1.98rem, 1.77rem + 1.07vw, 2.69rem);
    --step-4:  clamp(2.57rem, 2.19rem + 1.94vw, 3.85rem);
    --measure: 46ch;

    --gradient-brand: linear-gradient(45deg, var(--brand), var(--brand-2));
    --ease: cubic-bezier(.2, .7, .3, 1);
    --speed: 160ms;
    --speed-slow: 320ms;

    /* ---- 7. Structure & stacking (layout constants as tokens) ---- */
    --wrap: 1060px;
    --border-w: 1px;
    --border-w-focus: 3px;
    --tap-target: calc(var(--unit) * 11);   /* 44px minimum hit area */
    --z-raised: 1;
    --z-sticky: 9;
    --z-modal: 99;
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  /* Blend mode can't use light-dark(); flip it alongside the scheme. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --grain-blend: soft-light; --grain-alpha: 0.05; --elev-1: 0.045; }
  }
  :root[data-theme="dark"] {
    --grain-blend: soft-light; --grain-alpha: 0.05; --elev-1: 0.045; }

  /* Typed tokens (@property, Baseline 2024): an invalid computation now falls
     back to the registered initial instead of silently becoming transparent —
     the failure mode that hid the raised surface entirely. */
  @property --elev-1 { syntax: "<number>"; inherits: true; initial-value: 0.04; }
  @property --surface-raised { syntax: "<color>"; inherits: true; initial-value: oklch(97.5% 0.014 90); }
  @property --surface-sunken { syntax: "<color>"; inherits: true; initial-value: oklch(90.7% 0.025 90); }
  @property --line { syntax: "<color>"; inherits: true; initial-value: oklch(87% 0.025 90); }
}

/* ----------------------------------------------------------------- base */
@layer base {
  html { scroll-behavior: smooth; scrollbar-gutter: stable; }
  body {
    background: var(--surface-page);
    color: var(--text-strong);
    font: 400 var(--step-0) / 1.6 var(--font-body);
    transition: background-color var(--speed-slow) var(--ease),
      color var(--speed-slow) var(--ease);
  }
  /* Site-wide grain lens: felt, not seen. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: var(--z-raised); pointer-events: none;
    opacity: var(--grain-alpha); mix-blend-mode: var(--grain-blend);
    background-image: var(--grain); background-size: 180px 180px;
  }
  h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em;
    line-height: 1.1; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: var(--link); text-underline-offset: 0.15em; text-decoration-skip-ink: all; }
  :focus-visible { outline: var(--border-w-focus) solid var(--focus-ring); outline-offset: 2px; }
  ::selection { background: color-mix(in oklab, var(--brand) 30%, var(--surface-page)); }

  /* Native primitives inherit the theme: form controls, scrollbars, carets. */
  :root { accent-color: var(--brand); caret-color: var(--brand); }
  body { scrollbar-color: color-mix(in oklab, var(--text-strong) 35%, var(--surface-page)) transparent; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  input, select, textarea {
    background: var(--surface-raised); border: var(--border-w) solid var(--line);
    border-radius: var(--radius-s); padding: var(--space-2) var(--space-3);
  }
  code, kbd { font-size: var(--step--1); background: var(--surface-sunken);
    border-radius: var(--radius-s); padding: 0 var(--space-2); }
  hr { border: 0; border-block-start: var(--border-w) solid var(--line); }
  ::marker { color: var(--brand); }
  strong, b { color: var(--text-strong); }

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

  .wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--space-6); }
}

/* ----------------------------------------------------------- components */
@layer components {
  /* nav */
  nav { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-6); }
  /* logo-small at 32px: the primary mark's minimum is 48px and its small
     sibling is the ≤32px variant (BRAND.md §3) — the nav sits between. */
  nav img { width: calc(var(--unit) * 8); }
  nav b { font: 700 var(--step-1) var(--font-display); }
  nav .cta { margin-inline-start: auto; }
  nav .theme-btn {
    margin-inline-start: var(--space-3); inline-size: var(--tap-target); block-size: var(--tap-target);
    border-radius: var(--radius-round); border: var(--border-w) solid var(--line);
    background: var(--surface-raised); color: var(--text-strong);
    font-size: var(--step-0); cursor: pointer;
  }

  /* the one CTA — elevation follows the house materiality (espresso-tinted,
     two layers); the gradient itself carries the color. */
  .cta {
    display: inline-block; background: var(--gradient-brand); color: var(--on-brand);
    font: 600 var(--step-0) var(--font-body); text-decoration: none;
    border-radius: var(--radius-round); padding: var(--space-3) var(--space-6);
    transition: transform var(--speed) var(--ease);
    box-shadow: var(--shadow-contact), var(--shadow-ambient);
  }
  .cta:hover { transform: translateY(-1px); }
  .cta.big { font-size: var(--step-1); padding: var(--space-4) var(--space-8); }

  /* hero */
  .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12);
    align-items: center; padding-block: var(--space-16) calc(var(--space-16) + var(--space-4)); }
  .hero h1 { font-size: var(--step-4); font-weight: 800; }
  .hero h1 em { font-style: normal; color: var(--accent-text); }
  .hero .sub { font-size: var(--step-1); color: var(--text-muted);
    margin-block: var(--space-6) var(--space-8); max-width: var(--measure); }
  .hero .proof { margin-top: var(--space-4); font: 500 var(--step--1) var(--font-body);
    color: var(--text-muted); }
  .hero .proof b { color: var(--text-strong); }

  /* chat mockup */
  .phone { background: var(--surface-raised); border: var(--border-w) solid var(--line);
    border-radius: var(--radius-xl); padding: var(--space-6);
    box-shadow: var(--edge-highlight), var(--shadow-ambient), var(--shadow-float); }
  .msg { background: var(--surface-sunken); border-radius: var(--radius-m)
    var(--radius-m) var(--radius-m) var(--radius-s);
    padding: var(--space-3) var(--space-4); font-size: var(--step--1);
    margin-bottom: var(--space-3); max-width: 92%; }
  .msg.user { background: var(--gradient-brand); color: var(--on-brand);
    border-radius: var(--radius-m) var(--radius-m) var(--radius-s) var(--radius-m);
    margin-inline-start: auto; }
  .msg .who { display: flex; align-items: center; gap: var(--space-2);
    font: 600 var(--step--1) var(--font-body); color: var(--brand-text);
    margin-bottom: var(--space-1); }
  .msg .who img { width: var(--space-4); }
  .msg b { font-variant-numeric: tabular-nums; }
  .msg .btns { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
  .msg .btns span { background: var(--surface-raised); border: var(--border-w) solid var(--line);
    border-radius: var(--radius-s); font: 600 var(--step--1) var(--font-body);
    padding: var(--space-1) var(--space-3); color: var(--text-strong); }

  /* sections */
  section { padding-block: var(--space-16); }
  section.alt { background: var(--surface-raised); border-block: var(--border-w) solid var(--line); }
  .kicker { font: 600 var(--step--1) var(--font-body); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--brand-text); margin-bottom: var(--space-2); }
  h2 { font-size: var(--step-3); font-weight: 800; max-width: 24ch; }

  /* cards (steps) */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6); margin-top: var(--space-8); }
  .step { background: var(--surface-page); border: var(--border-w) solid var(--line);
    border-radius: var(--radius-l); padding: var(--space-6);
    box-shadow: var(--edge-highlight), var(--shadow-ambient); }
  section:not(.alt) .step { background: var(--surface-raised); }
  /* Numeral chip in ink-on-paper inversion: cream-on-Coral reads ≈2.1:1 and
     Coral is the owed/attention semantic (§4), not decoration for numbers. */
  .step .n { display: inline-grid; place-items: center;
    width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round);
    background: var(--text-strong); color: var(--surface-page);
    font: 700 var(--step-0) var(--font-display); margin-bottom: var(--space-3); }
  .step h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
  .step p { color: var(--text-muted); font-size: var(--step--1); }

  /* feature grid */
  .feats { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6); margin-top: var(--space-8); }
  .feat h3 { font-size: var(--step-1); margin-bottom: var(--space-2);
    display: flex; align-items: center; gap: var(--space-2); }
  /* One dot treatment: alternating Mint/Coral diluted the owed/owing semantic
     the product's money UI depends on (§4) — the dots are pure decoration. */
  .feat .dot { width: var(--space-2); height: var(--space-2);
    border-radius: var(--radius-round); background: var(--ok); flex: none; }
  .feat p { color: var(--text-muted); font-size: var(--step--1); }

  /* legal pages (privacy, terms) — the landing world in reading mode */
  .legal { padding-block: var(--space-8) var(--space-16); }
  .legal h1 { font-size: var(--step-3); margin-bottom: var(--space-2); }
  /* The date closes the title block, so it carries the same air below it that
     every later section gets — otherwise the first h2 is the one heading on
     the page with less space above it than below. */
  .legal .updated { color: var(--text-muted); font-size: var(--step--1);
    margin-block-end: var(--space-8); }
  .legal section { padding-block: 0; margin-block-end: var(--space-8); }
  .legal h2 { font-size: var(--step-1); max-width: none; margin-bottom: var(--space-3); }
  .legal p { max-width: 60ch; margin-block-end: var(--space-3); }
  /* The references a section cites. Set apart from the prose because
     they are the actionable part of a paragraph the reader may only be
     skimming — a complaint route is no use if it reads as body text. */
  .legal .refs { font-size: var(--step--1); }
  /* WCAG 2.5.8 wants a 24px target for anything that is not an inline link
     inside a sentence, and these sit on their own line. */
  .legal .refs a { color: var(--brand-text); font-weight: 500;
    display: inline-block; padding-block: var(--space-2); }
  .legal .refs span { color: var(--text-muted); }
  nav .home { display: inline-flex; align-items: center; gap: var(--space-3);
    text-decoration: none; color: inherit; }
  nav .home img { width: calc(var(--unit) * 8); }

  /* final + footer */
  .final { text-align: center; padding-block: var(--space-24); }
  .final img { width: calc(var(--unit) * 28); margin-bottom: var(--space-6); }
  .final h2 { margin-inline: auto; margin-bottom: var(--space-3); }
  .final p { color: var(--text-muted); margin-bottom: var(--space-8); }
  footer { border-block-start: var(--border-w) solid var(--line); padding: var(--space-6) 0 var(--space-24);
    display: flex; gap: var(--space-4); align-items: center;
    font: 500 var(--step--1) var(--font-body); color: var(--text-muted); }
  footer img { width: var(--space-6); }
  footer a { color: inherit; }
  footer .right { margin-inline-start: auto; }

  /* sticky mobile CTA */
  .sticky { position: fixed; inset-inline: 0; bottom: 0; display: none;
    padding: var(--space-3) var(--space-4); background: var(--veil);
    backdrop-filter: blur(8px); border-block-start: var(--border-w) solid var(--line); z-index: var(--z-sticky); }
  .sticky .cta { display: block; text-align: center; }

  @media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; padding-top: var(--space-8); }
    .steps, .feats { grid-template-columns: 1fr; }
    nav .cta { display: none; }
    .sticky { display: block; }
  }
}

/* ------------------------------------------------------------ utilities */
@layer utilities {
  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
}