/* ==========================================================================
   AutomateSmall — spec v2. "The owner's desk".
   Single committed light theme: paper is the identity.
   No all-caps labels anywhere (B3). No accent but brick on buttons,
   ledger on links. Status never by colour alone.
   ========================================================================== */

:root{
  color-scheme: light;

  /* B2 tokens */
  --paper:            #F7F5EE;
  --paper-deep:       #EDE8DC;
  --card:             #FFFFFF;
  --ink:              #26282B;
  --ink-soft:         #5A5D61;
  --ledger:           #2F5D48;
  --brick:            #A9472A;
  --sticky:           #F3D46B;
  --ballpoint:        #2E4A8B;
  --status-attention: #B3261E;
  --status-due:       #9A6700;
  --line:             #DDD6C7;

  --zed: #E31937;   /* ZEDVentures brand red. Only ever used to mark the
                       parent-company relationship. Never decorative. */

  /* Derived, kept in the same warm family */
  --brick-deep:   #8E3A21;
  --ledger-tint:  #E7EFE9;
  --brick-tint:   #F6EBE6;
  --sticky-tint:  #FBF3D6;
  --line-soft:    #E9E3D6;
  --ink-faint:    #6E7175;

  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hand:    "Kalam", "Bradley Hand", cursive;

  --shadow-panel: 0 20px 46px -26px rgba(38,40,43,.40);
  --shadow-slip:  0 2px 5px -3px rgba(38,40,43,.34);
  --r-slip: 8px;
  --r-card: 14px;
  --r-panel: 16px;

  --gutter: clamp(20px, 5vw, 32px);
  /* Sections had at most 28px above and below, so a change of subject had
     nothing but a flat colour switch to announce it and the boundary read as
     a rectangle edge. Space does most of the separating; the sheet shadow
     below is the finish on top of it, not a substitute for it. */
  --sec-pad: clamp(34px, 4vw, 62px);
}

*,*::before,*::after{ box-sizing:border-box; }
/* The hidden attribute must beat any author display rule. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
@media (min-width:760px){ body{ font-size:18px; } }
body.is-locked{ overflow:hidden; }

img,svg{ max-width:100%; }

/* ---------- Type (B3). Sentence case throughout; no all-caps. ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; }
h1{ font-size:clamp(38px,5.6vw,60px); line-height:1.1;  letter-spacing:-.01em; }
h2{ font-size:clamp(30px,3.9vw,44px); line-height:1.15; letter-spacing:-.01em; }
h3{ font-size:clamp(21px,2.1vw,25px); line-height:1.25; font-weight:600; }
h4{ font-size:18px; line-height:1.3; font-weight:600; }
p{ margin:0; }

.prose{ max-width:min(680px,68ch); }
.prose p + p{ margin-top:1em; }
.lede{ font-size:clamp(18px,1.9vw,21px); line-height:1.55; color:var(--ink-soft); max-width:min(680px,68ch); }
.small{ font-size:15px; line-height:1.5; color:var(--ink-soft); }

/* Eyebrow: sentence case, ink-soft, 15-16px/600. Used sparingly. */
.eyebrow{ font-size:16px; font-weight:600; color:var(--ink-soft); margin:0 0 12px; }

.hand{ font-family:var(--hand); font-weight:400; }
/* Placeholders must wrap: a long [legal entity name ...] with nowrap sets a
   huge min-content width and drags its grid column past the viewport. */
.tofill{ background:var(--sticky-tint); box-shadow:inset 0 -2px 0 #E2CE87; padding:1px 5px; border-radius:3px; font-weight:600; overflow-wrap:anywhere; }

a{ color:var(--ledger); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--brick-deep); }
:focus-visible{ outline:2px solid var(--ledger); outline-offset:2px; border-radius:3px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--ink); color:var(--paper); padding:12px 18px; }
.skip:focus{ left:0; color:var(--paper); }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Layout (B4) ---------- */
.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:860px; }
.sec{ padding-block:var(--sec-pad); background:var(--paper); }
.sec--deep{ background:var(--paper-deep); }
.sec--tight{ padding-block:clamp(22px,2.4vw,34px); }
.sec-head{ max-width:min(680px,68ch); margin-bottom:clamp(14px,1.8vw,22px); }

/* Two sections on the same ground read as one block with a hole punched in
   it, because you get both paddings and no boundary. If that ever happens
   again, collapse the seam instead of doubling it. */
.sec--deep + .sec--deep,
.sec--deep + .sec.final,
.sec:not(.sec--deep):not(.final) + .sec:not(.sec--deep):not(.final){ padding-top:0; }

/* ---------- Sheet edges ----------
   Every section is a sheet on a desk, so where one meets another the one above
   casts a soft shadow onto the one below and catches a little light along its
   own bottom edge. No rule, no border, nothing for the eye to read as a
   divider -- the depth does the separating.
   `.final` carries the deep background without the `--deep` class, so it is
   named alongside it everywhere here. */
.sec--deep, .sec.final{ position:relative; }
.sec--deep::before, .sec.final::before{
  content:''; position:absolute; left:0; right:0; top:0; height:26px;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(38,40,43,.070), rgba(38,40,43,.018) 55%, transparent);
}
.sec--deep::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:16px;
  pointer-events:none;
  background:linear-gradient(to top, rgba(255,255,255,.55), transparent);
}
/* Same background on both sides is not an edge, and a shadow there would be a
   band across the middle of one colour. Exactly the cases the padding rule
   above already collapses, kept in step with it deliberately. */
.sec--deep + .sec--deep::before,
.sec--deep + .sec.final::before{ display:none; }
.sec--deep:has(+ .sec--deep)::after,
.sec--deep:has(+ .sec.final)::after{ display:none; }
.sec-head > * + *{ margin-top:16px; }
:target,[id]{ scroll-margin-top:92px; }

