/* ============================================================================
   Orthantic — site stylesheet
   Section 08 of the content kit is the authority. Anything not specified in a
   per-component spec comes from here.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   Light is the complete set; dark redefines only these. The palette is anchored
   on Orthantic's shipped product tokens (ink #173458, accent #2563eb) so the
   site cannot drift from the application it sells.
   ------------------------------------------------------------------------- */
:root {
  --canvas:      #f6f9fd;
  --surface:     #ffffff;
  --surface-2:   #eef3fa;
  --spec-bg:     #fdf8ef;

  --text:        #16202e;
  --text-2:      #54637c;
  --muted:       #6b7a90;

  --border:      #dde6f1;
  --border-2:    #c7d5e7;

  --ink:         #173458;   /* identity navy — headings, section codes */
  --accent:      #2563eb;   /* the one interactive blue */
  --accent-soft: #dbeafe;
  --accent-ink:  #ffffff;   /* text on a filled accent button */

  /* Chart palette — Section 08.1, light mode. Fixed order, never cycled.
     Verified with the palette validator: lightness band, chroma floor, CVD
     separation, normal-vision floor and contrast all pass on this surface.
     Do not substitute hues without re-checking. */
  --series-1: #2563eb;
  --series-2: #c2410c;
  --series-3: #0d9488;
  --series-4: #a21caf;
  --series-5: #a16207;

  /* Status colours are reserved (Spec V-1). They never double as "series 4"
     and always ship with a label, never colour alone. */
  --status-good:     #0d9488;
  --status-warning:  #a16207;
  --status-critical: #b91c1c;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --r: 6px;
  --page: 1140px;
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:      #0d1520;
    --surface:     #141f2e;
    --surface-2:   #1b283a;
    --spec-bg:     #221d14;

    --text:        #e7eef7;
    --text-2:      #a3b5cc;
    --muted:       #8497af;

    --border:      #24344a;
    --border-2:    #33465f;

    --ink:         #bfd5f2;
    --accent:      #60a5fa;
    --accent-soft: #17304f;
    --accent-ink:  #0d1520;

    /* Dark mode is SELECTED, not auto-lightened (Section 08.1, and the build
       checklist makes this blocking). Validated against surface #141f2e. */
    --series-1: #3b82f6;
    --series-2: #ea580c;
    --series-3: #0d9488;
    --series-4: #c026d3;
    --series-5: #9a7b0a;

    --status-good:     #0d9488;
    --status-warning:  #9a7b0a;
    --status-critical: #f87171;
  }
}

:root[data-theme="dark"] {
  --canvas:      #0d1520;
  --surface:     #141f2e;
  --surface-2:   #1b283a;
  --spec-bg:     #221d14;

  --text:        #e7eef7;
  --text-2:      #a3b5cc;
  --muted:       #8497af;

  --border:      #24344a;
  --border-2:    #33465f;

  --ink:         #bfd5f2;
  --accent:      #60a5fa;
  --accent-soft: #17304f;
  --accent-ink:  #0d1520;

  --series-1: #3b82f6;
  --series-2: #ea580c;
  --series-3: #0d9488;
  --series-4: #c026d3;
  --series-5: #9a7b0a;

  --status-good:     #0d9488;
  --status-warning:  #9a7b0a;
  --status-critical: #f87171;
}

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* Focus is visible everywhere. Spec H-3 makes this explicit for the graph
   inputs; there is no reason for the rest of the site to be worse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r);
  padding: 10px 16px; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: 12px; }

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 32px; }
@media (max-width: 860px) { .wrap { padding: 0 20px; } }

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--surface { background: var(--surface); border-block: 1px solid var(--border); }
@media (max-width: 860px) { .section { padding: 60px 0; } }

.measure { max-width: var(--measure); }

