/* ==========================================================================
   TradeBetter design system
   Editorial direction: big type, hard grid, hairline rules, near zero cards.
   Navy is ink, not a field. Yellow is 5 to 10% of any screen, one thing at a time.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Navy ramp. --navy-800 is the brand navy #1e3a5f. */
  --navy-950: #0d1a2b;
  --navy-900: #142539;
  --navy-800: #1e3a5f;
  --navy-700: #2b4e7a;
  --navy-600: #3d6494;
  --navy-500: #5b7fa8;
  --navy-400: #8aa5c2;
  --navy-300: #b4c6d9;
  --navy-200: #d8e2ec;
  --navy-100: #eaf0f5;
  --navy-50:  #f4f7fa;

  /* Accent. Brand yellow. Used sparingly. */
  --yellow:      #facf39;
  --yellow-deep: #e5b820;
  --yellow-wash: #fdf3d2;

  /* Ground and ink */
  --paper:       #f9f8f5;   /* warm page ground */
  --paper-deep:  #f2f0ea;   /* subtle alternate band */
  --surface:     #ffffff;   /* the dictionary block, and white moments only */
  --ink:         #142539;   /* headings and strong text */
  --ink-body:    #3c4a5c;   /* body copy. 8.2:1 on --paper */
  --ink-soft:    #5b6b7d;   /* secondary. 5.4:1 on --paper */
  --ink-invert:  #f4f7fa;

  /* Lines. The primary structural device on this site. */
  --line:        rgba(20, 37, 57, 0.14);
  --line-strong: rgba(20, 37, 57, 0.28);
  --line-invert: rgba(244, 247, 250, 0.18);

  /* Focus */
  --focus: #2b4e7a;

  /* --- Type ------------------------------------------------------------- */
  /* --font-display is swapped by the specimen page. Default is the recommendation. */
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-dict:    'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Fluid scale. Min at 360px, max at 1440px. */
  --fs-xs:   clamp(0.75rem,  0.727rem + 0.10vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.852rem + 0.10vw, 0.9375rem);
  --fs-base: clamp(1rem,     0.966rem + 0.15vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.045rem + 0.35vw, 1.3125rem);
  --fs-lg:   clamp(1.375rem, 1.205rem + 0.76vw, 1.875rem);
  --fs-xl:   clamp(1.75rem,  1.409rem + 1.52vw, 2.75rem);
  --fs-2xl:  clamp(2.25rem,  1.682rem + 2.53vw, 3.9375rem);
  --fs-3xl:  clamp(2.75rem,  1.727rem + 4.55vw, 5.75rem);
  --fs-hero: clamp(3rem,     1.636rem + 6.06vw, 7rem);

  --lh-tight:  1.02;
  --lh-snug:   1.14;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-display: -0.028em;
  --tracking-label:   0.14em;

  /* --- Space ------------------------------------------------------------ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* Section rhythm, fluid */
  --section-y: clamp(3.5rem, 2.5rem + 4.4vw, 7rem);

  /* --- Layout ----------------------------------------------------------- */
  --measure:      66ch;   /* readable body width */
  --measure-tight: 46ch;  /* lead paragraphs */
  --container:    1240px;
  --gutter:       clamp(1.25rem, 0.7rem + 2.4vw, 3rem);

  /* --- Shape ------------------------------------------------------------ */
  /* Editorial means square. Radius is used only where a control needs it. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-slow: 520ms;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

/* The `hidden` attribute must beat any display value we set on a component.
   Without this, `display: grid` on a panel silently defeats hiding it. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); text-wrap: pretty; }

a { color: inherit; }

::selection { background: var(--yellow); color: var(--ink); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* The hairline rule is the primary section separator, in place of colour bands. */
.section--ruled { border-top: 1px solid var(--line); }

.bleed { width: 100%; }

/* Editorial 12 column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */

/* Mono eyebrow. The editorial signature of this site. */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: var(--sp-4);
}

/* Section number, e.g. "01 /" */
.label__num { color: var(--navy-400); }

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-body);
  max-width: var(--measure-tight);
}

.muted { color: var(--ink-soft); }

.mono { font-family: var(--font-mono); }

/* Yellow used as a marker, never as a fill */
.mark {
  background: linear-gradient(transparent 62%, var(--yellow) 62%);
  padding-inline: 0.06em;
}

/* --------------------------------------------------------------------------
   5. Controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  padding: 1.05em 1.6em;
  border: 1px solid var(--ink);
  border-radius: var(--radius-1);
  background: var(--ink);
  color: var(--ink-invert);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}
.btn--accent:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--navy-50); border-color: var(--ink); }

/* Text link with a rule under it. Used everywhere a button would be too loud. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.tlink:hover { border-color: var(--ink); gap: 0.7em; }

.btn--lg { font-size: var(--fs-md); padding: 1.1em 2em; }
.btn--sm { font-size: var(--fs-sm); padding: .8em 1.2em; }
.btn[disabled] { opacity: .32; pointer-events: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--ink-invert);
  padding: var(--sp-3) var(--sp-5); text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   6. Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(249, 248, 245, 0.92);
  backdrop-filter: blur(10px);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: 4.5rem;
}
.nav__logo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-md); letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; flex: none;
}
.nav__logo img { width: 28px; height: 28px; border-radius: var(--radius-1); }

.nav__links { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; }
.nav__links > a,
.nav__trigger {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-body); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35em;
  transition: color var(--dur) var(--ease);
}
.nav__links > a:hover, .nav__trigger:hover { color: var(--ink); }
.nav__chev { font-size: .6em; opacity: .55; }
.nav__item { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + .9rem); left: -1rem;
  min-width: 17rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-2);
  padding: var(--sp-3); display: grid; gap: 1px;
  box-shadow: 0 18px 40px -18px rgba(20, 37, 57, .28);
}
.nav__panel a {
  font-size: var(--fs-sm); color: var(--ink-body); text-decoration: none;
  padding: .6rem .75rem; border-radius: var(--radius-1);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__panel a:hover { background: var(--navy-50); color: var(--ink); }
.nav__panel hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-2) .75rem; }

.nav__cta { flex: none; padding: .75em 1.25em; font-size: var(--fs-sm); }

.nav__burger {
  display: none; margin-left: auto;
  background: none; border: 0; cursor: pointer;
  width: 2.75rem; height: 2.75rem; padding: .7rem;
  flex-direction: column; justify-content: space-between;
}
.nav__burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__burger span { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }

.nav__mobile {
  border-top: 1px solid var(--line);
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  display: grid; gap: var(--sp-1);
}
.nav__mobile a {
  font-size: var(--fs-md); color: var(--ink); text-decoration: none;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.nav__mobile .btn { justify-content: center; margin-top: var(--sp-4); border-bottom: 0; }

@media (max-width: 1000px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}
@media (min-width: 1001px) {
  .nav__mobile { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 1.5rem + 8vw, 8.5rem) clamp(3rem, 1.5rem + 6vw, 6rem); }
.hero__h1 { max-width: 16ch; margin-bottom: var(--sp-6); }
.hero__lead {
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink-body);
  max-width: 40ch; margin-bottom: var(--sp-3);
}
.hero__own {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: .04em; color: var(--ink-soft); margin-bottom: var(--sp-8);
}
.hero__own .tlink { font-family: var(--font-body); letter-spacing: 0; }

/* Interior pages: same hero shape, less air above it. */
.hero--page { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 4vw, 4rem); }
.hero--page .hero__h1 { font-size: var(--fs-3xl); max-width: 18ch; }

