/* =============================================================================
   GENERATED — do not edit. Source: mockups/home-a.html <style> block.
   Regenerate with: pnpm mockup:extract

   This is the signed-off design contract, carried across as CSS rather than
   re-expressed as utility classes (D-1). Every value here was measured in a
   browser and reviewed. A change to this file that did not come from the
   mockup is a contract breach, and pnpm verify:contract will not catch it
   because the mockup would still hash correctly — so: do not edit.

   Imported UNLAYERED so it beats every Tailwind utility regardless of
   emission order (D-9). Two class names collide: container and prose.
   ========================================================================== */

/* ============================================================
   MOCKUP ONLY — throwaway. Tokens mirror docs/web/specs/brand.md
   ============================================================ */
:root{
  --pine-950:#071A13; --pine-900:#0B2A1E; --pine-800:#0F3B2A; --pine-700:#14503A;
  --pine-600:#1A6849; --pine-500:#248A61; --pine-400:#3EA97C; --pine-300:#6FC79E;
  --pine-200:#A5DEC2; --pine-100:#D3EFE0;
  --clay-900:#6B3717; --clay-800:#8A4820; --clay-700:#A65A28; --clay-600:#C26A2E;
  --clay-500:#D9813F; --clay-400:#E59B5F; --clay-300:#EFB98A; --clay-200:#F6D6BB;
  --clay-100:#FBEADC; --clay-50:#FDF5EE;
  --paper-50:#FBF9F6; --paper-100:#F4F1EC; --paper-200:#E7E2DA; --paper-300:#D6CFC4;
  --ink-950:#080B0A; --ink-900:#0C1211; --ink-800:#131A18; --ink-700:#1C2523;

  --bg:var(--paper-50); --bg-raised:#fff; --fg:var(--pine-950);
  --fg-muted:rgba(15,59,42,.72); --border:var(--paper-300);
  --brand:var(--pine-800); --brand-fg:var(--paper-50);
  --accent:var(--clay-700); --accent-fg:var(--paper-50); --ring:var(--clay-600);
  --ui-bg:var(--paper-100); --ui-line:var(--paper-200);

  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgb(11 42 30/.06);
  --shadow:0 2px 8px rgb(11 42 30/.08);
  --shadow-lg:0 12px 32px rgb(11 42 30/.12);
  --duration:250ms; --ease:cubic-bezier(.2,0,0,1);

  --display:clamp(2.5rem,1.6rem + 4.5vw,4.5rem);
  --h1:clamp(2rem,1.4rem + 3vw,3.25rem);
  --h2:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
  --h3:1.375rem;
  /* this is the gap BETWEEN sections as well as inside them, because two stacked
     sections each pay it in full. At 8rem that was 256px of empty paper between one
     idea and the next on a 1600px screen. 5.5rem lands the gap at 176px. */
  --sec-y:clamp(3.5rem,5.5vw,5.5rem);
  --container:72rem;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--ink-950); --bg-raised:var(--ink-900); --fg:var(--paper-100);
    --fg-muted:var(--paper-300); --border:var(--ink-700);
    --brand:var(--pine-400); --brand-fg:var(--ink-950);
    --accent:var(--clay-400); --accent-fg:var(--ink-950); --ring:var(--clay-400);
    --ui-bg:var(--ink-800); --ui-line:var(--ink-700);
  }
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
p,li,dd,figcaption,summary{text-wrap:pretty}
p{margin:0}
/* stop long unbroken strings (urls, $ figures, emails) forcing a horizontal scroll */
p,li,td,th,h1,h2,h3,h4,summary{overflow-wrap:break-word}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* the header is sticky at 68px, so an anchor jump used to land with the section's
   eyebrow and heading hidden underneath it. Every in-page nav link goes to one of
   these. */
section[id],div[id]{scroll-margin-top:84px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.prose{max-width:68ch}
.section{padding-block:var(--sec-y)}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px}
.display{font-family:var(--font-display);font-weight:600;font-size:var(--display)}
.h1{font-family:var(--font-display);font-weight:600;font-size:var(--h1)}
.h2{font-family:var(--font-display);font-weight:600;font-size:var(--h2)}
.h3{font-size:var(--h3);font-weight:600;letter-spacing:-.01em}
.lead{font-size:1.125rem;color:var(--fg-muted)}
.muted{color:var(--fg-muted)}
.sm{font-size:.875rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.9375rem;
  padding:13px 22px;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;
  transition:transform var(--duration) var(--ease),opacity var(--duration) var(--ease);cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-fg)}
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-onDark{background:transparent;color:var(--paper-100);border-color:rgba(251,249,246,.28)}
.btn-sm{padding:9px 16px;font-size:.875rem}

/* ---------- announcement ---------- */
.announce{background:var(--pine-900);color:var(--paper-100);font-size:.875rem}
.announce .container{display:flex;align-items:center;justify-content:center;gap:16px;
  padding-block:10px;position:relative}
.announce a{color:var(--clay-300);text-underline-offset:3px}
.announce button{position:absolute;right:24px;background:none;border:0;color:rgba(251,249,246,.6);
  font-size:1.1rem;line-height:1;cursor:pointer;padding:4px}
/* the button is absolute, so once the sentence wraps it ran straight underneath and a
   tap on the end of "Ask for a review" dismissed the bar instead of following the link.
   The reserve has to be SYMMETRIC — padding only on the right would keep them apart but
   shift the centred text left of the bar, which is worse than the collision it fixes. */
@media (max-width:560px){
  .announce .container{padding-inline:46px;text-align:center}
  .announce button{right:14px;top:50%;transform:translateY(-50%)}
}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:32px;height:68px}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:1.375rem;letter-spacing:-.03em;
  text-decoration:none}
.wordmark span{color:var(--accent)}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:.9375rem;
  margin-inline-start:auto}
/* nowrap or the bar fails silently: the ul has no flex-wrap, so when the row is
   squeezed the links wrap INSIDE their own li instead, and a 68px bar quietly
   becomes 72px of three-line text rather than overflowing where you'd see it */
.nav ul a{text-decoration:none;color:var(--fg-muted);white-space:nowrap}
.nav ul a:hover{color:var(--fg)}
/* mobile navigation — below 900px the link list is replaced, not just hidden */
.menu-btn{display:none;background:none;border:1px solid var(--border);color:var(--fg);
  width:38px;height:38px;border-radius:var(--radius);cursor:pointer;flex:none;
  align-items:center;justify-content:center;padding:0}
.mobile-nav{border-top:1px solid var(--border);background:var(--bg-raised);
  max-height:calc(100dvh - 68px);overflow-y:auto}
.mobile-nav .container{display:grid;gap:2px;padding-block:12px 18px}
.mobile-nav a{text-decoration:none;color:var(--fg);font-size:1.0625rem;padding:12px 4px;
  border-bottom:1px solid var(--border)}
.mobile-nav a:last-child{border-bottom:0;margin-top:12px;justify-self:start;color:var(--accent-fg)}
/* 1000, not 900. "Who we serve" is a wider label than the "Insights" placeholder it
   replaced, and seven links plus the wordmark, the theme toggle and the CTA stopped
   fitting one row at ~980. The hamburger already carries every link, so it takes over
   earlier rather than the desktop bar degrading. */
@media (max-width:1000px){
  .nav ul{display:none}
  .menu-btn{display:inline-flex}
  .cta-desktop{display:none}
  /* the auto margin that pushes everything right lives on the ul, and the ul is
     display:none here, so it took the alignment with it and the two buttons collapsed
     against the wordmark. Hand the auto margin to the first item that stays. */
  .nav .theme-btn{margin-inline-start:auto}
  /* and 32px is the wordmark-to-links gap, not a gap for two adjacent icon buttons */
  .nav{gap:10px}
}
@media (min-width:1001px){.mobile-nav{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.5rem,7vw,6.5rem) clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:48px}}
.hero h1{margin-bottom:24px;max-width:14ch}
.hero .lead{max-width:52ch;margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.trust{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--fg-muted);
  padding-top:24px;border-top:1px solid var(--border);max-width:44ch}
.trust svg{flex:none;color:var(--brand)}

/* hero deck — the three promises at equal weight, nothing leads (§8.3) */
.hero-deck h1{font-size:clamp(2.25rem,1.35rem + 3.9vw,3.75rem);max-width:18ch;margin-bottom:20px}
.hero-deck h1 em{font-style:normal;color:var(--accent)}
.hero-deck .lead{max-width:50ch;margin-bottom:26px}
/* the mockup is a guest in the leftover space, not half the hero — it sits in the
   narrow right column and its bottom aligns with the buttons, so the top row's
   height is still set by the text and the deck stays where option 3 put it */
.hero-deck .hero-grid{grid-template-columns:minmax(0,1fr) clamp(300px,31vw,404px);
  gap:clamp(32px,4.5vw,64px);align-items:start}
.hero-deck .composition{padding:0;justify-self:end;width:100%;max-width:404px}
.hero-deck .site-bar{padding:11px 14px}
.hero-deck .site-url{font-size:.6875rem;padding:3px 10px;margin-left:10px}
.hero-deck .dot{width:8px;height:8px}