/* ---------------------------------------------------------------------------
   4. TYPE
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); text-wrap: balance; }

h1 { font-size: clamp(34px, 5.2vw, 54px); line-height: 1.06; letter-spacing: -0.018em; margin: 0 0 20px; }
h2 { font-size: clamp(27px, 3.4vw, 38px); line-height: 1.14; letter-spacing: -0.014em; margin: 0 0 18px; }
h3 { font-size: clamp(20px, 2.2vw, 25px); line-height: 1.22; letter-spacing: -0.008em; margin: 0 0 12px; }
h4 { font-size: 18px; line-height: 1.3; margin: 0 0 8px; }

p { margin: 0 0 18px; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
.eyebrow--muted { color: var(--muted); }
.serif-lead { font-family: var(--serif); font-size: 19px; color: var(--ink); display: block; margin-bottom: 6px; }

/* ---------------------------------------------------------------------------
   5. BUTTONS
   Hover is 150ms colour and border only. No lift, no scale, no shadow bloom.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); }
.btn--ghost { background: transparent; border-color: var(--border-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { font-size: 14px; padding: 9px 16px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

/* ---------------------------------------------------------------------------
   6. SITE HEADER — Spec C-1
   Sticky, 64px, full-bleed with contents on the page measure.
   Left: wordmark · Centre: section links · Right: Log in, then Book a walkthrough.
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}
/* Scroll state: transparent over the hero; past 80px fade in the surface
   colour and a 1px bottom border. No shadow, no shrink animation. */
.site-header.is-stuck { background: var(--surface); border-bottom-color: var(--border); }

.site-header__inner {
  max-width: var(--page); margin: 0 auto; padding: 0 32px; height: 100%;
  display: flex; align-items: center; gap: 28px;
}
@media (max-width: 860px) { .site-header__inner { padding: 0 20px; gap: 14px; } }

.wordmark {
  font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; flex: none;
}
.wordmark:hover { color: var(--accent); }

.nav { display: flex; gap: 26px; margin: 0 auto; }
.nav a { font-size: 14.5px; color: var(--text-2); text-decoration: none; transition: color 150ms ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 18px; flex: none; }

/* Log in is a quiet text link — no border, no fill. It must be findable, never
   loud. It sits to the LEFT of the primary CTA: far-right is the most valuable
   pixel in the header and it belongs to the thing that brings in revenue. */
.login-link { font-size: 14.5px; color: var(--text-2); text-decoration: none; transition: color 150ms ease; }
.login-link:hover { color: var(--ink); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border-2);
  border-radius: 4px; padding: 7px 11px; cursor: pointer; color: var(--text);
  font-family: var(--sans); font-size: 13px;
}

/* Below 860px the section links collapse into a menu. Log in does NOT go into
   that menu — it stays visible in the bar as a text link. A returning customer
   hunting for a login behind a hamburger is the most reliable way to generate
   a support email. */
@media (max-width: 860px) {
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 20px; border-top: 1px solid var(--border); font-size: 16px; }
  .nav-toggle { display: block; order: 3; }
  .header-actions { margin-left: auto; gap: 12px; }
  .header-actions .btn { font-size: 14px; padding: 9px 14px; }
}

/* On a 390px phone the wordmark, the Menu button, Log in and the CTA together
   are a few pixels wider than the viewport, which makes the whole PAGE scroll
   sideways. Everything in the bar is load-bearing — Log in must stay out of the
   hamburger (Spec C-1) and the CTA is the reason the header exists — so the fix
   is to tighten the whole row rather than drop anything from it. */
@media (max-width: 430px) {
  .site-header__inner { padding: 0 14px; gap: 8px; }
  .wordmark { font-size: 19px; }
  .nav-toggle { padding: 6px 9px; font-size: 12.5px; }
  .header-actions { gap: 10px; }
  .login-link { font-size: 13.5px; }
  .header-actions .btn { font-size: 13px; padding: 8px 11px; }
}

/* ---------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.hero { padding: 64px 0 72px; }
@media (max-width: 860px) { .hero { padding: 40px 0 52px; } }
.hero h1 { max-width: 18ch; }
.hero__sub {
  font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); color: var(--text);
  max-width: 26ch; margin: 0 0 22px; line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   8. PROBLEM COLUMNS — Spec H-2
   Three columns on desktop, stacked on mobile. NO ICONS — icon triplets are the
   most templated pattern in B2B software and would undercut the voice. Bold
   lead-in set as a small serif line above its paragraph; hairline rule between.
   ------------------------------------------------------------------------- */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; }
