/* ============================================================
   DESIGN DELULU — main stylesheet
   ------------------------------------------------------------
   Edit guide:
   1. Brand colors + fonts live in :root below.
   2. Sections are commented in page order.
   3. All animation is CSS-first; JS only toggles classes.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  --paper:#FBFAF8;        /* page background */
  --ink:#141413;          /* near-black text */
  --pink:#FF2D78;         /* Delulu pink — accent, use sparingly */
  --pink-text:#CF004A;    /* accessible pink — small text only (labels, dates, captions,
                              focus outlines). 5.37:1 on paper, 4.82:1 on mist. Never use as a
                              filled CTA background — --pink stays the brand CTA fill; contrast
                              on that fill is solved with --ink text, not a darker background
                              (see .btn-pink, .sticky-cta .btn). Same hue family as --pink (338°). */
  --graphite:#5C5852;     /* secondary text */
  --mist:#F0EEE8;         /* alt section background */
  --line:#E3E0D8;         /* hairline borders */
  --paper-dark:#141413;   /* dark section bg */
  --text-on-dark:#FBFAF8;

  --font-display:"Bricolage Grotesque", Georgia, serif;
  --font-body:"Instrument Sans", -apple-system, Segoe UI, sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --max-w:1140px;
  /* Canonical readable-content measure. It matches the usable inner width of
     the 880px article shell (880px minus its 24px side padding) and lets
     prose, normal tables, lists, and standard editorial media share edges. */
  --content-width:832px;
  --radius:14px;
  --shadow:0 10px 30px rgba(20,20,19,.08);
  --ease:cubic-bezier(.22,.61,.21,1);
  --floating-ui-bottom:28px; /* shared bottom offset for desktop floating controls
    (.sticky-cta, .proof-box) so they read as one aligned layer. .sticky-cta is the
    anchor — this is its existing approved value; .proof-box now matches it instead
    of carrying its own independent number. Mobile keeps its own stacking logic
    (safe-area inset + .cta-visible raise), unaffected by this token. */

  /* Mobile spacing system (≤680px) — consolidated 2026-08 hotfix. Applied
     inside the existing max-width:680px block below; declared here so every
     consumer reads the same number instead of scattered one-off pixels.
     See docs/DESIGN-AUDIT-2026-08.md and CHANGELOG.md for the incident. */
  --mobile-hero-gap:38px;      /* header-to-first-content padding-top, .hero + .page-hero (~half the prior 76-90px) */
  --mobile-card-gap:22px;      /* vertical gap between stacked cards in a single-column mobile stack */
  --mobile-gutter:24px;        /* left/right edge margin for fixed/floating mobile elements */
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{list-style:none}
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}

/* text-wrap:balance/pretty — sitewide rule against orphaned single words on
   the last line of a heading or paragraph. balance is for short blocks
   (headings); pretty is the paragraph-safe variant (won't rebalance every
   line, just avoids stranding one word). Both are no-op progressive
   enhancement in unsupported browsers, so the   fixes on specific
   headlines below still hold as the guaranteed fallback. See CLAUDE.md. */
h1,h2,h3{font-family:var(--font-display);line-height:1.05;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-size:1.3rem;line-height:1.25}
p{text-wrap:pretty}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--graphite);max-width:46ch}

/* Keeps a short word pair from splitting across lines for orphan cases
     alone can't cover (e.g. a word with its own internal hyphen break
   point). Desktop-only — on mobile the same joined phrase is often wider
   than the viewport, so forcing nowrap there would cause horizontal
   overflow instead of preventing an orphan. See CLAUDE.md. */
@media (min-width:700px){
  .nowrap-desktop{white-space:nowrap}
}

/* Blog post titles with stacked lines. Use class post-title--stacked when the
   product name must sit on its own row on mobile (e.g. Launching / Name / subtitle).
   overflow-wrap:break-word is a last-resort fallback only — normal space
   breaks are always preferred; it only kicks in when a single unbreakable
   run (an  -joined phrase, a URL, a long word) is wider than the
   viewport, so it can't cause horizontal overflow/clipping. word-break
   stays normal so it never splits words that do have room. See CLAUDE.md. */
.post-title__line{display:block;overflow-wrap:break-word;word-break:normal}
@media (min-width:700px){
  /* Desktop: merge lead + product name on one row; subtitle wraps naturally below */
  .post-title--stacked .post-title__line:nth-child(1),
  .post-title--stacked .post-title__line:nth-child(2){display:inline}
  .post-title--stacked .post-title__line:nth-child(1)::after{content:" "}
  .post-title--stacked .post-title__line:nth-child(2)::after{content:"";display:block}
}

/* Eyebrow labels */
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-text);margin-bottom:14px;
}

/* Signature device: pink strikethrough on vanity metrics */
.strike{
  position:relative;white-space:nowrap;color:var(--graphite);
}
.strike::after{
  content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.14em;
  background:var(--pink);transform:rotate(-2deg);border-radius:2px;
}

/* Pink underline swipe for key words */
.uline{
  background-image:linear-gradient(var(--pink),var(--pink));
  background-repeat:no-repeat;background-size:100% .12em;background-position:0 92%;
  padding-bottom:.06em;
}

/* ---------- 3. Buttons ---------- */
.btn{
  display:inline-block;font-weight:600;font-size:1rem;text-decoration:none;
  padding:15px 28px;border-radius:999px;border:2px solid var(--ink);
  transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
  cursor:pointer;
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--pink);border-color:var(--pink);transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,45,120,.25)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn-pink{background:var(--pink);border-color:var(--pink);color:#fff}
.btn-pink:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}

/* ---------- 4. Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(251,250,248,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.nav .logo img{height:48px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink);position:relative}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--pink);
  transition:width .25s var(--ease);
}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{width:100%}
.nav-links .btn{padding:10px 20px;font-size:.9rem}
.nav-links a.btn-pink{color:#fff;position:relative}

/* Animated conic ring — shared by the header CTA and the footer
   Preferred-Sources button. The angle is animated, NOT the element: rotating
   a non-square box with transform:rotate() sweeps its corners far outside the
   button (that produced a spinning blob). Animating --psb-angle spins only
   the gradient, so the ring keeps a constant thickness and traces the
   element's own rounded shape exactly. Where @property is unsupported the
   angle simply doesn't animate and a static gradient ring renders.
   The sitewide prefers-reduced-motion rule in section 25 stops the animation. */
@property --psb-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes psbAngle{to{--psb-angle:360deg}}

/* Header CTA — brand-color ring. Button size/label are untouched; this only
   draws an outline just outside the existing pill. */