/* ---- product tour inside the mockup ----------------------------------------
   Decorative only. Every screen is locked to the same height so the hero can
   never jump, and the three deck columns stay static — nothing that has to be
   read is behind a timer. Stops on hover/focus, stops for good once a dot is
   clicked, and never starts under prefers-reduced-motion.                     */
.scr-wrap{position:relative;height:308px;overflow:hidden}
.scr{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s}
.scr.on{opacity:1;visibility:visible}
.scr-pane{padding:18px;display:flex;flex-direction:column;gap:11px;height:100%}
.scr-t{font-size:.8125rem;font-weight:600}
.scr-s{font-size:.6875rem;color:var(--fg-muted);margin-top:3px}

/* the events screen is a flex column so the photo absorbs the leftover height.
   2:1 is its preferred size, but flex-shrink + min-height:0 let it give way rather
   than push the second row past the 308px window (it did, by ~20px, at full width). */
.scr-ev{display:flex;flex-direction:column;height:100%}
.shot{position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--pine-900);
  flex:0 1 auto;min-height:0}
.shot img{width:100%;height:100%;object-fit:cover}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,26,19,.1),rgba(7,26,19,.82))}
.shot .cap{position:absolute;left:16px;right:16px;bottom:13px;z-index:2;color:var(--paper-50)}
.shot .k{font-family:var(--font-display);font-size:.9375rem;font-weight:600}
.shot .s{font-size:.6875rem;color:rgba(251,249,246,.82);margin-top:3px}
.erows{padding:12px 16px 14px;display:grid;gap:8px;flex:none}
.erow{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  border:1px solid var(--border);border-radius:7px;padding:8px 11px}
.erow .d{font-size:.5625rem;font-weight:600;color:var(--clay-800);background:var(--clay-100);
  border-radius:4px;padding:4px 6px;line-height:1.2;text-align:center}
.erow .t{font-size:.75rem;font-weight:500}
.erow .p{font-size:.6875rem;font-weight:600;color:var(--brand)}

.therm{height:8px;border-radius:99px;background:var(--paper-200);overflow:hidden}
.therm i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--pine-600),var(--pine-400))}
.thermlab{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--fg-muted)}
.thermlab b{color:var(--fg);font-weight:600}
/* NOT .chips — that name is taken by the managed-service chip row further down, and
   because it is defined later at the same specificity its display:flex was winning,
   so these never got equal widths. */
.amt-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.amt-row span{display:flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 10px;font-size:.75rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  border:1px solid var(--border);border-radius:7px;color:var(--fg-muted)}
.amt-row span.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.optrow{display:flex;align-items:center;gap:10px;font-size:.6875rem;color:var(--fg-muted)}
.sw{width:27px;height:16px;border-radius:99px;background:var(--pine-600);position:relative;flex:none}
.sw::after{content:"";position:absolute;top:2px;right:2px;width:12px;height:12px;
  border-radius:50%;background:#fff}
.tick{width:15px;height:15px;border-radius:4px;background:var(--pine-600);color:#fff;
  font-size:.5625rem;display:grid;place-items:center;flex:none}
.pbtn{margin-top:auto;text-align:center;font-size:.8125rem;font-weight:600;
  background:var(--accent);color:var(--accent-fg);padding:12px;border-radius:7px}

.mcard{display:flex;gap:13px;align-items:center;background:var(--pine-800);
  color:var(--paper-50);border-radius:9px;padding:14px 15px}
.mcard .ml{font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pine-200)}
.mcard .mn{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;margin:3px 0}
.mcard .mt{font-size:.6875rem;color:rgba(251,249,246,.72)}
.mcard .qr{flex:none;background:#fff;border-radius:5px;padding:4px;line-height:0;margin-left:auto}
.mrow{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;
  border-bottom:1px dashed var(--border);padding-bottom:9px}
.mrow .ok{font-size:.5625rem;font-weight:600;color:var(--pine-700);background:var(--pine-100);
  border-radius:99px;padding:3px 9px}
.mbadge{margin-top:auto;font-size:.6875rem;color:var(--brand);background:var(--pine-100);
  border-radius:6px;padding:10px 12px;text-align:center;font-weight:500}

.scr-dots{display:flex;gap:7px;justify-content:center;padding:11px 0 13px;
  border-top:1px solid var(--border)}
/* the bar stays 3px. The ::after is the finger. A 3px-tall button is not tappable on
   a phone, and growing the bar itself would turn a hairline indicator into a control. */
.scr-dot::after{content:"";position:absolute;left:-3px;right:-3px;top:-14px;bottom:-14px}
.scr-dot{position:relative;width:22px;height:3px;border-radius:99px;background:var(--paper-300);border:0;
  padding:0;cursor:pointer;
  transition:background var(--duration) var(--ease),width var(--duration) var(--ease)}
.scr-dot.on{background:var(--accent);width:34px}
/* :not(.on) matters. This selector is (0,3,0) and `.scr-dot.on` is only (0,2,0), so
   without it the dark rule repaints the active dot grey and nothing looks selected. */
:root[data-theme="dark"] .therm,
:root[data-theme="dark"] .scr-dot:not(.on){background:var(--ink-700)}
:root[data-theme="dark"] .erow .d{background:rgba(194,106,46,.18);color:var(--clay-300)}
:root[data-theme="dark"] .mrow .ok{background:rgba(62,169,124,.16);color:var(--pine-300)}
:root[data-theme="dark"] .mbadge{background:rgba(62,169,124,.12)}
@media (max-width:980px){
  .hero-deck .hero-grid{grid-template-columns:1fr;gap:36px;align-items:start}
  /* max-width:none once it stops being the right-hand column. The 404px cap is sized
     for that column, and keeping it here left up to 551px of empty paper beside the
     device at tablet widths. The screen window is a fixed 308px, so it widens
     without pushing anything out of frame. */
  .hero-deck .composition{justify-self:start;max-width:none}
}
.deck-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(34px,4.4vw,54px);border-top:1px solid var(--border)}
.deck-col{padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,30px);
  border-inline-end:1px solid var(--border)}
.deck-col:last-child{border-inline-end:0}
.deck-col:first-child{padding-inline-start:0}
.deck-col .n{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  color:var(--accent);display:block;margin-bottom:14px}
.deck-col h3{font-family:var(--font-display);font-weight:600;font-size:1.375rem;
  letter-spacing:-.02em;margin-bottom:10px}
.deck-col p{font-size:.9375rem;color:var(--fg-muted)}
@media (max-width:860px){
  .deck-cols{grid-template-columns:1fr}
  .deck-col{border-inline-end:0;border-bottom:1px solid var(--border);padding-inline:0}
  .deck-col:last-child{border-bottom:0}
}
/* centred: the deck above it is a full-width ruled band, so a centred closing line
   reads as the band's footer rather than as a fourth column starting on the left */
.deck-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:6px 20px;text-align:center;margin-top:clamp(20px,2.4vw,28px);
  padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--border);
  font-size:.875rem;color:var(--fg-muted)}
.deck-foot b{font-weight:500;color:var(--fg)}
/* hairline divider between the two halves, and it disappears when they wrap */
.deck-foot span + span::before{content:"";display:inline-block;width:1px;height:.9em;
  margin-right:20px;vertical-align:-.08em;background:var(--border)}
/* 820, not 680. The two halves stop fitting on one line at 819, so between 680 and
   819 the divider was left dangling at the start of the wrapped line. */
@media (max-width:819px){.deck-foot span + span::before{display:none}}

/* hero composition — NO dashboard (§8.4) */
.composition{position:relative;padding:8px}
.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow)}
.site-preview{overflow:hidden}
.site-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--border);
  align-items:center}
.dot{width:9px;height:9px;border-radius:var(--radius-full);background:var(--paper-300)}
/* real traffic lights. Grey circles read as a placeholder, colour reads as a window. */
.site-bar .dot:nth-child(1){background:#ff5f57}
.site-bar .dot:nth-child(2){background:#febc2e}
.site-bar .dot:nth-child(3){background:#28c840}
.site-url{margin-left:10px;font-size:.6875rem;color:var(--fg-muted);background:var(--paper-100);
  padding:3px 10px;border-radius:var(--radius-full)}

/* ---------- audience strip ---------- */
/* the hero answers "what is this". The next question a board member has is "is it
   for us", and it should be answerable without reading a section. Ruled cells, not
   a scrolling marquee: nothing moves and nothing sits off-screen waiting its turn.
   Four across, not eight — eight cells of this label length need about 1500px and
   the container gives 1104, so a single row would wrap every other cell. */
.aud-strip{border-top:1px solid var(--border);background:var(--bg-raised)}
.aud{display:grid;grid-template-columns:repeat(4,1fr)}
.aud span{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:15px 18px;border-inline-start:1px solid var(--border);
  font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-muted)}
.aud span:nth-child(4n+1){border-inline-start:0}
.aud span:nth-child(n+5){border-top:1px solid var(--border)}
/* the first cell is the label the other seven are examples of, so it carries the
   band rather than sitting in it */
.aud span:first-child{background:var(--brand);color:var(--brand-fg);font-weight:600}
@media (max-width:760px){
  .aud{grid-template-columns:repeat(2,1fr)}
  .aud span:nth-child(4n+1){border-inline-start:1px solid var(--border)}
  .aud span:nth-child(odd){border-inline-start:0}
  .aud span:nth-child(n+3){border-top:1px solid var(--border)}
}

/* ---------- problem ---------- */
/* its border-top doubles as the audience strip's bottom edge, so the strip above
   deliberately carries no bottom border of its own */
.problem{border-top:1px solid var(--border)}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,5vw,72px)}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
/* no sticky here. Pinning the short column only moves the emptiness down the page,
   it never fills it, and the hole is visible on first paint before any scrolling. */