.cols-3 > * { padding: 0 32px; border-left: 1px solid var(--border); }
.cols-3 > *:first-child { padding-left: 0; border-left: 0; }
.cols-3 > *:last-child { padding-right: 0; }
.cols-3 p { max-width: none; color: var(--text-2); font-size: 15.5px; }
@media (max-width: 860px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cols-3 > * { padding: 0 0 28px; border-left: 0; border-bottom: 1px solid var(--border); }
  .cols-3 > *:last-child { padding-bottom: 0; border-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   9. FORMULA BLOCK — Spec H-4
   A first-class design element, not a developer afterthought. Three colours
   only: the array being defined in --ink, matrix references in the accent,
   function names in the ochre. Everything else is body ink. Not a
   general-purpose syntax theme — the point is that this reads like a sentence.
   ------------------------------------------------------------------------- */
.formula {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 26px 0;
  font-family: var(--mono); font-size: 14.5px; line-height: 1.9;
  color: var(--text);
  overflow-x: auto;              /* the page body must never scroll sideways */
  white-space: pre;              /* one line per formula, never wrapped */
}
.formula .f-def { color: var(--ink); font-weight: 600; }
.formula .f-ref { color: var(--accent); }
.formula .f-fn  { color: var(--series-5); }
.formula .f-com { color: var(--muted); }

/* Rotator: three formulas, 4s dwell, 300ms crossfade, pauses on hover.
   Under reduced motion all three stack statically (see §21). */
.formula-rotator { position: relative; }
.formula-rotator .f-slide { transition: opacity 300ms ease; }
.formula-rotator .f-slide[hidden] { display: none; }
.formula-rotator .f-slide.is-out { opacity: 0; }
.formula-caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: -14px 0 26px;
}
.formula-dots { display: flex; gap: 6px; }
.formula-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-2); background: transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.formula-dots button[aria-current="true"] { background: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   10. DEMO PANELS (H-1 cascade, H-3 dependency graph)
   ------------------------------------------------------------------------- */
.demo {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px; margin: 0;
}
.demo-top {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  justify-content: space-between; margin-bottom: 16px;
}
.demo-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.demo-count { font-family: var(--mono); font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }
.demo-note { font-size: 13.5px; color: var(--muted); margin: 0; max-width: none; }
.demo-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 14px; }
.demo-btn {
  font-family: var(--mono); font-size: 11.5px; cursor: pointer;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: 4px; padding: 5px 12px; flex: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.demo-btn:hover { color: var(--text); border-color: var(--accent); }

.trigger {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  justify-content: space-between;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 4px; padding: 10px 15px; margin-bottom: 6px;
}
.trigger-lbl { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.trigger-val { font-family: var(--mono); font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.trigger-val s { color: var(--muted); text-decoration: line-through; margin-right: 6px; }
.trigger-val b { font-weight: 600; }

/* H-1: a vertical stack of six array bars. Deliberately NOT a cell-level
   animation — Orthantic recalculates whole arrays, so the hero has to show
   arrays and their row counts or every scale claim later reads as a
   contradiction. */
.arr {
  position: relative; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); padding: 10px 15px; margin-top: 6px; overflow: hidden;
}
.arr .fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--accent-soft); border-right: 2px solid var(--accent);
}
.arr.done { border-color: var(--accent); }
.arr.done .fill { border-right-color: transparent; }
.arr .row {
  position: relative; display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: baseline; justify-content: space-between;
}
.arr .nm { font-size: 13.5px; font-weight: 600; color: var(--text); }
.arr .gr { font-size: 12px; color: var(--muted); }
.arr .rc {
  font-family: var(--mono); font-size: 13px; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.arr.done .rc { color: var(--accent); }
.arr .step { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .08em; }

/* H-3: nodes hand-placed in a fixed 4-column grid on purpose. Auto-layout
   (dagre / ELK / d3-force) is what makes this expensive, and the graph is a
   fixed prop that never needs to lay itself out. Positions come straight off
   getBoundingClientRect, so the arrows are simple geometry. */
.graph { position: relative; }
.wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; color: var(--accent); z-index: 2;
}
.wires path.wire { fill: none; stroke: var(--accent); stroke-width: 1.75; opacity: .85; }
.cols {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.col-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.col-body { display: flex; flex-direction: column; gap: 8px; }
.nd {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 10px; font-family: var(--sans); overflow: hidden;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.nd .nd-nm { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.25; position: relative; }
.nd .nd-rc {
  display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-top: 2px; position: relative;
}
.nd .nd-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent-soft); transition: width 260ms linear; }
.nd .nd-tick {
  position: absolute; top: 6px; right: 8px; font-size: 12px; line-height: 1;
  color: var(--accent); opacity: 0; transform: scale(.7);
  transition: opacity 160ms ease, transform 160ms ease;
}
button.nd { cursor: pointer; border-style: dashed; border-color: var(--border-2); }
button.nd:hover { border-color: var(--accent); }
button.nd .nd-tag {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.nd.dim { opacity: .28; }
.nd.src { border-color: var(--accent); border-style: solid; background: var(--accent-soft); opacity: 1; }
.nd.src .nd-tag { color: var(--accent); }
.nd.hot { opacity: 1; border-color: var(--accent); }
.nd.done .nd-fill { width: 100%; }
.nd.done .nd-tick { opacity: 1; transform: scale(1); }
.nd.done .nd-nm { color: var(--ink); }

/* Below ~720px the columns collapse and arrows become unreadable. Drop the SVG
   layer and list the affected arrays in order with ticks — same information,
   no geometry. */
@media (max-width: 720px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .wires { display: none; }
}

/* ---------------------------------------------------------------------------
   11. STAT TILES — Spec H-5
   Three hero numbers on one row. These are tiles, not a chart: a number this
   important should not be a chart. Serif display face, tabular-nums.
   ------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .stats { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.stat__value {
  font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.05;
  color: var(--ink); font-variant-numeric: tabular-nums; display: block;
}
.stat__label {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------------------------------------------------------------------------
   12. CARDS — Spec H-6
   Hover raises the border to --accent only. No lift, no shadow bloom, no scale.
   ------------------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }

.card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 24px; text-decoration: none; color: inherit;
  transition: border-color 150ms ease;
}
.card:hover { border-color: var(--accent); }
.card__fn { font-family: var(--serif); font-size: 21px; color: var(--ink); margin: 0 0 10px; }
.card:hover .card__fn { color: var(--accent); }
.card__pain { font-size: 15px; color: var(--text-2); margin: 0 0 14px; max-width: none; }
.card__uses { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 0; max-width: none; }

/* ---------------------------------------------------------------------------
   13. STEP SEQUENCE — Spec HW-1
   A genuine sequence, so numbering it is honest. Vertical on desktop with a
   thin connecting rule down the left and the number in the mono face on it.
   ------------------------------------------------------------------------- */
.steps { border-left: 1px solid var(--border); margin-top: 48px; padding-left: 0; list-style: none; }
.step { position: relative; padding: 0 0 56px 44px; }
.step:last-child { padding-bottom: 0; }
.step__n {
  position: absolute; left: 0; top: 4px; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--canvas); border: 1px solid var(--border-2);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin-bottom: 10px; }