.nav-links a.btn-pink::before,
.nav-links a.btn-pink::after{
  content:"";position:absolute;inset:-2px;border-radius:999px;pointer-events:none;
  background:conic-gradient(from var(--psb-angle),var(--pink),var(--pink-text),var(--ink),var(--pink-text),var(--pink));
  /* Carve the centre out so only a 2px band remains — a true ring that can
     never cover the label and needs no negative z-index. */
  padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:psbAngle 2.4s linear infinite;
}
/* Blurred copy of the same ring = glow that hugs the pill instead of a disc. */
.nav-links a.btn-pink::after{inset:-4px;padding:3px;filter:blur(6px);opacity:.7}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative}
.nav-toggle span{position:absolute;left:8px;right:8px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.nav-toggle span:nth-child(1){top:14px}.nav-toggle span:nth-child(2){top:20px}.nav-toggle span:nth-child(3){top:26px}
.nav-open .nav-toggle span:nth-child(1){top:20px;transform:rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){top:20px;transform:rotate(-45deg)}

/* ---------- 5. Sections / spacing ---------- */
section{padding:96px 0}
.section-mist{background:var(--mist)}
.section-dark{background:var(--paper-dark);color:var(--text-on-dark)}
.section-dark .lead{color:#B8B5AE}
.section-head{max-width:var(--content-width);margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* Widens a specific section heading's measure so a longer h2 can settle
   into a deliberate two-line shape instead of the default 640px forcing
   a third, awkward line. Opt-in per heading — the sitewide 640px default
   is correct for most section heads and stays untouched. Below the
   container's own width (mobile/tablet) this has no effect, since the
   container is already narrower than 640px there. */
.section-head--wide{max-width:var(--content-width)}

/* ---------- 6. Hero ---------- */
.hero{padding:90px 0 80px;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-visual{position:relative;height:560px;min-width:0}
.hero-visual canvas{width:100%;height:100%;display:block}
.hero-visual-labels{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:space-between;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);font-weight:600;pointer-events:none}
.hero-visual-labels .pink{color:var(--pink)}
.hero h1{max-width:13ch;margin-bottom:22px}
.hero .lead{margin-bottom:14px}
.hero-support{font-weight:600;color:var(--ink);margin-bottom:34px;font-size:1.05rem}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
/* Side-by-side paired CTAs on narrow screens (homepage hero, work MultiStream) */
.cta-pair{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:680px){
  .cta-pair{flex-wrap:nowrap;gap:10px}
  .cta-pair .btn{
    flex:1 1 0;min-width:0;padding:11px 14px;font-size:.85rem;
    text-align:center;line-height:1.25
  }
}
.hero-kicker{font-size:.92rem;color:var(--graphite);max-width:48ch;margin-top:16px}
.hero-kicker em{font-style:normal;color:var(--pink);font-weight:600}

/* The path chain — recurring brand motif. Stays on one line at every width
   down to 521px, sized per breakpoint. Below that it switches to a
   vertical stack (arrow rotated to point down) instead of shrinking chip
   text to illegible sizes to force everything onto one row — same
   treatment as .path-ladder's mobile stacking elsewhere on the site. */
.path-chain{
  grid-column:1/-1;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:8px;margin-top:38px;
}
.path-chain .pair{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.path-chain .chip{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;white-space:nowrap;
  border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);
  padding:7px 18px;
}
.path-chain .chip:last-child,.path-chain .chip-final{background:var(--pink);border-color:var(--pink);color:#fff}
.path-chain .arrow{color:var(--pink);font-weight:700;flex-shrink:0;font-size:1rem}

@media (max-width:960px){
  .path-chain,.path-chain .pair{gap:6px}
  .path-chain .chip{font-size:.8rem;padding:6px 14px;border-width:1.25px}
  .path-chain .arrow{font-size:.85rem}
}
@media (max-width:680px){
  .path-chain,.path-chain .pair{gap:4px}
  .path-chain .chip{font-size:.62rem;padding:4px 8px;border-width:1px}
  .path-chain .arrow{font-size:.65rem}
}
@media (max-width:520px){
  .path-chain{flex-direction:column;gap:10px}
  .path-chain .pair{flex-direction:column;gap:6px}
  .path-chain .chip{font-size:.95rem;padding:8px 20px}
  .path-chain .arrow{font-size:1.1rem;transform:rotate(90deg)}
}

/* Funnel progression animation. JS adds .pc-armed (resets the chain to a
   neutral, un-traversed state) and then .pc-run when the chain enters view.
   Nothing here changes any box dimension — only color and box-shadow — so
   the animation cannot shift layout. With JS off, on JS error, or under
   prefers-reduced-motion neither class is ever added and the chain renders
   in its finished state, which is the original static design. ~3.2s total.
   The pink pulse is transient only: each passed chip resolves to exactly its
   static appearance, and the pink connector arrows carry the completed
   route. Customers resolves to the filled pink final state. */
.path-chain.pc-armed .chip{border-color:var(--line);color:var(--graphite);background:var(--paper)}
.path-chain.pc-armed .chip-final{background:var(--paper);border-color:var(--line);color:var(--graphite)}
.path-chain.pc-armed .arrow{color:var(--line)}
.path-chain.pc-armed.pc-run .pair:nth-child(1) .chip{animation:pcChip .62s var(--ease) .10s both}
.path-chain.pc-armed.pc-run .pair:nth-child(2) .chip{animation:pcChip .62s var(--ease) .70s both}
.path-chain.pc-armed.pc-run .pair:nth-child(3) .chip{animation:pcChip .62s var(--ease) 1.30s both}
.path-chain.pc-armed.pc-run .pair:nth-child(4) .chip{animation:pcChip .62s var(--ease) 1.90s both}
.path-chain.pc-armed.pc-run .pair:nth-child(5) .chip-final{animation:pcChipFinal .70s var(--ease) 2.50s both}
.path-chain.pc-armed.pc-run .pair:nth-child(1) .arrow{animation:pcArrow .5s var(--ease) .45s both}
.path-chain.pc-armed.pc-run .pair:nth-child(2) .arrow{animation:pcArrow .5s var(--ease) 1.05s both}
.path-chain.pc-armed.pc-run .pair:nth-child(3) .arrow{animation:pcArrow .5s var(--ease) 1.65s both}
.path-chain.pc-armed.pc-run .pair:nth-child(4) .arrow{animation:pcArrow .5s var(--ease) 2.25s both}
@keyframes pcChip{
  0%{border-color:var(--line);color:var(--graphite);box-shadow:0 0 0 0 rgba(255,45,120,0)}
  45%{border-color:var(--pink);color:var(--pink);box-shadow:0 0 0 5px rgba(255,45,120,.13)}
  100%{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 0 rgba(255,45,120,0)}
}
@keyframes pcChipFinal{
  0%{background:var(--paper);border-color:var(--line);color:var(--graphite);box-shadow:0 0 0 0 rgba(255,45,120,0)}
  60%{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 0 7px rgba(255,45,120,.16)}
  100%{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 0 0 rgba(255,45,120,0)}
}
@keyframes pcArrow{0%{color:var(--line)}100%{color:var(--pink)}}

/* Mobile-only alternative to the timed pc-run animation above: at <=520px
   the chain stacks vertically, so progression instead follows scroll
   position (initPathChainScroll in main.js) rather than a fixed timer.
   Same finished-state contract as pc-armed/pc-run: .pc-scroll is only ever
   added by JS, so JS-off, JS-error, and reduced-motion all fall through to
   the plain .chip / .chip-final rules above, the completed static design. */
@media (max-width:520px){
  .path-chain.pc-scroll .chip{
    border-color:var(--line);color:var(--graphite);background:var(--paper);
    transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  }
  .path-chain.pc-scroll .chip-final{background:var(--paper);border-color:var(--line);color:var(--graphite)}
  .path-chain.pc-scroll .arrow{color:var(--line);transition:color .35s var(--ease)}
  .path-chain.pc-scroll .pair.is-active .chip{border-color:var(--pink);color:var(--pink);box-shadow:0 0 0 5px rgba(255,45,120,.13)}
  .path-chain.pc-scroll .pair.is-done .chip{border-color:var(--ink);color:var(--ink);background:var(--paper);box-shadow:0 0 0 0 rgba(255,45,120,0)}
  .path-chain.pc-scroll .pair.is-active .chip-final,
  .path-chain.pc-scroll .pair.is-done .chip-final{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 0 0 rgba(255,45,120,0)}
  .path-chain.pc-scroll .pair.is-active .arrow,
  .path-chain.pc-scroll .pair.is-done .arrow{color:var(--pink)}
}
@media (prefers-reduced-motion:reduce){
  .path-chain.pc-scroll .chip,.path-chain.pc-scroll .arrow{transition:none}
}

/* ---------- 6b. Mobile mini funnel ----------
   Mobile counterpart to #engine-canvas, which is desktop-only by design.
   A miniature data visualization: attention volume narrowing stage by stage
   into a single customer. Plays once, then holds its completed state. */
.mini-funnel{display:none}
@media (max-width:960px){
  .mini-funnel{display:block;grid-column:1/-1;width:100%;max-width:420px;margin:28px auto 0}
}
.mini-funnel-svg{display:block;width:100%;height:auto}
.mf-track,.mf-tick{stroke:var(--line);stroke-width:2;stroke-linecap:round}
.mf-tick--final{stroke:var(--pink)}
.mf-progress{stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-dasharray:288;stroke-dashoffset:0}
.mf-dot{fill:var(--graphite);opacity:.38}
.mf-dot--mid{opacity:.6}
.mf-dot--pink{fill:var(--pink);opacity:1}
.mf-final{fill:var(--pink)}
.mf-stem{stroke:var(--pink);stroke-width:1.5;opacity:.45}
.mf-pulse{fill:none;stroke:var(--pink);stroke-width:1.5;opacity:0;transform-origin:280px 45px}
.mini-funnel-labels{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px;text-align:center;
  font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--graphite)}
.mini-funnel-labels .is-final{color:var(--pink)}
/* Armed = pre-animation state. Only ever set by JS. */
.mini-funnel.is-armed .mf-progress{stroke-dashoffset:288}
.mini-funnel.is-armed .mf-stage{opacity:0}
.mini-funnel.is-armed.in-view .mf-progress{animation:mfDraw 2.2s var(--ease) .1s forwards}
.mini-funnel.is-armed.in-view .mf-stage{animation:mfStage .6s var(--ease) both}
.mini-funnel.is-armed.in-view .mf-stage--1{animation-delay:.15s}
.mini-funnel.is-armed.in-view .mf-stage--2{animation-delay:.75s}
.mini-funnel.is-armed.in-view .mf-stage--3{animation-delay:1.35s}
.mini-funnel.is-armed.in-view .mf-stage--4{animation-delay:1.90s}
.mini-funnel.is-armed.in-view .mf-pulse{animation:mfPulse 1.4s ease-out 2.10s 1 both}
@keyframes mfDraw{to{stroke-dashoffset:0}}
@keyframes mfStage{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes mfPulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}

/* ---------- 7. Credibility strip ---------- */
.cred-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:42px 0}
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.cred-grid .num{font-family:var(--font-display);font-weight:800;font-size:2rem;display:block}
.cred-grid .num .accent{color:var(--pink)}
.cred-grid .label{font-size:.88rem;color:var(--graphite)}

/* ---------- 8. Problem / solution ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.problem-list li,.check-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:1.02rem}
.problem-list li::before{content:"✗";color:var(--graphite);font-weight:700;margin-right:12px}
.check-list li::before{content:"✓";color:var(--pink);font-weight:700;margin-right:12px}
.pull-quote{
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;line-height:1.3;
  border-left:4px solid var(--pink);padding-left:22px;margin-top:30px;
}

/* ---------- 9. What's included ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
  min-width:0; /* grid items default to min-width:auto (content-based) — without this, a long
                  unbreakable string inside a card can widen its grid track past the viewport */
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--ink)}
.card h3{margin-bottom:10px}
/* Deliberate two-line grouping for a specific card title (e.g. "Less
   unsanctioned<span class="card-title__break"> use</span>"). Inline by
   default so a narrow phone still wraps the whole phrase naturally by
   available width; becomes a block only at tablet/desktop, where it
   forces the intended break instead of leaving it to the browser. */
.card-title__break{display:inline}
@media (min-width:681px){
  .card-title__break{display:block}
}
#ai-services .card h3{font-size:clamp(1.05rem,1.9vw,1.3rem);white-space:normal}
.card p{color:var(--graphite);font-size:.95rem}
.card .mini-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-text);font-weight:600;display:block;margin-bottom:12px}

/* ---------- 10. How it works ----------
   .steps is a numbered, sequential process list — always a single-column
   vertical stack, at every viewport width, regardless of item count (3 on
   most service pages, 5 on ai-workflow-automation.html). .grid-4 is the
   homepage's own 4-item row (4-col desktop, 2-col tablet ≤960, 1-col
   mobile ≤680 — see those rules elsewhere in this file). Both share the
   .step item and its CSS-counter numeral. Canonical markup unchanged:
   <div class="steps"><div class="step reveal">...<h3>...</h3><p>...</p>
   </div>...</div> — new pages must reuse this component, not recreate it.

   2026-08-07 redesign — owner-selected Direction A (desktop/tablet) +
   Direction D (mobile), from docs/design-directions-preview/process-
   steps/, applied sitewide to both .grid-4 (index.html) and .steps (8
   service pages) per explicit owner direction to adapt A to each
   component's own structural layout rather than force a row. Card-box
   chrome (border/radius/background) is removed entirely in favor of a
   numbered marker + a sequence-connecting rail:
     - Desktop/tablet (>680px): a circular badge, last item filled solid
       to mark the destination. .grid-4's single-row 4-col layout
       (>960px only) gets Direction A's horizontal rail behind the
       badges; below that, at .grid-4's own 2-col tablet width, the rail
       is omitted (a straight line can't honestly connect a wrapped 2x2
       grid) but the badges remain. .steps is always vertical, so it
       always gets Direction A's own vertical-rail variant (left border
       + badge overlapping it) at every width from 681px up.
     - Mobile (<=680px, the site's existing mobile breakpoint): Direction
       D — no chrome, no rail, a large quiet numeral (line-gray, pink for
       the last item) and a hairline top rule per item. Both .grid-4 and
       .steps already resolve to a single column at this width via
       existing rules, so no layout change is needed here, only the
       numeral/chrome restyle.
   Pure CSS — zero HTML changes required across all 9 pages, since the
   numeral was already generated by the counter, not authored markup.
   See docs/BRAND.md "Process stack (.steps / .step)". */
