/* ============================================================================
   Shodhan Advisory — design system
   ----------------------------------------------------------------------------
   One stylesheet for every page. There is no build step: this file is the
   source of truth, and no page may carry its own <style> block.

   The governing rule of this system is ACCENT DISCIPLINE:
   --accent (#4F7FFF) marks things you can act on — solid buttons, links,
   "→" link affordances, focus rings. Nothing else. Kickers, section numbers,
   stage names, bullets, metric values, the footer and the sticky bar are ink.
   When an accent is everywhere, nothing it touches reads as important.
   ========================================================================= */


/* 1. TOKENS ================================================================= */

:root {
  /* Surface — kept from the original palette, with panels tinted toward the
     accent so the greys belong to the same family instead of fighting it. */
  --bg:            #0C0D0F;
  --panel:         #11151E;
  --panel-deep:    #0F1420;

  /* Line. --rule and --rule-2 are DECORATIVE ONLY (1.2:1 and 1.44:1).
     Anything focusable needs --edge, which clears the 3:1 WCAG 1.4.11 bar. */
  --rule:          #1C2028;
  --rule-2:        #2A303B;
  --edge:          #7D8794;

  /* Ink. Cool, to match a cool black — the old warm set fought it.
     Ratios against --bg: text 17.2, lead 11.8, body 9.0, dim 5.3, faint 4.2. */
  --text:          #EFF1F4;
  --lead:          #C3CAD6;
  --body:          #A8B1BE;
  --dim:           #7D8794;
  --faint:         #6C7684;   /* 4.2:1 — LARGE TEXT (>=18.7px) OR NON-TEXT ONLY */

  /* Accent. --accent-pale is a tint for numerals and small tinted text, where
     full accent would both vibrate and read as a call to action.
     --on-accent is black-on-blue: 5.38:1, where white-on-blue was 3.06:1. */
  --accent:        #4F7FFF;
  --accent-hover:  #3D6BE6;
  --accent-pale:   #A9C0FF;
  --on-accent:     #0C0D0F;
  --accent-soft:   rgba(79, 127, 255, 0.30);

  /* Semantic — used by the article flag/mistake blocks. Retinted from the
     off-palette #4FFF7F / #FF4F4F / #E05555 strays. */
  --ok:            #5BD59A;
  --warn:          #E8807A;

  /* Metrics. --shell governs chrome and all non-prose pages; --measure only
     ever narrows an article's prose column. One token cannot do both jobs:
     that is why blog pages used to patch the nav back to full width. */
  --shell:         1100px;
  --measure:       68ch;
  --pad:           clamp(20px, 5vw, 56px);
  --section:       clamp(64px, 7vw, 88px);
  --section-tight: clamp(44px, 4.5vw, 56px);
  --spine-col:     330px;
  --spine-gap:     68px;

  /* Type */
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}


/* 2. RESET + BASE =========================================================== */

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

html {
  background: var(--bg);
  color-scheme: dark;              /* dark UA canvas, scrollbars and controls */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 400;                /* was 300 — the main readability fix */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
/* A CSS width alone leaves the HTML height attribute in force, which stretches
   the image. Anything that genuinely wants a fixed height sets one explicitly. */
img { height: auto; }
strong { font-weight: 600; color: var(--text); }
em { font-style: italic; }
::selection { background: var(--accent); color: var(--on-accent); }

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


/* 3. LAYOUT PRIMITIVES ====================================================== */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

/* Narrows ONLY the prose column. Chrome never uses this. */
.shell--prose { max-width: min(var(--shell), var(--measure)); }

.section       { padding: var(--section) 0; }
.section--tight{ padding: var(--section-tight) 0; }
.section--ruled{ border-top: 1px solid var(--rule); }

/* The spine: heading block left, content right, one axis down the page.
   This is the signature of the system — it replaces centred stacked blocks.

   Every child that is not the head auto-places into column 2, so a section
   needs no wrapper element around its body. That matters: an unclosed wrapper
   nests the rest of the page inside a grid cell, which renders — just wrong. */
.spine {
  display: grid;
  grid-template-columns: var(--spine-col) minmax(0, 1fr);
  column-gap: var(--spine-gap);
  row-gap: 26px;
  align-items: start;
}
.spine > .spine__head { grid-column: 1; grid-row: 1; }
.spine > *:not(.spine__head) { grid-column: 2; min-width: 0; }
.spine__head > * + * { margin-top: 18px; }
/* Consecutive spines are consecutive sections. */
.spine + .spine { margin-top: clamp(48px, 5vw, 72px); }
.spine__body { min-width: 0; }
.spine__body > * + * { margin-top: 26px; }
@media (max-width: 900px) {
  .spine { grid-template-columns: 1fr; row-gap: 22px; }
  .spine > .spine__head, .spine > *:not(.spine__head) { grid-column: 1; }
  .spine > .spine__head { margin-bottom: 10px; }
}

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, 18px); }
.stack--sections { --stack-gap: clamp(48px, 5vw, 72px); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }


/* 4. TYPE =================================================================== */

h1 {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 0.99;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}
h3 { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; }
h4 { font-size: 21px; line-height: 1.3; letter-spacing: -0.018em; font-weight: 600; }

/* Was .label / .label2 / .article-kicker / .sector / .cs-desc / .fact .k.
   The 20px accent dash that used to sit in front of this is gone: it was the
   single most template-looking element on the site. */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dim);
}

.lede { font-size: 20px; line-height: 1.6; color: var(--lead); max-width: 52ch; }
.lede strong { color: var(--text); font-weight: 500; }

.meta { font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.meta a { border-bottom: 1px solid var(--rule-2); }
.meta a:hover { color: var(--text); border-color: var(--edge); }

.sec-num { font-size: 14px; font-weight: 600; color: var(--accent-pale); letter-spacing: 0.02em; }

.chip {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dim);
  border: 1px solid var(--rule-2);
  padding: 4px 10px;
}


/* 5. ACTIONS ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn--solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* --edge, not --rule-2: a focusable boundary must clear 3:1. */
.btn--ghost { border-color: var(--edge); color: var(--text); font-weight: 500; }
.btn--ghost:hover { border-color: var(--text); }
.btn--lg { padding: 18px 34px; font-size: 16px; }
.btn--sm { padding: 10px 18px; font-size: 13.5px; }

/* Link affordance — KEEPS accent, because it is a link. */
.link-go { font-size: 15.5px; font-weight: 600; color: var(--accent); }
.link-go::after { content: ' →'; }
.link-go:hover { color: var(--accent-pale); }

.link-back { display: inline-block; font-size: 14.5px; color: var(--dim); }
.link-back:hover { color: var(--text); }


/* 6. CHROME ================================================================= */

/* The skip link had no :focus rule anywhere on the old site, so left:-9999px
   was permanent and it never worked. It works now. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(12, 13, 15, 0.88);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--rule);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 60px;
  padding-block: 11px;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--text);
}
.wordmark__mark { color: var(--accent); font-weight: 500; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  font-size: 14.5px;
  color: var(--body);
}
.site-nav__links a:hover { color: var(--text); }
.site-nav__links .is-current { color: var(--text); }
@media (max-width: 880px) { .site-nav__links { display: none; } }

.site-footer { padding: 36px 0; border-top: 1px solid var(--rule); }
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--dim);
}
.site-footer__inner .wordmark { font-size: 13.5px; color: var(--dim); }
.site-footer__inner .wordmark__mark { color: var(--dim); }   /* accent discipline */
.site-footer__inner a { color: var(--body); border-bottom: 1px solid var(--rule-2); }
.site-footer__inner a:hover { color: var(--text); border-color: var(--edge); }

/* Mobile CTA bar — homepage only. No accent on the label. */
.sticky-bar { display: none; }
@media (max-width: 720px) {
  .sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 20px;
    background: rgba(12, 13, 15, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule);
  }
  .sticky-bar .meta { font-size: 12.5px; }
}