/* An unadorned statement list. No ticks, no marketing rhythm. */
.plain { list-style: none; padding: 0; margin: var(--sp-7) 0 0; max-width: 62ch; border-top: 1px solid var(--line); }
.plain li {
  font-size: var(--fs-md); color: var(--ink); line-height: 1.45;
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--line);
}

/* Reading column for the longer explanatory pages. Applied to the children,
   not to .wrap itself, so the column stays left aligned on the page grid
   rather than centring away from the heroes above it. */
.prose { max-width: 66ch; }
.wrap.prose { max-width: var(--container); }
.wrap.prose > * { max-width: 40rem; }
.prose h2 { font-size: var(--fs-xl); margin: var(--sp-9) 0 var(--sp-4); }
.prose h3 { font-size: var(--fs-md); margin: var(--sp-7) 0 var(--sp-3); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }

/* The honest limits table on /what-this-wont-do/ */
.limits { width: 100%; border-collapse: collapse; margin-top: var(--sp-7); }
.limits caption { text-align: left; font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-4); }
.limits th, .limits td {
  text-align: left; vertical-align: top; padding: var(--sp-4) var(--sp-5) var(--sp-4) 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.5;
}
.limits th {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--navy-400); border-bottom-color: var(--line-strong);
}
.limits td:first-child { color: var(--ink-soft); width: 42%; }
.limits td:last-child { color: var(--ink); padding-right: 0; }
@media (max-width: 640px) {
  .limits, .limits tbody, .limits tr, .limits td { display: block; width: 100%; }
  .limits thead { display: none; }
  .limits tr { border-bottom: 1px solid var(--line-strong); padding-block: var(--sp-4); }
  .limits td { border-bottom: 0; padding: 0 0 var(--sp-2); }
  .limits td:first-child::before { content: "Instead of: "; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-400); display: block; margin-bottom: var(--sp-1); }
  .limits td:last-child::before { content: "What is true: "; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-400); display: block; margin-bottom: var(--sp-1); }
}

/* --------------------------------------------------------------------------
   8. Dictionary block
   -------------------------------------------------------------------------- */

.dict { background: var(--surface); border-block: 1px solid var(--line); }
/* Deliberately tighter than a normal section: the entry should feel like a
   reference page, not a hero. */