/* ---------- Buttons (A4: say exactly what happens; no arrows) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 22px;
  font:600 17px/1.25 var(--body); text-align:center; text-decoration:none;
  border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn--primary{ background:var(--brick); color:#FFF; border-color:var(--brick); }
.btn--primary:hover{ background:var(--brick-deep); border-color:var(--brick-deep); color:#FFF; transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--card); border-color:var(--ink-soft); color:var(--ink); transform:translateY(-1px); }
.btn:disabled{ background:var(--paper-deep); border-color:var(--line); color:var(--ink-faint);
  opacity:1; cursor:not-allowed; transform:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.textlink{ font-weight:600; }

/* ---------- Header ---------- */
.nav{ position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--line); transition:padding .18s ease; }
.nav__inner{ display:flex; align-items:center; gap:16px; min-height:72px; }
.nav.is-stuck .nav__inner{ min-height:62px; }
.nav__logo{ display:inline-flex; align-items:flex-start; gap:10px; margin-right:auto; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
/* Wordmark over tagline. The mark stays vertically centred against the pair,
   so the lockup reads as one object rather than an icon beside two lines. */
.nav__name{ display:flex; flex-direction:column; justify-content:center; line-height:1.05; }
.nav__tag{ font-family:var(--body); font-weight:500; font-size:11.5px; letter-spacing:.04em;
  text-transform:none; color:var(--ink-soft); margin-top:3px; white-space:nowrap; }
/* The header is already tight at phone widths and the "Menu" button has
   clipped there before. The tagline is decorative, so it goes first. */
@media (max-width:560px){ .nav__tag{ display:none; } }
.nav__logo:hover{ color:var(--ink); }
.nav__mark{ width:22px; height:22px; flex:none; margin-top:1px; }
/* Without a tagline there is only one line, so centre it again. */
.nav__logo:not(:has(.nav__tag)){ align-items:center; }
.nav__links{ display:none; gap:22px; align-items:center; }
.nav__links a{ color:var(--ink-soft); text-decoration:none; font-size:16px; font-weight:500; padding:10px 0; }
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--ink); }
.nav__links a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--brick); }
.nav__cta{ display:none; }
.nav__mcta{ display:inline-flex; min-height:44px; padding:10px 15px; font-size:15px; white-space:nowrap; }
/* At phone width the header must still hold logo + "Let's talk" + Menu (C1). */
@media (max-width:430px){
  .nav__inner{ gap:9px; min-height:64px; }
  .nav__logo{ font-size:17px; gap:7px; }
  .nav__mark{ width:19px; height:19px; }
  .nav__mcta{ padding:10px 13px; font-size:14.5px; }
  .nav__toggle{ padding:8px 11px; font-size:14.5px; }
}
/* 320px (iPhone SE 1) still has to hold all three. Tighten, don't drop any. */
@media (max-width:360px){
  :root{ --gutter:16px; }
  .nav__inner{ gap:6px; }
  .nav__logo{ font-size:15.5px; gap:6px; letter-spacing:-.03em; }
  .nav__mark{ width:17px; height:17px; }
  .nav__mcta{ padding:10px 10px; font-size:14px; }
  .nav__toggle{ padding:8px 9px; font-size:14px; min-width:40px; }
}
.nav__toggle{ min-height:44px; min-width:44px; padding:8px 13px; background:transparent; border:1px solid var(--line); border-radius:9px; font:600 15px var(--body); color:var(--ink); cursor:pointer; }
.nav__panel{ display:none; }
.nav__panel.is-open{ display:block; padding:6px 0 20px; border-top:1px solid var(--line-soft); }
.nav__panel a{ display:block; padding:14px 2px; color:var(--ink); text-decoration:none; font-size:18px; font-weight:500; border-bottom:1px solid var(--line-soft); }
@media (min-width:960px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .nav__toggle,.nav__mcta{ display:none; }
  .nav__panel{ display:none !important; }
}

/* ---------- C1 hero ---------- */
.hero{ background:var(--paper); padding-block:clamp(20px,2.4vw,32px) clamp(24px,2.8vw,38px); }
.hero__grid{ display:grid; gap:clamp(34px,4.6vw,56px); align-items:center; }
@media (min-width:1000px){ .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); } }
.hero h1{ margin-bottom:20px; }
/* C1: the mobile first viewport carries one short sentence, not the full
   paragraph, so the rotating questions stay above the fold. */
.lede--short{ display:block; }
.lede--full{ display:none; }
@media (min-width:700px){
  .lede--short{ display:none; }
  .lede--full{ display:block; }
}
.hero__cta{ margin-top:28px; }
@media (max-width:699px){
  .hero{ padding-block:26px 44px; }
  .hero__cta{ margin-top:22px; }
}
.hero__micro{ margin-top:12px; }