.breadcrumb { font-size: 13.5px; color: var(--dim); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { margin: 0 8px; color: var(--rule-2); }


/* 7. ROWS — the one list primitive ========================================== */
/* Replaces eleven grid systems and five row systems: .stall-grid .ways
   .facts-grid .cs-metrics .metrics-grid .compare-grid .roi-grid
   .component-grid .steps-list .query-grid .intent-grid .lifecycle .tl
   .items .cs-items .seats. Hairline-divided rows, never cards. */

.rows { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.rows--open { border-top: 0; }

.row, .rows > li {
  display: grid;
  grid-template-columns: var(--row-cols, 180px minmax(0, 1fr));
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.row--num    { --row-cols: 46px minmax(0, 1fr); align-items: start; row-gap: 9px; }
/* A numbered row may hold any number of children; they stack in column two. */
.row--num > .row__num { grid-column: 1; grid-row: 1; }
.row--num > *:not(.row__num) { grid-column: 2; }
.row--marked { --row-cols: 24px minmax(0, 1fr); }
.row--pair   { --row-cols: minmax(0, 1fr); row-gap: 9px; }

.row__num    { font-size: 14px; font-weight: 600; color: var(--accent-pale); padding-top: 4px; }
.row__key    { font-size: 19px; font-weight: 600; letter-spacing: -0.018em; color: var(--text); }
.row__val    { font-size: 16.5px; line-height: 1.62; color: var(--body); max-width: 62ch; }
.row__val strong { color: var(--text); }
.is-strong   { color: var(--text); font-weight: 600; }
.row__title  { font-size: 21px; font-weight: 600; letter-spacing: -0.018em; color: var(--text); }
.row__title + .row__val { margin-top: 9px; }
/* Decorative bullet — loses the accent it used to share with .link-go. */
.row__marker { color: var(--dim); font-size: 15px; line-height: 1.6; }
.row__marker::before { content: '\2192'; }

@media (max-width: 760px) {
  .row, .rows > li, .row--num, .row--marked { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* The single-column grid has no column 2 — leaving the desktop placement
     in place creates an implicit one and the whole page scrolls sideways. */
  .row--num > .row__num, .row--num > *:not(.row__num) { grid-column: 1; }
  .row__num { padding-top: 0; }
}


/* 8. STATS, PANELS, TABLES ================================================== */

/* Metric values are INK, not accent. A 36px blue number is the template look. */
.stat__value {
  font-size: clamp(31px, 4vw, 58px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text);
}
.stat__value--sm { font-size: 31px; }
.stat__unit { font-size: 0.38em; font-weight: 500; letter-spacing: -0.01em; }
.stat__label { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--lead); }
.stat__note  { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--dim); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.stats > * { background: var(--panel); padding: 28px 30px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }

.panel { background: var(--panel); padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px); }
.panel--quiet  { background: none; border-left: 2px solid var(--accent); padding: 4px 0 4px 22px; }
.panel--dashed { background: none; border: 1px dashed var(--accent-soft); }
.panel--define { background: var(--panel); border-left: 2px solid var(--accent-pale); }
.panel--ok     { background: var(--panel); border-left: 2px solid var(--ok); }
.panel--warn   { background: var(--panel); border-left: 2px solid var(--warn); }
.panel > * + * { margin-top: 14px; }
.panel p { font-size: 16.5px; line-height: 1.68; color: var(--body); max-width: 68ch; }
.panel p strong { color: var(--text); }

.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.table th, .table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table th { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--dim); }
.table td { color: var(--body); line-height: 1.55; }
.table td strong { color: var(--text); }
.table tr:last-child td { border-bottom: 0; }

/* Linked cards — "next case study", proof links, post cards. */
.card-list { display: grid; gap: 2px; }
.card-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .card-list--2 { grid-template-columns: 1fr; } }
.card-list__item {
  display: block;
  background: var(--panel);
  padding: 30px 32px;
  transition: background .18s;
}
.card-list__item:hover { background: var(--panel-deep); }
.card-list__title { font-size: 20px; font-weight: 600; letter-spacing: -0.018em; color: var(--text); line-height: 1.35; }
.card-list__item .meta { margin-top: 8px; }
.card-list__item .link-go { display: inline-block; margin-top: 20px; }


/* 9. PAGE MODULES =========================================================== */