.dict__inner { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.dict__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
.dict__word {
  font-family: var(--font-dict); font-weight: 400;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1; letter-spacing: -0.02em; color: #000;
}
.dict__pos { font-family: var(--font-dict); font-style: italic; font-size: var(--fs-md); color: #000; }
.dict__ipa { font-family: var(--font-body); font-size: var(--fs-sm); color: #444; }
.dict__tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; color: #666; }
.dict__rule { border: 0; border-top: 1px solid #000; margin: var(--sp-3) 0 var(--sp-4); opacity: .85; }
.dict__sense { font-size: var(--fs-base); color: #000; max-width: 58ch; line-height: 1.5; margin-bottom: var(--sp-4); }
.dict__sense::before {
  content: "1"; font-family: var(--font-mono); font-size: var(--fs-xs);
  color: #999; margin-right: .9em; vertical-align: 2px;
}
/* The example is the line people actually read, so it gets the body face and a
   marker rule rather than a hard-to-scan display italic. */
.dict__eg {
  font-family: var(--font-body); font-style: italic; font-size: var(--fs-base);
  color: #333; max-width: 58ch; margin: 0 0 var(--sp-4); line-height: 1.55;
  padding-left: var(--sp-4); border-left: 2px solid var(--yellow);
}
.dict__src {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: #888;
}

/* Our lines continue the entry's own numbering, so they read as senses 2, 3
   and 4 rather than as a separate block bolted underneath. */
.dict__ours { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.dict__ourslab {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #777; display: block; margin-bottom: var(--sp-3);
}
.dict__senses { list-style: none; padding: 0; margin: 0; max-width: 62ch; }
.dict__senses li {
  display: flex; gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-2) 0; font-size: var(--fs-base); color: #000; line-height: 1.5;
}
.dict__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: #999; flex: none; }

/* --------------------------------------------------------------------------
   9. Platform strip
   -------------------------------------------------------------------------- */

.strip { padding-block: var(--sp-8); border-bottom: 1px solid var(--line); overflow: hidden; }
.strip .label { margin-bottom: var(--sp-5); }

/* The marquee is deliberately wider than the page, so it MUST sit inside a
   clipping parent. `.strip` clips its own. Anywhere else, wrap it in `.marquee`
   or it will push the whole document sideways. */
.marquee { overflow: hidden; width: 100%; }

.strip__marquee {
  display: flex; width: max-content; gap: 0;
  animation: tb-marquee 48s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip__marquee:hover { animation-play-state: paused; }
.strip__track { display: flex; align-items: center; gap: var(--sp-7); padding-right: var(--sp-7); }
@keyframes tb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* The sprite is markup, not a picture. It must never take up space. */
.logo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.plat {
  display: inline-flex; align-items: center; gap: .55em;
  white-space: nowrap; color: var(--navy-800); opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.strip__marquee:hover .plat { opacity: .38; }
.strip__marquee .plat:hover { opacity: 1; }
.plat__i { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }
.plat__n {
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600;
  letter-spacing: -0.015em;
}
/* No official icon exists for these, so the name alone does the identifying. */
.plat--word .plat__n { letter-spacing: 0.01em; }

/* Both lines around the band are centred, per the brief. */
.strip__intro, .strip__outro {
  text-align: center; margin-inline: auto; max-width: 68ch;
}
.strip__intro {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--sp-6);
}
.strip__outro {
  font-size: var(--fs-sm); color: var(--ink-soft); margin: var(--sp-6) auto 0;
}

@media (prefers-reduced-motion: reduce) {
  .strip__marquee {
    animation: none; width: 100%; flex-wrap: wrap;
    padding-inline: var(--gutter); mask-image: none; -webkit-mask-image: none;
  }
  .strip__marquee .strip__track:last-child { display: none; }
  .strip__track { flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); }
}

/* --------------------------------------------------------------------------
   10. Section furniture
   -------------------------------------------------------------------------- */

.section__h2 { margin-bottom: var(--sp-4); max-width: 20ch; }
/* A full sentence used as a heading. Needs a smaller size and a wider measure. */
.section__h2--statement { font-size: var(--fs-xl); max-width: 30ch; font-weight: 500; }
.section__more {
  margin-top: var(--sp-8); display: flex; flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7); max-width: none;
}

/* Reveal. Only applied once JS confirms motion is allowed. */
.will-reveal { opacity: 0; transform: translateY(18px); }
.will-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

/* --------------------------------------------------------------------------
   11. What we build: the six groups
   -------------------------------------------------------------------------- */

.groups {
  margin-top: var(--sp-8);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.group {
  position: relative; display: block; text-decoration: none; color: inherit;
  padding: var(--sp-6) var(--sp-6) var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.group:nth-child(3n+2), .group:nth-child(3n+3) { padding-left: var(--sp-6); }
.group:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
.group:hover { background: var(--navy-50); }
.group__name { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.group__what { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-4); max-width: 30ch; }
.group__eg { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.group__eg li {
  font-size: var(--fs-sm); color: var(--ink-body); line-height: 1.35;
  padding-left: 1.1em; position: relative;
}
.group__eg li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .45em; height: 1px; background: var(--navy-400);
}
.group__go {
  position: absolute; right: var(--sp-5); bottom: var(--sp-5);
  font-size: var(--fs-md); color: var(--navy-400);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.group:hover .group__go { transform: translateX(4px); color: var(--ink); }

@media (max-width: 980px) { .groups { grid-template-columns: repeat(2, 1fr); }
  .group { padding-left: 0; padding-right: var(--sp-5); border-left: 0 !important; }
  .group:nth-child(even) { padding-left: var(--sp-5); border-left: 1px solid var(--line) !important; }
}
@media (max-width: 640px) { .groups { grid-template-columns: 1fr; }
  .group, .group:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0 !important; }
}

/* --------------------------------------------------------------------------
   12. Stepped workflow
   -------------------------------------------------------------------------- */

.flow { margin-top: var(--sp-8); }
.flow:focus-visible { outline: 2px solid var(--focus); outline-offset: 12px; }
.flow__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3);
}
.flow__step {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-top: 2px solid var(--line);
  padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; font: inherit;
  display: grid; gap: var(--sp-2);
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.flow__icon {
  width: 1.35rem; height: 1.35rem; fill: none;
  stroke: var(--navy-500); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--dur) var(--ease);
}
.flow.is-interactive .flow__step.is-active .flow__icon { stroke: var(--ink); }
.flow__time {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; color: var(--navy-400);
}
.flow__name {
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600;
  color: var(--ink); letter-spacing: -0.015em; line-height: 1.25;
}
.flow.is-interactive .flow__step { opacity: .38; }
.flow.is-interactive .flow__step.is-done { opacity: .62; border-top-color: var(--navy-400); }
.flow.is-interactive .flow__step.is-active { opacity: 1; border-top-color: var(--yellow); border-top-width: 4px; }
.flow.is-interactive .flow__step.is-active .flow__time { color: var(--ink-body); }

.flow__bar { height: 2px; background: var(--line); margin-top: var(--sp-5); overflow: hidden; }
.flow__fill {
  display: block; height: 100%; background: var(--ink);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease);
}
.flow.is-static .flow__bar { display: none; }

.flow__captions { margin-top: var(--sp-5); min-height: 3.2em; }
.flow__captions p { font-size: var(--fs-md); color: var(--ink); margin: 0 0 var(--sp-2); max-width: 46ch; }
.flow__controls { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); }

/* No JS, or reduced motion: show the whole thing at once, never a blank box. */
.flow:not(.is-interactive) .flow__controls { display: none; }
.flow:not(.is-interactive) .flow__captions p { color: var(--ink-body); font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .flow__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .flow__steps { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   13. How we work
   -------------------------------------------------------------------------- */

.steps {
  list-style: none; margin: var(--sp-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.step { padding: var(--sp-6) var(--sp-5) var(--sp-7) 0; }
.step + .step { border-left: 1px solid var(--line); padding-left: var(--sp-5); }
.step__n {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); color: var(--navy-400);
  display: block; margin-bottom: var(--sp-4);
}
.step__h { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.step p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(odd) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; }
  .step { border-left: 0 !important; padding-left: 0 !important; }
  .step + .step { border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   14. Pricing tiers

   Four cards on one row: three one-off builds, then the optional care plan.
   Every row inside a card lines up with the same row in its neighbours, so the
   names, prices, meta lines and buttons all sit on shared baselines. That is
   done with subgrid, with a flex fallback for anything that lacks it.
   -------------------------------------------------------------------------- */

.tiers {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}

.tier {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* The pop on hover. */
.tier:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px -22px rgba(20, 37, 57, .38);
}

/* Rows align across all four cards. */
@supports (grid-template-rows: subgrid) {
  .tiers { grid-template-rows: auto auto auto auto 1fr auto auto; }
  .tier { display: grid; grid-row: span 7; grid-template-rows: subgrid; }
}

.tier__kind {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--navy-500); margin: 0 0 var(--sp-3);
}
.tier__name {
  font-size: var(--fs-lg); margin: 0 0 var(--sp-3);
  letter-spacing: var(--tracking-display);
}
.tier__price {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft); background: var(--yellow-wash);
  display: inline-block; justify-self: start; align-self: start;
  padding: .5em .8em; line-height: 1; margin: 0 0 var(--sp-3);
}
.tier__per { font-family: var(--font-body); letter-spacing: 0; text-transform: none; margin-left: .35em; }
/* "from" on The Rebuild, same size as the figure. It still reads as a modifier
   rather than part of the number, because it keeps the body face against the
   price's mono and sits a shade lighter. */
.tier__from {
  font-family: var(--font-body); font-size: 1em; letter-spacing: 0;
  text-transform: none; color: var(--ink-soft); margin-right: .35em;
}
.tier__meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-400); margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}

/* Feature rows, hairline separated, one per line. */
.tier__list { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.tier__list li {
  font-size: var(--fs-sm); color: var(--ink-body); line-height: 1.45;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.tier__list li:last-child { border-bottom: 0; }

.tier__time {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .04em; color: var(--ink-soft); line-height: 1.5;
  margin: 0 0 var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* Buttons sit on one line across all cards because they share a subgrid row. */
.tier__cta { justify-content: center; width: 100%; align-self: end; }

.tier__note {
  font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55;
  margin: 0; align-self: end;
}
.tier__note strong { color: var(--ink); }

/* The recommendation is carried by the inverted card, not by a floating badge,
   so nothing sticks out of the grid. */
.tier--hero {
  background: var(--navy-950);
  border-color: var(--navy-950);
}
.tier--hero .tier__kind { color: var(--yellow); }
.tier--hero .tier__name { color: #fff; }
.tier--hero .tier__price { background: rgba(250, 207, 57, .14); color: var(--yellow); }
.tier--hero .tier__meta { color: var(--navy-300); border-bottom-color: var(--line-invert); }
.tier--hero .tier__list li { color: var(--navy-200); border-bottom-color: var(--line-invert); }
.tier--hero .tier__time { color: var(--navy-300); border-top-color: var(--line-invert); }
.tier--hero:hover { box-shadow: 0 22px 48px -22px rgba(13, 26, 43, .6); }
.tier--hero :focus-visible { outline-color: var(--yellow); }

/* The care plan is a different kind of purchase, so it reads quieter. */
.tier.tier--care { background: var(--paper-deep); border-style: dashed; }

@media (max-width: 1100px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  @supports (grid-template-rows: subgrid) {
    .tiers { grid-template-rows: auto; }
    .tier { display: flex; grid-row: auto; }
    .tier__list { flex: 1; }
    .tier__cta, .tier__note { margin-top: auto; }
  }
}
@media (max-width: 620px) {
  .tiers { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   15. Founders, tools, latest, faq, book
   -------------------------------------------------------------------------- */

.founders { display: grid; grid-template-columns: 5fr 6fr; gap: var(--sp-9); align-items: center; }
.founders__media img { width: 100%; border-radius: var(--radius-2); }
.founders__body .section__h2 { margin-bottom: var(--sp-5); }
@media (max-width: 860px) { .founders { grid-template-columns: 1fr; gap: var(--sp-7); } }

.tools {
  margin-top: var(--sp-8);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.tool {
  position: relative; display: block; text-decoration: none; color: inherit;
  padding: var(--sp-6) var(--sp-7) var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.tool + .tool { border-left: 1px solid var(--line); padding-left: var(--sp-5); }
.tool:hover { background: var(--navy-50); }
.tool__h { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.tool p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; max-width: 32ch; }
.tool__go {
  position: absolute; right: var(--sp-5); bottom: var(--sp-5);
  color: var(--navy-400); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tool:hover .tool__go { transform: translateX(4px); color: var(--ink); }
@media (max-width: 800px) { .tools { grid-template-columns: 1fr; }
  .tool, .tool + .tool { border-left: 0; padding-left: 0; padding-right: 0; }
}

.latest { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.latest__item {
  display: block; text-decoration: none; color: inherit;
  border-top: 2px solid var(--ink); padding-top: var(--sp-4);
}
.latest__meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy-400);
  display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.latest__title { font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: var(--sp-3); }
.latest__why { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.latest__item:hover .latest__title { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) { .latest { grid-template-columns: 1fr; } }

.faq { margin-top: var(--sp-8); border-top: 1px solid var(--line); max-width: 74ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-5) var(--sp-6) var(--sp-5) 0;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  color: var(--ink); letter-spacing: -0.015em; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 400;
  color: var(--navy-400); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { content: "\2212"; }
.faq__a { padding-bottom: var(--sp-5); }
.faq__a p { font-size: var(--fs-base); color: var(--ink-body); margin: 0; max-width: 62ch; }

.book__h { max-width: 16ch; margin-bottom: var(--sp-4); }
/* Heading and CTA side by side, no bullet list, less air underneath. */
.book--tight { padding-bottom: var(--sp-8); }
.book__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-7) var(--sp-9); flex-wrap: wrap;
}
.book__row .book__h { margin-bottom: var(--sp-3); }
.book__row .lead { margin-bottom: 0; }
.book__row .btn { flex: none; }
@media (max-width: 700px) { .book__row { display: block; } .book__row .btn { margin-top: var(--sp-6); } }
.book__expect { list-style: none; padding: 0; margin: var(--sp-6) 0 var(--sp-8); display: grid; gap: var(--sp-3); max-width: 46ch; }
.book__expect li {
  font-size: var(--fs-sm); color: var(--ink-body);
  padding: var(--sp-3) 0 var(--sp-3) 1.4em; border-bottom: 1px solid var(--line); position: relative;
}
.book__expect li::before {
  content: "\2713"; position: absolute; left: 0; top: var(--sp-3); color: var(--navy-400);
  font-size: .9em;
}

/* --------------------------------------------------------------------------
   Prompt guide
   -------------------------------------------------------------------------- */

.toc { margin: var(--sp-5) 0 0; padding-left: 1.4em; max-width: 52ch; }
.toc li { margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.toc a { color: var(--ink-body); text-decoration: none; border-bottom: 1px solid var(--line); }
.toc a:hover { color: var(--ink); border-color: var(--ink); }

.numlist { list-style: none; counter-reset: n; padding: 0; margin: var(--sp-7) 0 0; border-top: 1px solid var(--line); }
.numlist li {
  counter-increment: n; padding: var(--sp-5) 0 var(--sp-5) 3rem;
  border-bottom: 1px solid var(--line); position: relative; max-width: 62ch;
}
.numlist li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .1em; color: var(--navy-400);
}
.numlist h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.numlist p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

/* Before and after comparison */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin: var(--sp-7) 0; }
.ba--stack { grid-template-columns: 1fr; }
.ba__col { border-top: 2px solid var(--line-strong); padding-top: var(--sp-4); }
.ba__col--good { border-top-color: var(--ink); }
.ba__tag {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-bottom: var(--sp-3);
}
.ba__col--good .ba__tag { color: var(--ink); }
.ba__text {
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--line);
  padding: var(--sp-4); margin-bottom: var(--sp-3); max-width: none;
}
.ba__col--good .ba__text { border-left: 3px solid var(--yellow); }
.ba__note { font-size: var(--fs-xs); color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) { .ba { grid-template-columns: 1fr; } }

/* OCCD */
.occd { margin: var(--sp-7) 0 var(--sp-8); border-top: 1px solid var(--line); }
.occd__row {
  display: grid; grid-template-columns: 4rem 1fr; gap: var(--sp-5);
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); align-items: start;
}
.occd__letter {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700;
  line-height: 1; color: var(--ink); letter-spacing: -0.04em;
}
.occd h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.occd p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; max-width: 60ch; }
@media (max-width: 560px) { .occd__row { grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); } }

/* Templates */
.tpl { margin-top: var(--sp-7); }
.tpl h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.tpl pre {
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.65;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--navy-300);
  padding: var(--sp-5); margin: 0; overflow-x: auto;
  white-space: pre-wrap; color: var(--ink);
}

.aside { margin-top: var(--sp-6); border-top: 1px solid var(--line); }
.aside summary {
  cursor: pointer; padding: var(--sp-4) 0;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-soft);
}
.aside p { font-size: var(--fs-sm); color: var(--ink-soft); padding-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
   Charts
   Single series, so no legend. Navy carries the data. Yellow is a highlight
   only, always paired with a navy ring and a text label, because yellow on
   this ground is 1.41:1 and cannot carry meaning by itself.
   -------------------------------------------------------------------------- */

.chart { margin: var(--sp-8) 0 var(--sp-9); padding: 0; }
.chart__cap { margin-bottom: var(--sp-5); }
.chart__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.chart__sub { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; max-width: 62ch; }
.chart__svg { width: 100%; height: auto; overflow: visible; display: block; }

.chart__grid line { stroke: var(--line); stroke-width: 1; }
.chart__axis { stroke: var(--line-strong); stroke-width: 1; }
.chart__line { fill: none; stroke: var(--navy-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart__dot { fill: var(--navy-700); stroke: var(--paper); stroke-width: 2; }
.chart__dot--hi { fill: var(--yellow); stroke: var(--navy-800); stroke-width: 2; }

.chart__ylab text, .chart__xlab text {
  font-family: var(--font-mono); font-size: 11px;
  fill: var(--ink-soft); letter-spacing: .04em;
}
.chart__ylab text { text-anchor: end; }
.chart__note {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  fill: var(--ink-soft);
}
.chart__note--hi { fill: var(--ink); font-weight: 600; }
.chart__axistitle {
  font-family: var(--font-mono); font-size: 10px; fill: var(--navy-400);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

.chart__data { margin-top: var(--sp-5); border-top: 1px solid var(--line); }
.chart__data summary {
  cursor: pointer; padding: var(--sp-3) 0;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-soft);
}
.chart__table { border-collapse: collapse; width: 100%; max-width: 34rem; margin-bottom: var(--sp-4); }
.chart__table caption { text-align: left; font-size: var(--fs-xs); color: var(--ink-soft); padding-bottom: var(--sp-3); }
.chart__table th, .chart__table td {
  text-align: left; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.chart__table th { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--navy-400); }
.chart__src { font-size: var(--fs-xs); color: var(--ink-soft); margin: var(--sp-4) 0 0; max-width: 66ch; }

@media print {
  .nav, .footer, .stickybar, .book, .btn { display: none !important; }
  .chart__data[open] summary { display: none; }
  .section { padding-block: var(--sp-5); }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   Catalogue: filter, groups, solution rows
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.crumb { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.crumb:hover { color: var(--ink); border-color: var(--ink); }

/* Chips are hidden until JS confirms they will work. */
.filter { display: none; margin-bottom: var(--sp-8); }
.filter.has-js { display: block; }
.filter__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-body); background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: .55em 1.1em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-invert); }
.filter__search input {
  font-family: var(--font-body); font-size: var(--fs-sm);
  width: 100%; max-width: 22rem;
  border: 0; border-bottom: 1px solid var(--line-strong);
  background: transparent; padding: .6em 0; color: var(--ink);
}
.filter__search input:focus { border-bottom-color: var(--focus); outline: none; }

.solgroup { margin-bottom: var(--sp-10); }
.solgroup__h { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.solgroup__blurb { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--sp-5); }

.sollist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.sollist--page { margin-top: var(--sp-6); }
.sol { border-bottom: 1px solid var(--line); }
.sol summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--sp-4) var(--sp-7) var(--sp-4) 0;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: -0.015em; color: var(--ink); line-height: 1.3;
}
.sol summary::-webkit-details-marker { display: none; }
.sol summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 400; color: var(--navy-400);
}
.sol details[open] summary::after { content: "\2212"; }
.sol summary:hover { color: var(--navy-700); }
.sol__body { padding: 0 0 var(--sp-5); max-width: 62ch; }
.sol__problem { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-3); }
.sol__get { font-size: var(--fs-base); color: var(--ink); margin-bottom: var(--sp-4); }

.ownline {
  margin-top: var(--sp-8); padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-soft); max-width: 62ch;
}