.grid-4,.steps{counter-reset:step}
.steps{display:flex;flex-direction:column;gap:22px}
.step{position:relative;min-width:0}
.step h3{margin-bottom:10px}
.step p{color:var(--graphite);font-size:.95rem}

@media (min-width:681px){
  .step::before{
    counter-increment:step;content:"0" counter(step);
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;
    border:2px solid var(--ink);background:var(--paper);color:var(--ink);
    font-family:var(--font-display);font-weight:800;font-size:1.05rem;
    margin-bottom:20px;
  }
  .step:last-child::before{background:var(--ink);color:var(--paper);border-color:var(--ink)}

  /* Scoped to #how (index.html's How It Works section) rather than bare
     .grid-4 — .grid-4 is a shared 4-col grid utility also used for plain
     .card grids on services.html, ai-training-for-teams.html, and
     private-ai-systems.html, which must not get a rail or position change. */
  #how .grid-4{position:relative}
  #how .grid-4 .step{padding:0 6px}

  .steps .step{padding:0 0 32px 24px;border-left:2px solid var(--line)}
  .steps .step:last-child{border-left:2px solid transparent;padding-bottom:0}
  .steps .step::before{width:38px;height:38px;font-size:.95rem;margin-left:-21px;margin-bottom:14px}
}
@media (min-width:961px){
  #how .grid-4::before{content:"";position:absolute;top:22px;left:12.5%;right:12.5%;height:2px;background:var(--line);z-index:0}
  #how .grid-4 .step{position:relative;z-index:1}
}
@media (max-width:680px){
  .step{border-top:1px solid var(--line);padding:28px 0}
  .steps .step{border-left:none;padding-left:0}
  .step::before{
    counter-increment:step;content:"0" counter(step);
    display:block;width:auto;height:auto;border-radius:0;border:none;background:none;
    font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--line);
    margin-bottom:10px;
  }
  .step:last-child::before{color:var(--pink)}
}