/* Hero */
.hero { padding: clamp(64px, 8vw, 96px) 0 clamp(56px, 6vw, 80px); }
.hero h1 { margin-top: 26px; max-width: 16ch; }
.hero .lede { margin-top: 32px; }
.hero .cluster { margin-top: 42px; }

/* Facts band — was a 3-up card grid, now hairline rows on a ruled band. */
.facts { padding: 0 0 clamp(56px, 6vw, 80px); border-bottom: 1px solid var(--rule); }
.facts .row { --row-cols: 200px minmax(0, 1fr); }
/* The lead fact carries a figure; it sat on its own line before and still does. */
.facts .row__val strong { display: block; margin-bottom: 3px; }

/* "Or start smaller" cross-sell */
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.next .card-list__title { margin-top: 0; }
@media (max-width: 720px) { .next { grid-template-columns: 1fr; justify-items: start; } }

/* Page head — service and case-study pages */
.page-head { padding: clamp(56px, 6vw, 76px) 0 0; }
.page-head .link-back { margin-bottom: 30px; }
.page-head h1 { margin-top: 22px; max-width: 18ch; }
.page-head .lede { margin-top: 30px; max-width: 58ch; }
.page-head .cluster { margin-top: 40px; }

/* Homepage sections that only need vertical rhythm. */
.logos { padding: 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
.cal-embed__inner { width: 100%; height: 100%; overflow: hidden; }
/* Ways-to-work rows are links, so they get the row-list hover. */
.way:hover { background: var(--panel); }
.way { transition: background .18s; padding-left: 18px; padding-right: 18px; margin-left: -18px; margin-right: -18px; }
.way .link-go { margin-top: 4px; }
.way .row__title { margin-top: 2px; }

/* Client logo strip — the boxed card is gone; the marks sit on a rule. */
.logo-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 26px 0 30px;
}
/* Label above, marks across the full width. Beside a fixed label column the
   marks wrapped to a ragged second row and the label floated between them. */
.logo-strip .eyebrow { display: block; margin-bottom: 22px; }
.logo-strip__marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 26px 20px;
  align-items: center;
  justify-items: center;
}
/* Pin the outer marks to the content edges so the row lines up with the
   label above it and with every other section; the rest space evenly. */
.logo-strip__marks > :first-child { justify-self: start; }
.logo-strip__marks > :last-child  { justify-self: end; }
.logo-strip__marks img { max-height: 28px; max-width: 100%; object-fit: contain; opacity: 0.62; transition: opacity .2s; }
.logo-strip__marks img:hover { opacity: 1; }
.logo-strip .is-white { filter: brightness(0) invert(1); }
@media (max-width: 760px) {
  .logo-strip__marks { gap: 22px 16px; }
  .logo-strip__marks img { max-height: 22px; }
}

/* Homepage case teasers — .case-teaser*, NOT .case*. Two different namespaces
   that used to collide on .cs-quote and .cs-note. */
.case-teaser {
  display: block;
  background: var(--panel);
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 44px);
  transition: background .18s;
}
.case-teaser:hover { background: var(--panel-deep); }
.case-teaser__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; margin-top: 18px; align-items: start; }
.case-teaser__part + .case-teaser__part { margin-top: 22px; }
.case-teaser__result { border-left: 1px solid var(--rule-2); padding-left: 38px; }
.case-teaser__quote + .link-go { display: inline-block; margin-top: 18px; }
.case-teaser__quote { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 16px; font-style: italic; color: var(--lead); }
.case-teaser__note { margin-top: 16px; font-size: 13px; color: var(--dim); }
@media (max-width: 900px) {
  .case-teaser__body { grid-template-columns: 1fr; gap: 28px; }
  .case-teaser__result { border-left: 0; border-top: 1px solid var(--rule-2); padding-left: 0; padding-top: 24px; }
}

/* Case study detail pages */
.case__band { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 30px 0; }
.case__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 760px) { .case__metrics { grid-template-columns: 1fr; gap: 26px; } }
.case__quote { max-width: 780px; margin: clamp(32px, 4vw, 48px) 0; }
.case__quote blockquote { font-size: clamp(20px, 2.6vw, 27px); line-height: 1.4; letter-spacing: -0.02em; color: var(--text); font-weight: 500; }
.case__quote cite, .case__quote figcaption { display: block; margin-top: 16px; font-style: normal; font-size: 14.5px; color: var(--dim); }
.case__quote .qmark { font-size: 44px; line-height: 1; color: var(--rule-2); margin-bottom: 6px; }

