/*
 * Blackbook Engine — design system.
 *
 * Light/dark alternation is driven by .block / .block--dark on each <main>
 * child. Each block sets a local palette (--fg, --fg-2, --fg-3, --rule,
 * --link, --tint, --card) and every child rule reads those, so one class
 * flips a whole section. Scroll reveal lives in /js/reveal.js and is gated on
 * html.js, so a reader without JavaScript sees the whole page.
 *
 * Lineage: this file replaced the Venture design system in place on
 * 2026-09-12 — same path, same role, so the sixteen pages that link it needed
 * no change. The Venture layer is preserved in .agents/venture-ds/ and in this
 * file's git history; the filename names a role, not a provenance claim.
 * Rationale: .agents/2026-09-12-apple-port-design.md.
 */

/* ============================================================
   Tokens
   ============================================================ */
:root{
  --accent:       #0a0a0a;   /* filled pill, outlined border, links (David 09-10) */
  --accent-hover: #1a1a1a;
  --accent-soft:  #A78BFA;   /* on-dark accent — the only violet the UI reads */
  /* Raw channels, not a colour: the two violet surfaces that are deliberately
     not --accent-soft — the hero glow and the tint under a hovered button. They
     used to be written out as rgba(124,58,237,…) in four places, which read as
     drift from a system that names its colours. */
  --violet: 124,58,237;

  --canvas:  #f5f5f7;
  --pebble:  #e2e2e5;
  --white:   #ffffff;

  --carbon:   #1d1d1f;
  --graphite: #474747;
  --ash:      #6E6E6E;
  --mist:     #858585;
  --hairline: #d2d2d7;

  /* Dark content blocks — Apple's carbon. Set #000000 for harder contrast. */
  --ink-block: #1d1d1f;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --sans-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;

  /* The only shadow in the system — product render, never cards/buttons/nav */
  --shadow-product: rgba(0,0,0,0.22) 3px 5px 30px 0px;
}

/* ============================================================
   Reset + base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px; line-height:1.47; letter-spacing:-0.272px;
  color:var(--carbon); background:var(--canvas);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;padding:0}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.18;letter-spacing:-0.02em}

/* ============================================================
   Content blocks — light / dark
   ============================================================ */
