/* ==========================================================================
   Apex marketing site — stylesheet
   --------------------------------------------------------------------------
   PART 1 is the Vivid Dark token sheet, copied VERBATIM from the master
   prompt's Appendix A (ported from apex-frontend/src/app/globals.css).
   Do not round, retune or "simplify" these values, and do not edit them
   independently of the app — they are the same tokens the product ships.

   PART 2 is the marketing extension. Every token in it is prefixed
   --site-* so a reader can see at a glance which tokens came from the
   product and which belong to the website.

   PART 3 is the base + component layer, extracted from the design pages at the
   WEB-9 extraction. There is no design system here any more: this file is the
   whole stylesheet.

   VENDORED COPY — WEB-7's recorded cost. Part 1 mirrors
   apex-frontend/src/app/globals.css and nothing compares them. Change the app's
   tokens and refresh this block in the SAME change; WEB-12 is what that drift
   looks like when nobody does.
   ========================================================================== */

/* ── PART 1 — Appendix A, verbatim ─────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* ── Neutrals ─────────────────────────────────────────────── */
  --canvas:          oklch(0 0 0);              /* #000000 page background */
  --surface:         oklch(0.156 0.014 248);    /* #080D12 card / header / nav */
  --surface-sunken:  oklch(0.07 0.004 220);     /* #010202 nested cells, wells */
  --surface-raised:  oklch(0.19 0.014 248);     /* hover step above surface */
  --border:          oklch(0.256 0.015 266);    /* #1F232B hairline on every card */
  --border-strong:   oklch(0.29 0.006 255);     /* #2A2C2F chips, tertiary buttons */
  --text-primary:    oklch(0.931 0.008 265);    /* #E6E8EE headline values, titles */
  --text-secondary:  oklch(0.707 0.019 261);    /* #9AA1AD labels, axis text */
  --text-tertiary:   oklch(0.584 0.020 260);    /* #757C88 meta — AA 4.63:1 on --surface */

  /* ── Semantic accents — meaning, never decoration ──────────── */
  --positive:        oklch(0.823 0.216 135);    /* #83E239 gains, PBs */
  --action:          oklch(0.823 0.216 135);    /* primary CTAs */
  --action-contrast: oklch(0.13 0.02 145);      /* text on solid lime */
  --negative:        oklch(0.637 0.237 25.3);   /* #FB2C36 time lost */
  --negative-bright: oklch(0.66 0.25 27);       /* #FF3D3D chart strokes only */
  --caution:         oklch(0.807 0.164 84);     /* #F2B50A moderate loss, active nav */
  --caution-soft:    oklch(0.828 0.158 84.4);   /* #FBBF24 light amber text */
  --reference:       oklch(0.627 0.265 303.9);  /* #AD46FF best-lap reference, targets */
  --info:            oklch(0.623 0.214 259.8);  /* #2B7FFF sparse informational icons */

  /* ── Tints — badge / chip fills ────────────────────────────── */
  --positive-tint:   oklch(0.34 0.088 139);     /* #1D4210 */
  --negative-tint:   color-mix(in oklab, var(--negative)  16%, var(--surface));
  --caution-tint:    color-mix(in oklab, var(--caution)   14%, var(--surface));
  --reference-tint:  color-mix(in oklab, var(--reference) 14%, var(--surface));

  /* ── Type scale (product baseline — extend upward for marketing) ── */
  --text-hero:       28px;   /* the product's one display moment */
  --text-display:    20px;
  --text-title:      16px;
  --text-heading:    14px;
  --text-body-size:  14px;
  --text-label-size: 12px;
  --text-micro:      11px;   /* ALL-CAPS section labels, nav labels */
  --text-meta-size:  10px;

  --leading-tight:   1.2;
  --leading-normal:  1.45;
  --tracking-caps:   0.06em; /* ALL-CAPS eyebrow labels */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing (4px base) ────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;

  /* ── Radii ─────────────────────────────────────────────────── */
  --radius-card:    8px;
  --radius-control: 6px;
  --radius-chip:    4px;
  --radius-nav:     12px;
  --radius-badge:   2px;
  --radius-round:   999px;

  /* ── Borders, hit targets, motion ──────────────────────────── */
  --hairline:        1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);
  --tap-min:         44px;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
}

/* ── PART 2 — marketing extension (site-only, --site-*) ────────────────── */

:root {
  /* Display scale above --text-hero. The product's 28px display moment is
     correct on a 390px phone; a marketing page needs more headroom. */
  --site-d1:        clamp(38px, 4.4vw, 68px);   /* the single <h1> — vw term kept low because the headline sits in a half-width hero column */
  --site-d2:        clamp(28px, 3.8vw, 44px);   /* section headlines */
  --site-d3:        clamp(20px, 2.2vw, 26px);   /* sub-heads, card titles */
  --site-lead:      clamp(17px, 1.5vw, 20px);   /* hero pitch, section subheads */
  --site-body:      16px;                       /* marketing body copy */

  /* Font stacks. The design system's tokens/fonts.css defines these against its
     self-hosted faces; declared here too so the bundle has a face when it is
     ported away from the design system (register WEB-14). Same two families. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Measure and rhythm */
  --site-content:   1180px;                     /* content max-width */
  --site-measure:   64ch;                       /* 60–75 characters of prose */
  --site-gutter:    clamp(16px, 3vw, 32px);
  --site-section-y: clamp(64px, 7vw, 120px);    /* vertical section rhythm */
  --site-stack:     clamp(32px, 4vw, 56px);     /* gap between the two columns */

  /* The single permitted §5.1 exception: a ≤4%-contrast wash behind the
     hero only. Nowhere else on the page. Registered as WEB-11. */
  --site-hero-wash: radial-gradient(120% 90% at 50% -10%,
                      oklch(1 0 0 / 0.035) 0%, oklch(1 0 0 / 0) 62%);
}