@media (max-width: 620px) { .step { padding-left: 30px; } }

/* ---------------------------------------------------------------------------
   14. PAIN PANEL — Spec U-0
   A tinted panel with a hairline left rule. Not a card, not an icon list.
   It should read as an admission, not a feature.
   ------------------------------------------------------------------------- */
.pain {
  background: var(--surface-2); border-left: 2px solid var(--border-2);
  padding: 26px 30px; margin: 0 0 44px;
}
.pain h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 14px;
}
.pain ul { margin: 0; padding-left: 20px; }
.pain li { margin-bottom: 9px; color: var(--text-2); max-width: 72ch; }
.pain li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   15. USE-CASE LIST + STICKY SUB-NAV — Spec U-0
   ------------------------------------------------------------------------- */
.uses { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--border); }
.use { padding: 18px 0; border-bottom: 1px solid var(--border); }
.use__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.use__nm { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.use__kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border-2); border-radius: 3px; padding: 2px 7px;
}
.use p { margin: 0; color: var(--text-2); font-size: 15.5px; max-width: 74ch; }

.subnav {
  position: sticky; top: var(--header-h); z-index: 90;
  background: var(--canvas); border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.subnav__inner { max-width: var(--page); margin: 0 auto; padding: 0 32px; display: flex; gap: 4px; }
@media (max-width: 860px) { .subnav__inner { padding: 0 20px; } }
.subnav a {
  flex: none; padding: 14px; font-size: 14px; color: var(--text-2);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------------------
   16. TABLES — Spec V-4
   Real <table> markup with <th> headers. Never a grid of divs — planners copy
   out of these tables. Each sits in its own overflow-x container so the page
   body never scrolls sideways.
   ------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto; margin: 28px 0;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
caption { text-align: left; font-size: 13.5px; color: var(--muted); padding: 14px 20px 0; }
th, td { text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; background: var(--surface-2);
  position: sticky; top: 0; z-index: 1;
}
tbody th { font-weight: 600; color: var(--ink); font-family: var(--sans); font-size: 15px; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
/* Numeric columns right-aligned with tabular-nums. Never centre a number. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13.5px; }
/* Zebra striping only above ten rows; below that a hairline row rule is
   quieter and enough. Opt in per table. */
.table--zebra tbody tr:nth-child(even) { background: var(--surface-2); }

/* ---------------------------------------------------------------------------
   17. CHARTS — Sections 08.2 and 08.3
   ------------------------------------------------------------------------- */
.figure {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px; margin: 36px 0;
}
.figure__head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.figure__title { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 0; }
.figure__sub { font-size: 14px; color: var(--text-2); margin: 0 0 16px; max-width: none; }

/* Legend: always present for two or more series; absent for one, where the
   title names it. Text wears text colours — the swatch carries identity. */
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.legend .sw { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.legend .sw--line { height: 3px; width: 14px; }
.legend .sw--dash { height: 0; background: none !important; border-top: 2px dashed; width: 14px; }

.chart-body { position: relative; overflow-x: auto; }
/* Fill the figure, and below ~560px scroll inside .chart-body rather than
   shrinking the type into illegibility. The page body still never scrolls. */
.chart-body svg { display: block; width: 100%; height: auto; min-width: 560px; }

/* Furniture: horizontal grid only, behind the marks. No vertical grid, no
   chart border. Axes recessive — no axis line where the grid implies it. */
.grid-line { stroke: var(--border); stroke-width: 1; }
.axis-text { fill: var(--muted); font-family: var(--sans); font-size: 11px; }
.axis-text--num { font-variant-numeric: tabular-nums; }
.mark-label {
  fill: var(--text-2); font-family: var(--sans); font-size: 11.5px;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.mark-label--strong { fill: var(--ink); }
.series-label { font-family: var(--sans); font-size: 12px; font-weight: 600; }
.ref-line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
.connector { stroke: var(--border-2); stroke-width: 1; }
.crosshair { stroke: var(--border-2); stroke-width: 1; }
.boundary { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 3 3; }

/* Tooltip — ships by default. Hit targets are larger than the mark. */
.tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 4px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.10);
  min-width: 132px; opacity: 0; transition: opacity 120ms ease;
}
.tip[data-show="1"] { opacity: 1; }
.tip b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 4px; }
.tip .tip-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tip .tip-row i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; color: var(--text-2); }
.tip .tip-row em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 600; }
.tip .tip-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.hit { fill: transparent; }