/* Desk */
.desk__bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.toggle{ display:inline-flex; gap:4px; padding:4px; background:var(--paper-deep); border:1px solid var(--line); border-radius:999px; }
.toggle button{ min-height:40px; padding:8px 17px; border:0; border-radius:999px; background:transparent; color:var(--ink-soft); font:600 15px var(--body); cursor:pointer; }
.toggle button[aria-pressed="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(38,40,43,.10); }
.toggle button:hover{ color:var(--ink); }
.stack{ display:grid; }
.stack > *{ grid-area:1 / 1; }
.stack__layer{ transition:opacity .45s ease; }
.stack__layer[data-state="hidden"]{ opacity:0; visibility:hidden; pointer-events:none; }

.slips{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; align-items:start; }
@media (min-width:560px){ .slips{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; } }
.slip{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-slip); padding:13px 14px; box-shadow:var(--shadow-slip); }
.slip__label{ font-size:13px; font-weight:600; color:var(--ink-faint); margin-bottom:5px; }
.slip__body{ font-size:15.5px; font-weight:500; line-height:1.35; }
.slip__meta{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }
.slip--a{ transform:rotate(-1.4deg); } .slip--b{ transform:rotate(1deg); }
.slip--c{ transform:rotate(-.7deg); }  .slip--d{ transform:rotate(1.4deg); }
.slip--e{ transform:rotate(-1.1deg); } .slip--f{ transform:rotate(1.5deg); }
.slip--g{ transform:rotate(-1.5deg); }
.slip--sticky{ background:var(--sticky); border-color:#DCBC4E; }
.slip--sticky .slip__label{ color:#6B5A1C; }
.slip--sticky .slip__body{ font-family:var(--hand); font-size:20px; font-weight:700; }
.slip--msg{ background:#F1F4FA; border-color:#D6DDEC; border-radius:var(--r-slip) var(--r-slip) var(--r-slip) 2px; }
.slip--msg .slip__label{ color:var(--ballpoint); }
.stamp{ display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:3px 8px; border-radius:4px; font-size:13px; font-weight:700; border:1.5px solid currentColor; transform:rotate(-3deg); }
.stamp--due{ color:var(--brick); }

.handled{ display:grid; gap:13px; }
@media (min-width:560px){ .handled{ grid-template-columns:1.3fr 1fr; } }
.hcard{ border:1px solid var(--line); border-radius:var(--r-card); padding:19px; }
.hcard--done{ background:var(--ledger-tint); border-color:#BDD3C4; }
.hcard--you{ background:var(--sticky-tint); border-color:#E2CE87; }
.hcard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:13px; }
.hcard__title{ font-family:var(--display); font-weight:700; font-size:17px; }
.hcard__n{ font-size:14px; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.tlist{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.tlist li{ display:flex; gap:9px; align-items:flex-start; font-size:15.5px; line-height:1.4; }
.tlist svg{ flex:none; margin-top:3px; }
.hcard__note{ margin-top:13px; font-size:13.5px; color:var(--ink-soft); }
.exnote{ margin-top:15px; display:flex; gap:8px; align-items:flex-start; font-size:15px; color:var(--ink-soft); }
.exnote svg{ flex:none; margin-top:3px; }

/* ---------- C2 recognition wall ---------- */
/* The board the notes are pinned to. This section is the whole point of the
   page -- it is where a visitor first does something rather than reads -- and
   unframed it read as loose page furniture. The frame makes it an instrument:
   the question, the notes, and the action are one object.
   Lighter than the section behind it, so white notes still lift off it. */
.wall-panel{
  padding:clamp(18px,2.6vw,30px);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(38,40,43,.05), 0 10px 26px -20px rgba(38,40,43,.5);
}
@media (max-width:480px){ .wall-panel{ padding:15px 13px; } }

.wall{ display:grid; grid-template-columns:1fr; gap:13px; }
.wall > *{ min-width:0; }
@media (min-width:700px){ .wall{ grid-template-columns:repeat(6,1fr); } }
.stmt{
  display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%;
  min-height:64px; padding:17px 18px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-slip);
  box-shadow:var(--shadow-slip);
  font:500 17px/1.42 var(--body); color:var(--ink);
  transition:transform .22s ease, border-color .18s ease, background-color .18s ease;
}
@media (min-width:700px){
  /* 6 columns, spans 3+3 / 2+2+2 / 2+2+2. Every row fills exactly. The old
     order (3,2,2,3,2,2,2,2) summed to the same 18 but left a dead column on
     rows one and two and stranded the eighth note alone on a fourth row --
     which read as a broken grid rather than a deliberate scatter. */
  .stmt{ grid-column:span 2; }
  .stmt--lg{ grid-column:span 3; font-size:18.5px; }
}
.stmt:nth-child(3n+1){ transform:rotate(-.55deg); }
.stmt:nth-child(3n+2){ transform:rotate(.45deg); }
.stmt:nth-child(3n){ transform:rotate(-.25deg); }
.stmt:hover{ transform:rotate(0deg) translateY(-1px); }
.stmt:hover{ border-color:var(--ink-soft); }
.stmt[aria-pressed="true"]{ transform:rotate(0deg); border:2px solid var(--ledger); padding:16px 17px; background:var(--card); }
.stmt__box{ flex:none; width:22px; height:22px; margin-top:1px; border:1.5px solid var(--line); border-radius:5px; background:var(--paper); display:grid; place-items:center; }
.stmt[aria-pressed="true"] .stmt__box{ border-color:var(--ledger); background:var(--ledger-tint); }
.stmt__box svg{ opacity:0; }
.stmt[aria-pressed="true"] .stmt__box svg{ opacity:1; }
@media (max-width:699px){ .stmt{ transform:rotate(-.45deg); } .stmt:nth-child(even){ transform:rotate(.45deg); } }

.wall__bar{ margin-top:clamp(18px,2.2vw,24px); padding-top:clamp(16px,2vw,20px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.wall__count{ font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- C4 teams ---------- */
.teams{ display:grid; gap:clamp(20px,2.4vw,32px); align-items:center; }
.teams > *{ min-width:0; }
@media (min-width:820px){ .teams{ grid-template-columns:1.45fr .55fr; } }
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ padding:8px 12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-slip); box-shadow:var(--shadow-slip); font-size:15.5px; font-weight:500; }
.tag:nth-child(odd){ transform:rotate(-1deg); } .tag:nth-child(even){ transform:rotate(1deg); }
.youslip{ display:grid; place-items:center; min-height:92px; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-slip); box-shadow:var(--shadow-slip); transform:rotate(-1.4deg); font-family:var(--display); font-weight:700; font-size:clamp(26px,2.8vw,34px); }
.teams__label{ font-size:14.5px; color:var(--ink-soft); margin-bottom:9px; }

/* ---------- C5 steps ---------- */
.steps{ display:grid; }
.step{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px 18px; padding:20px 0; border-top:1px solid var(--line); align-items:start; }
.step:last-child{ border-bottom:1px solid var(--line); }
.step__n{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--brick); font-variant-numeric:tabular-nums; padding-top:4px; min-width:26px; }
.step__t{ font-family:var(--display); font-weight:700; font-size:21px; margin-bottom:4px; }
.step__d{ color:var(--ink-soft); }
.step__part{ font-size:14.5px; color:var(--ink-soft); text-align:right; white-space:nowrap; padding-top:5px; }
.step__part b{ display:block; color:var(--ink); font-weight:600; }
@media (max-width:640px){
  .step{ grid-template-columns:auto minmax(0,1fr); }
  .step__part{ grid-column:2; text-align:left; white-space:normal; padding-top:0; }
}
/* ---------- C6 command center ---------- */
.scatter{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:clamp(16px,2.6vw,24px); background:var(--paper-deep); border:1px dashed var(--line); border-radius:var(--r-card); }
@media (min-width:620px){ .scatter{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.sysbox{ padding:11px 9px; background:var(--card); border:1px solid var(--line); border-radius:6px; font-size:13.5px; font-weight:500; text-align:center; line-height:1.3; }
.sysbox:nth-child(3n){ transform:rotate(-1.3deg); } .sysbox:nth-child(4n){ transform:rotate(1.5deg); }
.sysbox--hand{ font-family:var(--hand); background:var(--sticky); border-color:#DCBC4E; font-size:16px; }
.scatter__you{ grid-column:1 / -1; display:grid; justify-items:center; }
.scatter__tangle{ width:100%; height:42px; }

.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow-panel); overflow:hidden; }
.panel__bar{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px clamp(16px,2.6vw,22px); background:var(--paper); border-bottom:1px solid var(--line-soft); }
.panel__hello{ font-family:var(--display); font-weight:700; font-size:19px; }
.panel__body{ padding:clamp(16px,2.6vw,22px); display:grid; gap:16px; }
.grp{ border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.grp__h{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-bottom:1px solid var(--line-soft); font-size:15px; font-weight:700; }
.grp__h svg{ flex:none; }
.grp__n{ margin-left:auto; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.grp--decide .grp__h{ background:var(--brick-tint); color:var(--brick); }
.grp--attn   .grp__h{ background:var(--sticky-tint); color:var(--status-due); }
.grp--done   .grp__h{ background:var(--ledger-tint); color:var(--ledger); }
.row{ display:flex; gap:10px; align-items:flex-start; padding:12px 15px; font-size:15.5px; line-height:1.4; }
.row + .row{ border-top:1px solid var(--line-soft); }
.row svg{ flex:none; margin-top:3px; }
.row .amt{ font-variant-numeric:tabular-nums; }
.row__act{ margin-left:auto; flex:none; min-height:36px; padding:7px 13px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font:600 14px var(--body); cursor:pointer; }
.row__act.is-done{ background:var(--ledger-tint); border-color:#BDD3C4; color:var(--ledger);
  font-weight:600; white-space:nowrap; }
.row__act:hover{ border-color:var(--ink-soft); }
.today{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
@media (max-width:520px){ .today{ grid-template-columns:1fr; } }
.today__c{ background:var(--card); padding:13px 15px; }
.today__k{ font-size:14px; color:var(--ink-soft); }
.today__v{ font-family:var(--display); font-weight:700; font-size:clamp(17px,2vw,20px); margin-top:4px; font-variant-numeric:tabular-nums; }

/* Format tabs */
.tabs{ margin-top:22px; }
.tablist{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tab{ min-height:44px; padding:10px 17px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-soft); font:600 15.5px var(--body); cursor:pointer; }
.tab:hover{ color:var(--ink); border-color:var(--ink-soft); }
.tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.tabpanel[hidden]{ display:none; }

.mail{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow-panel); overflow:hidden; }
.mail__h{ padding:14px 18px; border-bottom:1px solid var(--line-soft); background:var(--paper); font-size:15px; color:var(--ink-soft); }
.mail__h b{ display:block; color:var(--ink); font-size:17px; font-family:var(--display); }
.mail__b{ padding:20px 18px; font-size:16px; line-height:1.65; }
.mail__b p + p{ margin-top:12px; }
.mail__b ul{ margin:10px 0; padding-left:20px; }
.mail__b li + li{ margin-top:6px; }

.sms{ max-width:400px; }
.bubble{ background:#F1F4FA; border:1px solid #D6DDEC; border-radius:16px 16px 16px 4px; padding:16px 18px; font-size:16px; line-height:1.55; box-shadow:var(--shadow-slip); }
.bubble + .bubble{ margin-top:10px; }
.sms__time{ margin-top:8px; font-size:14px; color:var(--ink-soft); }

/* ---------- C7 chips (recognition wall, booking recall) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-soft); font:600 15.5px var(--body); cursor:pointer; }
.chip:hover{ color:var(--ink); border-color:var(--ink-soft); }
.chip[aria-checked="true"],.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ---------- C8 calculator ---------- */
.calc{ display:grid; gap:clamp(24px,3.4vw,44px); align-items:start; }
.calc > *{ min-width:0; }
@media (min-width:900px){ .calc{ grid-template-columns:1fr 1fr; } }
.cpanel{ padding:clamp(20px,2.8vw,28px); background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); }
.cpanel label{ display:block; font-weight:600; font-size:17px; margin-bottom:14px; }
input[type=range]{ width:100%; height:44px; accent-color:var(--brick); background:transparent; cursor:pointer; }
.scale{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink-soft); margin-top:-4px; }
.readout{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.readout__big{ font-family:var(--display); font-weight:700; font-size:clamp(28px,3.8vw,38px); line-height:1.15; font-variant-numeric:tabular-nums; }
.readout__sub{ margin-top:8px; font-size:17px; color:var(--ink-soft); }
.readout__team{ margin-top:14px; padding:13px 15px; background:var(--paper); border:1px solid var(--line); border-radius:10px; font-size:15.5px; }
.readout__team[hidden]{ display:none; }
.teamtoggle{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.switch{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:600; cursor:pointer; }
.switch input{ width:20px; height:20px; accent-color:var(--ledger); cursor:pointer; }
.teamfields{ margin-top:16px; display:grid; gap:16px; }
.teamfields[hidden]{ display:none; }
.numrow{ display:flex; align-items:center; gap:10px; }
.numrow button{ width:44px; height:44px; border:1px solid var(--line); border-radius:9px; background:var(--card); font:600 20px var(--body); color:var(--ink); cursor:pointer; }
.numrow button:hover{ border-color:var(--ink-soft); }
.numrow output{ min-width:3ch; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; font-size:18px; }
.calcq{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.4vw,26px); margin-bottom:16px; }

/* ---------- C9 pricing ---------- */
.plan{ display:grid; gap:16px; }
.plan > *{ min-width:0; }
@media (min-width:760px){ .plan{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .plan{ grid-template-columns:repeat(4,1fr); } }
.pstep{ display:flex; flex-direction:column; gap:10px; padding:22px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); }
.pstep__k{ font-size:15px; font-weight:600; color:var(--brick); }
.pstep--opt .pstep__k{ color:var(--ink-soft); }
.pstep__t{ font-family:var(--display); font-weight:700; font-size:19px; }
.pstep__d{ font-size:15.5px; color:var(--ink-soft); }
.pstep__meta{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); display:grid; gap:5px; font-size:15px; }
.pstep__price{ font-weight:700; font-size:17px; }
.pstep__time{ color:var(--ink-soft); }
.principles{ margin-top:clamp(24px,3vw,36px); }
.principles__grid{ display:grid; gap:20px; margin-top:22px; }
@media (min-width:680px){ .principles__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .principles__grid{ grid-template-columns:repeat(4,1fr); } }
.pr__t{ font-family:var(--display); font-weight:700; font-size:17px; margin-bottom:5px; }
.pr__d{ font-size:15.5px; color:var(--ink-soft); }

/* ---------- C10 you own it ---------- */
.own{ margin-top:clamp(32px,4vw,48px); padding-top:clamp(26px,3vw,34px); border-top:1px solid var(--line); }
/* The rule above separates .own from a block above it. It is now the first
   thing in its section, where that leaves a border floating over nothing. */
.own:first-child{ margin-top:0; padding-top:0; border-top:0; }
.own__list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
@media (min-width:680px){ .own__list{ grid-template-columns:1fr 1fr; } }
.own__list li{ display:flex; gap:10px; align-items:flex-start; font-weight:500; }
.own__list svg{ flex:none; margin-top:3px; }

/* ---------- C11 trust + FAQ ---------- */
.trust{ display:grid; gap:18px; padding:clamp(22px,3vw,30px); background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); }
@media (min-width:760px){ .trust__grid{ grid-template-columns:1fr 1fr; } }
.trust__grid{ display:grid; gap:16px; }
.trust__i{ display:flex; gap:11px; align-items:flex-start; font-size:16px; line-height:1.5; }
.trust__i svg{ flex:none; margin-top:3px; }
.faq{ margin-top:clamp(24px,3vw,36px); max-width:min(760px,72ch); }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; align-items:center; min-height:44px; padding:18px 40px 18px 0; position:relative; cursor:pointer; list-style:none; font-family:var(--display); font-weight:600; font-size:clamp(17px,1.9vw,20px); line-height:1.3; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:6px; top:50%; width:10px; height:10px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:translateY(-70%) rotate(45deg); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.faq summary:hover{ color:var(--brick); }
.faq__a{ padding:0 0 22px; color:var(--ink-soft); max-width:68ch; }
.faq__a p + p{ margin-top:.8em; }

/* ---------- C12 final ---------- */
.final{ background:var(--paper-deep); text-align:center; }
.final .lede,.final h2{ margin-inline:auto; }
.final .btn-row{ justify-content:center; }
.tidy{ display:grid; gap:8px; max-width:460px; margin:clamp(32px,4vw,44px) auto 0; text-align:left; }
.tidy__r{ display:flex; align-items:center; gap:11px; padding:12px 15px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-slip); box-shadow:var(--shadow-slip); }
.tidy__r svg{ flex:none; }
.tidy__t{ font-size:15.5px; font-weight:500; }
.tidy__s{ margin-left:auto; font-size:14px; font-weight:600; color:var(--ledger); }
.tidy__s--you{ color:var(--brick); }

/* ---------- Who is behind this ----------
   Stated once on the homepage, late and quietly. The brief asked for this not
   to read as a promotional banner, so it gets no card, no tint and no rule --
   a smaller heading than a section head, a narrow measure, and the body
   colour one step back from the page's own. It should read like a note at the
   end of a letter. */
.backing{ max-width:min(640px,66ch); }
/* The ZEDVentures mark. A short bar wherever the parent company is named, and
   nowhere else on the site -- it is a signal of ownership, not an accent, so
   --brick remains AutomateSmall's own warm red in all twelve of its existing
   places and nothing that was brick has become this.
   #E31937 measures 4.32 on --paper and 3.85 on --paper-deep. Both are below
   the 4.5 AA floor for small text and above the 3.0 floor for non-text, which
   is why the mark is a rule and never a word. */
.backing__h::before,
.sec-head--zed h2::before{
  content:''; display:block; width:32px; height:3px; margin-bottom:14px;
  border-radius:1.5px; background:var(--zed);
}
.backing__h{ font-family:var(--display); font-weight:700; font-size:clamp(19px,1.9vw,22px);
  line-height:1.25; margin-bottom:12px; }
.backing p{ color:var(--ink-soft); font-size:16.5px; line-height:1.6; }
.backing p + p{ margin-top:10px; }
.backing__link{ margin-top:14px; }
.backing__link a{ font-weight:600; }

/* ---------- Sticky check pill ----------
   Two jobs in one control. With selections it is a way back to your results.
   With none, once you have scrolled past the wall without touching it, it is
   the way back to the wall -- the section is the point of the page and
   scrolling past it used to be a one-way trip. The prompt form carries a
   dismiss; the results form does not, because a summary of your own answers
   is not something you need to be able to get rid of. */
.pillwrap{
  position:fixed; z-index:35; display:none; align-items:center; gap:8px;
  right:26px; bottom:26px;
}
.pillwrap.is-on{ display:flex; }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:12px 20px; border:0; border-radius:999px; cursor:pointer;
  background:var(--ink); color:var(--paper); font:600 16px var(--body);
  box-shadow:0 10px 28px -12px rgba(38,40,43,.6);
}
.pill__x{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--ink); color:var(--paper); opacity:.72;
  box-shadow:0 10px 28px -12px rgba(38,40,43,.6);
}
.pill__x:hover{ opacity:1; }
.pill__x[hidden]{ display:none; }
.pill b{ font-variant-numeric:tabular-nums; }
/* Below 720px this is a bottom action bar, not a floating blob. It used to be
   160x132px at 320px because the long label wrapped to four lines and covered
   the content behind it. */
@media (max-width:719px){
  .pillwrap{
    left:16px; right:16px; width:auto;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .pill{
    flex:1; justify-content:center; white-space:nowrap; min-height:48px; padding:12px 16px;
  }
  .pill__x{ width:44px; height:44px; }
  /* Keep the bar from sitting on top of the last thing on the page. */
  body:has(.pillwrap.is-on){ padding-bottom:78px; }
}

/* ---------- The wall settles in when you reach it ----------
   A grid of checkbox cards reads as a list of features until something moves.
   This is the cheapest honest way to say "these do something" -- it claims
   nothing, it just stops the section looking inert.
   `translate` rather than `transform`, because each note carries its own
   rotation and a transform here would wipe it out. Armed by JS, so the cards
   are never left invisible if the script or the observer is unavailable. */
@media (prefers-reduced-motion:no-preference){
  .wall-panel.is-armed .stmt{ opacity:0; translate:0 12px; }
  .wall-panel.is-armed.is-in .stmt{
    opacity:1; translate:0 0;
    transition:opacity .42s ease, translate .5s cubic-bezier(.2,.7,.3,1);
  }
  .wall-panel.is-armed.is-in .stmt:nth-child(1){ transition-delay:0s }
  .wall-panel.is-armed.is-in .stmt:nth-child(2){ transition-delay:.05s }
  .wall-panel.is-armed.is-in .stmt:nth-child(3){ transition-delay:.10s }
  .wall-panel.is-armed.is-in .stmt:nth-child(4){ transition-delay:.15s }
  .wall-panel.is-armed.is-in .stmt:nth-child(5){ transition-delay:.20s }
  .wall-panel.is-armed.is-in .stmt:nth-child(6){ transition-delay:.25s }
  .wall-panel.is-armed.is-in .stmt:nth-child(7){ transition-delay:.30s }
  .wall-panel.is-armed.is-in .stmt:nth-child(8){ transition-delay:.35s }
}

/* ---------- Result panel ---------- */
.scrim{ position:fixed; inset:0; z-index:50; background:rgba(38,40,43,.42); opacity:0; transition:opacity .22s ease; }
.scrim[hidden]{ display:none; }
.scrim.is-on{ opacity:1; }
.drawer{
  position:fixed; z-index:51; background:var(--paper); display:flex; flex-direction:column;
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.drawer[hidden]{ display:none; }
@media (max-width:719px){
  .drawer{ left:0; right:0; bottom:0; max-height:92vh; border-radius:18px 18px 0 0; transform:translateY(100%); }
  .drawer.is-on{ transform:translateY(0); }
}
@media (min-width:720px){
  .drawer{ top:0; right:0; width:440px; height:100%; border-left:1px solid var(--line); transform:translateX(100%); }
  .drawer.is-on{ transform:translateX(0); }
}
.drawer__h{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px 15px; border-bottom:1px solid var(--line); }
.drawer__h h2{ font-size:23px; line-height:1.22; }
/* At phone widths the heading wrapped to three lines and pushed the first
   result below the fold before the visitor had read anything. */
@media (max-width:480px){
  .drawer__h{ padding:16px 16px 13px; }
  .drawer__h h2{ font-size:20px; }
}
.drawer__x{ margin-left:auto; flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); cursor:pointer; }
.drawer__x:hover{ border-color:var(--ink-soft); }
.drawer__b{ padding:22px; overflow-y:auto; overscroll-behavior:contain; flex:1;
  display:grid; gap:22px; align-content:start; }
/* Breathing room under the last item so content never butts against the
   footer button, and so a scroll has somewhere to land. */
.drawer__b > :last-child{ margin-bottom:4px; }
/* Content cut off by the sticky footer looked like the end of the panel.
   A short fade at the bottom says there is more. */
.drawer__b{ --fade:14px;
  mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent 100%); }
@media (prefers-reduced-motion:reduce){ .drawer__b{ mask-image:none; -webkit-mask-image:none; } }
@media (max-width:480px){ .drawer__b{ padding:18px 16px 20px; gap:20px; } }
.drawer__f{ padding:16px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line); background:var(--card); display:grid; gap:10px; }
@media (max-width:480px){ .drawer__f{ padding-inline:16px; } }
.drawer__f .btn{ width:100%; }
/* The button names a 30-minute meeting, which is a bigger thing to agree to
   than what actually happens next -- a form, and a reply. Saying so here
   costs a line and removes the hesitation, without splitting the path or
   burying the offer. */
.drawer__note{ font-size:13.5px; line-height:1.45; color:var(--ink-soft); text-align:center; }
/* Everything the panel shows lives inside one wrapper, so the gap on
   .drawer__b applied to nothing -- which is why the select sat flush against
   the first result. The wrapper carries the rhythm instead. */
#drawer-result{ display:grid; gap:clamp(18px,2.4vw,24px); align-content:start; }

.picked-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:11px; }
.picked-head__t{ font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:.01em; }
.picked-head__n{ font-size:13.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* Three results used to run together as one block of text. Each is now a card,
   so the ranking reads as three separate recommendations. */
.picked{ display:grid; gap:10px; list-style:none; margin:0; padding:0; }
.picked li{ display:flex; gap:13px; align-items:flex-start;
  padding:15px 16px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); }