.block{
  --fg:var(--carbon); --fg-2:var(--graphite); --fg-3:var(--ash);
  --rule:var(--hairline); --link:var(--accent); --tint:var(--canvas);
  --card:#fff;
  background:#fff; color:var(--fg);
}
.block--dark{
  /* .55, not .46: tertiary text measured 4.29:1 on a --card tint inside a dark
     block (.pricing-period), under the 4.5 floor. .55 clears it with margin and
     stays visually a step below --fg-2. */
  --fg:#fff; --fg-2:rgba(255,255,255,.74); --fg-3:rgba(255,255,255,.55);
  --rule:rgba(255,255,255,.17); --link:var(--accent-soft); --tint:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.055);
  background:var(--ink-block); color:var(--fg);
}
/* A black filled pill vanishes on a dark block — invert it, as Apple does. */
.block--dark .btn-primary,
.block--dark .pill--filled{background:#fff;color:#0a0a0a}
.block--dark .btn-primary:hover{background:#e8e8ed}
.block--dark .btn-secondary,
.block--dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
/* The nav is a dark surface too, but it lives outside <main>, so the two rules
   above never reached it: Login rendered --accent (#0a0a0a) on carbon at 1.2:1
   and the filled CTA read as plain text. Same inversion, same reason. The
   hand-tuned homepage already did this for its own nav; this is the missing half. */
.site-nav .btn-primary,
.site-nav .pill--filled{background:#fff;color:#0a0a0a}
.site-nav .btn-primary:hover{background:#e8e8ed}
.site-nav .btn-secondary,
.site-nav .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.site-nav .btn-secondary:hover,
.site-nav .btn-ghost:hover{background:rgba(255,255,255,.12)}
/* --accent is now near-black, so anything reading it inside a dark block that
   isn't a button needs the white treatment too, or it renders invisible. */
.block--dark .req,
.block--dark .trust-strip .ts-tick,
.block--dark .badge-accent{color:#fff}
.block--dark .badge-accent{background:rgba(255,255,255,.14)}
/* .board-preview is a white card nested inside the dark hero, so the white
   treatment above reaches it and the badge lands white-on-white. Re-assert the
   light-surface values for anything inside the preview. */
.board-preview .badge-accent{background:rgba(10,10,10,.06);color:var(--accent)}

/* ============================================================
   Scroll reveal — see reveal.js. Gated on html.js so a no-JS reader
   gets the page rather than a blank one.
   ============================================================ */
.js .reveal{
  opacity:0;transform:translateY(14px);
  /* --rd is the per-element stagger, set by reveal.js */
  transition:opacity .7s cubic-bezier(.4,0,.2,1) var(--rd,0ms),
             transform .7s cubic-bezier(.4,0,.2,1) var(--rd,0ms);
}
.js .reveal.in{opacity:1;transform:none}
/* The hero's product visual settles rather than simply appearing. Must stay
   after the two rules above — same specificity, so order decides. */
.js .reveal--scale{transform:translateY(14px) scale(.965)}
.js .reveal--scale.in{transform:none}

/* ============================================================
   Layout
   ============================================================ */
.container{max-width:1024px;margin-inline:auto;padding-inline:22px}
.section{padding:100px 0}
.section--tight{padding:64px 0}
.section-alt{padding:100px 0}          /* surface comes from the block class */
.center{text-align:center}

/* ============================================================
   Type scale (Apple's table)
   ============================================================ */
.section-head{text-align:center;max-width:46rem;margin:0 auto 56px}
.section-head .eyebrow,
.eyebrow{
  display:block;font-size:12px;line-height:1.33;letter-spacing:0.08em;
  text-transform:uppercase;font-weight:600;color:var(--link);
}
.section-head h1{
  font-family:var(--sans-display);
  font-size:clamp(2.25rem,5vw,56px);line-height:1.07;letter-spacing:0.616px;
  font-weight:600;margin-top:14px;color:var(--fg);
}
.section-head h2{
  font-family:var(--sans-display);
  font-size:clamp(1.75rem,3.2vw,40px);line-height:1.14;letter-spacing:0.44px;
  font-weight:600;margin-top:14px;color:var(--fg);
}
.section-head p{
  font-size:clamp(1.125rem,1.8vw,21px);line-height:1.47;letter-spacing:-0.105px;
  font-weight:300;color:var(--fg-2);margin-top:20px;
}
.section-head h1 + p,.section-head h2 + p{margin-top:20px}

.lede{max-width:640px;margin-inline:auto}
.lede p{font-size:21px;line-height:1.47;letter-spacing:-0.105px;font-weight:300;color:var(--fg-2)}
.lede p + p{margin-top:22px}
.lede strong{font-weight:600;color:var(--fg)}
.lead{font-size:21px;line-height:1.47;letter-spacing:-0.105px;font-weight:300;color:var(--fg-2)}

.text-muted{color:var(--fg-3)}
.text-secondary{color:var(--fg-2)}
.note,.hint{font-size:14px;line-height:1.29;letter-spacing:-0.224px;color:var(--fg-3)}
.fineprint{font-size:12px;line-height:1.33;letter-spacing:-0.264px;color:var(--fg-3)}
/* Visually hidden, still in the accessibility tree — for a section heading that
   supplies an outline level the design does not draw. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* The generated pages carry a skip link (design-system.css styles it there);
   mock.css is standalone, so without this the link renders as stray text on
   every page. Parked off-screen until focused. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#fff;color:#0a0a0a;
  padding:12px 16px;border-radius:10px;
  font-size:14px;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:16px;top:8px;outline:2px solid #0a0a0a;outline-offset:2px}
main:focus{outline:none}

/* ============================================================
   Nav — dark translucent material
   ============================================================ */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(29,29,31,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:background-color .28s ease, border-color .28s ease;
}
/* Past the hero the bar stops being a window onto the hero and becomes chrome,
   so the material thickens. Tint stays carbon — matching --ink-block is what
   keeps the seam above the hero from returning. */
.site-nav.is-scrolled{
  background:rgba(29,29,31,.92);
  border-bottom-color:rgba(255,255,255,.2);
}
.site-nav .nav-inner{display:flex;align-items:center;gap:22px;height:52px}
.site-nav .logo{display:inline-flex;align-items:center;gap:8px}
.site-nav .logo img{height:22px;filter:invert(1)}
.nav-links{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav-links a{
  padding:6px 11px;border-radius:8px;
  font-size:12px;line-height:1.33;letter-spacing:-0.264px;color:rgba(255,255,255,.86);
  transition:color .15s ease;
}
.nav-links a:hover{color:#fff}
.nav-links a[aria-current="page"]{color:var(--accent-soft);font-weight:600}
/* Everything in the bar sits on carbon, so the stock rings have to invert —
   .btn:focus-visible draws --accent, which is near-black and vanishes here.
   Negative offset keeps the drawer's ring inside the row instead of straddling
   the hairline separators. */
.nav-links a:focus-visible,
.site-nav .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.site-nav.nav-open .nav-links a:focus-visible{outline-offset:-2px}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.3);
  border-radius:8px;padding:8px 10px;cursor:pointer;
  /* 44px floor: this is the only way into the nav on a touch device. */
  min-width:44px;min-height:44px;
  flex-direction:column;align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:17px;height:1.5px;background:#fff;margin:4px 0}
.nav-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Below 768px the 6 links plus the CTA need 657px of intrinsic width, so the bar
   cannot hold them — it used to overflow the viewport by 157px and drag the whole
   page sideways. Collapse to the toggle and let reveal.js's inline handler open a
   panel. Same shape as the hand-tuned homepage's .nav.open; the class names differ
   because the generated pages carry the site's own nav markup.
   The panel goes solid: the translucent material is a window onto the hero, and a
   window is the wrong surface for a list you are reading. */
@media (max-width:768px){
  .nav-toggle{display:flex}
  .nav-links,.nav-cta{display:none}
  .site-nav.nav-open{background:var(--ink-block);border-bottom-color:transparent}
  /* The open panel is 553px tall — taller than a short viewport (landscape
     phone, or a phone with the URL bar expanded). The bar is sticky with body
     as its containing block, so it stays pinned for the whole page scroll and
     the page can never bring the panel's overflow into view: the CTA buttons
     at y=542 are simply unreachable. Cap the open panel to the viewport and
     let the panel itself scroll. The toggle sits in the first row, so the way
     out of the drawer stays on screen while the rows move under it. */
  .site-nav.nav-open{
    max-height:100vh;max-height:100dvh;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .site-nav.nav-open .nav-inner{flex-wrap:wrap;height:auto;padding-block:10px}
  .site-nav.nav-open .nav-links,
  .site-nav.nav-open .nav-cta{
    display:flex;flex-direction:column;align-items:stretch;
    width:100%;margin:0;gap:0;
  }
  /* Drawer rows are touched, not hovered, so they get body-size text and a row
     height well past the 44px floor rather than the desktop bar's 12px/28px. */
  .site-nav.nav-open .nav-links a{
    padding:15px 4px;border-top:1px solid rgba(255,255,255,.14);
    border-radius:0;font-size:17px;letter-spacing:-0.272px;
  }
  .site-nav.nav-open .nav-cta{padding:14px 0 6px;gap:10px}
  .site-nav.nav-open .nav-cta .btn{width:100%;justify-content:center}
}

/* The first block on every page is the hero: pull it under the sticky nav so
   the translucent backdrop samples the dark hero, not the frost body.
   Matches whatever the first child is — some pages lead with <header>. */
main > :first-child{margin-top:-52px;padding-top:152px}

/* ============================================================
   Hero glow — the drifting surface on pages that have no scenic
   object of their own (short text and form pages). reveal.js adds
   this class only when nothing else on the page drifts, so pages
   with a product shot or a banner keep exactly what they had.
   The drift lands on the pseudo-element through --px: not one
   glyph on the page moves.
   Worst case is the gradient's centre at full strength, which
   still leaves secondary text at ~7.6:1 and body text at ~12.6:1.
   ============================================================ */
.hero-glow{position:relative;overflow:hidden;--glow-a:.42;--glow-d:min(1040px,120vw)}
.hero-glow::before{
  content:'';position:absolute;left:50%;
  /* Anchor the glow's CENTRE a fixed 150px into the hero rather than a
     percentage of its height. At -38% a short hero put the bright core below
     the fold, so overflow:hidden left only the grey-violet falloff visible —
     which is why these pages read weaker than the tall ones. */
  top:calc(150px - var(--glow-d) / 2);
  width:var(--glow-d);aspect-ratio:1 / 1;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(var(--violet),var(--glow-a)),rgba(var(--violet),0) 72%);
  pointer-events:none;z-index:0;
  translate:0 var(--px,0px);
}
.hero-glow > *{position:relative;z-index:1}

/* ============================================================
   Buttons — 980px pills, 17px weight 400
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:980px;padding:11px 21px;border:1px solid transparent;
  font-family:var(--sans);font-size:17px;line-height:1.24;letter-spacing:-0.272px;font-weight:400;
  white-space:nowrap;cursor:pointer;text-decoration:none;text-underline-offset:0;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s ease-out;
}
.btn:active{transform:scale(0.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* --accent is near-black now, so the focus ring must invert on dark blocks */
.block--dark .btn:focus-visible{outline-color:#fff}
.btn-lg{padding:13px 26px}
.btn-sm{padding:8px 15px;font-size:14px;letter-spacing:-0.224px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:rgba(var(--violet),.06)}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-outline:hover{background:rgba(var(--violet),.06)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--accent);padding-inline:21px}
.btn-ghost:hover{background:rgba(var(--violet),.06)}
.btn-link{background:transparent;color:var(--link);padding:0;text-decoration:underline;text-underline-offset:3px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* ============================================================
   Cards — hairline borders, 8px radius, never a shadow
   ============================================================ */
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:24px;box-shadow:none;
}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.feature-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:768px){ .feature-grid--2{grid-template-columns:1fr} }
.feature-card h3{font-size:21px;line-height:1.24;letter-spacing:-0.105px;font-weight:600;color:var(--fg)}
.feature-card p{font-size:17px;line-height:1.47;letter-spacing:-0.272px;color:var(--fg-2);margin-top:8px}
.feature-card ul{margin-top:16px;display:grid;gap:8px}
.feature-card li{padding-left:20px;position:relative;font-size:14px;line-height:1.29;letter-spacing:-0.224px;color:var(--fg-2)}
.feature-card li::before{content:'—';position:absolute;left:0;color:var(--fg-3)}
.feature-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:8px;background:var(--tint);
  color:var(--link);margin-bottom:16px;
}
.feature-icon svg{width:22px;height:22px}

.pricing-card{display:flex;flex-direction:column;gap:18px;padding:32px}
.pricing-card.is-featured{border-color:var(--accent);box-shadow:none}
.pricing-card ul{display:grid;gap:8px}
.pricing-card li{padding-left:20px;position:relative;font-size:14px;line-height:1.29;letter-spacing:-0.224px;color:var(--fg-2)}
.pricing-card li::before{content:'—';position:absolute;left:0;color:var(--fg-3)}
.pricing-price{font-family:var(--sans-display);font-size:40px;line-height:1.14;font-weight:600;color:var(--fg)}
.pricing-period{font-size:14px;line-height:1.29;color:var(--fg-3)}

.blog-card{display:flex;flex-direction:column;gap:8px;padding:24px;text-decoration:none}
.blog-card:hover{border-color:var(--fg-3)}
.blog-card h3{font-size:21px;line-height:1.24;letter-spacing:-0.105px;font-weight:600;color:var(--fg)}
.blog-card p{font-size:14px;line-height:1.29;color:var(--fg-2)}
.blog-date{font-size:12px;line-height:1.33;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-3)}

.tag,.badge{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  border-radius:980px;padding:4px 11px;font-size:12px;font-weight:600;letter-spacing:-0.264px;
  background:var(--tint);color:var(--fg-2);border:1px solid transparent;
}
.badge-accent{background:rgba(10,10,10,.06);color:var(--accent)}

/* Stat tiles */
.stat-tile{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:20px}
.stat-label{font-size:12px;font-weight:600;letter-spacing:-0.264px;color:var(--fg-3)}
.stat-value{font-family:var(--sans-display);font-size:28px;line-height:1.18;font-weight:600;margin-top:4px;color:var(--fg)}
/* Provenance line under a proof-point stat row. See intel-assets.html. */
.stat-note{font-size:12px;line-height:1.5;letter-spacing:-0.264px;color:var(--fg-3);margin-top:16px;max-width:60ch}

/* ============================================================
   Hero (homepage + book-a-demo splash variants)
   ============================================================ */
.hero{padding:100px 0}
.hero--split{display:block}
.hero-eyebrow{
  display:block;font-size:12px;line-height:1.33;letter-spacing:0.08em;
  text-transform:uppercase;font-weight:600;color:var(--link);
}
.hero h1{margin-top:14px;font-family:var(--sans-display);font-size:clamp(2.25rem,5vw,56px);line-height:1.07;letter-spacing:0.616px;font-weight:600}
.hero-sub{font-size:clamp(1.125rem,1.8vw,21px);line-height:1.47;letter-spacing:-0.105px;font-weight:300;color:var(--fg-2);margin-top:20px;max-width:34rem}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero--split{text-align:center}
.hero--split .hero-sub{margin-inline:auto}
.hero--split .hero-cta{justify-content:center}

.board-preview{
  max-width:880px;margin:72px auto 0;
  --fg:var(--carbon); --fg-2:var(--graphite); --fg-3:var(--ash);
  --rule:var(--hairline); --link:var(--accent); --tint:var(--canvas);
  background:#fff;color:var(--fg);
  border:1px solid var(--hairline);border-radius:8px;padding:26px;
  box-shadow:var(--shadow-product);text-align:left;
}
.board-preview-title{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;color:var(--fg-3)}
.board-preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.board-preview-stats .bps{background:var(--tint);border-radius:8px;padding:14px 16px}
.board-preview-stats .bps b{display:block;font-family:var(--sans-display);font-size:28px;line-height:1.18;font-weight:600}
.board-preview-stats .bps span{font-size:12px;letter-spacing:-0.264px;color:var(--fg-3)}
.board-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--rule);margin-top:20px}
.board-row .board-row-title{font-size:17px;font-weight:600;letter-spacing:-0.272px}
.board-row p{font-size:12px;letter-spacing:-0.264px;color:var(--fg-3);margin-top:3px}
/* Ported from the Venture layer (its design-system.css, lines 190-198 and 562):
   the three classes the live pages use that the Apple layer did not style, plus
   the rule that fits the byline photo inside the avatar circle. Colours are local
   tokens, so these invert correctly inside a .block--dark section. */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--tint);border:1px solid var(--rule);color:var(--fg);
  font-size:14px;font-weight:600;flex:none;
}
.avatar-sm{width:28px;height:28px;font-size:12px}
.blog-meta .avatar img{width:100%;height:100%;object-fit:cover}
/* Not a gap: .board-row is styled above, but .board-meta (its right-hand cell)
   never was, and index.html uses it. */