.otherlinks { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-6); }

/* Safety net on the catalogue page only. */
.stickybar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--ink); color: var(--ink-invert);
  border-top: 1px solid var(--line-invert);
}
.stickybar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-4);
}
.stickybar p { margin: 0; font-size: var(--fs-sm); color: var(--navy-200); max-width: none; }
.stickybar :focus-visible { outline-color: var(--yellow); }

/* --- AI news: rows, not tiles ------------------------------------------ */
.nrows { border-top: 1px solid var(--line-strong); }
.nrow {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background var(--dur) var(--ease);
}
.nrow__meta {
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy-400);
}
.nrow__fav { width: 16px; height: 16px; border-radius: 2px; flex: none; }
.nrow__src { color: var(--ink-soft); }
.nrow__dot { opacity: .5; }
.nrow__title {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.3; color: var(--ink);
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: left; max-width: 60ch;
}
.nrow__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.nrow__hook {
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6;
  margin: 0; max-width: 76ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* One control per story. A stretched pseudo element on the headline button
   makes the whole row clickable, so the cue is not a second thing to tab to
   that does exactly the same job. */
.nrow__title::after { content: ""; position: absolute; inset: 0; }
.nrow:hover { background: var(--navy-50); }
.nrow:hover .nrow__title { text-decoration: underline; text-underline-offset: 3px; }
.nrow:has(.nrow__title:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.nrow__title:focus-visible { outline: none; }
.nrow__cue {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--navy-500); margin-top: var(--sp-1);
  display: inline-flex; align-items: center; gap: .5em;
}
.nrow__cue::after { content: "\2192"; font-size: 1.1em; transition: transform var(--dur) var(--ease); }
.nrow:hover .nrow__cue { color: var(--ink); }
.nrow:hover .nrow__cue::after { transform: translateX(3px); }
.news__updated { font-size: var(--fs-xs); margin-top: var(--sp-7); }

/* --- Reading dialog ---------------------------------------------------- */
.nd { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--gutter); }
.nd__backdrop { position: absolute; inset: 0; background: rgba(13, 26, 43, .55); backdrop-filter: blur(2px); }
.nd__panel {
  position: relative; background: var(--surface); border: 1px solid var(--line-strong);
  max-width: 44rem; width: 100%; max-height: 86vh; overflow-y: auto;
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  box-shadow: 0 30px 70px -30px rgba(13, 26, 43, .55);
}
.nd__x {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  color: var(--ink-soft); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nd__x:hover { background: var(--navy-50); color: var(--ink); border-color: var(--line-strong); }
.nd__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nd__meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy-400);
  margin: 0 0 var(--sp-3); padding-right: 3rem;
}
.nd__title { font-size: var(--fs-lg); margin: 0 0 var(--sp-5); padding-right: 2rem; }
.nd__body p { font-size: var(--fs-base); line-height: 1.7; color: var(--ink-body); margin: 0 0 var(--sp-4); }
.nd__means { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--yellow-wash); border-left: 3px solid var(--yellow); }
.nd__meanslab {
  display: block; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--sp-2);
}
.nd__means p { margin: 0; font-size: var(--fs-base); line-height: 1.65; color: var(--ink); }
.nd__orig { margin: var(--sp-6) 0 0; }
@media (max-width: 620px) { .nd__panel { padding: var(--sp-7) var(--sp-5) var(--sp-5); max-height: 92vh; } }