.picked__n{ flex:none; width:25px; height:25px; margin-top:1px; display:grid;
  place-items:center; border-radius:7px; background:var(--ledger); color:#FFF;
  font:700 13px var(--body); font-variant-numeric:tabular-nums; }
.picked__t{ font-family:var(--display); font-weight:700; font-size:16.5px; line-height:1.25; }
.picked__o{ margin-top:5px; font-size:15px; line-height:1.5; color:var(--ink-soft); }
/* The industry line is the one genuinely tailored sentence in the panel, so it
   gets a rule rather than only a colour -- colour alone is not a distinction
   for anyone who cannot see it. */
.picked__e{ margin-top:9px; padding-left:11px; border-left:2px solid var(--ledger);
  font-size:14.5px; line-height:1.5; color:var(--ledger); }
/* The line that says why a result is on the list. It quotes the visitor's own
   selections back rather than asserting a reason we cannot know. */
.picked__w{ margin-top:8px; font-size:14px; line-height:1.45; color:var(--ink-faint); }

/* ---------- Universal follow-up questions in the result panel ----------
   Same questions for every business. They sit under the results because the
   results are what the visitor pressed the button for; these sharpen the
   walkthrough, they do not gate it. */
.dq{ display:grid; gap:18px; padding:18px; background:var(--paper-deep);
  border:1px solid var(--line); border-radius:var(--r-card); }
