/* Site look (D48): brutalist editorial (from the "AI for Business" style reference, DESIGN.md).
   Warm-gray canvas, white and black flat cards with big radii, condensed uppercase display type,
   mint for tags and links, yellow for the email only. No shadows anywhere.
   Loaded after site.css and brand.css (and the case study's inline styles); copy and layout are untouched. */
:root {
  --navy: #000000;
  --ink: #000000;
  --teal: #000000;
  --signal: #d1ffca;
  --paper: #e5e5e5;
  --soft: #f3f3f3;
  --line: #c6c6c6;
  --rule: #c6c6c6;
  --rule-dark: #2f2f2f;
  --text-dark: #e5e5e5;
  --muted-dark: #979797;
  --body: #444444;
  --muted: #6b6b6b;
  --mint: #d1ffca;
  --volt: #fff100;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --display: 'Anton', 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
}
body { background: var(--paper); color: #000; letter-spacing: -.011em; }

/* Type: condensed uppercase display, tight leading; mono labels. */
.label { font: 400 12px/1.4 var(--mono); letter-spacing: -.02em; text-transform: uppercase; }
h1, h2, h2.big, .close h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.005em; line-height: .9; }
h1 span, h2 span { font-style: normal; font-weight: 400; color: inherit; }
h1 { font-size: clamp(54px, 7.2vw, 112px); line-height: .88; }
.offer-bench h1, .open h1 { font-size: clamp(52px, 6.6vw, 104px); }
h2, h2.big { font-size: clamp(48px, 5.2vw, 80px); }
.belief h2 { font-size: clamp(56px, 6.4vw, 104px); }
.close h2 { font-size: clamp(60px, 7.4vw, 120px); }
.sam h2 { font-size: clamp(48px, 4.6vw, 72px); }
.rules h2.label { font: 400 12px/1.4 var(--mono); text-transform: uppercase; }
h1 span, .belief h2 span, .sec-head h2 span, .real h2 span { color: #6b6b6b; }
.card h3, .panel h3, .steps4 h3, .lane-copy h3, .e23 h3, .case-card h3, .lessons h3, .who h3, .stack-guarantee h3, .site-foot h3 {
  font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: -.02em; }
.stack-guarantee h3 { font-size: 28px; line-height: 1.1; }
.card .quote { font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; }
.underneath p { font: 500 26px/1.15 var(--sans); letter-spacing: -.03em; font-style: normal; }
.case-card .q, .row-body p.q, .pull { font: 500 20px/1.25 var(--sans); font-style: normal; letter-spacing: -.02em; }
.countdown b, .facts .price dd { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.facts .price dd { font-size: 40px; line-height: 1; }
.countdown b { font-size: 64px; }

/* Nav: a floating white pill in a tall bar. */
.bar, .bar.bar { background: var(--paper); border-bottom: 0; }
.bar .wrap { min-height: 104px; }
.brand { color: #000; font-weight: 700; letter-spacing: -.01em; font-size: 17px; }
.brand img { filter: brightness(0); }
.bar nav { padding: 6px 6px 6px 22px; background: #fff; border-radius: 48px; gap: 20px; font-size: 14px; font-weight: 500; }
.bar nav a { color: #444; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: #000; text-decoration: none; }
.bar nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--mint); }
.bar .book, .bar nav .book { padding: 11px 18px; background: #000; color: #fff; border: 0; border-radius: 40px; }
.bar .book:hover { background: #2f2f2f; color: #fff; }
.menu summary { background: #fff; color: #000; border: 0; border-radius: 48px; font-family: var(--mono); padding: 0 18px; }
.menu-links { background: #fff; border: 0; border-radius: 24px; box-shadow: none; outline: 1px solid #c6c6c6; }
.menu-links a { border-radius: 16px; color: #444; }
.menu-links a:hover, .menu-links a[aria-current="page"] { background: var(--soft); color: #000; }
.menu-links .btn { color: #fff; }

/* Hero on the canvas; the tray is the black inverted card. */
.bench, .offer-bench, .open { background: var(--paper); color: #000; border-bottom: 0; }
.kicker-dark, .kicker { color: #000; }
.lede { color: #444; font-size: 18px; line-height: 1.33; }
.crumb { color: #6b6b6b; }
.crumb:hover { color: #000; }
.tray, .facts.facts, .short, .strip .detail { background: #000; border: 0; border-radius: 32px; box-shadow: none; }
.tray { padding: 24px 22px 22px; }
.strip .detail { border-radius: 0 32px 32px 32px; }
.strip-tab { background: #000; color: var(--mint); border-radius: 16px 16px 0 0; padding: 10px 18px 8px; }
.strip-hint { color: #6b6b6b; }
.tray-head b { color: var(--mint); }
.item { background: #141414; border: 0; border-radius: 16px; }
.item:hover { background: #1f1f1f; border-color: transparent; }
.item[aria-pressed="true"] { background: #2f2f2f; box-shadow: inset 0 0 0 1.5px var(--mint); }
.item .no { font-family: var(--mono); }
.chip { border-radius: 64px; }
.verdict, .stamp, .cs-stamp { border-radius: 64px; font: 500 11px/1 var(--mono); letter-spacing: 0; padding: 7px 11px 6px; }
.v-go { background: var(--mint); color: #000; }
.v-fix { background: var(--volt); color: #000; box-shadow: none; }
.v-test { color: var(--mint); box-shadow: inset 0 0 0 1.5px var(--mint); background: none; }
.v-stop { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; background: none; }
.tally li { border-radius: 64px; font-family: var(--mono); letter-spacing: 0; }
.s-live { background: var(--mint); color: #000; box-shadow: none; }
.s-over, .s-fix { color: #000; background: #fff; box-shadow: inset 0 0 0 1.5px #000; }
.s-proto { color: #000; background: var(--volt); box-shadow: none; }

/* Buttons: black filled, small radius; white inside black panels. */
.btn, .btn.btn { background: #000; color: #fff; border-radius: 8px; font-weight: 500; font-size: 16px; padding: 0 24px; min-height: 52px; }
.btn:hover { background: #2f2f2f; color: #fff; }
.tray .btn, .sheet .btn, .strip .btn, .close .btn, .menu-links .btn { background: #fff; color: #000; }
.tray .btn:hover, .sheet .btn:hover, .strip .btn:hover, .close .btn:hover { background: var(--mint); }
.menu-links .btn { background: #000; color: #fff; }

/* Index card and press clips: flat white. */
.card { background: #fff; border: 0; border-radius: 24px; box-shadow: none; transform: none; padding: 20px 24px 22px; }
.card-who { border-bottom: 2px solid #000; }
.card-who b { font: 500 22px/1 var(--sans); letter-spacing: -.02em; text-transform: uppercase; color: #000; }
.card-lines li { border-bottom-color: #e5e5e5; color: #444; }
.card-lines .k { font: 400 11px/1.6 var(--mono); letter-spacing: 0; color: #000; }
.clip { background: var(--soft); border: 0; border-radius: 64px; box-shadow: none; transform: none !important; }
.cred img, .card-who img { border-color: transparent; }
.decision-set ul { background: transparent; border: 0; gap: 8px; }
.decision-set li { background: #fff; border-radius: 16px; font-family: var(--mono); }

/* Sections: canvas, white top-arc cards and black blocks. */
.real { background: #fff; border-radius: 64px 64px 0 0; border-bottom: 0; }
.belief { background: #fff; border-bottom: 0; }
.record, .rules, .scale, .reading, .sam { border-bottom: 0; }
.proof { background: #fff; }
.sec { border-bottom: 0; }
.sec.tint { background: #fff; border-radius: 64px 64px 0 0; }
.sec.tint + .sec:not(.tint) { border-radius: 0; }
.paper, .panel, .stack3 > div, .case-card, .fit > div { background: #fff; border: 0; border-radius: 24px; box-shadow: none; }
.sec.tint .card, .sec.tint .panel, .sec.tint .paper, .sec.tint .stack3 > div, .belief .card { background: var(--soft); }
.panel.muted { background: #e5e5e5; }
.case-card { border-left: 0; }
.paper-top { border-bottom-color: #e5e5e5; color: #000; }
.entries div { border-bottom-color: #e5e5e5; }
.entries dt { color: #000; }
.stack3 { background: transparent; border: 0; gap: 12px; }
.stack-guarantee { border-top: 0; background: #000 !important; }
.stack-guarantee h3, .stack-guarantee p { color: #fff; }
.stack-guarantee .kicker { color: var(--mint); }
.stack-guarantee p.small { color: #979797; }
.stack-inc li::before { border-color: #000; border-radius: 50%; background: var(--mint); }
.tests { border-top: 2px solid #000; }
.tests li::before { border-color: #000; border-radius: 50%; background: var(--mint); }
.lane .fill { background: #000; border-radius: 64px; }
.lane.main .fill { background: #000; box-shadow: inset 0 0 0 3px #000, inset 0 0 0 100px var(--mint); }
.lane .fill.range { background: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 10px); }
.e23 { background: #000; color: #fff; border-radius: 24px; }
.e23 p { color: #e5e5e5; }
.e23 .when, .lane-copy .when, .steps4 .when { color: #000; font-family: var(--mono); }
.e23 .when { color: var(--mint); }
.e23 h3 a::after { color: var(--mint); }
.lane-copy h3 a::after { color: #000; }
.reading .kind, .doc-list li::before { color: #000; font-family: var(--mono); }
.real-list .label, .who .label, .cc-head .label, .stack3 .kicker, .stack-proof .label { color: #000; }
.sam img.face { border-radius: 32px; filter: grayscale(1); }
.sam p span { color: #000; background: var(--mint); }
.real-quote { border-left: 0; padding: 22px 24px; background: var(--paper); border-radius: 24px; }
.real-quote p, .voice p { font: 500 22px/1.25 var(--sans); letter-spacing: -.02em; color: #000; }
.real-quote cite, .voice cite { font-family: var(--mono); color: #6b6b6b; }

/* Links: mint chips. */
.real-link, .card a, .panel a, .faq a, .doc-grid .intro a, .case-card a, .signal a, .stack-proof a {
  background: var(--mint); color: #000; padding: 3px 10px; border-radius: 64px; text-decoration: none; font-weight: 500; }
.signal a { color: #000; }

.faq { border-top: 2px solid #000; }
.faq summary { font: 500 20px/1.25 var(--sans); text-transform: uppercase; letter-spacing: -.02em; }
.faq summary::after, .fold > summary::after { color: #000; }
.steps4 { border-top: 2px solid #000; }

/* Booking: a black top-arc block; email in yellow. */
.close, .close.close { background: #000; color: #fff; border-top: 0; border-radius: 64px 64px 0 0; }
.close h2 span { color: #979797; }
.close p, .close .me { color: #c6c6c6; }
.me b { color: #fff; }
.chooser legend { color: var(--mint); }
.chooser label { color: #e5e5e5; border-bottom-color: #2f2f2f; }
.chooser input { accent-color: var(--mint); }
.bring .label { color: #979797; }
.bring #bring { color: #fff; }
.close .mail { display: inline-block; margin-left: 12px; padding: 6px 10px; background: var(--volt); color: #000; border-radius: 4px; font-family: var(--mono); }
.close .mail:hover { color: #000; }
footer.site-foot, footer { background: #000; color: #979797; border-top: 1px solid #2f2f2f; }
.site-foot a, .foot-brand p, .foot-legal p { color: #c6c6c6; }
.page-note { background: var(--paper); border-top: 0; font-family: var(--mono); }
.draft { background: var(--volt); color: #000; font-family: var(--mono); }
.thumb-bar { background: rgba(229, 229, 229, .97); box-shadow: none; }

/* Case study ledger. */
.open .facts { background: transparent; border: 0; gap: 8px; }
.open .facts div { background: #fff; border-radius: 16px; }
.open .facts dd { color: #000; }
.short h2 { color: var(--mint); font-family: var(--display); }
.short li::before { border-color: var(--mint); border-radius: 50%; background: none; }
.track i { background: #000; border-radius: 64px; }
.track i.light, .key i.light { background: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 9px); }
.key i { background: #000; border-radius: 64px; }
.months { border-bottom-color: #000; }
.voice { background: #fff; }
.lessons article { border-top: 2px solid #000; }

/* Iteration 2 (5 Oct): proportions. On desktop the hero splits evenly so the headline sets in four lines and
   both columns end near the same point; section spacing follows one rhythm. */
@media (min-width: 981px) {
  .bench-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .bench h1 { font-size: clamp(62px, 6vw, 92px); margin: 18px 0 22px; }
  .offer-grid { gap: 64px; }
  .offer-bench h1, .open h1 { font-size: clamp(60px, 6vw, 88px); }
  .real, .belief, .scale, .reading { padding: 96px 0; }
  .record { padding: 96px 0 64px; }
  .rules { padding-bottom: 96px; }
  .sam { padding: 80px 0; }
  .close { padding: 104px 0 96px; }
  .sec { padding: 88px 0; }
  .sam-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; }
  .sam img.face { width: 200px; height: 240px; }
  .sam p { font-size: 18px; line-height: 1.5; max-width: 62ch; }
  .scale-head { align-items: end; margin-bottom: 44px; }
}
/* D48 QA: on laptops the in-tray fits on the first screen and both hero columns end together. */
@media (min-width: 981px) {
  .bar .wrap { min-height: 80px; }
  .bench, .bench.bench { padding: 20px 0 40px; }
  .bench h1 { font-size: clamp(60px, 5.3vw, 84px); margin: 14px 0 18px; }
  .bench .lede { max-width: 560px; font-size: 17px; line-height: 1.38; }
  .bench .actions { margin-top: 22px; }
  .bench .actions .btn { min-height: 48px; }
  .who-label { margin-top: 22px; }
  .bench .card { margin-top: 8px; padding: 14px 20px 14px; }
  .card-who { padding-bottom: 10px; }
  .card-who b { font-size: 20px; }
  .card-lines { margin-top: 4px; }
  .card-lines li { padding: 4px 0; font-size: 13.5px; }
  .clips { margin-top: 10px; }
  .tray { padding: 18px 18px 16px; }
  .tray-head { margin-bottom: 8px; }
  .pick-hint { margin-bottom: 6px; }
  .items { gap: 5px; }
  .item, .item.item { grid-template-columns: 64px minmax(0, 1fr) 100px; gap: 10px; padding: 9px 12px; border-radius: 14px; }
  .item .text { font-size: 14px; line-height: 1.3; }
  .tally { margin-top: 10px; padding-top: 10px; }
  .note { margin-top: 8px; font-size: 10.5px; line-height: 1.45; }
}
@media (min-width: 1400px) and (min-height: 840px) {
  .tray { padding: 22px 20px 20px; }
  .items { gap: 6px; }
  .item, .item.item { padding: 13px 12px; }
  .tray-head { margin-bottom: 10px; }
  .pick-hint { margin-bottom: 8px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  h1, .offer-bench h1, .open h1 { font-size: clamp(56px, 10vw, 88px); }
  .bench .lede, .offer-bench .lede { max-width: 560px; }
}

/* Phones: one gutter, one rhythm, thumb-sized controls. */
@media (max-width: 640px) {
  .bar .wrap { min-height: 72px; }
  .brand { font-size: 16px; }
  .menu summary { min-height: 44px; }
  .bench { padding: 20px 0 40px; }
  .offer-bench, .open { padding: 20px 0 44px; }
  .kicker-dark { font-size: 11px; line-height: 1.5; }
  h1, .offer-bench h1, .open h1 { font-size: clamp(46px, 13.6vw, 60px); line-height: .88; margin: 12px 0 18px; }
  h2, h2.big { font-size: clamp(42px, 12.4vw, 52px); }
  .belief h2, .close h2 { font-size: clamp(50px, 14.6vw, 64px); }
  .sam h2 { font-size: clamp(40px, 11.6vw, 48px); }
  .lede { font-size: 17px; line-height: 1.4; }
  .actions { margin-top: 22px; }
  .actions .btn { min-height: 56px; border-radius: 12px; font-size: 16px; }

  /* Index card: tighter, with the press clips on one row under their label. */
  .who-label { margin-top: 28px; }
  .card { padding: 18px 18px 16px; border-radius: 24px; }
  .card-who b { font-size: 20px; }
  .card-lines li { padding: 7px 0; font-size: 14.5px; }
  .clips { display: grid; gap: 8px; }
  .clips ul { flex-wrap: nowrap; gap: 6px; }
  .clip { height: 30px; padding: 0 9px; }
  .clip img { height: 12px; }
  .clip img.sq { height: 20px; }

  /* The tray. */
  .tray { border-radius: 24px; padding: 16px 10px 14px; }
  .tray-head { margin: 2px 6px 12px; }
  .tap-hint { margin: 0 6px 10px; }
  .item { border-radius: 14px; min-height: 60px; padding: 12px 12px 12px 10px; grid-template-columns: 92px minmax(0, 1fr); }
  .item .text { font-size: 15px; }
  .note { margin: 12px 6px 0; }
  .sheet { border-radius: 28px 28px 0 0; }
  .sheet-body { padding-inline: 22px; }
  .sheet h3 { font: 500 22px/1.25 var(--sans); letter-spacing: -.02em; }

  /* Sections: 64px apart, rounded tops at 32px. */
  .real, .belief, .scale, .reading, .sec { padding: 64px 0; }
  .record { padding: 64px 0 40px; }
  .rules { padding-bottom: 8px; }
  .scale { padding-bottom: 48px; }
  .sam { padding: 40px 0 56px; }
  .real, .sec.tint, .close { border-radius: 32px 32px 0 0; }
  .real-grid, .record-grid, .reading-grid, .belief-grid { gap: 28px; }
  .real-quote { padding: 18px 20px; }
  .real-quote p { font-size: 19px; line-height: 1.3; }
  .real-list li { padding: 16px 0; }
  .real-list .cs-stamp { margin-bottom: 8px; }
  .tests li { padding: 14px 0; }

  /* Tap-to-open sections as white panels on the canvas. */
  .fold { background: #fff; border-radius: 20px; padding: 0 18px; }
  .fold > summary { min-height: 60px; border-top: 0; font: 500 16px/1.3 var(--sans); text-transform: uppercase; letter-spacing: -.02em; }
  .fold > summary::after { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); font-size: 20px; }
  .fold[open] { padding-bottom: 14px; }
  .fold[open] > summary { border-bottom: 1px solid #e5e5e5; }
  .rules li, .rules li + li { padding-top: 14px; }
  .fit > div { background: var(--soft); border-radius: 16px; padding: 16px; }
  .fit-fold { margin-top: 24px; }
  .reading .fold li a { padding: 14px 0; }
  .reading li:last-child a { border-bottom: 0; }

  /* Ways to work: smaller lane titles so the arrow stays on the line. */
  .lane { padding: 16px 0; }
  .lane-copy h3, .e23 h3 { font-size: 17px; line-height: 1.2; }
  .e23 { padding: 18px; border-radius: 20px; }

  /* About: photo above, then the full-width heading. */
  .sam-grid { grid-template-columns: 1fr; gap: 20px; }
  .sam img.face { width: 104px; height: 104px; border-radius: 28px; }
  .sam h2 { margin-top: 8px; }

  /* Booking: full-width button, email on its own line. */
  .close { padding: 64px 0 120px; }
  .close .btn { width: 100%; justify-content: center; min-height: 56px; border-radius: 12px; }
  .close .mail { display: table; margin: 16px 0 0; }
  .chooser label { min-height: 52px; }

  /* The booking bar floats as a black capsule. */
  .thumb-bar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 8px 16px 8px 8px; background: #000; border: 0; border-radius: 20px; box-shadow: none; transform: translateY(calc(100% + 40px)); }
  .thumb-bar .btn { min-height: 48px; border-radius: 14px; background: var(--mint); color: #000; }
  .thumb-bar span { color: #c6c6c6; font-family: var(--mono); }

  footer.site-foot { padding-top: 44px; }
}
@media (max-width: 360px) {
  .clip { padding: 0 7px; }
  .clip img { height: 11px; }
  .item { grid-template-columns: 84px minmax(0, 1fr); }
}

/* D50: the decision record and "Works inside your rules" join "Start small. Stop anytime."
   The Sprint row opens into a white panel: what you leave with on the left, the example record on the right,
   with the guarantee and the capacity line under the record. The page loses a section and a headline. */
.lane .record { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-areas: "copy paper" "copy foot"; gap: 14px 32px; align-items: start; margin: 14px 0 2px; padding: 22px 22px 18px 24px; background: #fff; border-radius: 24px; }
.record-copy { grid-area: copy; padding-top: 2px; }
.record-fold { grid-area: paper; }
.record-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.record-copy .kicker { display: block; margin-bottom: 10px; }
.record-copy h3 { margin: 0 0 12px; font: 500 22px/1.1 var(--sans); text-transform: uppercase; letter-spacing: -.02em; }
.record-copy .record-intro { margin: 0; max-width: none; color: #444; font-size: 15px; line-height: 1.45; }
.record-terms { margin: 0; color: #444; font-size: 14.5px; line-height: 1.4; }
.record-terms strong { color: #000; font-weight: 600; }
.record-cap { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px 6px 10px; background: var(--mint); color: #000; border-radius: 64px; white-space: nowrap; }
.record-cap::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #000; }
.lane .record .paper { background: var(--soft); border-radius: 16px; }
.lane .record .paper-top { padding: 11px 18px; border-bottom-color: #e0e0e0; }
.lane .record .entries { padding: 2px 18px 4px; }
.lane .record .entries div { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom-color: #e0e0e0; }
.lane .record .entries dd { font-size: 14.5px; line-height: 1.45; }
.lane.main { padding-bottom: 16px; }
.scale .e23 { margin-top: 16px; }
.scale .rules { margin-top: 36px; padding: 0; border-bottom: 0; }
.scale .rules > h3 { margin: 0 0 12px; }
.scale .fit-fold { margin-top: 24px; }
@media (min-width: 981px) { .scale { padding: 88px 0 80px; } .scale-head { margin-bottom: 36px; } }
@media (min-width: 641px) { .record-fold > summary { display: none; } }
@media (max-width: 980px) and (min-width: 641px) {
  .lane .record { grid-template-columns: 1fr; grid-template-areas: "copy" "paper" "foot"; }
}
@media (max-width: 640px) {
  .lane .record { grid-template-columns: 1fr; grid-template-areas: "copy" "foot" "paper"; gap: 14px; margin-top: 12px; padding: 20px 18px 18px; }
  .record-copy h3 { font-size: 20px; margin-bottom: 8px; }
  .record-foot { display: grid; gap: 12px; justify-items: start; padding-top: 14px; border-top: 1px solid #e5e5e5; }
  .lane .record .fold { padding: 0 16px; background: var(--soft); border-radius: 16px; }
  .lane .record .fold[open] { padding-bottom: 6px; }
  .lane .record .fold > summary { min-height: 52px; font-size: 14.5px; }
  .lane .record .fold[open] > summary { border-bottom-color: #e0e0e0; }
  .lane .record .fold .paper { background: transparent; border-radius: 0; margin: 0 -16px; }
  .lane .record .paper-top { padding: 12px 16px; }
  .lane .record .entries { padding: 4px 16px 6px; }
  .lane .record .entries div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .scale .rules { margin-top: 28px; }
  .scale .fit-fold { margin-top: 12px; }
  .scale { padding-bottom: 56px; }
}

/* D52: case-study stamps read at a glance; the case section runs straight into "What I believe" across a black rule
   instead of two stacked section paddings of white; the booking button and the email sit as an equal pair. */
.cs-stamp, .stamp { font-size: 13px; padding: 9px 14px 8px; }
.real:has(+ .belief) { padding-bottom: 64px; }
.real + .belief { padding-top: 0; }
.real + .belief .belief-grid { padding-top: 64px; border-top: 2px solid #000; }
.close .mail { display: inline-flex; align-items: center; vertical-align: top; min-height: 52px; margin: 0 0 0 12px; padding: 0 24px; border-radius: 8px; font-size: 16px; }
@media (max-width: 640px) {
  .cs-stamp, .stamp { font-size: 12px; padding: 8px 12px 7px; }
  .real:has(+ .belief) { padding-bottom: 48px; }
  .real + .belief .belief-grid { padding-top: 48px; }
  .close .mail { display: flex; justify-content: center; min-height: 56px; margin: 12px 0 0; border-radius: 12px; }
}

/* D55: on the Sprint page the example record sits above the record's contents list. */
.doc-papers { display: grid; gap: 16px; min-width: 0; }
.record-example .entries dd { font-size: 15px; }

/* D64: privacy policy, a single readable column. */
.legal .wrap { max-width: 760px; }
.legal h1 { margin: 14px 0 18px; font-size: clamp(48px, 6vw, 88px); }
.legal .lede { margin: 0 0 40px; }
.legal h2 { margin: 40px 0 12px; font: 600 20px/1.25 var(--sans); text-transform: none; letter-spacing: -.01em; color: #000; }
.legal p, .legal li { color: #333; font-size: 16px; line-height: 1.6; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: #000; font-weight: 600; }
.legal a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.legal code { font: 14px var(--mono); background: #fff; padding: 1px 5px; border-radius: 4px; }
.foot-legal .small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .legal h1 { font-size: 48px; } .legal h2 { margin-top: 32px; font-size: 18px; } }
@media (pointer: coarse) {
  .foot-legal .small a, .foot-legal .consent-link, .legal p a, .legal li a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* D66: on touch screens the mint chip links got brand.css's padding plus negative margin (a tap-area trick meant for plain
   text links), so the chip grew over the text above it, e.g. the research source in the phone sheet. Chips get a real
   40px height instead, with no negative margin. */
@media (pointer: coarse) {
  .real-link, .card a, .panel a, .faq a, .doc-grid .intro a, .case-card a, .case-card > a, .signal a, .stack-proof a, .record-intro a {
    display: inline-flex; align-items: center; min-height: 40px; padding-block: 0; margin-block: 0; }
  .signal a { margin-top: 6px; }
}

/* D67, D69: display headings had their capitals almost touching at .88–.90 (Q tails, commas and apostrophes met the
   line below). Every Anton title and section heading now uses .95. */
h1, h2, h2.big, .close h2, .bench h1, .offer-bench h1, .open h1 { line-height: .95; }

/* D70: on wide screens the hero's left column (headline, button, index card) ended up to 71px below the in-tray.
   The tray now stretches to the row's height and spreads its eight items evenly, so both columns end together. */
@media (min-width: 981px) {
  .bench-grid > .tray { align-self: stretch; display: flex; flex-direction: column; }
  .bench-grid > .tray .items { flex: 1; align-content: space-between; }
}

/* D70: the case study page brings its own narrower .wrap (1160px); use the site's width so its logo and content line up. */
.wrap { width: min(100% - 48px, 1240px); }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

/* D74: the in-tray card's research source is a quiet mono link at the end of the sentence (it was a mint chip on its own
   line), and on wider screens "Talk about this one" shares the research row instead of sitting below it. */
.signal a.src.src { display: inline; min-height: 0; margin: 0; padding: 0; background: none; border-radius: 0; color: var(--mint);
  font: 400 12px/1.4 var(--mono); letter-spacing: -.02em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.signal a.src.src:hover { color: #fff; }
@media (pointer: coarse) { .signal a.src.src { display: inline-block; padding-block: 12px; margin-block: -12px; } }
.detail-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 14px; border-top: 1px solid var(--rule-dark); }
.detail-foot .signal { flex: 1 1 520px; padding-top: 0; border-top: 0; }
.detail-foot .talk { flex-shrink: 0; }

/* About page and the homepage's short link line under the Sam paragraph. */
.about .about-face { display: block; width: 120px; height: 144px; margin: 0 0 24px; border-radius: 28px; object-fit: cover; object-position: 50% 18%; filter: grayscale(1); }
.about .actions { margin: 4px 0 8px; }
.about .actions .btn { color: #fff; text-decoration: none; }
.sam .sam-links { margin-top: 14px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 0 22px; }
.sam .sam-links a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .sam .sam-links a { display: inline-block; padding-block: 12px; margin-block: -12px; } }

/* E-23 guide: the short answer (the part assistants quote) and the offer sit in their own boxes. */
.guide .byline { margin: 0 0 28px; font: 400 13px/1.5 var(--mono); letter-spacing: -.02em; color: var(--muted); }
.guide .answer { margin: 0 0 8px; padding: 22px 24px; background: #fff; border: 2px solid #000; border-left-width: 10px; }
.guide .answer p { margin: 0; color: #000; font-size: 18px; line-height: 1.55; font-weight: 500; }
.guide ol { margin: 0 0 14px; padding-left: 22px; }
.guide .offer-box { margin: 40px 0 8px; padding: 24px; background: var(--mint); border: 2px solid #000; }
.guide .offer-box h2 { margin-top: 0; }
.guide .offer-box p { color: #000; }
.guide .offer-box .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.guide .offer-box .btn { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.guide .small-print { margin-top: 32px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .guide .answer { padding: 18px 16px; border-left-width: 8px; } .guide .offer-box { padding: 18px 16px; } .guide .offer-box .btn { width: 100%; justify-content: center; } }

/* Small inline link under the E-23 offer hero lede, same underline treatment as the footer links. */
.lede-note { margin: 12px 0 0; font-size: 15px; line-height: 1.4; color: #444; }
.lede-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lede-note a:hover { color: #000; }
@media (pointer: coarse) { .lede-note a { display: inline-block; padding-block: 12px; margin-block: -12px; } }