/* Case studies index */
.work-card {
  display: block;
  background: var(--panel);
  padding: 34px 36px;
  transition: background .18s;
}
.work-card:hover { background: var(--panel-deep); }
.work-card h2 { font-size: clamp(24px, 2.6vw, 31px); margin-top: 14px; }
.work-card__blurb { margin-top: 14px; font-size: 16.5px; line-height: 1.62; color: var(--body); max-width: 62ch; }
.work-card__stats { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 26px; }
.work-card + .work-card { margin-top: 2px; }   /* hairline of --bg, as elsewhere */
.work-card .link-go { display: inline-block; margin-top: 24px; }

/* Blog index */
.post-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.post-card__thumb { width: 160px; height: 100px; object-fit: cover; }
.post-card .chip + h2 { margin-top: 12px; }
.post-card h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; margin-top: 10px; }
.post-card h2 a:hover { color: var(--accent); }
.post-card__excerpt { margin-top: 9px; font-size: 16px; line-height: 1.6; color: var(--body); max-width: 62ch; }
@media (max-width: 760px) {
  .post-card { grid-template-columns: 1fr; gap: 14px; }
  .post-card__thumb { width: 100%; height: 180px; }
}

/* Articles */
.article__banner { margin: 0; max-height: 360px; overflow: hidden; }
.article__banner img { width: 100%; height: 360px; object-fit: cover; }
.article__head { padding: clamp(48px, 5vw, 68px) 0 0; }
.article__head h1 { margin-top: 20px; font-size: clamp(34px, 4.4vw, 54px); max-width: 22ch; }
.article__meta { margin-top: 24px; font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.article__meta > span + span { margin-left: 28px; }
.article__meta a { color: var(--body); border-bottom: 1px solid var(--rule-2); }
.article__meta a:hover { color: var(--text); }

.prose { padding: clamp(36px, 4vw, 52px) 0 clamp(56px, 6vw, 80px); font-size: 17px; line-height: 1.72; color: var(--body); }
/* The article body wraps its content in a shell, so spacing has to reach
   one level deeper than the direct children. */
.prose > * + *, .prose > .shell > * + * { margin-top: 22px; }
.prose h1 { color: var(--text); }
.prose h2 { margin-top: 52px; font-size: clamp(25px, 3vw, 32px); color: var(--text); }
.prose h3 { margin-top: 38px; font-size: 21px; letter-spacing: -0.018em; color: var(--text); }
.prose h2 + *, .prose h3 + * { margin-top: 16px; }
.prose > .shell > h2:first-child, .prose > .shell > *:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-left: 24px; }
.prose li + li { margin-top: 9px; }
.prose li::marker { color: var(--dim); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent-pale); }
.prose strong { color: var(--text); }
.prose blockquote { border-left: 2px solid var(--accent); background: var(--panel); padding: 18px 26px; color: var(--lead); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--panel); padding: 2px 6px; }
.prose img { margin: 32px 0; }
.prose .rows, .prose .panel, .prose .stats, .prose .tablewrap, .prose .faq { margin-top: 32px; }
.prose hr, .divider { border: 0; border-top: 1px solid var(--rule); margin: 44px 0; }

/* Tabular comparison blocks inside articles. These are genuinely 2-4 column
   grids with header cells, not key/value lists, so they keep a grid rather
   than collapsing into .rows. */
.datagrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.datagrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.datagrid__cell { background: var(--bg); padding: 20px 24px; font-size: 15px; line-height: 1.55; color: var(--body); }
.datagrid__cell--head { background: var(--panel); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--dim); }
.datagrid .is-strong { color: var(--text); font-weight: 600; }
@media (max-width: 600px) { .datagrid, .datagrid--4 { grid-template-columns: 1fr; } }