.dq__h{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.dq__q{ display:grid; gap:10px; }
.dq__q[hidden]{ display:none; }
.dq__l{ font-weight:600; font-size:16px; line-height:1.35; }
.dq .chip{ font-size:15px; padding:9px 14px; }
/* A drawer is not a page: the 130px form textarea swallows the panel. */
.dq__free textarea{ min-height:84px; }
@media (max-width:480px){ .dq{ padding:15px; gap:16px; } }

.timeline{ padding:15px 16px; background:var(--card); border:1px solid var(--line); border-radius:11px; font-size:15.5px; line-height:1.5; }
.caveat{ display:flex; gap:9px; font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.caveat svg{ flex:none; margin-top:3px; }
.drawer select,.drawer input[type=email]{ width:100%; min-height:48px; padding:12px 14px; font:400 17px var(--body); color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px; }

/* ---------- Forms ---------- */
.form{ display:grid; gap:22px; max-width:min(620px,68ch); }
.field{ display:grid; gap:8px; }
.field label{ font-weight:600; font-size:16.5px; }
.field .hint{ font-size:14.5px; color:var(--ink-soft); }
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%; min-height:48px; padding:12px 14px; font:400 17px var(--body); color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:9px;
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.5; }
.field .err{ display:flex; gap:7px; align-items:center; font-size:14.5px; color:var(--status-attention); font-weight:600; }
.field .err[hidden]{ display:none; }
/* "What you told us" on the booking page. The drawer shows these answers as
   pressed chips; by the time the visitor is on this page they can't see them
   any more, so the recap is where it earns its place. */
.recap{ display:grid; gap:7px; margin:14px 0 0; padding:14px 16px; list-style:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  font-size:15px; line-height:1.5; }
.recap[hidden]{ display:none; }
.recap b{ font-weight:600; }
.recap .recap__v{ color:var(--ink-soft); }

.formdone{ padding:clamp(20px,3vw,28px); background:var(--ledger-tint); border:1px solid #BDD3C4; border-radius:var(--r-card); }
/* Forms that are not connected yet. Deliberately NOT the green success
   treatment: "nothing was sent" must not look like "sent". */
.notlive{ padding:14px 16px; background:var(--sticky-tint); border:1px solid #E2CE87;
  border-radius:var(--r-card); font-size:15.5px; line-height:1.5; color:var(--ink); }
.notlive b{ font-weight:600; }
.notlive p + p{ margin-top:8px; color:var(--ink-soft); }
.notlive--form{ margin-bottom:20px; }
.formdone.notlive, .ask__done.notlive{ background:var(--sticky-tint); border-color:#E2CE87; }
.formdone[hidden]{ display:none; }
/* A confirmation panel shows exactly one of these. "sent" is the normal
   path; "mailto" only appears when the endpoint could not be reached. */
[data-state="sent"] .onlymailto,
[data-state="mailto"] .onlysent{ display:none; }
[data-state="sent"]{ background:var(--ledger-tint); border-color:#BDD3C4; }
/* The composed email, shown so a visitor with no mail handler is never
   left with nothing. Wraps rather than scrolling sideways. */
.mailbox{ margin-top:14px; padding:14px 16px; background:var(--paper-deep);
  border:1px solid var(--line); border-radius:11px; font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow-y:auto; color:var(--ink); }
.hp{ position:absolute; left:-9999px; }

/* ---------- Footer ---------- */
.foot{ background:var(--paper); border-top:1px solid var(--line); padding-block:34px 30px; }
.foot__grid{ display:flex; flex-wrap:wrap; gap:26px 48px; align-items:flex-start; }
.foot__brand{ font-family:var(--display); font-weight:700; font-size:19px; }
.foot__tag{ margin-top:6px; font-size:15px; color:var(--ink-soft); max-width:32ch; }
.foot nav{ display:grid; gap:9px; }
.foot nav a{ font-size:15.5px; color:var(--ink-soft); text-decoration:none; }
.foot nav a:hover{ color:var(--ink); }
/* The footer's ZEDVentures link. The brief asked for var(--zed) on the text,
   but this row is 14px on --paper, where the red measures 4.32 -- under AA.
   So the red goes on the underline, which is decoration rather than text, and
   the hover colour is left to the site's own a:hover. The link is already
   underlined at rest, so the hover state never depends on colour alone. */
.foot__legal a:hover,
.foot__legal a:focus-visible{
  text-decoration-color:var(--zed); text-decoration-thickness:2px;
}

.foot__legal{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--ink-soft); }

/* ---------- Motion (B8) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* The one real story. Proof, placed immediately before the price. */
.story{ display:grid; gap:clamp(24px,3.4vw,44px); align-items:center; }
.story > *{ min-width:0; }
@media (min-width:900px){ .story{ grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); } }
.story__list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px; }
.story__list li{ display:flex; gap:10px; align-items:flex-start; font-weight:500; line-height:1.45; }
.story__list svg{ flex:none; margin-top:3px; }
.story__shot{ display:block; border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-panel); background:var(--card); transition:transform .18s ease; }
.story__shot:hover{ transform:translateY(-2px); }
.story__shot img{ display:block; width:100%; height:auto; }