/* ---------- 11. Comparison ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare-col{border-radius:var(--radius);padding:36px 32px}
.compare-col.them{background:var(--mist);border:1px solid var(--line)}
.compare-col.us{background:var(--ink);color:var(--text-on-dark)}
.compare-col h3{margin-bottom:20px}
.compare-col.us .check-list li{border-color:#33312E}
.compare-col.them .problem-list li{border-color:#DEDAD1}

/* ---------- 12. Portfolio ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work-item{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--mist)}
.work-item img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s var(--ease)}
.work-item:hover img{transform:scale(1.03)}
.work-item figcaption{padding:14px 18px;font-size:.88rem;color:var(--graphite);border-top:1px solid var(--line);background:var(--paper)}

/* ---------- 13. Founder ---------- */
.founder{display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:center}
.founder-photo{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.founder-creds{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin:26px 0 30px}
.founder-creds li{font-size:.97rem;padding:6px 0 6px 28px;position:relative}
.founder-creds li::before{content:"→";color:var(--pink);font-weight:700;position:absolute;left:0;top:6px}

/* ---------- 14. Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:38px 32px;background:var(--paper);
  display:flex;flex-direction:column;transition:transform .3s var(--ease), box-shadow .3s;
}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.price-card.featured{border:2px solid var(--ink);position:relative}
.price-card.featured .flag{
  position:absolute;top:-14px;left:32px;background:var(--pink);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;
}
.price-card .tier{font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin-bottom:6px}
.price-card .amount{font-family:var(--font-display);font-weight:800;font-size:2.2rem;letter-spacing:-.02em}
.price-card .amount span{font-size:1rem;font-weight:600;color:var(--graphite)}
.price-card .blurb{color:var(--graphite);font-size:.95rem;margin:10px 0 22px}
.price-card .check-list{flex:1;margin-bottom:26px}
.price-card .check-list li{font-size:.93rem;border-color:var(--line)}
.price-note{text-align:center;color:var(--graphite);font-size:.9rem;margin-top:28px}
.price-note + .price-note{margin-top:0}

/* ---------- 15. FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;
  font-size:1.08rem;padding:22px 40px 22px 0;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:18px;font-size:1.5rem;color:var(--pink);
  transition:transform .3s var(--ease);font-weight:600;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 0 24px;color:var(--graphite);max-width:64ch}

/* ---------- 16. Final CTA ---------- */
.final-cta{text-align:center}
.final-cta h2{max-width:32ch;margin:0 auto 18px;text-wrap:balance}
.final-cta .lead{max-width:60ch;margin:0 auto 28px;text-wrap:balance}
.final-cta .cta-bridge{max-width:54ch;margin:0 auto 30px;font-size:.95rem;color:#C9C6BF;line-height:1.6}
.final-cta .cta-bridge strong{color:#fff;font-weight:700}
.final-cta-secondary{margin-left:10px}
@media (max-width:560px){
  .final-cta .btn,
  .post-cta .btn{display:block;width:fit-content;margin:0 auto 14px}
  .final-cta .btn:last-child,
  .post-cta .btn:last-child{margin-bottom:0}
  .final-cta-secondary{margin-left:auto}
  .hero-support-break{display:block}
}

/* ---------- 17. Footer ---------- */
.site-footer{background:var(--ink);color:#B8B5AE;padding:64px 0 36px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.site-footer h4{color:var(--text-on-dark);font-family:var(--font-display);font-size:.95rem;margin-bottom:14px}
.site-footer a{color:#B8B5AE;text-decoration:none;display:inline-block;padding:3px 0;transition:color .2s}
.site-footer a:hover{color:var(--pink)}
.footer-bottom{border-top:1px solid #2A2926;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:gap;gap:12px;flex-wrap:wrap}
.footer-brand p{max-width:36ch;margin-top:12px}

/* Google Preferred Sources button (footer). This is our own element, not
   Google's injected iframe — the advanced implementation (see js/main.js)
   lets us own the markup, so the ring can hug the button exactly. In the
   standard implementation publisher.js inline-styles its marker div to
   width:100%;min-height:60px, which stretched the box to the full container
   width and left the ring wrapping nothing. Ring recipe: see --psb-angle
   in section 4. Lives inside .footer-brand, under the contact email and
   above .footer-bottom — left-aligned with the rest of that column. */
/* Scoped under .site-footer so it outranks `.site-footer a` (0,1,1), which
   would otherwise force display:inline-block, padding:3px 0 and its own
   colors onto this button. */
.site-footer .preferred-source-badge{
  position:relative;display:flex;align-items:center;gap:10px;
  width:fit-content;margin:18px 0 0;
  padding:13px 22px;border-radius:14px;
  background:#1F1E1C;color:var(--text-on-dark);
  font-family:var(--font-body);font-size:.92rem;font-weight:600;line-height:1.25;
  text-decoration:none;transition:background .25s var(--ease),transform .25s var(--ease);
}
.site-footer .preferred-source-badge:hover{background:#2A2926;color:var(--text-on-dark);transform:translateY(-2px)}
.preferred-source-badge__g{display:flex;flex:0 0 auto}
.preferred-source-badge__g svg{display:block;width:18px;height:18px}
.preferred-source-badge::before,
.preferred-source-badge::after{
  content:"";position:absolute;inset:-2px;border-radius:16px;pointer-events:none;
  background:conic-gradient(from var(--psb-angle),#ff0000,#ff9900,#ffee00,#33ff00,#00ffee,#0066ff,#cc00ff,#ff0000);
  padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:psbAngle 3s linear infinite;
}
.preferred-source-badge::after{inset:-5px;padding:3px;border-radius:19px;filter:blur(7px);opacity:.6}
.footer-brand img{height:56px;width:auto}

/* ---------- 18. Floating proof box ---------- */
.proof-box{
  position:fixed;left:20px;bottom:var(--floating-ui-bottom);z-index:55;width:288px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:0;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.proof-box.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.proof-box.near-footer{opacity:0;pointer-events:none}
.proof-link{display:flex;align-items:center;gap:12px;padding:14px 34px 14px 16px;text-decoration:none;color:var(--ink)}
.proof-icon{flex:0 0 32px;width:32px;height:32px;border-radius:8px;background:rgba(255,45,120,.1);
  color:var(--pink);display:flex;align-items:center;justify-content:center;transition:opacity .35s}
.proof-icon svg{width:18px;height:18px}
.proof-box .msg{font-size:.85rem;line-height:1.35;font-weight:500;text-align:left;transition:opacity .35s}
.proof-box .msg.fading,.proof-icon.fading{opacity:0}
.proof-link:hover .proof-icon{background:var(--pink);color:#fff}
.proof-link::after{content:"\2192";position:absolute;right:30px;color:var(--pink);font-weight:700;opacity:0;transition:opacity .25s}
.proof-link{position:relative}
.proof-link:hover::after{opacity:1}
.proof-close{position:absolute;top:6px;right:8px;background:none;border:0;cursor:pointer;color:var(--graphite);font-size:1.1rem;line-height:1;z-index:2;padding:2px 4px}
.proof-close:hover{color:var(--ink)}
.proof-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.proof-cue{display:none;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--pink-text)}
.proof-link:focus-visible,.proof-close:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:10px}
/* Hide the bubble behind the full-screen mobile nav panel rather than
   relying on paint order alone. */
.nav-open .proof-box{opacity:0;pointer-events:none}

/* Tablet/narrow-desktop collision guard (681px–1180px): sharing
   --floating-ui-bottom surfaced a real horizontal collision the old
   staggered heights used to mask by accident. .proof-box is a fixed
   288px card at left:20px (right edge 308px); .sticky-cta is centered
   content-driven width (~530px with the sitewide "Ready to turn
   attention into customers?" copy, confirmed uniform across pages) —
   its left edge crosses under 308px below ~1146px viewport width.
   1180px adds a small safety margin. Reuses body.cta-visible, which
   main.js already toggles at every width (not just mobile), so this is
   pure CSS — same fade pattern as .near-footer above, no new JS. */
@media (min-width:681px) and (max-width:1180px){
  body.cta-visible .proof-box{opacity:0;pointer-events:none}
}

/* Touch devices get the 44px dismiss target at every width, not just under
   the 680px breakpoint — a tablet at 768px is still a thumb. Keyed on input
   capability so mouse-driven widths keep the compact original control. */
@media (pointer:coarse){
  .proof-close{top:0;right:0;width:44px;height:44px;padding:0;
    display:flex;align-items:center;justify-content:center}
  .proof-link{padding-right:48px}
}

/* Screen-reader-only text. First uses: the mobile mini-funnel description
   and the proof-bubble link destination. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 19. Sticky CTA bar ----------
   Three-level progressive enhancement (docs/DESIGN-AUDIT-2026-08.md liquid-glass pass):
   Level 1 (this base rule) — solid-enough dark island, zero dependency, works everywhere.
   Level 2 — restrained blur/tint glass, layered on top wherever backdrop-filter is
   supported (covers iOS Safari, which cannot render Level 3's SVG displacement).
   Level 3 — real geometric refraction via backdrop-filter:url(#dd-lens-refract),
   gated behind .glass-refraction-supported (added by main.js only where the engine
   actually renders the distortion, currently Chromium only — WebKit bug 245510). */
.sticky-cta{
  position:fixed;left:50%;right:auto;bottom:var(--floating-ui-bottom);z-index:56;
  background:rgba(20,20,19,.88);color:var(--text-on-dark);
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:14px 16px 14px 28px;width:max-content;max-width:calc(100% - 48px);
  border-radius:999px;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 32px rgba(20,20,19,.28);
  transform:translate(-50%,140%);transition:transform .45s var(--ease);
}
.sticky-cta.visible{transform:translate(-50%,0)}
.sticky-cta p{font-weight:600;font-size:.95rem}
.sticky-cta .btn{padding:9px 20px;font-size:.88rem;border-color:var(--pink);background:var(--pink);color:#fff}
.sticky-cta .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* Level 2 — restrained blur/tint glass, applied wherever backdrop-filter itself
   is supported (this alone renders correctly on iOS Safari; it just doesn't warp). */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .sticky-cta{
    background:rgba(20,20,19,.60);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 14px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10);
  }
}

/* Level 3 — real refraction, class added by main.js only after a rendering-based
   capability check passes (see js/main.js). Scale 34 per approved direction. */
.glass-refraction-supported .sticky-cta{
  background:rgba(20,20,19,.30);
  -webkit-backdrop-filter:url(#dd-lens-refract) blur(2px) saturate(150%);
  backdrop-filter:url(#dd-lens-refract) blur(2px) saturate(150%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Respect prefers-reduced-transparency: force back to the opaque Level 1 island
   regardless of which enhancement level would otherwise apply. */
@media (prefers-reduced-transparency:reduce){
  .sticky-cta,.glass-refraction-supported .sticky-cta{
    background:rgba(20,20,19,.92);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* ---------- 20. Scroll reveal + counters ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}

/* ---------- 21. Page hero (inner pages) ---------- */
.page-hero{position:relative;overflow:hidden;padding:90px 0 64px;border-bottom:1px solid var(--line)}
.page-hero--compact{padding:45px 0 64px}
.page-hero h1{max-width:16ch;margin-bottom:18px}
.page-hero .container{position:relative}
.page-hero .eyebrow,.page-hero h1,.page-hero .lead{position:relative;z-index:1}

/* Service page compositions: a framed visual stage in the hero and a
   balanced credibility section that separates story from proof. */
.service-hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}
.service-hero-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
.service-hero-copy h1{font-size:clamp(2.6rem,3.6vw,3.2rem);line-height:1.04;max-width:none}
.service-hero-visual{
  position:relative;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:36px;border:1px solid #2A2724;border-radius:28px;overflow:hidden;
  background:
    radial-gradient(circle at 78% 20%,rgba(255,45,120,.16),transparent 45%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(155deg,#1B1917,#141413);
  background-size:auto,28px 28px,28px 28px,auto;
}
.service-hero-visual .section-figure{position:relative;z-index:1;margin:0;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.35)}

.trust-section{position:relative;overflow:hidden;padding:84px 0}
.trust-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:80px;align-items:start}
.trust-copy{position:relative;isolation:isolate}
.trust-copy::after{
  content:"20+";position:absolute;right:-18px;bottom:-42px;z-index:-1;
  font-family:var(--font-display);font-size:clamp(7rem,13vw,12rem);font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.075);letter-spacing:-.08em;pointer-events:none;
}
.trust-copy h2{max-width:22ch;margin-bottom:26px}
.trust-copy p{color:#B8B5AE;max-width:58ch;margin-bottom:18px}
.trust-copy p:last-child{margin-bottom:0}
.trust-proof{padding-top:42px}
.trust-proof .check-list{margin-top:0}
.trust-proof .btn{margin-top:24px}

/* Recolored port of the ericbarker.co hero-signal field for Design Delulu's
   pink/black palette — one pink accent line, the rest ink/graphite, matching
   the "pink is an accent only" brand rule (see docs/DECISIONS.md).

   2026-08-07 — owner-selected Direction B, "Integrated Line Field"
   (docs/design-directions-preview/blog-hero/direction-b.html), promoted from
   a blog-only modifier to THIS base rule, so all 15 pages sharing
   .page-hero-signal (404, about, contact, pricing, services, work, blog
   index/pagination/5 category pages) get one identical shared treatment —
   no page-specific overrides. The field now spans the full hero (`inset:0`,
   height in `calc()`) instead of a boxed right-side illustration, so it
   auto-adapts to both .page-hero's and .page-hero--compact's own padding —
   no separate compact rule needed, since nothing here is a fixed pixel
   height tied to one variant. Held near-invisible under the headline by a
   left-to-right mask, building to full strength toward the open right
   side. Percentage-based mask stops (not per-page pixel offsets) were
   verified against the widest headline in the set (services.html's 3-line
   stacked title) as well as the narrowest (single-word category titles) —
   one shared configuration clears both. Text readability doesn't depend on
   this mask alone: .page-hero h1/.lead/.eyebrow already sit in their own
   stacking context above the canvas via the pre-existing
   `.page-hero .eyebrow,.page-hero h1,.page-hero .lead{z-index:1}` rule
   below, and h1's own 16ch cap (or a page's explicit max-width:none escape
   hatch) already keeps copy width sane — so no new .hero-copy wrapper or
   copy max-width was needed to ship this sitewide. */
.page-hero-signal{
  position:absolute;inset:0;top:-20px;left:0;width:100%;height:calc(100% + 40px);
  z-index:0;pointer-events:none;
  mask-image:linear-gradient(100deg,transparent 0%,transparent 8%,rgba(0,0,0,.22) 30%,rgba(0,0,0,.55) 46%,#000 62%);
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 8%,rgba(0,0,0,.22) 30%,rgba(0,0,0,.55) 46%,#000 62%);
  will-change:transform;
}
.page-hero-signal canvas{width:100%;height:100%;display:block}
@media (max-width:1180px){.page-hero-signal{display:none}}
/* Kept intentionally, sitewide: below 1180px the graphic has no evidenced
   mobile/tablet form of its own (see the 2026-08-07 design-exploration
   round — every direction converged on "hide," none had a credible cropped
   mobile identity ready to ship). One consistent rule beats 15 pages each
   guessing at a half-finished mobile treatment. */

@media (max-width:960px){
  .service-hero-layout,.trust-layout{grid-template-columns:1fr;gap:44px}
  .service-hero-copy h1{max-width:15ch}
  .service-hero-visual{padding:0;max-width:760px;width:100%}
  .service-hero-visual::before{inset:-24px -20px}
  .trust-proof{padding-top:0}
  .trust-copy h2{max-width:22ch}
}

@media (max-width:680px){
  .service-hero-layout,.trust-layout{gap:34px}
  .service-hero-copy h1{font-size:clamp(2.65rem,13vw,4rem);max-width:12ch}
  .service-hero-visual::before{inset:-16px -12px;border-radius:22px;background-size:auto,24px 24px,24px 24px}
  .service-hero-visual .section-figure img{transform:none}
  .trust-copy::after{display:none}
}

/* ---------- 22. Blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;background:var(--paper);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s;text-decoration:none}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-card .date{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-text);font-weight:600;margin-bottom:14px;flex:none}
.post-card h3{margin-bottom:12px;flex:none}
.post-card p{color:var(--graphite);font-size:.95rem;flex:1}
.post-card .read{margin-top:18px;font-weight:600;font-size:.9rem}
.post-card .read::after{content:" →";color:var(--pink)}

.post{max-width:880px;margin:0 auto;padding:40px 24px 96px;overflow-x:clip} /* Article shell — its usable inner width is the shared --content-width. Standard prose, tables, and normal media align there; intentionally wider page shells remain separate. */
.post h1{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:14px;text-wrap:pretty;overflow:visible;overflow-wrap:break-word}
.post .post-meta{color:var(--graphite);font-size:.9rem;margin-bottom:42px}
.post h2{font-size:1.6rem;margin:44px 0 16px}
.post h3{font-size:1.18rem;margin:28px 0 12px}
.post p{margin-bottom:20px;color:#33312E}
.post code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.9em;
  background:var(--mist);
  padding:.15em .4em;
  border-radius:4px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Standalone code/URL lines only — never use :only-child (inline <code>
   that is the sole element in a <p> would incorrectly become a block). */
.post p.code-block{
  margin:28px 0;
}
.post p.code-block > code{
  display:block;
  padding:14px 16px;
  line-height:1.5;
  border:1px solid var(--line);
}
.post ul{margin:0 0 20px 22px;list-style:disc;color:#33312E}
.post ol{margin:0 0 20px 22px;color:#33312E}
.post li{margin-bottom:8px}
.post blockquote{margin:32px 0;padding:20px 24px;border-left:4px solid var(--pink);background:#fff;border-radius:var(--radius);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.12rem;line-height:1.45}
.post blockquote p{margin:0;color:inherit}
.post table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;color:#33312E;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.post th,.post td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line);line-height:1.45}
.post th:last-child,.post td:last-child{border-right:0}
.post tr:last-child td{border-bottom:0}
.post th{font-family:var(--font-display);font-weight:800;color:var(--ink);background:var(--mist)}
/* Table scroll wrapper — a bare `table{display:block;overflow-x:auto}` on
   mobile is unreliable across browsers (Safari in particular sometimes
   crams/wraps columns illegibly instead of scrolling). Wrapping the table
   in a scrollable container and letting the table itself keep its normal
   display:table is the robust fix. */
.post .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 28px}
.post .table-scroll table{margin:0}
.post-decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0 28px}
.post-decision-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px}
.post-decision-card--primary{border:2px solid var(--ink);box-shadow:var(--shadow)}
.post-decision-card h3{margin:0 0 14px;font-size:1.05rem}
.post-decision-card ul{list-style:none;margin:0}
.post-decision-card li{position:relative;margin-bottom:10px}
/* Positive/negative semantics require an explicit --positive/--negative
   modifier (canonical treatment: pink check / graphite X, matching
   .fit-yes/.fit-no on the homepage — see docs/BRAND.md "Comparison
   components"). Plain .post-decision-card with no modifier is the
   neutral A-vs-B case and renders no icon, per the sitewide rule that
   check/X marks are reserved for genuine positive/negative pairs. */
.post-decision-card--positive li,.post-decision-card--negative li{padding-left:24px}
.post-decision-card--positive li::before{content:"✓";position:absolute;left:0;top:0;color:var(--pink);font-weight:800}
.post-decision-card--negative li::before{content:"✕";position:absolute;left:0;top:0;color:var(--graphite);font-weight:800}
.post-callout{margin:30px 0;padding:22px 24px;border:1px solid var(--line);border-left:4px solid var(--pink);border-radius:var(--radius);background:var(--mist)}
.post-callout__label,.post-callout p{max-width:var(--content-width);margin-left:auto;margin-right:auto}
.post-callout__label{display:block;font-family:var(--font-display);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-text);margin-bottom:8px}
.post-callout p{color:var(--ink);font-size:1.08rem;line-height:1.55}
.research-confidence{margin:38px 0 28px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.research-confidence h2{margin:0 0 10px;font-size:1.22rem}
.research-confidence p{margin-bottom:12px}
.research-confidence ul{list-style:none;margin:0 0 14px;padding:0}
.research-confidence li{position:relative;margin-bottom:8px;padding-left:24px}
.research-confidence li::before{content:"✓";position:absolute;left:0;top:0;color:var(--pink);font-weight:800}
.research-confidence__level{margin-bottom:0!important;color:var(--ink)!important}
.post-checklist{list-style:none!important;margin:26px 0 30px!important;padding:4px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-checklist li{position:relative;padding:14px 0 14px 32px;margin:0;border-bottom:1px solid var(--line)}
.post-checklist li:last-child{border-bottom:0}
.post-checklist li::before{content:"✓";position:absolute;left:0;top:14px;color:var(--pink);font-weight:800}
.post-checklist strong{color:var(--ink)}
.post .post-cta{margin-top:56px;padding:34px;border:2px solid var(--ink);border-radius:var(--radius);text-align:center}
.post .post-cta h3{margin-bottom:10px}
.post .post-cta p{margin-bottom:22px}

/* Article shell vs. reading column (2026-08-13). .post is the 880px
   article shell (above). Its usable inner width is --content-width, shared
   by flowing narrative content, standard tables, and normal editorial media.
   Structural components (H1 title, byline, decision grid, author box, CTA,
   prev/next nav) still fill that same inner shell. TL;DR/Takeaway/Related
   Resources/FAQ use the same measure for their inner content so the page
   maintains one reliable text/table edge. Never let this
   selector reach into a component's interior again; that bleed-through
   (a bare `.post p` matching every nested <p>, including ones inside
   asides/sections it was never meant to reach) was the 2026-08-07
   alignment bug. Component contract documented in docs/BRAND.md "Blog
   article component alignment". Direct-child (`.post >`) scoping below
   is deliberate — it's what stops this rule reaching inside nested
   asides/sections. See scripts/validate-blog-alignment.py for the
   regression guard. */
.post > .lead,.post > p,.post > h2,.post > h3,.post > ul,.post > ol,.post > blockquote,.post > .research-confidence{
  max-width:var(--content-width);margin-left:auto;margin-right:auto
}
.post .post-checklist{max-width:var(--content-width);margin-left:auto!important;margin-right:auto!important}

/* ---------- 23. Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.tally-wrap{border:2px dashed var(--line);border-radius:var(--radius);padding:40px;text-align:center;color:var(--graphite);background:var(--mist)}

/* ---------- 24. Responsive ---------- */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none} /* interactive visual is desktop-only by design */
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3,.work-grid,.post-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}
  /* .steps itself no longer needs an override here — section 10's base
     rule now applies the same flex stack + gap at every width (2026-08-07
     desktop fix; this ≤960px band was already correct since the
     2026-08-06 mobile hotfix, the desktop side was the gap left open).
     See docs/BRAND.md "Process stack (.steps / .step)". */
  .split,.founder,.compare,.contact-grid{grid-template-columns:1fr;gap:44px}
  .founder{max-width:560px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cred-grid{grid-template-columns:repeat(2,1fr)}
}
/* ---------- 30. Services nav dropdown (grouped mega menu) ----------
   Replaces the old flat 6-item .submenu (2026-08-06) with a 3-column
   grouped mega menu. Opens on hover (CSS, mouse convenience) AND on
   click/keyboard (JS, main.js — required so hover is never the only
   activation mechanism; also covers touch). Escape and click-outside
   close it even mid-hover via the JS-driven .force-closed class. See
   docs/CHANGELOG.md for the round this shipped in. */
.nav-links .has-sub{position:relative;padding-bottom:14px;margin-bottom:-14px}
.nav-links .has-sub > a::after{content:" \25BE";font-size:.7em;color:var(--graphite);display:inline-block;transition:transform .2s var(--ease)}
.nav-links .has-sub.open > a::after{transform:rotate(180deg)}
.nav-links .mega-menu{
  position:absolute;top:100%;left:0;margin-top:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:22px 24px 16px;min-width:560px;max-width:min(680px,calc(100vw - 48px));
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:70;
}
/* invisible bridge fills the visual gap so the mouse never "falls out" of hover */
.nav-links .mega-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-links .has-sub.open .mega-menu,
.nav-links .has-sub:hover .mega-menu,
.nav-links .has-sub:focus-within .mega-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-links .has-sub.force-closed .mega-menu{opacity:0!important;visibility:hidden!important;pointer-events:none}
.mega-menu-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 28px}
.mega-menu-heading{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);font-weight:600;margin:0 0 8px}
.mega-menu-group a{display:block;padding:7px 8px;margin:0 -8px;border-radius:8px;font-size:.92rem;font-weight:500;white-space:nowrap;color:var(--ink);text-decoration:none}
.mega-menu-group a::after{display:none}
.mega-menu-group a:hover{background:var(--mist);color:var(--pink)}
.mega-menu-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.mega-menu-all{font-size:.88rem;font-weight:600;color:var(--pink-text);white-space:nowrap;text-decoration:none}
.mega-menu-all::after{display:none}
.mega-menu-all:hover{color:var(--pink)}

/* The full desktop nav (logo + 7 links + CTA pill) only has room to render
   as plain inline text above ~900px. Below that — including the whole
   681–899px tablet band — reuse the same hamburger/full-panel mobile nav
   as <680px rather than letting the CTA pill wrap across 2–3 lines. This
   only moves *where* the existing, already-tested mobile nav pattern
   applies; the pattern itself, and the desktop nav above 900px, are both
   unchanged. See docs/DESIGN-AUDIT-2026-08.md §6.1. */
@media (max-width:899px){
  .nav-links{
    position:fixed;top:78px;left:0;right:0;height:calc(100vh - 78px);
    background:var(--paper);flex-direction:column;
    padding:28px 24px 36px;gap:18px;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .4s var(--ease);align-items:flex-start;
    overflow-y:auto;overflow-x:hidden;justify-content:flex-start;
  }
  .nav-open .nav-links{transform:translateY(0)}
  .nav-toggle{display:block}
  /* Services: collapsed accordion by default, expands only via .open
     (same click/keyboard toggle main.js uses on desktop) — no longer
     "always visible" the way the old flat submenu was. */
  .nav-links .has-sub{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0}
  .nav-links .has-sub > a{width:100%}
  .nav-links .has-sub > a::after{transition:transform .2s var(--ease)}
  .nav-links .mega-menu{
    position:static;transform:none;opacity:1;visibility:hidden;max-height:0;overflow:hidden;
    box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;
    background:transparent;padding:0 0 0 14px;margin:0 0 0 4px;min-width:0;max-width:none;
    transition:max-height .3s var(--ease);
  }
  /* visibility:hidden while collapsed keeps the group links out of tab
     order and off screen-reader traversal — max-height:0 alone still
     leaves them focusable, since it doesn't remove the box, just clips it. */
  .nav-links .has-sub.open .mega-menu{max-height:640px;visibility:visible;padding:10px 0 4px 14px;margin-top:10px}
  .nav-links .mega-menu-groups{grid-template-columns:1fr;gap:2px}
  .nav-links .mega-menu-group{margin-bottom:20px}
  /* Mobile-only: rectangular blush-pink label block makes category
     hierarchy legible at a glance — supersedes the earlier hairline-rule
     treatment. Background is --pink at low opacity (existing accent
     token, not a new color); ink text keeps contrast high without
     reading as a button — no rounding, no shadow, no icon. */
  .nav-links .mega-menu-heading{
    background:rgba(255,45,120,.08);color:var(--ink);
    font-size:.68rem;font-weight:700;letter-spacing:.09em;
    padding:8px 10px;border-radius:2px;margin:0 0 4px;
  }
  .nav-links .mega-menu-group:first-child .mega-menu-heading{margin-top:0}
  .nav-links .mega-menu-group a{padding:9px 0;margin:0;font-size:.95rem;color:var(--graphite)}
  .nav-links .mega-menu-footer{flex-direction:column;align-items:flex-start;gap:10px;padding-top:14px}
}

@media (max-width:680px){
  section{padding:68px 0}
  .hero{padding:var(--mobile-hero-gap) 0 64px}
  /* .page-hero (Services hub, service pages, Pricing, Work, About, Contact)
     had no mobile override at all before this hotfix — it inherited the
     90px desktop padding-top unshrunk, worse than .hero's already-too-large
     76px. Same token, same header-to-content gap, across every non-blog
     page family. Blog (.post) intentionally excluded — breadcrumbs/meta
     need their own offset, not audited here. */
  .page-hero{padding-top:var(--mobile-hero-gap)}
  .grid-2,.grid-3,.grid-4,.work-grid,.post-grid,.pricing-grid{grid-template-columns:1fr}
  .post-decision-grid{grid-template-columns:1fr}
  .post .table-scroll table{width:auto;min-width:560px}
  .site-footer{padding-bottom:88px} /* clear sticky CTA bar */
  /* The value bubble now ships on mobile: compact, clear of the sticky CTA
     bar and the home-indicator safe area, 44px dismiss target, visible
     directional cue in place of the desktop hover arrow. Dismissal state is
     the same sessionStorage key as desktop.
     Position is two states, not one fixed number: low (near the true
     bottom, respecting the safe area) until the sticky CTA is actually
     visible, then raised to clear it. Driven by body.cta-visible, which
     main.js toggles from the same scroll listener that shows/hides
     .sticky-cta — never a hard-coded timer. transform (not bottom) so the
     move animates smoothly on the same transition already used for
     opacity/enter. See docs/DESIGN-AUDIT-2026-08.md (2026-08-06 hotfix).
     Raise distance (2026-08-13 gap pass): named tokens, not a bare magic
     number. --sticky-cta-mobile-height is .sticky-cta's actual rendered
     height at this breakpoint (10px+10px padding + button content, ~66.5px
     measured, rounded up slightly for safety margin) — CSS has no way to
     read a sibling's live height without JS/anchor-positioning, so this is
     a documented measurement, not a guess; update it if .sticky-cta's
     mobile padding or font-size changes. --floating-ui-mobile-gap is the
     deliberate breathing room between the two cards' bounding boxes. */
  :root{
    --sticky-cta-mobile-height:68px;
    --floating-ui-mobile-gap:20px;
  }
  .proof-box{
    left:12px;right:12px;width:auto;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius:12px;
    box-shadow:0 4px 12px rgba(20,20,19,.12); /* tighter/lighter than the
      shared --shadow token, which reads as a wide fog band on a card this
      close to full mobile width; lighter than .sticky-cta's own shadow too,
      since the CTA is the primary control and this is a secondary one */
    transition:opacity .5s var(--ease),transform .5s var(--ease);
  }
  body.cta-visible .proof-box,
  body.cta-visible .proof-box.visible{
    transform:translateY(calc(-1 * (var(--sticky-cta-mobile-height) + var(--floating-ui-mobile-gap))));
  } /* second selector: specificity parity with .visible's translateY(0) */
  .proof-link{gap:10px;padding:10px 48px 10px 12px;align-items:flex-start}
  .proof-icon{flex:0 0 28px;width:28px;height:28px;border-radius:7px}
  .proof-icon svg{width:16px;height:16px}
  .proof-box .msg{font-size:.78rem;line-height:1.3}
  .proof-cue{display:block}
  .proof-link::after{display:none} /* visible cue replaces the hover arrow */
  .proof-close{top:0;right:0;width:44px;height:44px;padding:0;font-size:1.25rem;
    display:flex;align-items:center;justify-content:center}
  .sticky-cta p{display:none}
  .sticky-cta{
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    max-width:calc(100% - 32px);padding:10px;
  }
}

/* Hero H1 on narrow phones: the sitewide clamp(2.6rem,6.2vw,4.6rem) is
   pinned at its 2.6rem floor below ~671px viewport width — it never
   actually shrinks further for a 375-430px phone. Fine for a short
   headline; a long final line (e.g. Private AI's "giving your business
   away.") can exceed the available box at that fixed size. Scoped to
   .page-hero (not .hero — the homepage headline already fits and isn't
   touched) and to ≤480px so normal phones get a size that scales with
   the viewport instead of a floor. max-width:16ch is also relaxed here —
   at this font-size 16ch can itself exceed the container, forcing an
   earlier wrap than the box needs. */
@media (max-width:480px){
  .page-hero h1{font-size:clamp(2.1rem,8.6vw,2.6rem);line-height:1.1;max-width:none}
}

/* ---------- 25. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 26. Blog post extras (generator-format sections) ---------- */
.post .post-meta{display:flex;align-items:center;flex-wrap:wrap;row-gap:10px;gap:12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post .post-meta a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:2px}
.post .author-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.post .post-meta .post-category{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--pink-text);border:1px solid var(--line);border-radius:999px;padding:5px 14px;text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s}
.post .post-meta .post-category:hover{border-color:var(--pink);background:var(--mist)}
.post .post-meta .post-category:focus-visible{outline:2px solid var(--pink-text);outline-offset:2px}
.author-box{display:flex;gap:20px;align-items:center;margin-top:48px;padding:24px 28px;background:var(--mist);border-radius:var(--radius)}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--line);flex-shrink:0}
.author-box p{margin:0;font-size:.92rem;color:var(--graphite)}
.author-box strong{display:block;font-family:var(--font-display);font-weight:700;color:var(--ink);margin-bottom:4px;font-size:1.05rem}
.author-box a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:2px}
@media (max-width:560px){
  .author-box{flex-direction:column;text-align:center}
}
.related-resources{margin-top:48px;padding:28px;background:var(--mist);border-radius:var(--radius)}
.related-resources h2{font-size:1.25rem;margin:0 0 16px;padding-left:24px}
.related-resources ul{list-style:none;margin:0}
.related-resources li{margin-bottom:14px;padding-left:24px;position:relative}
.related-resources li::before{content:"→";color:var(--pink);font-weight:700;position:absolute;left:0}
.related-resources a{font-weight:600;color:var(--ink)}
.related-resources p{margin:2px 0 0;font-size:.9rem;color:var(--graphite)}
.post-faq{margin-top:48px;padding:0}
.post-faq h2{max-width:var(--content-width);margin:0 auto 6px}
.post-faq details{max-width:var(--content-width);margin-left:auto;margin-right:auto;border-bottom:1px solid var(--line)}
.post-faq summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:1rem;padding:18px 36px 18px 0;position:relative}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:1.3rem;color:var(--pink);font-weight:600;transition:transform .3s var(--ease)}
.post-faq details[open] summary::after{transform:rotate(45deg)}
.post-faq .answer{padding:0 0 18px;color:var(--graphite);margin:0}

/* ---------- 26a. Blog tags (post-level, after body, before Related Resources) ---------- */
.post-tags{max-width:var(--content-width);margin:0 auto 40px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.post-tags__label{font-family:var(--font-display);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-right:2px}
.tag-chip{display:inline-block;font-size:.82rem;font-weight:600;color:var(--graphite);background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:6px 14px;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.tag-chip:hover{color:var(--ink);border-color:var(--pink)}
.tag-chip:focus-visible{outline:2px solid var(--pink-text);outline-offset:2px;color:var(--ink);border-color:var(--pink)}

/* ---------- 26b. Article closing discovery rail (FAQ + Tags + Related Resources + Author box) ---------- */
.closing-rail{margin-top:56px;padding-top:28px;border-top:2px solid var(--ink)}
.closing-rail__label{display:block;font-family:var(--font-display);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-text);margin-bottom:24px}
.closing-rail .post-faq{margin-top:0}
.closing-rail .post-tags{margin-top:40px}

/* ---------- 26c. Blog discovery — category nav + topic cloud (index/category pages) ---------- */
/* Owner-approved fix (2026-08-07): the plain <section> wrapping .blog-discovery
   on blog/index.html inherited the sitewide section{padding:96px 0} rhythm
   (rule 5, above) unmodified — the only contributor to the hero→taxonomy gap;
   .page-hero--compact's own bottom padding ends flush at its border-bottom,
   and .blog-discovery/.container add no padding-top of their own. 96px was
   tuned for section-to-section rhythm, not hero-to-immediate-taxonomy, so it
   read as excessive. Halved to 48px, scoped to widths above the existing
   mobile breakpoint only — the <=680px rule (section{padding:68px 0}, "8.
   Mobile" below) was already tighter and appropriate, left untouched. */
@media (min-width:681px){.blog-discovery-section{padding-top:48px}}
.blog-discovery{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.blog-category-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;list-style:none;padding:0}
.cat-link{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--graphite);text-decoration:none;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--paper);transition:border-color .2s,color .2s,background .2s}
.cat-link:hover{color:var(--ink);border-color:var(--pink)}
.cat-link:focus-visible{outline:2px solid var(--pink-text);outline-offset:2px}
.cat-link .cat-count{font-size:.76rem;color:var(--graphite);font-weight:500;font-variant-numeric:tabular-nums}
.cat-link.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-link.is-active .cat-count{color:#fff;opacity:.7}
.topic-cloud{padding-top:16px;border-top:1px solid var(--line)}
.topic-cloud__label{display:block;font-family:var(--font-display);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px;opacity:.7}
.topic-cloud__chips{display:flex;flex-wrap:wrap;gap:6px 8px}
.topic-chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--graphite);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.topic-chip .topic-count{font-size:.76rem;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums}
.topic-chip:hover{color:var(--ink);border-color:var(--pink)}
.topic-chip:focus-visible{outline:2px solid var(--pink-text);outline-offset:2px}
.topic-chip.is-active{color:var(--ink);background:var(--mist);border-color:var(--pink)}
.topic-chip--extra{display:none}
.topic-cloud__chips--expanded .topic-chip--extra{display:inline-flex}
.topic-cloud__toggle{display:inline-flex;align-items:center;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--pink-text);background:transparent;border:1px dashed var(--line);border-radius:999px;padding:6px 12px;margin-top:8px;cursor:pointer;transition:border-color .2s,color .2s}
.topic-cloud__toggle:hover{border-color:var(--pink);color:var(--ink)}
.topic-cloud__toggle:focus-visible{outline:2px solid var(--pink-text);outline-offset:2px}
.blog-filter-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 0;font-size:.92rem;color:var(--graphite)}
.blog-filter-status strong{color:var(--ink)}
.blog-filter-status a{font-weight:600;color:var(--pink-text);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:2px}
.blog-filter-status[hidden]{display:none}