.prob-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.prob-list li{padding:18px 0;border-bottom:1px solid var(--border);display:grid;
  grid-template-columns:auto 1fr;gap:16px;align-items:start}
.prob-list li:first-child{padding-top:0}
.prob-list .n{font-family:var(--font-display);font-size:.8125rem;color:var(--accent);
  padding-top:2px;font-weight:600}
.prob-list .why{display:block;font-size:.75rem;color:var(--fg-muted);margin-top:4px}
/* full-width band across both columns. The band spans edge to edge but the line
   length is capped, otherwise the text runs to ~95 characters and stops being read. */
blockquote{grid-column:1/-1;margin:0;padding:clamp(28px,3vw,38px) clamp(28px,3.4vw,44px);
  border-left:3px solid var(--accent);background:var(--clay-50);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--font-display);font-size:clamp(1.25rem,1.05rem + .7vw,1.5rem);
  line-height:1.4;letter-spacing:-.015em}
blockquote p{max-width:60ch}

/* what the six problems add up to — the sum the list implies but never says */
.tally{margin-top:28px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg-raised);overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr)}
.tally .cap{grid-column:1/-1;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-muted);padding:13px 18px;
  border-bottom:1px solid var(--border)}
.tally .fig{padding:18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
/* nth-child, NOT of-type. All five children are divs, so `.fig:last-of-type` matched
   nothing (the last div is `.one`) and the rule never applied. Children are
   1 cap · 2-4 fig · 5 one. */
.tally .fig:nth-child(4){border-right:0}
.tally b{display:block;font-family:var(--font-display);font-size:2.125rem;font-weight:600;
  line-height:1;color:var(--brand)}
.tally .fig span{display:block;font-size:.75rem;color:var(--fg-muted);margin-top:7px}
/* pine tint, not clay: the quote below is the clay panel, and two clay panels in
   one section read as the same object repeated */
.tally .one{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;padding:18px;
  background:rgba(15,59,42,.055)}
.tally .one b{color:var(--brand)}
.tally .one span{font-size:.9375rem;color:var(--fg);font-weight:500}
/* three stats do not divide by two, so the third used to sit alone and leave a
   bordered empty box beside it. It spans instead, which matches the `.one` row under
   it. (The old `:nth-of-type(2)` here hit the FIRST stat, since `.cap` is div one.) */
@media (max-width:420px){
  .tally{grid-template-columns:1fr 1fr}
  .tally .fig:nth-child(3){border-right:0}
  .tally .fig:nth-child(4){grid-column:1/-1}
}
:root[data-theme="dark"] .tally .one{background:rgba(255,255,255,.045)}

/* ---------- the larger job ------------------------------------------------
   Sits after the problem section on purpose. It is the biggest claim on the
   page, and stated before the reader has agreed there's a problem it reads as
   a brochure. Deliberately reuses the hero deck's ruled-column shape rather
   than the .split above it, so two consecutive sections don't share a skeleton.
   No bottom border: the platform section's own border-top closes the band.
   -------------------------------------------------------------------------- */
.lj{background:var(--bg-raised);border-top:1px solid var(--border)}
.lj-hd{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,4.6vw,64px);
  align-items:start}
.lj-hd h2{max-width:18ch}
.lj-hd h2 em{font-style:normal;color:var(--accent)}
.lj-def{padding-left:28px;border-left:2px solid var(--accent);font-size:1.0625rem;
  color:var(--fg-muted);max-width:50ch}
/* the category sentence. It's the only place on the page that says what the company
   IS rather than what it does, so it gets its own line and the full-strength ink */
.lj-def b{display:block;color:var(--fg);font-weight:600;margin-bottom:10px}
@media (max-width:900px){
  .lj-hd{grid-template-columns:1fr;gap:28px}
  .lj-hd h2{max-width:none}
}
.lj-path{display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(40px,4.6vw,58px);border-top:1px solid var(--border)}
.lj-c{padding:clamp(24px,2.6vw,32px) clamp(20px,2.4vw,32px) 0;
  border-inline-end:1px solid var(--border)}
.lj-c:last-child{border-inline-end:0}
.lj-c:first-child{padding-inline-start:0}
.lj-n{display:block;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;color:var(--accent);margin-bottom:14px}
.lj-c h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;
  letter-spacing:-.02em;margin-bottom:10px}
.lj-c p{font-size:.9375rem;color:var(--fg-muted)}
@media (max-width:860px){
  .lj-path{grid-template-columns:1fr}
  .lj-c{border-inline-end:0;border-bottom:1px solid var(--border);padding-inline:0;
    padding-bottom:26px}
  .lj-c:last-child{border-bottom:0;padding-bottom:0}
}

/* ---------- platform bento ------------------------------------------------
   Unequal tiles: size carries the hierarchy, so the site and the events tile
   make the argument before anyone reads. Every visual in here is the product
   itself, which is why this section carries no photography except the event
   header — it stopped competing with the hero mockup for the same job.
   -------------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:48px}
.bento .t{background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:clamp(20px,2.2vw,26px);display:flex;
  flex-direction:column;gap:14px;
  transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}
.bento .t:hover{border-color:var(--fg-muted);box-shadow:var(--shadow)}
.bento .t h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.01em}
.bento .t p{font-size:.875rem;color:var(--fg-muted)}
.bento .t .k{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.b-site{grid-column:span 4}
.b-evt{grid-column:span 2;grid-row:span 2}
.b-don,.b-mem{grid-column:span 2}
.b-form,.b-news{grid-column:span 3}
.b-site h3{font-family:var(--font-display);font-size:1.5rem}
.b-site .lay{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,28px);flex:1}
.b-site .lay > div:first-child{align-self:center}
/* the two tall tiles stretch their panel instead of letting it float, so the
   leftover height in a spanned row lands inside the mockup rather than under it */
.b-site .pnl,.b-evt .pnl{flex:1;display:flex;flex-direction:column}
.b-site .st-hero{flex:1;align-content:center}
.b-evt .pnl-hd,.b-evt .pnl-ft{flex:none}
.b-evt .tk-row{flex:1 0 auto}
@media (max-width:1000px){
  /* align-items:start because the desktop bento is hand-placed and the two-column
     fallback is not. Stretching left 54px inside the Members tile and up to 87px
     inside News, which inside a bordered card reads as a rendering fault. Uneven
     card bottoms do not. */
  .bento{align-items:start}
  .b-site,.b-evt,.b-don,.b-mem,.b-form,.b-news{grid-column:span 3;grid-row:auto}
  .b-site .lay{grid-template-columns:1fr}
}
@media (max-width:680px){
  .bento{grid-template-columns:1fr}
  .b-site,.b-evt,.b-don,.b-mem,.b-form,.b-news{grid-column:1/-1}
}

/* ---- the product screens inside the tiles --------------------------------
   One panel system: 13px padding, 9px gutter, hairline dividers. Every row is
   a 1fr/auto grid so labels start on one line and prices end on one line,
   whatever the label length.
   -------------------------------------------------------------------------- */
.pnl{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);
  overflow:hidden}
.pnl-b{padding:13px;display:grid;gap:9px}
.pnl-hd{position:relative;aspect-ratio:16/6;background:var(--pine-900)}
.pnl-hd img{width:100%;height:100%;object-fit:cover}
.pnl-hd::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,26,19,.15),rgba(7,26,19,.85))}
.pnl-hd .cap{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;color:var(--paper-50)}
/* the second selector is load-bearing. `.bento .t .k` is (0,3,0) and beats a bare
   `.pnl-hd .k`, so inside a tile the event caption came out as the mono clay eyebrow
   over the photo instead of paper serif. The same markup in the hero was always
   right, because it sits outside `.bento`. */
.pnl-hd .k,.bento .t .pnl-hd .k{font-family:var(--font-display);font-size:.875rem;
  font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--paper-50)}
.pnl-hd .s{font-size:.5625rem;color:rgba(251,249,246,.8);margin-top:3px}
.pnl-tb{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;
  padding:10px 13px;border-bottom:1px solid var(--ui-line);background:var(--ui-bg)}
.pnl-tb b{font-size:.5625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-muted)}
.pnl-ft{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;
  padding:12px 13px;border-top:1px solid var(--ui-line);background:var(--ui-bg)}
.pnl-ft .lb{font-size:.5625rem;color:var(--fg-muted);letter-spacing:.06em;text-transform:uppercase}
.pnl-ft .tot{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:2px}
/* .pnl-note, not .note — .note is already the pricing section's footer row */
.pnl-note{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;
  padding:10px 13px;border-top:1px solid var(--ui-line);background:var(--ui-bg);
  font-size:.5625rem;color:var(--fg-muted)}
.pnl-note i,.fm-ck i{width:13px;height:13px;border-radius:3px;background:var(--brand);
  color:var(--brand-fg);display:grid;place-items:center;font-style:normal;font-size:.5rem}