/* ==========================================================================
   Case study template (.cs-*). Reusable: the next case study copies
   kitchen-club.html and changes only the words and the two screenshots.
   Text holds the spec's 680px reading measure; screenshots break out wider
   so the type inside them stays legible.
   ========================================================================== */
.wrap--case{ max-width:1000px; }
.wrap--case h1{ margin-bottom:18px; }
.wrap--case h2{ margin-bottom:16px; }
.wrap--case h3{ margin-bottom:5px; }
.cs-lede{ max-width:min(680px,66ch); }
.cs-body{ max-width:min(680px,68ch); color:var(--ink-soft); font-size:17.5px; line-height:1.6; }
.cs-body + .cs-body{ margin-top:1em; }

/* Facts bar: scannable, no card. */
.cs-facts{ display:grid; gap:1px; margin:clamp(26px,3.4vw,38px) 0 0;
  background:var(--line); border-block:1px solid var(--line); }
@media (min-width:700px){ .cs-facts{ grid-template-columns:repeat(4,1fr); } }
.cs-facts > div{ background:var(--paper); padding:15px 0; }
@media (min-width:700px){ .cs-facts > div{ padding:15px 18px; } .cs-facts > div:first-child{ padding-left:0; } }
.cs-facts dt{ font-size:14px; color:var(--ink-soft); margin-bottom:4px; }
.cs-facts dd{ margin:0; font-weight:600; font-size:16px; line-height:1.35; }