/* ---------- 26d. Blog pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin:56px 0 0;flex-wrap:wrap}
.pagination a,.pagination span{font-weight:600;font-size:.92rem;text-decoration:none;padding:10px 16px;border:1px solid var(--line);border-radius:999px;transition:border-color .2s,background .2s}
.pagination a{color:var(--ink)}
.pagination a:hover{border-color:var(--pink)}
.pagination a:focus-visible{outline:2px solid var(--pink-text);outline-offset:2px}
.pagination .page-numbers{display:flex;gap:6px}
.pagination .page-num{min-width:20px;text-align:center}
.pagination a.page-num.is-current,.pagination span.page-num.is-current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pagination .page-disabled{color:var(--graphite);opacity:.45;border-color:var(--line);pointer-events:none}
@media (max-width:560px){
  .pagination{gap:8px}
  .pagination a,.pagination span{padding:9px 13px;font-size:.86rem}
}

/* Contact form */
.contact-form label{display:block;font-weight:600;font-size:.92rem;margin:18px 0 6px}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:1rem;background:var(--paper);color:var(--ink);
  transition:border-color .2s;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--pink)}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form button{margin-top:24px;width:100%}
.form-hint{font-size:.82rem;color:var(--graphite);margin-top:10px}

/* ---------- 26b. Blog TL;DR (required on every post, above featured image) ---------- */
.post-tldr{background:var(--mist);border:1px solid var(--line);border-left:4px solid var(--pink);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.post-tldr__label,.post-tldr p{max-width:var(--content-width);margin-left:auto;margin-right:auto}
.post-tldr__label{display:block;font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-text);margin-bottom:6px}
.post-tldr p{color:var(--ink);font-size:1rem;line-height:1.6}