.pnl-note i{border-radius:99px}
.go{background:var(--accent);color:var(--accent-fg);border-radius:7px;text-align:center;
  font-size:.6875rem;font-weight:600;padding:9px 15px}
.mini{display:flex;justify-content:space-between;gap:10px;font-size:.5625rem;color:var(--fg-muted)}
.tag{font-size:.5rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  border-radius:99px;padding:3px 8px;background:var(--ui-bg);color:var(--fg-muted);
  border:1px solid var(--ui-line);white-space:nowrap}

/* ticket picker */
.tk-row{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;
  padding:11px 13px;border-top:1px solid var(--ui-line)}
.tk-row .nm{font-size:.75rem;font-weight:500}
.tk-row .mt{font-size:.5625rem;color:var(--fg-muted);margin-top:3px}
.tk-row .rt{display:grid;justify-items:end;gap:6px}
.tk-row .pr{font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}
.tk-row.off .nm,.tk-row.off .mt{color:var(--fg-muted)}
.tk-step{display:grid;grid-template-columns:22px 24px 22px;align-items:center;
  border:1px solid var(--ui-line);border-radius:99px;overflow:hidden}
.tk-step i{height:21px;display:grid;place-items:center;font-style:normal;font-size:.6875rem;
  color:var(--fg-muted);background:var(--ui-bg)}
.tk-step b{text-align:center;font-size:.625rem;font-weight:600;font-variant-numeric:tabular-nums}

/* the website screen */
.ui-bar{display:flex;align-items:center;gap:5px;padding:10px 13px;
  border-bottom:1px solid var(--ui-line)}
.ui-bar i{width:7px;height:7px;border-radius:99px;flex:none}
.ui-bar i:nth-child(1){background:#ff5f57}
.ui-bar i:nth-child(2){background:#febc2e}
.ui-bar i:nth-child(3){background:#28c840}
.ui-bar span{margin-inline-start:9px;font-family:var(--font-mono);font-size:.5625rem;
  color:var(--fg-muted);background:var(--ui-bg);border-radius:99px;padding:2px 9px}
.st-nav{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;
  padding:9px 13px;border-bottom:1px solid var(--ui-line)}
.st-nav .wm{font-family:var(--font-display);font-size:.75rem;font-weight:600;letter-spacing:-.02em}
.st-nav .lk{display:flex;gap:9px;justify-content:flex-end;font-size:.5625rem;color:var(--fg-muted)}
.st-nav .lk b{font-weight:600;color:var(--fg)}
.st-hero{padding:15px 13px;display:grid;gap:9px;background:var(--ui-bg)}
.st-hero .hl{font-family:var(--font-display);font-size:.9375rem;font-weight:600;line-height:1.25}
.st-hero .sb{font-size:.5625rem;color:var(--fg-muted)}
.st-hero .cta{display:flex;gap:6px;margin-top:2px}
.st-hero .cta span{font-size:.5625rem;font-weight:600;border-radius:5px;padding:5px 10px}
.st-hero .cta span:first-child{background:var(--accent);color:var(--accent-fg)}
.st-hero .cta span:last-child{border:1px solid var(--ui-line);color:var(--fg-muted)}
.st-stat{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ui-line)}
.st-stat div{padding:9px 13px;border-inline-end:1px solid var(--ui-line)}
.st-stat div:last-child{border-inline-end:0}
.st-stat b{display:block;font-family:var(--font-display);font-size:.875rem;font-weight:600;
  font-variant-numeric:tabular-nums}
.st-stat em{font-style:normal;font-size:.5rem;color:var(--fg-muted)}
.st-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:11px 13px 13px;
  border-top:1px solid var(--ui-line)}
.st-tiles div{border:1px solid var(--ui-line);border-radius:6px;padding:7px;display:grid;gap:5px}
.st-tiles i{display:block;height:22px;border-radius:4px;background:var(--ui-bg);
  border:1px solid var(--ui-line)}
.st-tiles em{font-style:normal;font-size:.5rem;font-weight:500;color:var(--fg-muted)}

/* the giving screen */
.ui-fig{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ui-fig b{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  font-variant-numeric:tabular-nums}
.ui-fig span{font-size:.625rem;color:var(--fg-muted)}
.ui-therm{height:7px;border-radius:99px;background:var(--ui-line);overflow:hidden}
.ui-therm i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--pine-600),var(--pine-400))}
.ui-amts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ui-amts span{display:flex;align-items:center;justify-content:center;min-height:29px;
  font-size:.6875rem;font-weight:600;font-variant-numeric:tabular-nums;
  border:1px solid var(--ui-line);border-radius:6px;color:var(--fg-muted);background:var(--ui-bg)}
.ui-amts span.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

/* the membership screen */
.ui-mcard{background:var(--pine-800);color:var(--paper-100);border-radius:9px;padding:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.ui-mcard .l{font-family:var(--font-display);font-size:.8125rem;font-weight:600}
.ui-mcard .s{font-size:.5625rem;color:rgba(251,249,246,.72);margin-top:3px}
.ui-mcard svg{width:34px;height:34px;border-radius:4px;flex:none}
.ui-mrow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.6875rem;
  border:1px solid var(--ui-line);border-radius:7px;padding:6px 10px;background:var(--ui-bg)}
.ui-mrow em{font-style:normal;font-size:.5625rem;font-weight:600;color:var(--pine-600)}
:root[data-theme="dark"] .ui-mrow em{color:var(--pine-300)}

/* the form screen */
.fm{padding:13px;display:grid;gap:9px}
.fm-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fm-f{border:1px solid var(--ui-line);border-radius:7px;padding:7px 10px;background:var(--ui-bg)}
.fm-f b{display:block;font-size:.5rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fg-muted);margin-bottom:5px}
.fm-f span{display:block;font-size:.6875rem}
.fm-f span.ph{color:var(--fg-muted)}
.fm-f.sel{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:end}
.fm-f.sel b{grid-column:1/-1}
.fm-f.sel i{font-style:normal;font-size:.5rem;color:var(--fg-muted)}
.fm-ck{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;
  font-size:.5625rem;color:var(--fg-muted)}

/* the news and search screen */
.nw{padding:13px;display:grid;gap:10px}
.nw-hit{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;
  padding-bottom:9px;border-bottom:1px solid var(--ui-line)}
.nw-hit:last-child{border-bottom:0;padding-bottom:0}
.nw-hit b{font-size:.6875rem;font-weight:600}
.nw-hit span{display:block;font-size:.5625rem;color:var(--fg-muted);margin-top:3px}
.nw-hit time{font-size:.5625rem;color:var(--fg-muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ui-search{display:flex;align-items:center;gap:7px;background:var(--ui-bg);
  border:1px solid var(--ui-line);border-radius:99px;padding:6px 12px;font-size:.6875rem;
  color:var(--fg-muted)}
.ui-search::before{content:"";width:9px;height:9px;flex:none;border-radius:99px;
  border:1.5px solid currentColor;box-shadow:2px 2px 0 -.5px currentColor;opacity:.7}

/* ---------- who we serve --------------------------------------------------
   A warm band carrying one bordered panel divided into six, rather than ruled
   rows on open paper. The tint is the same clay-50 the problem section's
   pull-quote already uses, so the page isn't learning a new colour for it, and
   the white panel on top of it separates this section from the plain ones on
   either side without needing a heading to do that work.
   -------------------------------------------------------------------------- */
/* the band itself stays plain paper. It was clay, and clay runs straight into the
   pine-900 managed-service section below with no step between warm-light and
   cold-dark. The white panel already separates this section from the plain ones
   either side, so the tint was doing a job that was already done. The page's one
   warm band lives on the AI section instead, where nothing saturated touches it. */
.who{border-top:1px solid var(--border)}
.who-hd{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,4vw,56px);align-items:end}
.who-hd .lead{max-width:48ch}
@media (max-width:900px){.who-hd{grid-template-columns:1fr;gap:22px;align-items:start}}

/* one object with internal hairlines, so the six read as a set rather than six
   things that happen to be near each other */
.who-list{display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(32px,3.8vw,44px);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-raised)}
.who-c{min-height:190px;padding:26px;border-inline-end:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.who-c:nth-child(3n){border-inline-end:0}
.who-c:nth-last-child(-n+3){border-bottom:0}
/* 22px, not 12: the label sits at the top of a tall cell and the heading needs to
   read as the cell's own first line rather than as a subtitle of the label */
.who-k{display:block;margin-bottom:22px;font-family:var(--font-mono);font-size:.625rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.who-c h3{font-family:var(--font-display);font-size:1.3125rem;font-weight:600;
  letter-spacing:-.015em}
.who-c p{margin-top:9px;font-size:.9375rem;color:var(--fg-muted)}
/* the last cell is the reader's own organization, so it reads as the answer to the
   five before it rather than as a sixth example */
.who-c.you h3{color:var(--accent)}
@media (max-width:980px){
  .who-list{grid-template-columns:repeat(2,1fr)}
  .who-c,.who-c:nth-child(3n){border-inline-end:1px solid var(--border);
    border-bottom:1px solid var(--border)}
  .who-c:nth-child(2n){border-inline-end:0}
  .who-c:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:680px){
  .who-list{grid-template-columns:1fr}
  .who-c,.who-c:nth-child(2n),.who-c:nth-child(3n){border-inline-end:0;
    border-bottom:1px solid var(--border)}
  .who-c:last-child{border-bottom:0}
}

/* ---------- managed service ---------- */
.dark{background:var(--pine-900);color:var(--paper-100)}
.dark .muted,.dark .lead{color:rgba(251,249,246,.72)}
.dark .eyebrow{color:var(--clay-300)}
/* padding-inline-start:0 because `list-style:none` on the li removes the marker but
   NOT the ol's default 40px gutter, which pushed every step right of the section. */
.steps{counter-reset:s;display:grid;gap:0;margin-top:44px;padding-inline-start:0}
.steps li{list-style:none;counter-increment:s;display:grid;grid-template-columns:auto 1fr;
  gap:20px;padding:20px 0;border-top:1px solid rgba(251,249,246,.14);align-items:baseline}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-display);
  font-size:.875rem;color:var(--clay-300);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{font-size:.8125rem;padding:8px 14px;border:1px solid rgba(251,249,246,.2);
  border-radius:var(--radius-full);color:rgba(251,249,246,.86)}
/* the chips are all well-phrased requests, which quietly implies you have to arrive
   with one. This is the answer for the reader who doesn't know what to call it. */
.svc-ask{margin-top:26px;padding-top:22px;border-top:1px solid rgba(251,249,246,.14);
  font-size:.9375rem;color:rgba(251,249,246,.72);max-width:46ch}

/* ---------- staff tools (events.md E6 · admin-portal.md A2-A4) ---------- */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media (max-width:960px){.tools{grid-template-columns:1fr;max-width:460px}}
.tool{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-raised);
  overflow:hidden;display:flex;flex-direction:column}