/* Row-structured comparison table (wrapper rows, so not a CSS grid). */
.rowtable { border: 1px solid var(--rule); }
.rowtable__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.rowtable__row:last-child { border-bottom: 0; }
.rowtable__cell { padding: 16px 20px; font-size: 15px; line-height: 1.55; color: var(--body); border-right: 1px solid var(--rule); }
.rowtable__cell:last-child { border-right: 0; }
.rowtable__row.is-highlit .rowtable__cell { background: var(--panel); color: var(--text); }
.is-highlit { background: var(--panel); }
.stats > .is-highlit { outline: 1px solid var(--rule-2); }
.rowtable__row--head .rowtable__cell { background: var(--panel); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--dim); }
@media (max-width: 600px) { .rowtable__row { grid-template-columns: 1fr; } .rowtable__cell { border-right: 0; } }

/* A marker whose glyph is real text in the markup, not a pseudo-element. */
.row__marker.is-literal::before { content: none; }


/* Auto-numbered rows — the numeral came from a CSS counter before, and still does. */
.rows--counted { counter-reset: rowcount; }
.rows--counted .row__num { counter-increment: rowcount; }
.rows--counted .row__num::before { content: counter(rowcount, decimal-leading-zero); }
.rows li { list-style: none; }

/* FAQ. New-template posts use <details>; the four legacy posts keep flat
   always-visible markup (.faq--flat) because collapsing content that is
   mirrored in FAQPage JSON-LD is a content change, not a style change. */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 20px 0;
  font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--dim); font-weight: 400; font-size: 21px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq__body { padding: 0 0 22px; font-size: 16.5px; line-height: 1.65; color: var(--body); max-width: 68ch; }
.faq__body > * + * { margin-top: 14px; }
.faq--flat .faq__item { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.faq--flat .faq__q { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.faq--flat .faq__a { margin-top: 10px; font-size: 16.5px; line-height: 1.65; color: var(--body); max-width: 68ch; }

/* Closing CTA band — was .final */
.cta-band { background: var(--panel-deep); padding: clamp(72px, 8vw, 104px) 0 clamp(64px, 7vw, 88px); }
.cta-band h2 { max-width: 18ch; }
.cta-band .lede { margin-top: 20px; max-width: 54ch; }
.cta-band .cluster { margin-top: 36px; }
/* In-article CTA */
.cta { background: var(--panel); padding: 34px 36px; }
.cta h3 { color: var(--text); font-size: 22px; }
.cta p { margin-top: 12px; font-size: 16.5px; line-height: 1.62; color: var(--body); max-width: 60ch; }
.cta .btn { margin-top: 24px; }

.contact-row {
  margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--rule);
  display: flex; gap: 40px; flex-wrap: wrap; font-size: 14.5px; color: var(--body);
}
.contact-row span::before { content: '\2192  '; color: var(--dim); }  /* not accent */
.contact-row a { border-bottom: 1px solid var(--rule-2); }
.contact-row a:hover { color: var(--text); border-color: var(--edge); }

.cal-embed { width: 100%; min-height: 620px; overflow: hidden; margin-top: 40px; background: var(--panel); }

.profile-photo { width: 100%; max-width: 320px; height: auto; }
.profile-photo + .bio { margin-top: 26px; }
.bio > * + * { margin-top: 16px; }
.bio p { font-size: 16.5px; line-height: 1.68; color: var(--body); max-width: 58ch; }

/* 404 */
.four-oh-four {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; text-align: center; padding: var(--pad);
}
.four-oh-four__code { font-size: clamp(64px, 12vw, 120px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--text); }
.four-oh-four h1 { font-size: clamp(19px, 3vw, 26px); font-weight: 500; color: var(--body); letter-spacing: -0.02em; margin-bottom: 14px; }
.four-oh-four__mark { position: fixed; right: 40px; bottom: 32px; font-size: 20px; color: var(--rule-2); }


/* 10. UTILITIES (closed list) =============================================== */

.u-tight    { max-width: 22ch; }
.u-mt-s     { margin-top: 14px; }
.u-mt       { margin-top: 24px; }
.u-mt-l     { margin-top: 40px; }
.u-mb       { margin-bottom: 24px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}