.cs-list{ list-style:none; margin:20px 0 24px; padding:0; display:grid; gap:10px; max-width:min(680px,68ch); }
.cs-list li{ display:flex; gap:10px; align-items:flex-start; font-size:16.5px; line-height:1.45; }
.cs-list svg{ flex:none; margin-top:3px; }

/* The sharpest sentence gets room. One per case study. */
.cs-pull{ margin:clamp(24px,3vw,34px) 0; padding:20px 0 20px 22px;
  border-left:3px solid var(--brick); max-width:min(700px,62ch); }
.cs-pull p{ font-family:var(--display); font-weight:600; font-size:clamp(19px,2.1vw,23px);
  line-height:1.35; letter-spacing:-.01em; }

.cs-steps{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:0; max-width:min(760px,72ch); }
.cs-steps li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px;
  padding:20px 0; border-top:1px solid var(--line); }
.cs-steps li:last-child{ border-bottom:1px solid var(--line); }
.cs-steps__n{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--brick);
  font-variant-numeric:tabular-nums; padding-top:5px; }
.cs-steps p{ color:var(--ink-soft); font-size:16.5px; line-height:1.5; }

/* Screenshots: wider than the text column, capped so the type stays readable. */
.cs-shot{ margin:20px 0 0; max-width:1000px; }
.cs-shot img{ display:block; width:100%; height:auto; border:1px solid var(--line);
  border-radius:var(--r-panel); box-shadow:var(--shadow-panel); background:var(--card); }