/* Booking page layout */
.book__layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sp-9); align-items: start; }
.book__side .book__expect { margin-top: var(--sp-4); margin-bottom: 0; }
.book__side p { font-size: var(--fs-sm); }
@media (max-width: 900px) { .book__layout { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */

.form { margin-top: var(--sp-7); max-width: 34rem; }
.form__row { margin-bottom: var(--sp-5); }
.form__label {
  display: block; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--sp-2);
}
.form__input {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-base);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-1);
  padding: .85em 1em; transition: border-color var(--dur) var(--ease);
}
.form__input:hover { border-color: var(--navy-500); }
.form__input:focus { border-color: var(--focus); }
textarea.form__input { resize: vertical; min-height: 8rem; line-height: 1.5; }
.form__note { font-size: var(--fs-xs); margin-top: var(--sp-4); }
.form__success {
  margin-top: var(--sp-7); padding: var(--sp-5); max-width: 34rem;
  background: var(--yellow-wash); border-left: 3px solid var(--yellow);
  font-size: var(--fs-md); color: var(--ink);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--navy-950); color: var(--ink-invert); margin-top: var(--section-y); }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-7) var(--sp-6);
  padding-block: var(--sp-10) var(--sp-8);
}
.footer__name {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -0.02em; display: block; margin-bottom: var(--sp-4);
}
.footer__brand p { font-size: var(--fs-sm); color: var(--navy-300); max-width: 34ch; }
.footer__where { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--navy-400) !important; letter-spacing: .04em; }
.footer__col { display: grid; align-content: start; gap: var(--sp-3); }
.footer__col h2 {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--navy-400); margin-bottom: var(--sp-2);
}
.footer__col a {
  font-size: var(--fs-sm); color: var(--navy-200); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.footer__col a:hover { color: #fff; }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5) var(--sp-7);
  border-top: 1px solid var(--line-invert);
  font-size: var(--fs-xs); color: var(--navy-400);
}
.footer__legal { display: flex; gap: var(--sp-5); }
.footer__legal a { color: var(--navy-400); text-decoration: none; }
.footer__legal a:hover { color: #fff; }
.footer :focus-visible { outline-color: var(--yellow); }

@media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   17. Motion safety
   -------------------------------------------------------------------------- */

@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;
  }
  .will-reveal { opacity: 1 !important; transform: none !important; }
}