.board-row .board-meta{flex:none;text-align:right}
@media (max-width:700px){ .board-preview-stats{grid-template-columns:1fr} }

/* ============================================================
   Engine steps
   ============================================================ */
.engine-steps{max-width:720px;margin:56px auto 0}
.engine-step{
  display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:baseline;
  padding:36px 0 30px;border-top:1px solid var(--rule);
}
.engine-step:first-child{border-top:0;padding-top:0}
.engine-step .step-num{
  font-size:12px;letter-spacing:0.06em;font-weight:600;color:var(--fg-3);
  font-variant-numeric:tabular-nums;
}
.engine-step h3{font-size:21px;line-height:1.24;letter-spacing:-0.105px;font-weight:600;color:var(--fg)}
.engine-step p{font-size:17px;line-height:1.47;letter-spacing:-0.272px;color:var(--fg-2);margin-top:8px;max-width:56ch}
.steps{margin-top:32px;display:grid;gap:20px}
.steps .n{font-size:12px;letter-spacing:0.06em;font-weight:600;color:var(--fg-3)}

/* ============================================================
   Proof band
   ============================================================ */
.proof-band{padding:110px 0;text-align:center}
.proof-stats{max-width:40rem;margin:0 auto}
.proof-big{
  font-family:var(--sans-display);font-size:clamp(4rem,11vw,112px);
  line-height:1;letter-spacing:-2px;font-weight:600;color:var(--fg);
}
.proof-big--muted{color:var(--fg-3)}
.proof-caption{
  font-size:21px;line-height:1.47;letter-spacing:-0.105px;font-weight:300;
  color:var(--fg-2);max-width:26rem;margin:16px auto 0;
}
.proof-note{font-size:17px;line-height:1.47;letter-spacing:-0.272px;color:var(--fg-3);max-width:34rem;margin:30px auto 0}
.proof-note a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   CTA — a full-bleed typographic block, not a card
   ============================================================ */