/* ---------- 27. Blog featured images ---------- */
.post .featured-image{border-radius:var(--radius);border:1px solid var(--line);margin:0 0 36px;width:100%;aspect-ratio:1200/630;object-fit:cover}
.post .featured-image--interface{aspect-ratio:auto;object-fit:contain;background:var(--ink)}
.post .featured-image-trigger{margin:0 0 36px;border-radius:var(--radius);cursor:zoom-in}
.post .featured-image-trigger .featured-image{display:block;margin:0;transition:border-color .2s,box-shadow .2s}
.post .featured-image-trigger:hover .featured-image{border-color:var(--pink);box-shadow:var(--shadow)}
.post-card .thumb{border-radius:10px;border:1px solid var(--line);margin-bottom:18px;width:100%;aspect-ratio:1200/630;object-fit:cover}

/* ---------- 28. Section illustrations ---------- */
.section-figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;margin-top:56px}
.section-figure img{width:100%;height:auto;display:block}
.post .post-product-shot{margin:38px 0 42px}.post .post-product-shot figcaption{padding:12px 16px;border-top:1px solid var(--line);color:var(--graphite);font-size:.88rem;line-height:1.45}
.section-dark .section-figure{border-color:#33312E}

/* Longer repositioned hero headline */
.hero h1.hero-h1-long{font-size:clamp(2.1rem,4.6vw,3.55rem);max-width:21ch}

/* ---------- 29. Proof / receipts ---------- */
.proof-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:880px;margin:0 auto}
.proof-shot{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:transform .3s var(--ease),box-shadow .3s}
.proof-shot:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.proof-shot img{width:100%;height:auto;display:block}
.proof-shot figcaption{padding:12px 14px;font-size:.84rem;font-weight:600;border-top:1px solid var(--line);text-align:center}
@media (max-width:680px){.proof-shots{grid-template-columns:1fr;max-width:340px}}