/* A section whose content sits straight under a page hero. */
.section--tight { padding-top: var(--sp-7); }

/* The one place the guide raises its voice. Sits in the right hand white
   space beside the opening paragraphs, on a slight angle, and folds back
   into the flow when there is no white space to sit in. */
.hero--shout .wrap { position: relative; }
.shout {
  font-family: var(--font-display); font-weight: 800;
  line-height: .92; letter-spacing: -0.04em; color: var(--ink);
  text-transform: lowercase; margin: 0 0 var(--sp-6); max-width: none;
}
.shout__l1, .shout__l2 { display: block; }
.shout__eq { display: block; color: var(--navy-400); font-weight: 700; font-size: .7em; line-height: 1.1; }
.shout__l2 { background: linear-gradient(transparent 58%, var(--yellow) 58%); display: inline-block; }

@media (min-width: 1080px) {
  .shout {
    position: absolute; top: 3rem; right: var(--sp-6);
    width: 8.5ch; margin: 0;
    font-size: clamp(2.5rem, 1.2rem + 2.9vw, 3.75rem);
    transform: rotate(-7deg);
    transform-origin: center;
  }
}
@media (max-width: 1079px) {
  .shout {
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
    padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line);
  }
  .shout__eq { display: inline; margin-inline: .3em; }
  .shout__l1, .shout__l2 { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .shout { transform: none; } }