.cta-banner{
  display:block;background:transparent;border-radius:0;padding:0;
  text-align:center;color:var(--fg);
}
.cta-banner h2{
  font-family:var(--sans-display);
  font-size:clamp(1.75rem,3.2vw,40px);line-height:1.14;letter-spacing:0.44px;
  font-weight:600;color:var(--fg);margin:0 0 16px;
}
.cta-banner .cta-sub{
  font-size:clamp(1.125rem,1.8vw,21px);line-height:1.47;letter-spacing:-0.105px;
  font-weight:300;color:var(--fg-2);max-width:28rem;margin:0 auto 30px;
}
.cta-banner .btn{margin:0 7px}

/* ============================================================
   Trust strip
   ============================================================ */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:32px}
.trust-strip a,.trust-strip span{
  display:inline-flex;align-items:center;gap:8px;min-height:24px;
  font-size:14px;line-height:1.29;color:var(--fg-3);text-decoration:none;
}
.trust-strip a:hover{color:var(--fg)}
.trust-strip .ts-tick{color:var(--accent);font-weight:700}

/* ============================================================
   Forms
   ============================================================ */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:640px;margin:0 auto}
.form-field{display:grid;gap:8px}
.form-field--full{grid-column:1 / -1}
.form-field label{font-size:12px;font-weight:600;letter-spacing:-0.264px;color:var(--fg-2)}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }

.input,.select,.textarea{
  width:100%;padding:11px 15px;border-radius:8px;
  border:1px solid var(--rule);background:var(--card);color:var(--fg);
  font-family:inherit;font-size:17px;line-height:1.24;letter-spacing:-0.272px;
}
.input::placeholder,.textarea::placeholder{color:var(--fg-3)}
.input:focus,.select:focus,.textarea:focus{
  outline:2px solid var(--accent);outline-offset:0;border-color:transparent;
}
.textarea{resize:vertical;min-height:6rem}
.select{appearance:none;padding-right:2.25rem}
.form-status{margin-top:8px;font-size:14px;font-weight:600;min-height:1.5em;color:var(--fg-2)}
.form-status[data-state="ok"]{color:#22C55E}
.form-status[data-state="error"]{color:#EF4444}
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none}

.accordion{border:1px solid var(--rule);border-radius:8px;background:var(--card);margin-top:12px}
.accordion summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;cursor:pointer;font-size:17px;font-weight:600;letter-spacing:-0.272px;
  list-style:none;color:var(--fg);
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:'+';color:var(--fg-3);font-weight:600}
.accordion[open] summary::after{content:'−'}
.accordion .accordion-body{padding:0 20px 16px;font-size:17px;line-height:1.47;color:var(--fg-2)}
.faq-list{display:grid;gap:0;max-width:720px;margin:0 auto}