/* Every chart needs a text alternative: a table view toggle or a caption
   stating the takeaway in words. Colour is never the only carrier of meaning. */
.figure__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-top: 14px; }
.figure__cap { font-size: 13px; color: var(--muted); margin: 0; max-width: 70ch; }
.figure__table { margin-top: 16px; }
.figure__table[hidden] { display: none; }

/* Status is never colour alone (Spec V-1) — this pairs the hue with a word. */
.status-note { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.status-note .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ---------------------------------------------------------------------------
   18. SCREENSHOT STRIP — Spec H-7
   ------------------------------------------------------------------------- */
.shots { margin-top: 36px; }
.shots__lead { margin-bottom: 16px; }
.shots__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.shot { margin: 0; }
.shot button {
  display: block; width: 100%; padding: 0; border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; background: var(--surface); cursor: zoom-in;
  transition: border-color 150ms ease;
}
.shot button:hover { border-color: var(--accent); }
/* width/height/aspect-ratio are set so nothing shifts when the image loads —
   which is what lets a low-res file be swapped for a sharp one later with no
   layout change (Spec V-4). */
.shot img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.shot figcaption { font-size: 13px; color: var(--text-2); margin-top: 9px; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; border: 0; padding: 0;
  background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%;
}
.lightbox::backdrop { background: rgb(9 14 22 / 0.86); }
.lightbox__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 14px; padding: 24px; }
.lightbox img { max-width: min(1400px, 94vw); max-height: 82vh; width: auto; border-radius: var(--r); }
.lightbox p { color: #e7eef7; font-size: 14px; margin: 0; text-align: center; }
.lightbox__close {
  position: absolute; top: 18px; right: 20px; background: transparent; cursor: pointer;
  border: 1px solid rgb(231 238 247 / .4); color: #e7eef7; border-radius: 4px;
  padding: 7px 13px; font-family: var(--sans); font-size: 13px;
}

/* ---------------------------------------------------------------------------
   19. FORMS — Specs C-6 and C-7
   ------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* The proof-of-concept block: a bordered card with the accent left rule, sitting
   directly beneath the opening and above the general form. It is the primary
   action on this page. */
.poc {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--r);
  padding: 30px 32px; margin: 36px 0;
}
@media (max-width: 620px) { .poc { padding: 24px 20px; } }