/* --------------------------------------------------------------------------
   Chaos to order diagram. Information arriving along paths that double back
   and cross, the system sorting it in the middle, the same information
   leaving on evenly spaced tracks at a steady rhythm. Drawn here, not
   sourced, in the site palette.
   -------------------------------------------------------------------------- */
.flowpic { margin: var(--sp-7) 0 0; }
.flowpic__svg { width: 100%; height: auto; overflow: visible; display: block; }
.flowpic__grid path { stroke: var(--line); stroke-width: 1; fill: none; }

/* Same stroke either side. Only the order changes. */
.flowpic__in use { stroke: var(--navy-300); stroke-width: 1.4; stroke-dasharray: 4 6; fill: none; }
.flowpic__out use { stroke: var(--navy-600); stroke-width: 1.6; fill: none; }
.flowpic__ticks path { stroke: var(--navy-300); stroke-width: 1; fill: none; }

.flowpic__hub > rect { fill: none; stroke: var(--ink); stroke-width: 1.5; }
/* The sorting itself: a lattice, cells landing on it, one live. */
.flowpic__lattice path { stroke: var(--navy-200); stroke-width: 1; fill: none; }
.flowpic__cells rect { fill: var(--navy-400); }
.flowpic__hub .flowpic__core { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }

.flowpic__labels text {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; fill: var(--ink-soft);
}
.flowpic__dots .d { fill: var(--navy-800); }
.flowpic__dots .o1, .flowpic__dots .o2, .flowpic__dots .o3, .flowpic__dots .o4 { fill: var(--yellow-deep); }

/* offset-path carries each square along the same line the eye follows. */
.flowpic__dots .d { offset-rotate: 0deg; animation: fp-travel 7s linear infinite; }
.flowpic__dots .d1 { offset-path: path('M 6 36 C 70 96 30 130 96 106 C 150 88 130 168 196 140 C 256 114 240 46 300 92 C 336 120 340 138 378 150'); animation-delay: -0.0s; }
.flowpic__dots .d2 { offset-path: path('M 6 262 C 84 250 46 190 118 200 C 178 208 154 132 214 158 C 268 182 258 214 312 178 C 344 158 352 152 378 150'); animation-delay: -1.0s; }
.flowpic__dots .d3 { offset-path: path('M 6 150 C 60 150 74 78 128 104 C 176 128 142 196 202 196 C 258 196 250 122 306 134 C 344 142 356 148 378 150'); animation-delay: -2.0s; }
.flowpic__dots .d4 { offset-path: path('M 6 92 C 76 68 60 154 130 152 C 190 150 168 78 226 96 C 278 112 262 178 318 164 C 348 156 360 152 378 150'); animation-delay: -3.0s; }
.flowpic__dots .d5 { offset-path: path('M 6 206 C 68 220 62 132 124 144 C 180 154 176 218 236 210 C 290 202 272 130 324 140 C 352 146 362 148 378 150'); animation-delay: -4.0s; }
.flowpic__dots .d6 { offset-path: path('M 6 130 C 92 118 44 210 148 178 C 214 158 186 108 250 122 C 306 134 290 176 340 160 C 362 153 368 151 378 150'); animation-delay: -5.0s; }
.flowpic__dots .d7 { offset-path: path('M 6 172 C 90 190 56 96 152 122 C 220 140 200 200 262 186 C 314 174 300 128 344 142 C 364 148 370 150 378 150'); animation-delay: -6.0s; }
.flowpic__dots .o1 { offset-path: path('M 566 150 L 616 150 L 656 66 L 930 66'); animation-delay: -0.40s; }
.flowpic__dots .o2 { offset-path: path('M 566 150 L 616 150 L 646 122 L 930 122'); animation-delay: -2.15s; }
.flowpic__dots .o3 { offset-path: path('M 566 150 L 616 150 L 646 178 L 930 178'); animation-delay: -3.90s; }
.flowpic__dots .o4 { offset-path: path('M 566 150 L 616 150 L 656 234 L 930 234'); animation-delay: -5.65s; }
@keyframes fp-travel {
  from { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}

.flowpic__cap {
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6;
  max-width: 54ch; margin-top: var(--sp-5);
}

/* Without motion the squares would stack at the start of each path, so
   place them along the lines and let the diagram read as a still. */
@media (prefers-reduced-motion: reduce) {
  .flowpic__dots .d { animation: none; opacity: 1; }
  .flowpic__dots .d1 { offset-distance: 58%; }
  .flowpic__dots .d2 { offset-distance: 34%; }
  .flowpic__dots .d3 { offset-distance: 71%; }
  .flowpic__dots .d4 { offset-distance: 26%; }
  .flowpic__dots .d5 { offset-distance: 47%; }
  .flowpic__dots .d6 { offset-distance: 63%; }
  .flowpic__dots .d7 { offset-distance: 39%; }
  .flowpic__dots .o1 { offset-distance: 62%; }
  .flowpic__dots .o2 { offset-distance: 62%; }
  .flowpic__dots .o3 { offset-distance: 62%; }
  .flowpic__dots .o4 { offset-distance: 62%; }
}

/* No offset-path support: hide the travelling squares, keep the diagram. */
@supports not (offset-path: path('M 0 0 L 1 1')) { .flowpic__dots { display: none; } }
@media (max-width: 640px) { .flowpic__labels text { font-size: 15px; } }


/* --------------------------------------------------------------------------
   Touch

   Two things matter on a phone and neither is visible on a desktop.

   1. iOS Safari zooms the whole page in when you focus an input whose font
      size is under 16px. It is jarring and it does not zoom back out. Every
      field goes to 16px on touch devices regardless of the type scale.
   2. Standalone links and controls need a target big enough to hit. Inline
      links inside a sentence are exempt, but a nav item, a footer link or a
      breadcrumb is a control and should be around 44px tall.
   -------------------------------------------------------------------------- */

@media (pointer: coarse), (max-width: 900px) {
  input, textarea, select,
  .form__input, .filter__search input { font-size: 16px; }

  /* Standalone links get a real target without moving the text. */
  .footer__col a, .footer__legal a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .footer__col { gap: 0; }
  .footer__legal { gap: var(--sp-6); }

  .nav__logo { min-height: 44px; }
  .crumb { display: inline-flex; align-items: center; min-height: 40px; }
  .tlink { min-height: 40px; }
  .section__more { gap: var(--sp-3) var(--sp-7); }

  /* Solution rows and FAQ summaries are the main way people move around
     the catalogue on a phone. */
  .sol summary, .faq summary { min-height: 52px; display: flex; align-items: center; }

  /* The filter chips sit in a scrolling row, so they need real height. */
  .chip { min-height: 42px; }

  /* The prompt guide contents list is navigation, not running text. */
  .toc a { display: inline-flex; align-items: center; min-height: 40px; }
  .toc li { margin-bottom: 0; }
}



/* ==========================================================================
   Blog.

   Two jobs. The index at /blog/ is a set of tiles you pick from. A post is a
   single column of running text, deliberately without the numbered sections
   and hairline rules the rest of the site uses, so it reads as something
   written rather than as another page of the site.
   ========================================================================== */

/* ---- The index tiles ---- */

.postlist {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--sp-6);
}