.tool .stage{background:var(--ui-bg);border-bottom:1px solid var(--border);
  padding:26px 20px 22px;display:grid;place-items:center}
.tool .b{padding:20px 22px 24px}
.tool h3{font-size:1.0625rem;margin-bottom:8px}
.tool p{font-size:.9375rem;color:var(--fg-muted)}

/* ---- one phone frame for all three, so the row lines up and it is obvious
   these happen on a phone in your building, not at a desk ---- */
.dev{width:208px;padding:7px;border-radius:26px;background:var(--pine-950);
  box-shadow:0 14px 30px rgb(11 42 30/.22);position:relative}
/* the speaker used to be an absolutely-positioned bar on the frame at top:12px,
   which landed straight on top of the status-bar text. It belongs in the status
   bar's own middle column, the way a real phone splits the row around it. */
/* Fixed height so the three phones are identical, and measured rather than
   guessed: the payment screen is the tallest at ~250px of body, which needs
   384 once the 26px status bar, 45px header and 51px footer are paid for.
   At 368 both the door and payment bodies overflowed and got clipped. */
.dev-scr{border-radius:20px;background:var(--bg-raised);overflow:hidden;height:384px;
  display:flex;flex-direction:column;margin-bottom:10px}
.dev-sb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 14px 5px;
  font-size:.5rem;font-weight:600;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.dev-sb .isl{width:46px;height:13px;border-radius:99px;background:var(--pine-950)}
.dev-sb u{display:flex;gap:3px;justify-content:flex-end;text-decoration:none}
.dev-sb u i{width:4px;height:4px;border-radius:99px;background:var(--fg-muted);opacity:.55}
.dev-hd{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;
  padding:6px 14px 9px;border-bottom:1px solid var(--ui-line)}
.dev-hd .bk{font-size:.75rem;color:var(--fg-muted);line-height:1}
.dev-hd b{display:block;font-size:.75rem;font-weight:600;line-height:1.25}
.dev-hd .sub{display:block;font-size:.5rem;color:var(--fg-muted);margin-top:1px}
/* overflow:hidden is the safety net — flex:1 with min-height:0 cannot grow, so
   without it any content that outgrows the box spills over the footer */
.dev-bd{flex:1;padding:12px;display:grid;gap:9px;align-content:start;min-height:0;
  overflow:hidden}
.dev-ft{padding:8px 12px 10px;border-top:1px solid var(--ui-line);background:var(--ui-bg)}
.dev-scr .go{font-size:.625rem;padding:8px}
.dev::after{content:"";position:absolute;bottom:11px;left:50%;transform:translateX(-50%);
  width:66px;height:3px;border-radius:99px;background:rgba(251,249,246,.3)}

/* ---- screen 1 · door check-in.
   A QR reader frames a square and locks the corners. The old horizontal sweep
   line is what a laser barcode scanner does, which is why it read as one. ---- */
.vfq{position:relative;aspect-ratio:1;width:100%;max-width:156px;margin-inline:auto;
  border-radius:12px;background:var(--pine-950);overflow:hidden;display:grid;place-items:center}