/* Hero visual counter overlay (replaces simple labels) */
.hero-visual-counter{position:absolute;top:4px;right:8px;text-align:right;pointer-events:none}
.hero-visual-counter span{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--pink);line-height:1;display:block}
.hero-visual-counter small{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);font-weight:600}




/* ---------- 31. Content Engine framework rail ---------- */
.framework{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.framework-stage{
  width:100%;text-align:center;border:1px solid #33312E;border-radius:var(--radius);
  padding:22px 28px;background:rgba(255,255,255,.02);
}
.framework-stage .framework-label{
  display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--text-on-dark);
}
.framework-stage .framework-desc{display:block;color:#B8B5AE;font-size:.92rem;margin-top:4px}
.framework-final{background:var(--pink);border-color:var(--pink)}
.framework-final .framework-label{color:#fff}
.framework-final .framework-desc{color:rgba(255,255,255,.85)}
.framework-arrow{color:var(--pink);font-size:1.6rem;font-weight:700;line-height:1;padding:10px 0}

/* ---------- 31a. Video lightbox (MultiStream.cc section) ---------- */
.media-stack{display:flex;flex-direction:column;gap:22px}

.video-lightbox-trigger{
  display:block;width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:0;
  background:none;cursor:pointer;transition:transform .3s var(--ease)
}
.video-lightbox-trigger:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.video-lightbox-trigger video{display:block;width:100%;height:auto;border-radius:var(--radius)}

.video-lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
.video-lightbox-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);cursor:pointer}
.video-lightbox-container{
  position:relative;z-index:101;width:90vw;height:auto;aspect-ratio:2/3;max-width:600px;max-height:90vh;
  background:#000;border-radius:var(--radius)
}
.video-lightbox video{width:100%;height:100%;object-fit:cover}
.video-lightbox-close{
  position:absolute;top:16px;right:16px;z-index:102;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);color:#fff;width:44px;height:44px;border-radius:50%;
  font-size:1.5rem;cursor:pointer;transition:background .2s;display:flex;align-items:center;
  justify-content:center
}
.video-lightbox-close:hover{background:rgba(255,255,255,.25)}

/* ---------- 32. Path ladder (free call → audit → engine) ---------- */
.path-ladder{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;justify-content:center;margin-top:8px}
.ladder-step{
  flex:1 1 260px;max-width:320px;display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:var(--paper);
}
.ladder-step .ladder-num{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--pink);color:#fff;
  font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.ladder-step h3{font-size:1.1rem;margin-bottom:6px}
.ladder-step p{color:var(--graphite);font-size:.92rem}
.ladder-arrow{display:flex;align-items:center;color:var(--pink);font-weight:700;font-size:1.5rem;padding:0 14px}
@media (max-width:760px){
  .path-ladder{flex-direction:column;align-items:stretch}
  .ladder-step{max-width:none;flex-basis:auto}
  .ladder-arrow{transform:rotate(90deg);padding:10px 0;justify-content:center}
}

/* ---------- 33. Proof placeholders ---------- */
.proof-ph{border-style:dashed;opacity:.85}
.proof-ph .mini-label{color:var(--graphite)}

/* ---------- 34. Positioning v2: risk line, fit, why-now, launch, reversal ---------- */
.hero-risk{font-size:.9rem;color:var(--graphite);margin-top:16px;display:flex;align-items:center;gap:8px}
.hero-risk::before{content:"\2713";color:var(--pink);font-weight:800}

/* Who this is for */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:880px;margin:0 auto}
.fit-col{border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;background:var(--paper)}
.fit-col h3{font-size:1.15rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.fit-col ul{list-style:none;margin:0}
.fit-col li{padding:7px 0 7px 28px;position:relative;color:var(--ink)}
.fit-yes{border-top:3px solid var(--pink)}
.fit-yes h3::before{content:"\2713";color:var(--pink);font-weight:800}
.fit-yes li::before{content:"\2713";position:absolute;left:0;color:var(--pink);font-weight:700}
.fit-no{border-top:3px solid var(--line)}
.fit-no h3::before{content:"\2715";color:var(--graphite);font-weight:800}
.fit-no li::before{content:"\2715";position:absolute;left:0;color:var(--graphite);font-weight:700}
.fit-note{margin-top:16px;font-size:.88rem;color:var(--graphite);font-style:italic}
@media (max-width:680px){.fit-grid{grid-template-columns:1fr}}

/* Why now */
/* Why Now — owner-selected Option 3, "Editorial Observation Grid"
   (docs/design-directions-preview/why-now/option-3-editorial-grid.html),
   applied 2026-08-07. The four items are independent market observations,
   not a sequence, so the 01-04 numerals were decorative only — removed in
   favor of a short keyword label per item, reusing this page's own
   .mini-label pattern (already live on the "Why Businesses Hire Us" and
   "Inside The Engine" card grids below) instead of introducing a new
   device. Grid widened from a 2x2 block to a single 4-col row (matching
   the item count); color kept to var(--pink), the same token
   .whynow-num already used successfully on this dark section, rather
   than inventing a new value. */
.whynow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.whynow-item{padding:20px 6px 0;border-top:2px solid rgba(255,255,255,.18)}
.whynow-item .mini-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);font-weight:700;display:block;margin-bottom:12px}
.whynow-item p{color:#C8C5BE;margin:0}
.whynow-item strong{color:var(--text-on-dark)}
.whynow-item em{color:var(--pink);font-style:normal;font-weight:600}
.whynow-close{text-align:center;max-width:640px;margin:44px auto 0;font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--text-on-dark);line-height:1.4}
@media (max-width:899px){.whynow-grid{grid-template-columns:1fr;gap:0}.whynow-item{padding-bottom:26px}}

/* Launch banner */
.launch-banner{max-width:760px;margin:0 auto 36px;text-align:center;background:rgba(255,45,120,.06);
  border:1px solid rgba(255,45,120,.25);border-radius:var(--radius);padding:24px 28px}
.launch-badge{display:inline-block;background:var(--pink);color:#fff;font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:12px;white-space:nowrap}
.launch-banner p{color:var(--graphite);font-size:.95rem;margin:0}
@media (max-width:480px){
  .launch-banner{padding:20px 18px}
  .launch-badge{font-size:.6rem;letter-spacing:.04em;padding:5px 10px}
}
/* Strikethrough launch pricing */
.price-card .amount .was{text-decoration:line-through;color:var(--graphite);font-weight:600;font-size:.62em;opacity:.7;margin-right:4px}
.launch-tag{display:inline-block;background:var(--pink);color:#fff;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:999px;margin:-8px 0 14px}

/* Growth Audit risk reversal */
.reversal-list{list-style:none;margin:0}
.reversal-list li{padding:14px 0 14px 34px;position:relative;border-bottom:1px solid var(--line);color:var(--graphite)}
.reversal-list li:last-child{border-bottom:0}
.reversal-list li strong{color:var(--ink);display:block;margin-bottom:2px}
.reversal-list li::before{content:"\2713";position:absolute;left:0;top:14px;color:#fff;background:var(--pink);
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}
.reversal-close{margin-top:20px;font-weight:600;color:var(--ink)}

/* ---------- 35. By The Numbers credibility bar ---------- */
.bythenumbers{padding:48px 0;border-bottom:1px solid var(--line)}
.btn-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;text-align:center}
.btn-stat{display:flex;flex-direction:column;gap:4px}
.btn-num{font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:var(--ink);line-height:1}
.btn-num .accent{color:var(--pink)}
.btn-label{font-size:.8rem;color:var(--graphite);letter-spacing:.02em;line-height:1.3}
@media (max-width:900px){.btn-grid{grid-template-columns:repeat(3,1fr);gap:28px 16px}}
@media (max-width:480px){.btn-grid{grid-template-columns:repeat(2,1fr)}.btn-num{font-size:1.6rem}}

/* ---------- 36. Contact form qualification fields ---------- */
.form-section-label{margin:24px 0 4px;font-size:.85rem;color:var(--graphite);padding-top:18px;border-top:1px solid var(--line)}
.contact-form .optional{color:var(--graphite);font-weight:400;font-size:.85em}

/* ---------- 37. Growth Audit intake form ---------- */
.audit-note{background:var(--mist);border-left:3px solid var(--pink);border-radius:0 10px 10px 0;
  padding:18px 22px;margin-bottom:36px;font-size:.95rem;color:var(--graphite)}
.audit-note strong{color:var(--ink)}
.audit-form .audit-stage{border:0;border-top:1px solid var(--line);margin:46px 0 0;padding:14px 0 16px}
.audit-form .audit-stage:first-of-type{border-top:0;margin-top:0}
/* legends are unreliable as flex containers; use a normal block + inline-flex wrapper */
.audit-form legend{display:block;width:100%;padding:0;margin:0 0 8px}
.audit-form legend > .stage-index{
  flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;
  font-family:var(--font-display);font-size:.95rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:12px
}
.audit-form legend{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--ink);line-height:1.2}
.stage-index-foundation{background:var(--pink)!important;font-size:.8rem}
.stage-intro{color:var(--graphite);margin:0 0 18px;font-size:.95rem}
.field-help{font-size:.82rem;color:var(--graphite);margin:0 0 6px;font-style:italic}
.audit-fields label{margin-top:18px}