.postlist__item {
  display: flex;
  flex-direction: column;
  padding: var(--sp-7) var(--sp-6);
  background: var(--white, #fff);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.postlist__item:hover { border-color: var(--navy-300); transform: translateY(-3px); }
.postlist__item:focus-visible { outline: 2px solid var(--yellow-deep); outline-offset: 3px; }

.postlist__date {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--navy-400); margin-bottom: var(--sp-4);
}
/* The byline sits after the date, separated by a rule rather than punctuation. */
.postlist__by { padding-left: var(--sp-3); margin-left: var(--sp-3); border-left: 1px solid var(--line-strong); }

.postlist__title { font-size: var(--fs-lg); line-height: 1.2; margin-bottom: var(--sp-4); }
.postlist__blurb { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-6); }

/* A thumbnail bleeds to the tile's edges, above the date. Posts without one
   simply start at the date, so the two kinds of tile sit together. */
.postlist__img {
  display: block;
  width: calc(100% + 2 * var(--sp-6));
  margin: calc(-1 * var(--sp-7)) calc(-1 * var(--sp-6)) var(--sp-5);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Pushed to the bottom so every tile's link lines up regardless of blurb length. */
.postlist__more {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
}

/* ---- A post ---- */

.post__head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--sp-7); }
.post__back {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.post__title {
  font-family: var(--font-display); font-size: var(--fs-3xl);
  line-height: 1.05; max-width: 20ch; margin-bottom: var(--sp-5);
}
.post__meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--navy-400);
}

/* The hero sits between the title block and the running text, a little wider
   than the text so it reads as the picture the piece opens on. */
.post__hero { max-width: 56rem; margin: 0 0 var(--sp-8); }
.post__hero img { display: block; width: 100%; height: auto; border-radius: var(--radius-2); }
.post__hero figcaption {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--navy-400); margin-top: var(--sp-3);
}

/* One column of running text. Slightly wider measure than .prose elsewhere,
   because a long read wants fewer line breaks, and generous space above an h2
   so a new idea is felt rather than announced with a rule. */
.post__body { max-width: 40rem; padding-bottom: var(--sp-11); }
.post__body > p { margin-bottom: var(--sp-5); }
.post__body h2 {
  font-size: var(--fs-xl); line-height: 1.15;
  margin: var(--sp-10) 0 var(--sp-5); max-width: 24ch;
}
.post__body h3 { font-size: var(--fs-md); margin: var(--sp-7) 0 var(--sp-3); }
.post__body ul, .post__body ol { margin: 0 0 var(--sp-5); padding-left: 1.3em; }
.post__body li { margin-bottom: var(--sp-3); }
.post__body .lead { margin-bottom: var(--sp-5); }

/* The question and answer run at the end of a post. Same rhythm as the body,
   just tightened, so it reads as part of the article and not as a widget. */
.qa h3:first-child { margin-top: var(--sp-6); }
.qa p { margin-bottom: var(--sp-5); }

/* ---- The comparison table a post can use ---- */

/* Four columns will not fit a phone, so it scrolls inside its own box rather
   than making the whole page scroll sideways. */
.cmp__scroll { overflow-x: auto; margin: var(--sp-7) 0 var(--sp-8); }
.cmp { width: 100%; min-width: 38rem; border-collapse: collapse; }
.cmp th, .cmp td {
  text-align: left; vertical-align: top;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.cmp thead th {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--navy-400); border-bottom: 1px solid var(--line-strong);
}
.cmp tbody th { color: var(--ink-soft); font-weight: 500; width: 22%; }
.cmp td:last-child { padding-right: 0; }