/* ============================================================
   Article (blog post)
   ============================================================ */
.article{max-width:680px;margin:0 auto}
.article p{font-size:21px;line-height:1.47;letter-spacing:-0.105px;font-weight:300;color:var(--fg-2)}
.article p + p{margin-top:22px}
.article h2{font-family:var(--sans-display);font-size:28px;line-height:1.18;font-weight:600;margin:56px 0 16px;color:var(--fg)}
.article h3{font-size:21px;line-height:1.24;font-weight:600;margin:40px 0 12px;color:var(--fg)}
.article ul,.article ol{color:var(--fg-2);font-size:21px;line-height:1.47;font-weight:300;padding-left:24px;list-style:disc}
.article li{margin-top:10px}
.article strong{font-weight:600;color:var(--fg)}
.article .illustration{display:block;border-radius:8px;margin:32px auto}
.blog-meta{
  display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--fg-3);font-size:12px;letter-spacing:-0.264px;margin-top:20px;
}

/* ============================================================
   Footer — full-width link grid, brand line in the bottom bar
   ============================================================ */
.footer{
  background:var(--canvas);color:var(--carbon);
  border-top:1px solid var(--hairline);padding:52px 0 36px;
}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:32px}
.footer-brand img{height:22px}
.footer-brand p{font-size:12px;line-height:1.33;letter-spacing:-0.264px;color:var(--ash);margin-top:12px;max-width:22rem}
.footer-cols{display:contents}
/* h2, not h4: the column headings followed the page's last h2, so every page
   skipped a level (2->4). h2 also survives contact.html, which has no h2 of its
   own. Size is pinned, so the tag change moves nothing. */