.vfq::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%,rgba(62,169,124,.22),transparent 62%)}
.vfq i{position:absolute;width:22px;height:22px;border:2px solid var(--pine-300);z-index:2}
.vfq i:nth-of-type(1){top:13px;left:13px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.vfq i:nth-of-type(2){top:13px;right:13px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.vfq i:nth-of-type(3){bottom:13px;left:13px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.vfq i:nth-of-type(4){bottom:13px;right:13px;border-left:0;border-top:0;border-radius:0 0 5px 0}
/* no caption pill inside the square. It sat at bottom:11px and the bottom two
   corner brackets start at 13px, so the two overlapped. */
.vfq svg{width:54%;border-radius:3px;transform:rotate(-4deg);z-index:2;
  box-shadow:0 6px 18px rgb(0 0 0/.45)}
.sc-ok{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;
  border:1px solid var(--pine-300);background:var(--pine-100);border-radius:9px;padding:9px 11px}
.sc-ok i{width:19px;height:19px;border-radius:50%;background:var(--pine-600);color:#fff;
  display:grid;place-items:center;font-size:.625rem;font-style:normal}
.sc-ok b{display:block;font-size:.75rem;color:var(--pine-950)}
.sc-ok s{display:block;font-size:.5625rem;color:var(--pine-700);text-decoration:none;margin-top:1px}
/* two columns, not three. Dot + label + right-aligned value needed 208px of a
   170px column, so the two strings collided. Value goes on its own line. */
.sc-prev{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;
  font-size:.5625rem;color:var(--fg-muted)}
.sc-prev i{width:6px;height:6px;border-radius:99px;background:var(--clay-500)}
.sc-prev b{font-weight:500;color:var(--fg)}
.sc-tot{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;
  font-size:.5625rem;color:var(--fg-muted)}
.sc-tot b{font-weight:600;color:var(--fg)}
.sc-tot .tag{font-size:.4375rem;padding:2px 7px}

/* ---- screen 2 · looking someone up ---- */
.lu-hd{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;
  padding-bottom:9px;border-bottom:1px solid var(--ui-line)}
.lu-hd .av{width:30px;height:30px;border-radius:50%;background:var(--pine-800);
  color:var(--paper-50);display:grid;place-items:center;font-size:.625rem;font-weight:600}
.lu-hd b{display:block;font-size:.75rem}
.lu-hd span{display:block;font-size:.5rem;color:var(--fg-muted);margin-top:1px}
.lu-row{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:baseline;
  font-size:.625rem}
.lu-row .dt{font-family:var(--font-mono);font-size:.5rem;color:var(--fg-muted)}
.lu-row .v{font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums}

/* ---- screen 3 · money that arrives in person ---- */
/* line-height:1.1 on the figure, not the inherited 1.6 — at 28px that alone was
   14px of dead space and the screen was already 20px over */
.pay-amt{text-align:center;padding:2px 0}
.pay-amt span{display:block;font-size:.5rem;line-height:1.4;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-muted)}
.pay-amt b{display:block;font-family:var(--font-display);font-size:1.75rem;font-weight:600;
  line-height:1.1;font-variant-numeric:tabular-nums;margin-top:4px}
.pay-amt em{display:block;font-style:normal;font-size:.5rem;line-height:1.4;
  color:var(--fg-muted);margin-top:5px}
.pay-m{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pay-m span{text-align:center;font-size:.5625rem;font-weight:500;padding:6px 0;
  border:1px solid var(--ui-line);border-radius:6px;color:var(--fg-muted);background:var(--ui-bg)}
.pay-m span.on{background:var(--pine-800);border-color:var(--pine-800);color:var(--paper-50)}
.pay-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.pay-pad span{display:grid;place-items:center;height:26px;border-radius:6px;
  font-size:.75rem;font-weight:500;background:var(--ui-bg);border:1px solid var(--ui-line)}
.pay-pad span.fn{color:var(--fg-muted);font-size:.625rem}

:root[data-theme="dark"] .sc-ok{background:rgba(62,169,124,.14);border-color:var(--pine-600)}
:root[data-theme="dark"] .sc-ok b{color:var(--paper-100)}
:root[data-theme="dark"] .sc-ok s{color:var(--pine-300)}

/* ---------- comparison ---------- */
/* eight flat rows of the same weight read as one grey block. Nothing to skim, and the
   argument only lands if you read all sixteen cells. Now grouped into three ideas with
   a label rail carrying the reason each group matters, two real column headers instead
   of uppercase micro-type, and a summary row at the foot for the part people weigh. */
.cmp{width:100%;border-collapse:collapse;margin-top:44px;font-size:.9375rem;table-layout:fixed;
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.cmp th,.cmp td{text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}

/* the rail. Fixed width so the two compared columns stay equal to each other. */
.cmp-rail{width:23%;padding:22px 26px;background:var(--bg);border-right:1px solid var(--border)}
.cmp tbody .cmp-rail b,.cmp tfoot .cmp-rail b{display:block;font-family:var(--font-mono);
  font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px}
.cmp tbody .cmp-rail span{display:block;font-size:.8125rem;line-height:1.5;font-weight:400;
  color:var(--fg-muted)}

.cmp thead th{padding:20px 26px 22px;font-size:1rem;font-weight:600;color:var(--fg);
  background:var(--bg)}
.cmp thead th span{display:block;margin-top:5px;font-size:.8125rem;font-weight:400;
  color:var(--fg-muted)}
.cmp thead .cmp-them{color:var(--fg-muted)}
/* our column is the answer, so it gets the raised band and the accent header */
.cmp thead .cmp-us{color:var(--accent);background:var(--clay-50)}
:root[data-theme="dark"] .cmp thead .cmp-us{background:rgba(194,106,46,.1)}

.cmp td{padding:15px 26px 15px 50px;position:relative}
.cmp-them{color:var(--fg-muted)}
.cmp-us{background:var(--bg-raised);border-left:1px solid var(--border);font-weight:500}
/* td., and tbody-scoped: the marks must not leak onto the header cells or the summary */
.cmp tbody td::before{position:absolute;left:24px;top:14px;font-size:.875rem;line-height:1.5}
.cmp tbody td.cmp-them::before{content:"\00d7";color:var(--clay-600);font-weight:600}
.cmp tbody td.cmp-us::before{content:"\2713";color:var(--brand);font-weight:700}
.cmp tbody tr:hover .cmp-them{background:var(--bg-raised)}

.cmp tfoot td{padding:20px 26px;padding-left:26px;font-size:.875rem;border-bottom:0}
.cmp tfoot .cmp-rail{border-bottom:0}

@media (max-width:820px){
  .cmp,.cmp tbody,.cmp tfoot,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp{border:0;margin-top:32px}
  .cmp tr{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;
    overflow:hidden}
  .cmp .cmp-rail{border-right:0;border-bottom:1px solid var(--border);padding:14px 16px}
  .cmp td{border-bottom:0;padding:12px 16px 12px 40px}
  .cmp td.cmp-us{border-left:0;border-top:1px solid var(--border)}
  .cmp tbody td::before{left:16px;top:11px}
  .cmp tfoot td{padding:14px 16px}
  /* the column headings are hidden here and the ×/✓ marks are tbody-only, so without
     these the summary card was two near-identical sentences with nothing saying
     which one is them and which one is us. */
  .cmp tfoot td::before{display:block;margin-bottom:5px;font-family:var(--font-mono);
    font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
  .cmp tfoot td.cmp-them::before{content:"Buying software"}
  .cmp tfoot td.cmp-us::before{content:"Working with us";color:var(--accent)}
}

/* ---------- ownership ---------- */
/* fixed 4 across so twelve items resolve to three full rows. auto-fill gave five per
   row at container width, leaving a single stranded chip on row three. */
.own-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
@media (max-width:900px){.own-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.own-grid{grid-template-columns:1fr}}
.own{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--border);
  border-radius:var(--radius);font-size:.9375rem;background:var(--bg-raised)}
.own svg{flex:none;color:var(--brand)}
.note{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:760px){.note{grid-template-columns:1fr;gap:16px}}

/* ---------- migration ---------- */
.redir{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);
  margin-top:8px;overflow:hidden}
.redir div{display:flex;gap:12px;align-items:center;padding:12px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.6875rem;
  color:var(--fg-muted)}
.redir div:last-child{border-bottom:0}
.redir b{color:var(--accent);font-weight:500}
/* two, not three — inside the right column of a .split, three columns left each
   item about 190px and every label wrapped */
.mig-cols{columns:2;column-gap:36px;margin-top:24px;padding-inline-start:0}
@media (max-width:520px){.mig-cols{columns:1}}
.mig-cols li{break-inside:avoid;list-style:none;padding:10px 0 10px 22px;position:relative;
  font-size:.9375rem;border-bottom:1px solid var(--border)}
.mig-cols li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:2px;
  background:var(--accent)}
/* the CTA used to sit at the foot of the left column, which made that column taller
   than the list beside it and left the bottom-right corner empty. Centred under both
   columns instead, so the two end together and the button reads as the section's. */
.mig-cta{margin-top:clamp(36px,4vw,52px);padding-top:clamp(28px,3vw,36px);
  border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;
  gap:18px;text-align:center}
.mig-cta p{font-size:.9375rem;color:var(--fg-muted);max-width:56ch}

/* ---------- work ---------- */
.demo-note{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--clay-800);background:var(--clay-100);
  padding:6px 12px;border-radius:var(--radius-full)}
/* six cards on `auto-fit minmax(240px,1fr)` resolved to four columns, so the last row
   held two cards and two empty cells — that was the hole in the bottom right. And the
   thumbnails were stock photos of strangers, which the niche research explicitly rules
   out. Replaced by four real organizations from `docs/web/research/competitive-and-
   niche-notes.md`, described by shape rather than by name, two by two so it can't gap. */
.work-hd{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;margin-bottom:44px}
.work-hd .demo-note{margin-top:14px}
.work-hd p.lead{margin-top:14px;max-width:60ch}
@media (max-width:860px){.work-hd{grid-template-columns:1fr;align-items:start;gap:20px}}

.sit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.sit{grid-template-columns:1fr}}
.sit-c{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-raised);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}
.sit-c:hover{border-color:var(--fg-muted);box-shadow:var(--shadow)}
.sit-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--border);background:var(--bg)}
.sit-hd h3{font-family:var(--font-display);font-size:1.125rem;font-weight:600}
.sit-hd h3 span{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:400;
  letter-spacing:0;color:var(--fg-muted);margin-top:4px}
.sit-run{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
.sit-run::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--clay-600)}
.sit-bd{padding:18px 22px 20px;display:grid;gap:14px;align-content:start;flex:1}
.sit-k{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:9px}
/* NOT .chips — that name is taken by the managed-service chip row */
.sit-tools{display:flex;flex-wrap:wrap;gap:7px}
.sit-tools span{font-size:.75rem;color:var(--fg-muted);background:var(--ui-bg);
  border:1px solid var(--border);border-radius:99px;padding:4px 11px}
.sit-cost{font-size:.875rem;color:var(--fg)}
/* margin-top:auto so the outcome band sits on the floor of the card whatever the
   chips above it wrap to, and all four cards line up along the bottom */
.sit-ft{margin-top:auto;padding:16px 22px 18px;border-top:1px solid var(--border);
  background:var(--ui-bg);display:grid;grid-template-columns:auto 1fr;gap:11px;
  align-items:start;font-size:.875rem;font-weight:500}
.sit-ft::before{content:"\2192";color:var(--brand);font-weight:700;line-height:1.5}
:root[data-theme="dark"] .sit-ft::before{color:var(--pine-300)}
.sit-cta{margin-top:22px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg-raised);padding:24px 28px;display:flex;flex-wrap:wrap;gap:20px;
  align-items:center;justify-content:space-between}
/* the platform bento already shows these five as product screens. This is the same
   set in the words a board uses when it asks for one, which is how a request
   actually arrives. One ruled row, so the repetition costs the page almost nothing
   and the work section gains the range the four situations don't cover. */