.field { margin-bottom: 20px; max-width: 480px; }
.field label { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
/* Print the word "optional" in the label, not just the absence of an asterisk.
   A phone field that appears mandatory is where a cautious evaluator closes the
   tab. Nobody should have to guess. */
.field .opt { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.field .help { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; max-width: none; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15.5px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 4px;
  padding: 11px 13px; transition: border-color 150ms ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent); }
.field .err { display: block; font-size: 13.5px; color: var(--status-critical); margin-top: 6px; }
.field .err[hidden] { display: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--status-critical); }

/* Honeypot: off-screen rather than display:none — some bots skip hidden fields. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  border: 1px solid var(--accent); border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: var(--r); padding: 22px 26px;
}
.form-status h3 { margin-bottom: 8px; }
.form-status p { color: var(--text); max-width: none; }
.form-status[hidden] { display: none; }
.form-error { color: var(--status-critical); font-size: 14.5px; margin-top: 12px; }

.mailto-fallback {
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: 22px 26px; margin-top: 20px;
}
.mailto-fallback a { font-family: var(--mono); font-size: 16px; font-weight: 600; }

.next-steps { list-style: none; margin: 0; padding: 0; }
.next-steps li { padding: 0; border-bottom: 1px solid var(--border); margin-bottom: 22px; padding-bottom: 22px; }
.next-steps li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.next-steps b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.next-steps span { font-size: 14.5px; color: var(--text-2); }

.signoff {
  font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--text-2);
  border-top: 1px solid var(--border); padding-top: 30px; margin-top: 56px; max-width: 62ch;
}
.signoff b { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 56px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
/* Four columns is too many below ~1000px; two, then one. */
@media (max-width: 1000px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.footer-top h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin-bottom: 12px;
}
.footer-top ul { list-style: none; margin: 0; padding: 0; }
.footer-top li { margin-bottom: 8px; }
.footer-top a { font-size: 14.5px; color: var(--text-2); text-decoration: none; }
.footer-top a:hover { color: var(--accent); }
.footer-blurb { font-size: 14.5px; color: var(--text-2); max-width: 34ch; }