.footer-col h2{font-size:14px;font-weight:600;letter-spacing:-0.264px;color:var(--carbon)}
.footer-col ul{margin-top:13px;display:grid;gap:1px}
/* 12px/1.33 is a 16px row — under WCAG 2.2 SC 2.5.8's 24px floor. The padding
   lifts the target to 24 without moving a glyph: 4+1+4 keeps the old 9px gap. */
.footer-col a{font-size:12px;line-height:1.33;letter-spacing:-0.264px;color:var(--ash);display:inline-block;padding-block:4px}
.footer-col a:hover{color:var(--carbon);text-decoration:underline;text-underline-offset:3px}
.footer-bottom{
  margin-top:44px;padding-top:18px;border-top:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12px;line-height:1.33;letter-spacing:-0.264px;color:var(--ash);
}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }

/* ============================================================
   Page-specific leftovers (book / splash pages carry their own
   <style> blocks; these keep the shell consistent)
   ============================================================ */
.splash-hero,.book-hero{padding:100px 0;text-align:center}
.splash-body,.book-body{padding:64px 0}
.qual-card{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:32px;max-width:640px;margin:0 auto}
.qual-form,.qf{display:grid;gap:16px}
.qf label{font-size:12px;font-weight:600;letter-spacing:-0.264px;color:var(--fg-2)}
.req{color:var(--accent)}
.sched-frame{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--card)}
.fallback{font-size:14px;color:var(--fg-3)}
.divider{border:0;border-top:1px solid var(--rule);margin:24px 0}

/* ============================================================
   Motion + accessibility
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
  .btn:active{transform:none}
  /* never hide anything when motion is reduced — content over animation */
  .js .reveal{opacity:1;transform:none;transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .site-nav{background:var(--ink-block);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .site-nav{background:var(--ink-block)}
  .card,.accordion,.input,.select,.textarea{border-color:var(--fg-3)}
}