/* ── PART 3 — base + components (extracted at the WEB-9 extraction) ─────── */

/* Base. Ported verbatim from the design pages' inline <style>, with ONE
   addition: `body` now names a family. It carried none, so it computed a serif
   — nothing inherited it because every text element names a family explicitly,
   which is exactly why it went unnoticed. Registered as WEB-20(1). */
html, body { margin: 0; padding: 0; background: var(--canvas); }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
a { color: var(--caution-soft); text-decoration: none; }
a:hover { color: var(--text-primary); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--caution); outline-offset: 3px; }

/* Every numeral on this site is tabular mono — the platform invariant
   (prompt §5.3). Prices and percentages included. */
.mono, [data-mono] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Replaces the design system's <Button variant="primary">. Two carriers, and
   the split is deliberate: the header CTA navigates, so it is an <a>; the form
   CTA submits, so it is a <button>. One tag for both would be wrong for the
   keyboard and wrong for the screen reader. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 20px;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--duration-fast) var(--ease-out);
}
.btn-primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-contrast);
}
.btn-primary:hover {
  filter: brightness(1.12);
  color: var(--action-contrast);
  text-decoration: none;
}
.btn-block { width: 100%; }

/* The two hero CTAs keep their inline layout and take only their hover here —
   style-hover is a design-tool attribute with no browser meaning. */
.cta-solid:hover {
  filter: brightness(1.12);
  color: var(--action-contrast);
  text-decoration: none;
}
.cta-ghost:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
  text-decoration: none;
}

/* style-focus="left:16px" — the skip link, which must be reachable by keyboard
   and invisible otherwise. */
.skip-link:focus { left: 16px !important; }

/* ── Mobile navigation ────────────────────────────────────────────────────
   NOT a sheet. The header nav is four short links and a CTA; measured at
   390 px it wraps to two rows and every target clears 44 px, so a hamburger
   would add a tap and a state for nothing. WEB-9 listed a sheet as deferred
   work; this is the measurement that says it is not needed, not an omission.
   Revisit if a fifth link lands. */
@media (max-width: 560px) {
  .site-nav { gap: 12px 16px; }
  .site-nav a { font-size: 13px; }
}

/* ── Comparison table (pricing) ───────────────────────────────────────────
   WEB-15. The design layer had no media queries, so W2 shipped a horizontally
   scrolling table with a caption telling a phone user to scroll sideways —
   honest, and not the design §7 asks for. Below 720 px the table becomes one
   labelled block per plan: every cell keeps its row header, so the meaning
   survives without the horizontal scroll and without a second markup tree. */
@media (max-width: 720px) {
  .cmp-scroll { overflow-x: visible !important; }
  .cmp-scroll table { min-width: 0 !important; }
  .cmp-hint { display: none; }

  .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: 100%; }

  .cmp-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    margin-bottom: 12px;
    padding: 4px 0;
    background: var(--surface);
  }
  .cmp-table th[scope="row"] {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    padding: 12px 14px 6px;
    border: 0;
  }
  .cmp-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 14px;
    border: 0;
    font-size: 13px;
    text-align: left;
  }
  /* The plan name comes from the cell's own data-plan, so a phone reader gets
     the column header a sighted desktop reader gets from <thead>. */
  .cmp-table td::before {
    content: attr(data-plan);
    color: var(--text-tertiary);
    font-weight: var(--weight-medium);
  }
}

/* ── Plan cards ───────────────────────────────────────────────────────────
   Nothing here, deliberately, and the reason is worth more than the rule
   would have been.

   WEB-20(2) claimed the four plan cards shared no baseline grid, because their
   feature lists visibly start at different heights. Measured at 1280 px before
   writing a fix: all four cards are 559 px tall from y=405, all are already
   flex-column, and every list bottom-aligns at exactly y=939. The lists start
   at different heights because they hold 4, 3, 4 and 5 items — which IS
   bottom-alignment working. The <ul> already carries `margin: auto 0 0`.

   The row was a screenshot read as a defect. A subgrid rule here would have
   "fixed" nothing and added a @supports branch nobody could later justify.
   Retracted in the register, not carried as a silent no-op. */

/* ── Print ────────────────────────────────────────────────────────────────
   A pricing page gets printed. Keep the numbers, drop the chrome. */
@media print {
  .site-header, .skip-link, .cmp-hint { display: none !important; }
  body { background: #fff; }
}