.cs-shot figcaption{ margin-top:12px; font-size:15.5px; color:var(--ink-soft); max-width:min(680px,68ch); }


/* ==========================================================================
   Services catalogue. Two taxonomies live on this page — functional groups
   and commercial bundles — and a few offerings appear in a bundle other than
   their own group. They are given deliberately different surfaces so that
   reads as intentional rather than as a mistake: offerings are white cards
   with a numbered rule, bundles are paper panels with a ledger spine.
   ========================================================================== */
/* auto-fit: one flat grid of thirteen, no group headers */
.svc-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.svc-grid > *{ min-width:0; }

.svc{ padding:18px 20px 20px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); }
.svc__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.svc__ico{ width:38px; height:38px; flex:none; padding:7px; border-radius:10px;
  background:var(--ledger-tint); color:var(--ledger); }
.svc__n{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--brick);
  font-variant-numeric:tabular-nums; }
.svc__t{ font-family:var(--display); font-weight:700; font-size:18.5px; line-height:1.25; margin-bottom:6px; }
.svc__p{ color:var(--ink-soft); font-size:16px; line-height:1.45; }
.svc__new{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:5px; vertical-align:2px;
  background:var(--sticky-tint); border:1px solid #E2CE87; color:#6B5A1C;
  font-family:var(--body); font-size:12px; font-weight:700; }

.bundles{ display:grid; gap:16px; }
.bundles > *{ min-width:0; }
@media (min-width:820px){ .bundles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bundle{ padding:24px 24px 24px 22px; background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--ledger); border-radius:var(--r-card); }
.sec--deep .bundle{ background:var(--card); }
.bundle__t{ font-family:var(--display); font-weight:700; font-size:clamp(19px,2.1vw,23px); margin-bottom:6px; }
.bundle__who{ color:var(--ink-soft); font-size:16px; line-height:1.45; margin-bottom:16px; }
.bundle__list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.bundle__list li{ display:flex; gap:11px; align-items:baseline; font-size:16px; font-weight:500; line-height:1.4; }
.bundle__n{ flex:none; font-family:var(--display); font-weight:700; font-size:13px; color:var(--ledger);
  font-variant-numeric:tabular-nums; }

.svc-intro{ max-width:min(680px,68ch); margin-top:10px; color:var(--ink-soft);
  font-size:16.5px; line-height:1.55; }
.svc-grid{ margin-top:clamp(22px,2.8vw,34px); }

/* "Not seeing yours?" — a note to us, not a form to fill in. The field has no
   frame of its own; the panel is the frame, and it lights up on focus. */
.ask{ display:grid; gap:clamp(20px,2.6vw,34px); align-items:start; }
.ask > *{ min-width:0; }
@media (min-width:900px){ .ask{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.ask__copy h2{ font-size:clamp(23px,2.6vw,30px); margin-bottom:10px; }
.ask__copy p{ color:var(--ink-soft); font-size:16.5px; line-height:1.55; max-width:46ch; }
.ask__box{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 18px 15px; transition:border-color .15s ease, box-shadow .15s ease; }
.ask__box:focus-within{ border-color:var(--ledger); box-shadow:0 0 0 3px var(--ledger-tint); }
.ask__box textarea{ width:100%; border:0; background:transparent; resize:none; padding:0;
  font:400 18px/1.5 var(--body); color:var(--ink); }
.ask__box textarea:focus{ outline:none; }
.ask__box textarea::placeholder{ color:var(--ink-faint); }
.ask__row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line-soft); }
.ask__row input{ flex:1 1 200px; min-width:0; min-height:44px; padding:10px 12px;
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  font:400 16px var(--body); color:var(--ink); }
.ask__row .btn{ flex:none; min-height:44px; padding:11px 18px; font-size:16px; }
.ask__note{ margin-top:11px; font-size:14px; color:var(--ink-faint); }
.ask__done{ padding:16px 18px; background:var(--ledger-tint); border:1px solid #BDD3C4;
  border-radius:var(--r-card); font-weight:600; }
@media (min-width:900px){ .ask__done{ grid-column:2; } }

/* Pages open tighter: the first band needs less air than the ones between. */
main > .sec:first-child{ padding-top:clamp(14px,1.7vw,22px); }