/* Log in repeats in the footer utility row, next to Contact, Privacy and
   Terms. Two entry points, both plain text links (Spec C-1). */
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--border); padding-top: 24px;
}
.footer-util { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-util a { font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.footer-util a:hover { color: var(--accent); }
.footer-copy { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   21. MOTION — Spec V-5, the complete budget
   Page load: above-the-fold only, 16px rise + fade, 400ms, 60ms stagger.
   Scroll reveal: 24px rise + fade, 400ms, fires once — re-animating on
   scroll-back makes a page feel unstable.
   Banned: parallax, auto-playing carousels, text that types itself, anything
   that moves while the reader is reading.
   ------------------------------------------------------------------------- */
/* Scoped to .js — set by a one-line inline script in <head>. Without it the
   content is simply visible: a marketing page must never depend on JavaScript
   running in order to have words on it. */
.js .reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 400ms ease-out, transform 400ms ease-out; }
.load-in { opacity: 0; transform: translateY(16px); animation: loadIn 400ms ease-out forwards; }
@keyframes loadIn { to { opacity: 1; transform: none; } }

/* prefers-reduced-motion disables every item above and renders each final
   state directly. This is a contract, not a nicety. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .load-in { opacity: 1; transform: none; animation: none; }
  /* The formula rotator stacks all three statically instead of cycling. */
  .formula-rotator .f-slide { display: block !important; opacity: 1 !important; }
  .formula-rotator .f-slide + .f-slide { margin-top: 14px; }
  .formula-caption { visibility: hidden; }
}

/* ---------------------------------------------------------------------------
   22. GROUPED NAVIGATION
   Two of the four top-level items open a panel. Each trigger is a REAL LINK to
   that group's hub page, never a <button> — the panel is progressive
   enhancement, so with JavaScript off (or before it runs) every item in the bar
   still navigates somewhere sensible. CSS opens the panel on hover and on
   :focus-within; chrome.js adds click, Escape and touch handling on top.
   ------------------------------------------------------------------------- */
.nav-item { position: relative; display: flex; align-items: center; }

/* The caret is drawn in CSS rather than shipped as an icon, and is hidden from
   assistive tech — aria-expanded on the trigger already says the same thing. */
.nav-caret {
  width: 0; height: 0; margin-left: 6px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: .55;
  transition: transform 150ms ease, opacity 150ms ease;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { opacity: 1; transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 12px; z-index: 120;
  opacity: 0; visibility: hidden;
  transition: opacity 140ms ease, visibility 140ms;
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-item.is-open > .nav-menu { opacity: 1; visibility: visible; }

.nav-menu__inner {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 14px 40px rgb(13 21 32 / 0.13);
  padding: 12px; width: max-content; max-width: 460px;
  display: grid; gap: 2px;
}
.nav-menu a {
  display: block; padding: 10px 12px; border-radius: 4px;
  text-decoration: none; transition: background-color 130ms ease;
}
.nav-menu a:hover { background: var(--surface-2); }
.nav-menu b {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 2px;
}
.nav-menu a:hover b { color: var(--accent); }
.nav-menu span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* A quiet label above a group of links inside the panel. */
.nav-menu__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 8px 12px 4px; margin: 0;
}

/* Below 860px the whole bar becomes one scrollable stack and the panels are
   simply always open, indented under their parent. A nested accordion inside a
   hamburger is two taps to reach a link that could have taken one. */
@media (max-width: 860px) {
  .nav { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav-item { display: block; }
  .nav-item > a { display: block; padding: 14px 20px; border-top: 1px solid var(--border); font-size: 16px; }
  .nav-caret { display: none; }
  .nav-menu {
    position: static; transform: none; padding-top: 0;
    opacity: 1; visibility: visible;
  }
  .nav-menu__inner {
    border: 0; border-radius: 0; box-shadow: none; padding: 0;
    width: auto; max-width: none; background: var(--surface-2);
  }
  .nav-menu a { padding: 12px 20px 12px 34px; border-radius: 0; border-top: 1px solid var(--border); }
  .nav-menu b { font-size: 14.5px; }
  .nav-menu span { display: none; }
  .nav-menu__label { padding: 10px 20px 2px; border-top: 1px solid var(--border); }
}

/* ---------------------------------------------------------------------------
   23. HOME PAGE — the case for structured planning
   ------------------------------------------------------------------------- */

/* Hero contrast panel: what planning looks like as files, next to what it looks
   like as a model. Two columns of plain text — no icons, no illustration. */
.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  background: var(--surface);
}
.split > * { padding: 24px 28px; }
.split > * + * { border-left: 1px solid var(--border); }
.split h3 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 14px;
}
.split--after { background: var(--accent-soft); }
.split--after h3 { color: var(--accent); }
.split ul { list-style: none; margin: 0; padding: 0; }
.split li { font-size: 14.5px; color: var(--text-2); padding: 7px 0; max-width: none; }
.split--after li { color: var(--text); }
@media (max-width: 700px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > * + * { border-left: 0; border-top: 1px solid var(--border); }
}

/* The pain grid. Each item is a sentence a planning team actually says, then a
   flat description of what it costs. Six of them, three across. */
.pains {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 44px 0 0;
  padding: 0; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.pains > li { list-style: none; background: var(--canvas); padding: 26px 28px; }
.pain-said {
  font-family: var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink);
  display: block; margin-bottom: 10px;
}
.pains p { font-size: 14.5px; color: var(--text-2); margin: 0; max-width: none; }
@media (max-width: 900px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pains { grid-template-columns: minmax(0, 1fr); } }

/* A numbered benefit heading. The number is structural, not decorative — the
   home page makes five claims and they are easier to hold apart when counted. */
.benefit-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--accent);
  display: block; margin-bottom: 12px;
}

/* The two-moment story: someone changes something, someone else sees it. Told
   as two timestamped panels rather than a diagram, because the point is that
   the gap between them is zero. */