.blt{margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--border)}
.blt-k{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.blt-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.blt-c{padding-inline:clamp(14px,1.7vw,24px);border-inline-start:1px solid var(--border)}
.blt-c:first-child{border-inline-start:0;padding-inline-start:0}
.blt-c:last-child{padding-inline-end:0}
.blt-c b{display:block;font-size:.9375rem;font-weight:600;margin-bottom:7px}
.blt-c span{display:block;font-size:.8125rem;line-height:1.5;color:var(--fg-muted)}
@media (max-width:960px){
  .blt-grid{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .blt-c:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .blt-c:last-child{padding-inline-end:clamp(14px,1.7vw,24px)}
}
@media (max-width:560px){
  .blt-grid{grid-template-columns:1fr;row-gap:20px}
  .blt-c,.blt-c:last-child{border-inline-start:0;padding-inline:0}
}
.sit-cta b{font-family:var(--font-display);font-size:1.125rem;font-weight:600;display:block}
.sit-cta p{font-size:.875rem;color:var(--fg-muted);margin-top:5px;max-width:58ch}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media (max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;
  background:var(--bg-raised);display:flex;flex-direction:column}
.tier.feature{border-color:var(--accent);box-shadow:var(--shadow)}
.tier .name{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:6px}
.tier .from{font-size:.75rem;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.1em}
.tier .price{font-family:var(--font-display);font-size:2.5rem;font-weight:600;margin:6px 0 2px}
.tier .per{font-size:.875rem;color:var(--fg-muted);margin-bottom:18px}
.tier p{font-size:.9375rem;color:var(--fg-muted);flex:1;margin-bottom:20px}
.tier .noed{font-size:.8125rem;font-weight:500;color:var(--accent);padding-top:14px;
  border-top:1px solid var(--border);margin-bottom:20px;display:flex;gap:8px;align-items:center}
.impl{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:28px 32px;
  border:1px solid var(--border);border-radius:var(--radius-lg)}
@media (max-width:760px){.impl{grid-template-columns:1fr}}
.impl .amt2{font-family:var(--font-display);font-size:1.5rem;font-weight:600}
/* full-row band. This was one paragraph carrying `.prose`, so `max-width:68ch`
   stopped it at about 60% of the row and left the rest empty. Unpinning it alone
   would give a ~110-character line, so it splits into the two ideas it was
   already making: what moves the price, and what we refuse to promise.
   Ruled columns, same shape as the hero deck. */
.depends{margin-top:32px;padding-top:30px;border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:0;font-size:.875rem;color:var(--fg-muted)}
.depends > div{padding-inline:clamp(28px,3.4vw,52px)}
.depends > div:first-child{padding-inline-start:0;border-inline-end:1px solid var(--border)}
.depends > div:last-child{padding-inline-end:0}
@media (max-width:760px){
  .depends{grid-template-columns:1fr;gap:30px}
  .depends > div{padding-inline:0}
  .depends > div:first-child{border-inline-end:0;border-bottom:1px solid var(--border);
    padding-bottom:30px}
}
.dep-k{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.depends ul{list-style:none;margin:0;padding:0}
.depends li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--border);color:var(--fg)}
.depends li:last-child{border-bottom:0;padding-bottom:0}
.depends li i{font-style:normal;font-family:var(--font-mono);font-size:.625rem;
  color:var(--fg-muted)}
.depends p + p{margin-top:14px}
.depends b{color:var(--fg);font-weight:500}

/* ---------- process ---------- */
/* ---------- process — one rail, six stations, and a band for the reader's own part ----- */
/* it was three across in two rows, six identical boxes of grey prose with nothing to
   catch a skimming eye. All six columns fit on one rail once the copy is cut to a
   single line each, and the two things a board actually wants to know (how long, and
   what it costs them in time) get their own type instead of hiding inside sentences. */
.jrn-hd{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.jrn-tot{max-width:27ch;padding-left:28px;border-left:2px solid var(--accent);
  font-size:.9375rem;color:var(--fg-muted)}
.jrn-tot b{display:block;font-family:var(--font-display);font-size:1.375rem;font-weight:600;
  color:var(--fg);margin-bottom:4px}
@media (max-width:900px){
  .jrn-hd{grid-template-columns:1fr;gap:26px;align-items:start}
  .jrn-tot{max-width:none}
}

/* zero column gap on purpose: each cell's own top border is the rail, so the six
   borders have to meet. The breathing room comes from padding-inline-end instead. */
.jrn-grid{display:grid;grid-template-columns:repeat(6,1fr);margin-top:64px}
.jrn-c{position:relative;padding:30px 26px 0 0;border-top:2px solid var(--border)}
/* the last step never ends, so its stretch of rail doesn't either */
.jrn-c:last-child{border-top-style:dashed;border-top-color:var(--accent)}
.jrn-n{position:absolute;top:-13px;left:0;width:26px;height:26px;border-radius:99px;
  border:2px solid var(--border);background:var(--bg);display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.625rem;font-weight:600;color:var(--fg-muted)}
.jrn-c:last-child .jrn-n{border-color:var(--accent);color:var(--accent)}
.jrn-c h3{font-size:1.0625rem;margin-bottom:5px}
/* .jrn-c .jrn-w, not .jrn-w. The week label is a <p>, so the (0,1,1) `.jrn-c p` rule
   below would otherwise repaint it grey at body size. */
.jrn-c .jrn-w{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.jrn-c p{font-size:.8125rem;line-height:1.55;color:var(--fg-muted)}

.jrn-you{margin-top:48px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg-raised);overflow:hidden}
.jrn-you-hd{display:flex;justify-content:space-between;gap:20px;padding:13px 20px;
  border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.625rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.jrn-you-hd span{font-family:var(--font-body);font-size:.8125rem;letter-spacing:0;
  text-transform:none;color:var(--fg-muted)}
/* same track count as the rail above at every width, so a column always sits under
   the step it belongs to */
.jrn-you-row{display:grid;grid-template-columns:repeat(6,1fr)}
.jrn-you-c{padding:16px 20px 18px;border-left:1px solid var(--border);display:grid;gap:7px;
  align-content:start}
.jrn-you-c:first-child{border-left:0}
.jrn-you-c i{font-family:var(--font-mono);font-style:normal;font-size:.625rem;
  letter-spacing:.1em;color:var(--fg-muted)}
.jrn-you-c b{font-weight:500;font-size:.875rem;color:var(--fg)}
.jrn-you-c.none b{color:var(--brand)}
:root[data-theme="dark"] .jrn-you-c.none b{color:var(--pine-300)}

@media (max-width:1080px){
  .jrn-grid,.jrn-you-row{grid-template-columns:repeat(3,1fr)}
  .jrn-grid{row-gap:40px}
  .jrn-c p{font-size:.875rem}
  .jrn-you-c:nth-child(3n+1){border-left:0}
  .jrn-you-c:nth-child(n+4){border-top:1px solid var(--border)}
}
@media (max-width:700px){
  .jrn-grid,.jrn-you-row{grid-template-columns:repeat(2,1fr)}
  .jrn-you-c:nth-child(3n+1){border-left:1px solid var(--border)}
  .jrn-you-c:nth-child(odd){border-left:0}
  .jrn-you-c:nth-child(n+3){border-top:1px solid var(--border)}
}
@media (max-width:480px){
  .jrn-grid,.jrn-you-row{grid-template-columns:1fr}
  /* space-between put a wrapping mono label next to a wrapping sentence and neither
     had room. Stacked, each gets the full width. */
  .jrn-you-hd{flex-direction:column;gap:5px}
  .jrn-c{padding-right:0}
  .jrn-you-c,.jrn-you-c:nth-child(3n+1){border-left:0}
  .jrn-you-c:nth-child(n+2){border-top:1px solid var(--border)}
}

/* ---------- AI and custom engineering -------------------------------------
   The page's one warm band. It needs fencing off — the whole page promises a
   board they never think about technology, and a large AI block in the same
   plain paper as the core offer reads as the upsell arriving mid-sentence. It
   was pine-900, which gave the page two dark bands and stopped the dark closing
   run from reading as an ending. Clay does the same fencing job without
   competing with the managed-service section or the contact block.
   Nothing saturated touches it: plain paper above, plain paper below.
   -------------------------------------------------------------------------- */
.ai{background:var(--clay-50);border-block:1px solid var(--clay-200)}
:root[data-theme="dark"] .ai{background:rgba(194,106,46,.07);
  border-color:rgba(229,155,95,.2)}
.ai-hd{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.4vw,64px);
  align-items:start}
.ai-hd h2{max-width:20ch}
@media (max-width:900px){
  .ai-hd{grid-template-columns:1fr;gap:24px}
  .ai-hd h2{max-width:none}
}
.ai-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
  font-size:.875rem;color:var(--fg-muted)}
.ai-note strong{color:var(--fg);font-weight:600}

/* one object divided by hairlines rather than four floating cards — .sit already
   spends the 2x2-of-separate-cards shape on the work section */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(40px,4.4vw,56px);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg-raised)}
.ai-c{padding:clamp(24px,2.6vw,32px)}
.ai-c:nth-child(even){border-inline-start:1px solid var(--border)}
.ai-c:nth-child(n+3){border-top:1px solid var(--border)}
.ai-k{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:13px}
.ai-c h3{font-family:var(--font-display);font-size:1.1875rem;font-weight:600;
  letter-spacing:-.015em;margin-bottom:10px}
.ai-c > p{font-size:.9375rem;color:var(--fg-muted);margin-bottom:18px}
.ai-c ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ai-c li{position:relative;padding-left:19px;font-size:.8125rem;line-height:1.5;
  color:var(--fg-muted)}
.ai-c li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:1px;
  background:var(--accent)}
@media (max-width:760px){
  .ai-grid{grid-template-columns:1fr}
  .ai-c:nth-child(even){border-inline-start:0}
  .ai-c:nth-child(n+2){border-top:1px solid var(--border)}
}

/* the part a board actually weighs, so it sits outside the card object */
.ai-rules{display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(32px,3.6vw,44px);border-top:1px solid var(--border)}
.ai-rule{padding:24px clamp(18px,2.2vw,30px) 0;
  border-inline-start:1px solid var(--border)}
.ai-rule:first-child{border-inline-start:0;padding-inline-start:0}
.ai-rule:last-child{padding-inline-end:0}
.ai-rule b{display:block;font-weight:600;font-size:.9375rem;color:var(--fg);
  margin-bottom:7px}
.ai-rule span{display:block;font-size:.8125rem;line-height:1.5;color:var(--fg-muted)}
@media (max-width:820px){
  .ai-rules{grid-template-columns:1fr;row-gap:22px}
  .ai-rule,.ai-rule:last-child{border-inline-start:0;padding-inline:0}
  .ai-rule:nth-child(n+2){padding-top:22px;border-top:1px solid var(--border)}
}