/* ---------- 38. Growth Audit "Start here" nav emphasis ----------
   Now lives in .mega-menu-footer (left side) alongside "View All
   Services" (right side) instead of as the last item in a flat list. */
.mega-menu-footer .submenu-start{
  display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:.9rem;white-space:nowrap;text-decoration:none
}
.mega-menu-footer .submenu-start .start-tag{
  display:inline-block;background:var(--pink);color:#fff;font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:2px 7px;border-radius:999px;flex:0 0 auto;white-space:nowrap
}
.mega-menu-footer .submenu-start:hover{color:var(--pink)}

/* ---------- 39. Post prev/next navigation ---------- */
.post-nav{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.post-nav a{font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;flex:1;max-width:48%}
.post-nav a:last-child:not(:first-child){text-align:right}
.post-nav a:hover{color:var(--pink)}

/* ---------- 40. Breadcrumb ---------- */
.breadcrumb{padding:10px 0;border-bottom:1px solid var(--line);background:var(--paper);font-size:.82rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;list-style:none}
.breadcrumb li+li::before{content:"›";margin-right:2px;color:var(--graphite)}
.breadcrumb a{color:var(--graphite);text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:500}

/* ---------- 41. Logo ticker ---------- */
.logo-ticker-section{padding:56px 0;overflow:hidden}
.logo-ticker-caption{text-align:center;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#9B968D;margin-bottom:32px}
.logo-ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-ticker-track{display:flex;align-items:center;gap:64px;width:max-content;animation:logo-ticker-scroll 34s linear infinite}
.logo-ticker-track:hover{animation-play-state:paused}
.logo-ticker-track img{height:32px;width:auto;opacity:.8;transition:opacity .3s}
.logo-ticker-track img:hover{opacity:1}
@keyframes logo-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:680px){.logo-ticker-track{gap:44px}.logo-ticker-track img{height:26px}}
.post-nav .nav-label{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--graphite);margin-bottom:4px}

/* ---------- 42. History timeline ---------- */
.history-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1040px;margin:0 auto;list-style:none}
.history-timeline li{border-top:3px solid var(--pink);padding-top:18px;text-align:left}
.history-year{display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem;margin-bottom:8px}
.history-timeline p{color:var(--graphite);font-size:.92rem}
@media (max-width:900px){.history-timeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.history-timeline{grid-template-columns:1fr;max-width:420px}}

/* ---------- 43. Archive gallery ---------- */
.archive-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.archive-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:transform .3s var(--ease),box-shadow .3s}
.archive-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.archive-card__trigger{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.archive-card__trigger img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.archive-card__trigger img.crop-top{object-position:center top}
.archive-card__trigger img.tall-crop{aspect-ratio:5/6}
.archive-card figcaption{padding:14px 16px;font-size:.86rem;color:var(--graphite);border-top:1px solid var(--line)}
.archive-card--missing .archive-card__trigger img{display:none}
.archive-card--missing .archive-card__trigger{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,var(--mist) 0 10px,var(--paper) 10px 20px);
  color:var(--graphite);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
}
.archive-card--missing .archive-card__trigger::before{content:"Image coming soon"}
@media (max-width:900px){.archive-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.archive-gallery{grid-template-columns:1fr}}

/* ---------- 44. Archive lightbox ---------- */
.lightbox-modal{
  position:fixed;inset:0;z-index:200;background:rgba(20,20,19,.92);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.lightbox-modal.visible{opacity:1;visibility:visible}
.lightbox-modal figure{max-width:min(1500px,96vw);max-height:92vh;display:flex;flex-direction:column;margin:0}
.lightbox-modal__img{max-width:100%;max-height:84vh;width:auto;height:auto;border-radius:10px;margin:0 auto;object-fit:contain;background:var(--mist)}
.lightbox-modal__caption{color:var(--text-on-dark);text-align:center;font-size:.92rem;margin-top:16px}
.lightbox-modal__close{
  position:absolute;top:20px;right:24px;background:none;border:2px solid rgba(251,250,248,.4);
  color:var(--text-on-dark);width:44px;height:44px;border-radius:50%;font-size:1.5rem;line-height:1;
  cursor:pointer;transition:border-color .2s,background .2s;
}
.lightbox-modal__close:hover{border-color:var(--pink);background:rgba(255,45,120,.15)}
@media (max-width:560px){.lightbox-modal__close{top:12px;right:12px;width:38px;height:38px;font-size:1.25rem}}

/* ---------- 27. System flow diagram (Direction 3 — Interactive Intelligence) ----------
   Reusable mechanism/progression diagram: a dark panel embedded in an
   otherwise light-dominant page, one step marked .is-live. Content-bearing,
   not decorative — node labels are real text, not text-in-image. Static by
   default; the one live-state pulse is neutralized under
   prefers-reduced-motion via the sitewide rule in section 25. See
   docs/DESIGN-AUDIT-2026-08.md §13.3 and design-directions-preview/03. */
.sys-flow{
  margin-top:28px;border:1px solid #2A2724;border-radius:20px;padding:26px 28px;
  background:linear-gradient(155deg,#1B1917,#141413);position:relative;overflow:hidden;color:var(--text-on-dark);
}
.sys-flow::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,45,120,.14),transparent 45%)}
.sys-flow-eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#FF6B9C;margin-bottom:16px;display:flex;align-items:center;gap:8px;position:relative;z-index:1;
}
.sys-flow-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#FF6B9C;animation:sysFlowPulse 1.6s ease-in-out infinite}
@keyframes sysFlowPulse{0%,100%{opacity:1}50%{opacity:.3}}
.sys-flow-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 0;position:relative;z-index:1}
.sys-flow-node{
  border:1px solid #3A3632;background:#1B1917;border-radius:10px;padding:11px 16px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--text-on-dark);
}
.sys-flow-node.is-live{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,45,120,.14)}
.sys-flow-arrow{color:#5C5852;padding:0 8px;font-family:var(--font-mono);font-size:.85rem}
.sys-flow-caption{display:block;margin-top:16px;font-family:var(--font-mono);font-size:.74rem;color:var(--pink);position:relative;z-index:1}
@media (max-width:680px){
  .sys-flow{padding:22px 20px}
  .sys-flow-row{flex-direction:column;align-items:stretch;gap:8px}
  .sys-flow-node{text-align:center}
  .sys-flow-arrow{align-self:center;transform:rotate(90deg);padding:0}
}

/* ---------- 27b. Six-stage system-flow (AI Training) — desktop one-row modifier ---------- */
/* Base .sys-flow-row wraps by default (see rule above), which is correct for
   the 4-node Private AI flow but leaves a 6th stage orphaned on its own row
   at desktop widths. .sys-flow--six keeps content-aware node widths but
   forces one row where the container realistically fits it, stepping font
   size/padding down first before allowing a deliberate two-row layout. */
@media (min-width:1025px){
  .sys-flow--six .sys-flow-row{flex-wrap:nowrap}
  .sys-flow--six .sys-flow-node{padding:10px 12px;white-space:nowrap}
  .sys-flow--six .sys-flow-arrow{padding:0 4px}
}
@media (min-width:1025px) and (max-width:1210px){
  .sys-flow--six .sys-flow-node{font-size:.7rem;padding:9px 9px}
  .sys-flow--six .sys-flow-arrow{padding:0 3px;font-size:.78rem}
}
.sys-flow-break{display:none}
@media (min-width:900px) and (max-width:1024px){
  .sys-flow--six .sys-flow-row{gap:10px;row-gap:12px;justify-content:center}
  .sys-flow--six .sys-flow-node{flex:0 0 auto;text-align:center}
  .sys-flow--six .sys-flow-break{display:block;flex-basis:100%;height:0}
}
@media (min-width:681px) and (max-width:899px){
  .sys-flow--six .sys-flow-row{gap:10px;row-gap:12px;justify-content:center}
  .sys-flow--six .sys-flow-node{flex:0 0 auto;text-align:center;font-size:.72rem;padding:9px 10px}
  .sys-flow--six .sys-flow-break{display:block;flex-basis:100%;height:0}
}

/* ---------- 27c. Four-node balanced 2x2 (SEO Search Visibility) — tablet modifier ---------- */
/* Base .sys-flow-row's default wrap fills each row as greedily as it fits,
   which produces a 3-then-1 orphan for a 4-node flow across roughly
   750-890px (unlike the 6-node variant above, which steps font/gap but
   never forces a break in this range). .sys-flow--pair forces a deliberate
   2+2 split with one manual .sys-flow-break, reusing the exact mechanism
   already defined above rather than inventing a new one. */
@media (min-width:681px) and (max-width:1024px){
  .sys-flow--pair .sys-flow-row{justify-content:center;row-gap:12px}
  .sys-flow--pair .sys-flow-node{flex:0 0 auto;text-align:center}
  .sys-flow--pair .sys-flow-break{display:block;flex-basis:100%;height:0}
}

/* ---------- 28. Services hub — AI section (retired 2-card connecting
   rail; #ai-services is now a 3-card .grid-3 as of the AI Workflow
   Automation round, and the rail was specific to exactly 2 cards) ---------- */

/* ---------- 29. Card keyboard-focus parity with hover ---------- */
.card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--ink);outline:2px solid var(--pink-text);outline-offset:2px}

/* ---------- 31. Video media elements ---------- */
.media-stack{display:flex;flex-direction:column;gap:22px}
video{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--mist)}