.story {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; background: var(--surface); margin-top: 22px;
}
.story > div { padding: 22px 26px; }
.story > div + div { border-left: 2px solid var(--accent); background: var(--accent-soft); }
.story-when {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 8px;
}
.story > div + div .story-when { color: var(--accent); }
.story p { font-size: 15px; color: var(--text-2); margin: 0; max-width: none; }
.story > div + div p { color: var(--text); }
@media (max-width: 700px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story > div + div { border-left: 0; border-top: 2px solid var(--accent); }
}

/* The scope note. Used wherever the site states plainly what it is NOT — the
   spec-paper background separates it from marketing copy on sight. */
.note {
  background: var(--spec-bg); border: 1px solid var(--border-2); border-left: 3px solid var(--ink);
  border-radius: var(--r); padding: 26px 30px; margin-top: 32px;
}
.note h3 { font-family: var(--serif); font-size: 21px; color: var(--ink); margin: 0 0 12px; }
.note p { color: var(--text-2); max-width: 76ch; }
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--text); font-weight: 600; }

/* Model tags — forecasting methods, function names. Never invent one to fill
   the row: this list is checked against what the product actually ships. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.pills li {
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: 100px; padding: 6px 14px;
}

/* Two-column prose. Falls to one column early — two narrow columns of body text
   are harder to read than one wide one. */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 32px; }
.cols-2 p { max-width: none; }
@media (max-width: 820px) { .cols-2 { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* A column highlighted as the recommended option in a comparison table. */
.table td.is-ours, .table th.is-ours { background: var(--accent-soft); color: var(--text); }
.table th.is-ours { color: var(--ink); }

/* ---------------------------------------------------------------------------
   24. THE FOUR PILLARS — Plan · Forecast · Optimise · Analyse
   The product's central claim, stated as four words near the top of the home
   page. Numbered in the mono face because the order is the workflow, not a
   ranking.
   ------------------------------------------------------------------------- */
.pillars {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: 40px 0 0; padding: 0;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.pillars > li { list-style: none; background: var(--surface); padding: 24px 26px; }
.pillars b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 21px; color: var(--ink); margin-bottom: 8px;
}
.pillars span { display: block; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
@media (max-width: 880px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   25. CHAIN — a sequence of steps drawn as text, not as a picture
   Used for the tool-to-tool handoff sequence and for the factory story. Arrows
   are CSS, so the whole thing stays selectable text and needs no image.
   ------------------------------------------------------------------------- */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 0; }
.chain > li {
  list-style: none; font-size: 13.5px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; padding: 7px 15px; white-space: nowrap;
}
.chain > li + li::before {
  content: "→"; display: inline-block; color: var(--muted);
  margin: 0 10px 0 -6px; font-size: 13px;
}
/* The arrow has to sit BETWEEN the pills, so it is drawn on a wrapper span
   rather than inside the pill's own border. */
.chain > li + li { position: relative; margin-left: 26px; }
.chain > li + li::before { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); margin: 0; }

.chain--tight > li { font-size: 13px; padding: 6px 12px; }

/* The "before" chain is deliberately the longer one; it is stated neutrally as
   work that happens, never as a failing. */
.chain--muted > li { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.chain--ours > li { border-color: var(--accent); color: var(--text); }

/* ---------------------------------------------------------------------------
   26. TILES — benefit cards that are not links
   .card is an anchor; these are plain statements, so they get their own class
   rather than a hover state that promises navigation.
   ------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 40px 0 0; padding: 0;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.tiles > li { list-style: none; background: var(--surface); padding: 26px 28px; }
.tile__t {
  display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 8px;
}
.tiles p { font-size: 14.5px; color: var(--text-2); margin: 0; max-width: none; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   27. FUNCTION SUMMARY — advantages by domain
   Richer than the card grid: each row names what the team plans and what
   changes for them, so the home page can summarise five domains without
   sending the reader away to find out what any of them mean.
   ------------------------------------------------------------------------- */
.fn-rows { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--border); }
.fn-row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--border); align-items: baseline;
}
.fn-row__nm { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.fn-row__nm a { color: inherit; text-decoration: none; }
.fn-row__nm a:hover { color: var(--accent); }
.fn-row dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.fn-row dd { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
@media (max-width: 860px) {
  .fn-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}