/* ---------- faq — category rail ----------------------------------------
   Thirty questions in six groups. Two columns of grouped accordions could
   not hold them evenly: five unequal groups auto-placed into two columns
   left the last one alone in its row and stretched the short one, which is
   a content-shape problem no amount of CSS tuning fixes. A rail shows one
   group at a time, so group length stops being a layout constraint at all
   and the section stays the same height whichever category is open.
   ---------------------------------------------------------------------- */
.fa{display:grid;grid-template-columns:264px 1fr;border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-raised);
  margin-top:clamp(28px,3.4vw,40px)}
/* spans every row so the rail still runs full height in the no-script state,
   where all six panels are stacked in the second column instead of one */
.fa-rail{grid-row:1/-1;background:var(--bg);border-inline-end:1px solid var(--border)}
.fa-tab{display:block;width:100%;text-align:left;position:relative;font:inherit;
  font-size:.9375rem;font-weight:500;cursor:pointer;color:var(--fg-muted);
  background:none;border:0;border-bottom:1px solid var(--border);
  padding:15px 36px 15px 22px}
.fa-tab:last-child{border-bottom:0}
/* pinned, not floated. "Moving what you already have" already sits within a few
   pixels of its count at 264px, and a float would let a longer label run under
   the number instead of wrapping clear of it. */
.fa-tab .c{position:absolute;right:14px;top:18px;font-family:var(--font-mono);
  font-size:.6875rem;color:var(--fg-muted);opacity:.7}
.fa-tab[aria-selected="true"]{background:var(--bg-raised);color:var(--fg)}
/* an accent bar, not a background wash: the open tab has to read as physically
   continuous with the panel it opened. The 1px overhang covers the tab's own
   top and bottom hairlines so the bar reads as one unbroken edge. */
.fa-tab[aria-selected="true"]::before{content:"";position:absolute;left:0;top:-1px;
  bottom:-1px;width:3px;background:var(--accent)}
.fa-panel{padding:6px clamp(24px,3vw,38px) 22px}
.fa-panel[hidden]{display:none}
.fa-panel details:last-child{border-bottom:0}
/* the group heading only earns its place without script, where six panels are
   stacked and nothing else names them. With script the selected tab does. */
.fa-panel > h3{margin:14px 0 0;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  padding-bottom:10px;border-bottom:2px solid var(--accent)}
.fa.js .fa-panel > h3{display:none}
@media (max-width:820px){
  .fa{grid-template-columns:1fr}
  .fa-rail{grid-row:auto;display:grid;grid-template-columns:1fr 1fr;
    border-inline-end:0;border-bottom:1px solid var(--border)}
  .fa-tab{border-bottom:1px solid var(--border);font-size:.875rem;padding:13px 14px}
  .fa-tab:nth-child(odd){border-inline-end:1px solid var(--border)}
  .fa-tab:nth-last-child(-n+2){border-bottom:0}
  .fa-tab .c{display:none}
}
details{border-bottom:1px solid var(--border)}
summary{cursor:pointer;padding:16px 40px 16px 0;font-weight:500;font-size:.9375rem;
  list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.25rem;
  color:var(--accent);font-weight:400;line-height:1}
details[open] summary::after{content:"–"}
details .a{padding:0 40px 18px 0;color:var(--fg-muted);font-size:.875rem}

/* ---------- final -------------------------------------------------------
   Two columns. The heading, the paragraph and the buttons used to run down
   the left 500px and leave roughly 600 by 300 of empty pine beside them.
   What goes in that space is not decoration: the thing that actually stops
   a board member pressing the button is not knowing what pressing it commits
   them to, so the right column answers exactly that and nothing else.
   ------------------------------------------------------------------------ */
.final{background:var(--pine-800);color:var(--paper-100)}
.fin-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,64px);
  align-items:start}
.final .h2{max-width:20ch;margin-bottom:20px}
.final p{color:rgba(251,249,246,.78);max-width:58ch;margin-bottom:32px}
.final .btn-primary{background:var(--clay-500);color:var(--pine-950)}

/* the hero's .trust is styled for paper, so the dark band needs its own. It is
   here to carry the second objection (what am I locked into) beside the buttons,
   and it also brings the left column close to the panel's height so neither side
   ends in a hole. */
.fin-trust{display:flex;gap:11px;margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(251,249,246,.14);font-size:.875rem;
  color:rgba(251,249,246,.72)}
/* the cap belongs on the text, not the row: putting it on the flex container
   stopped the rule at 348px, which reads as an arbitrary line rather than the
   structural edge of the column */
.fin-trust span{max-width:46ch}
.fin-trust svg{flex:none;margin-top:3px;color:var(--clay-300)}

/* raised off the pine rather than outlined on it: at this size an outline-only
   card reads as a disabled field, and the panel has to look like something you
   are being given, not something you have to fill in */
.fin-next{background:rgba(251,249,246,.05);border:1px solid rgba(251,249,246,.14);
  border-radius:var(--radius-lg);padding:clamp(24px,2.6vw,30px)}
.fin-k{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay-300);margin-bottom:18px}
.fin-step{display:grid;grid-template-columns:auto 1fr;gap:0 15px;padding-block:15px;
  border-top:1px solid rgba(251,249,246,.14)}
.fin-step:first-of-type{border-top:0;padding-top:0}
.fin-step .n{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;color:var(--clay-300);padding-top:3px}
.fin-step b{font-weight:600;font-size:.9375rem}
/* :not(.n) is load-bearing. The number is a span too, so a bare `.fin-step span`
   forced it into column 2 as well, which pushed the heading down into column 1
   and turned an 88px row into 148px. The .n rule below has higher specificity
   but never sets grid-column, so it could not undo it. */
.fin-step span:not(.n){grid-column:2;margin-top:5px;font-size:.875rem;line-height:1.55;
  color:rgba(251,249,246,.72)}
/* a div, not a p: .final p already carries a 58ch cap and a 32px bottom margin
   for the intro paragraph, and inheriting those here would misalign the panel */
.fin-foot{margin-top:18px;padding-top:16px;border-top:1px solid rgba(251,249,246,.14);
  font-size:.875rem;color:rgba(251,249,246,.72)}
.fin-foot b{color:var(--paper-100);font-weight:600}
@media (max-width:900px){
  .fin-grid{grid-template-columns:1fr;gap:38px}
  .final p{margin-bottom:28px}
}

/* ---------- footer ---------- */
footer{background:var(--pine-950);color:rgba(251,249,246,.7);font-size:.875rem;
  padding-block:64px 40px}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
/* the brand block spans both tracks so the FOUR link groups fall as two even rows.
   Five blocks in two columns stranded Legal next to an empty cell, and squeezed the
   brand paragraph into half a column beside four short links. */
@media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr;gap:28px}
  .f-grid > :first-child{grid-column:1/-1}}
footer h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--paper-100);
  margin-bottom:14px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{text-decoration:none;color:rgba(251,249,246,.7)}
footer a:hover{color:var(--paper-50)}
.f-word{font-family:var(--font-display);font-size:1.375rem;font-weight:600;letter-spacing:-.03em;
  color:var(--paper-50);margin-bottom:14px}
.f-word span{color:var(--clay-400)}
/* the tagline. Its first sentence is the one that matters, so it carries the
   brighter paper colour and the second drops back to the footer's body grey. */
.f-tag{max-width:34ch;color:rgba(251,249,246,.6)}
.f-tag b{display:block;color:var(--paper-100);font-weight:400;margin-bottom:4px}
.f-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(251,249,246,.12);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.8125rem}

/* ---- explicit theme control: beats prefers-color-scheme in BOTH directions ---- */
.theme-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  width:34px;height:34px;cursor:pointer;color:var(--fg);display:grid;place-items:center;flex:none}
:root[data-theme="light"]{
  --bg:var(--paper-50); --bg-raised:#fff; --fg:var(--pine-950);
  --fg-muted:rgba(15,59,42,.72); --border:var(--paper-300);
  --brand:var(--pine-800); --brand-fg:var(--paper-50);
  --accent:var(--clay-700); --accent-fg:var(--paper-50); --ring:var(--clay-600);
  --ui-bg:var(--paper-100); --ui-line:var(--paper-200);
}
:root[data-theme="light"] .site-url{background:var(--paper-100)}
:root[data-theme="light"] blockquote{background:var(--clay-50)}
:root[data-theme="light"] .demo-note{background:var(--clay-100);color:var(--clay-800)}
:root[data-theme="dark"]{
  --bg:var(--ink-950); --bg-raised:var(--ink-900); --fg:var(--paper-100);
  --fg-muted:var(--paper-300); --border:var(--ink-700);
  --brand:var(--pine-400); --brand-fg:var(--ink-950);
  --accent:var(--clay-400); --accent-fg:var(--ink-950); --ring:var(--clay-400);
  --ui-bg:var(--ink-800); --ui-line:var(--ink-700);
}
:root[data-theme="dark"] .site-url{background:var(--ink-800)}
:root[data-theme="dark"] blockquote{background:rgba(194,106,46,.08)}
:root[data-theme="dark"] .demo-note{background:rgba(194,106,46,.16);color:var(--clay-300)}