/* ════════════════════════════════════════════════════════════════
   PRESNSE — SERVICE · CLINIC SEO  ·  bespoke per-page module layer
   ----------------------------------------------------------------
   Archetype: SERVICE (ranking / core commercial). Copy source of
   truth: project/handoff/seo-page-packs/03-service-clinic-seo-page-pack.md.
   Composition follows homepage/wireframe-service-clinic-seo.html:
     M01 Problem hero          — INVENTED, SERP-visibility instrument leads right
     M02 Objection             — INVENTED, broken cadence (no mod-bar), fragment cluster (§13c)
     M03 Definition answer card— INVENTED, blockquote + 4-layer grid (AI-extractable)
     M04 Diagnostic ledger     — SIGNATURE instrument, light panel glowing on a dark band (§13b/§13d)
     M05 What we build         — INVENTED, 6-card capability grid
     M06 vs standard SEO       — INVENTED, sticky-left heading / scrolling table
     M07 Method                — INVENTED, 5 spec rows (coord · activity · impact)
     M08 Implementation        — INVENTED, evidence instruments + entity index
   Reused signatures: .mod/.mod-bar, .entity dark shell, FAQ .acc (.faq-grid),
   nav/footer/blueprint/dashed hairlines/rationed lime/calm motion.
   Consumes tokens from foundation.css ONLY — no raw colour.
   ════════════════════════════════════════════════════════════════ */

.cseo-measure{max-width:64ch;}

/* ───────────────────────────────────────────────────────────────
   M01 · PROBLEM HERO  [INVENTED — the page's own hero, not hero-mod]
   Asymmetric: left states the gap; right LEADS with the patient's
   11pm search where the clinic is buried (data-as-ornament, §13b).
   ─────────────────────────────────────────────────────────────── */
.cseo-hero{padding-top:clamp(20px,3vw,40px);}
.cseo-hero .mod-body{padding-block:clamp(var(--sp-xl),4vw,var(--sp-4xl));}
.cseo-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start;}
.cseo-hero h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin-top:20px;}
.cseo-hero h1 .sym{font-family:var(--serif);font-style:italic;font-weight:400;}
.cseo-hero .lede{margin-top:24px;max-width:50ch;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.6;color:var(--ink-soft);}
.cseo-hero .lede .q{font-family:var(--mono);font-size:.92em;color:var(--ink);background:var(--wash-strong);
  border:1px dashed var(--line-rule);border-radius:var(--radius-chip);padding:1px 7px;white-space:nowrap;}
.cseo-hero .lede .zh{font-family:"Noto Sans HK","PingFang HK",var(--sans);}
.cseo-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}

/* the SERP-visibility instrument — illustrative, no fabricated metrics */
.serpfig{border:1px dashed var(--line-em);background:var(--paper-card);box-shadow:var(--shadow-card);}
.serpfig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px dashed var(--line-dash);
  font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.serpfig-head .q{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;text-transform:none;letter-spacing:.02em;}
.serpfig-head .q .mag{width:13px;height:13px;color:var(--faint);}
.serpfig-head .t{color:var(--faint);}
.serprow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:14px 18px;border-bottom:1px dashed var(--line-soft);}
.serprow:last-child{border-bottom:none;}
.serprow .rk{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--faint);padding-top:2px;width:2.4em;}
.serprow .ttl{font-size:.95rem;color:var(--serp-blue);font-weight:500;line-height:1.3;}
.serprow .url{font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;color:var(--serp-slate);margin-top:5px;display:block;}
.serprow .ln{height:7px;border-radius:var(--radius-bar);background:var(--wash-hair);margin-top:9px;max-width:var(--w,70%);}
.serprow.win{background:var(--wash-soft);position:relative;}
.serprow.win::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);}
.serprow.win .rk{color:var(--lime-ink);}
.serprow.you{background:var(--amber-veil);}
.serprow.you .rk{color:var(--amber);}
.serprow.you .ttl{color:var(--ink);}
.serprow .tag-you{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--amber-line);border-radius:var(--radius-tag);padding:2px 7px;
  display:inline-block;margin-top:8px;}
.serpfig-foot{padding:11px 18px;border-top:1px dashed var(--line-dash);
  font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.06em;color:var(--faint);
  display:flex;align-items:center;gap:8px;}
.serpfig-foot .d{width:5px;height:5px;border-radius:50%;background:var(--faint);flex:0 0 auto;}

/* M1 · SERP shortfig hero cascade (audit 2026-07-19 §4) — rivals cascade in fast,
   a beat, then the "you" row drops in late and heavy: the delay IS the argument.
   Start-state class (.seq-armed) is added ONLY by JS right before the sequence
   runs, so without JS the figure renders complete/static (mirrors foundation.js
   .serp-intro-armed pattern at foundation.js:249-250). */
.serpfig.seq-armed .serprow.win,
.serpfig.seq-armed .serprow:not(.win):not(.you){opacity:0;transform:translateY(-8px);}
.serpfig.seq-armed.seq-on .serprow.win,
.serpfig.seq-armed.seq-on .serprow:not(.win):not(.you){
  opacity:1;transform:none;transition:opacity .38s var(--ease-out),transform .38s var(--ease-out);}
.serpfig.seq-armed.seq-on .serprow.win{transition-delay:.10s;}
.serpfig.seq-armed.seq-on .serprow.win + .serprow{transition-delay:.24s;}
.serpfig.seq-armed.seq-on .serprow.win + .serprow + .serprow{transition-delay:.38s;}

.serpfig.seq-armed .serprow.you{opacity:0;transform:translateY(-18px) scale(.98);}
.serpfig.seq-armed.seq-on .serprow.you{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-spring) .96s,transform .6s var(--ease-spring) .96s;}
.serpfig.seq-armed .serprow.you .tag-you{transform:scale(0);transform-origin:left center;}
.serpfig.seq-armed.seq-on .serprow.you .tag-you{
  transform:scale(1);transition:transform .56s var(--ease-stamp) 1.5s;}

.serpfig.seq-armed .serprow .ln i{position:absolute;inset:0;width:100%;
  background:var(--line-rule);border-radius:inherit;transform:scaleX(0);transform-origin:left;}
.serpfig.seq-armed .serprow .ln{position:relative;overflow:hidden;}
.serpfig.seq-armed.seq-on .serprow .ln i{transform:scaleX(1);transition:transform .8s var(--ease-omnius);}
.serpfig.seq-armed.seq-on .serprow.win .ln i{transition-delay:.5s;}
.serpfig.seq-armed.seq-on .serprow.win + .serprow .ln i{transition-delay:.62s;}
.serpfig.seq-armed.seq-on .serprow.win + .serprow + .serprow .ln i{transition-delay:.74s;}

@media (prefers-reduced-motion:reduce){
  .serpfig.seq-armed .serprow.win,
  .serpfig.seq-armed .serprow:not(.win):not(.you),
  .serpfig.seq-armed .serprow.you{opacity:1;transform:none;transition:none;}
  .serpfig.seq-armed .serprow.you .tag-you{transform:none;transition:none;}
  .serpfig.seq-armed .serprow .ln i{transform:none;transition:none;}
}

/* ───────────────────────────────────────────────────────────────
   M02 · OBJECTION  [Move 06 — lede + bold-lead .kv rows]
   Rebuilt from the old broken-cadence fragments to the shared kv
   pattern (components.css) + standard mod-bar per amendment 2.
   ─────────────────────────────────────────────────────────────── */
.seg-lbl{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);display:block;}
/* §13h.4 ladder: even, clearly-stepped rhythm H2 → lede → rows */
#why .kv-lede{margin-top:clamp(20px,2.4vw,30px);}
#why .kv{margin-top:clamp(24px,3vw,36px);}

/* ───────────────────────────────────────────────────────────────
   M03 · DEFINITION ANSWER CARD  [INVENTED — AI-extractable]
   Left: the schema-extractable definition (blockquote). Right: the
   4 layers HK SEO skips, as a labelled bilingual grid.
   ─────────────────────────────────────────────────────────────── */
.defcard{display:grid;grid-template-columns:1.05fr 1.2fr;gap:clamp(28px,4vw,56px);
  margin-top:40px;border:1px solid var(--line-mid);border-top:2px solid var(--ink);
  background:var(--paper-card);padding:clamp(26px,3.4vw,48px);}
.def-quote .qmark{font-family:var(--serif);font-size:3.4rem;line-height:.6;color:var(--lime-deep);display:block;}
.def-quote blockquote{font-size:clamp(1.2rem,1.9vw,1.65rem);line-height:1.32;letter-spacing:-.01em;
  font-weight:500;color:var(--ink);margin-top:8px;max-width:32ch;}
.def-quote blockquote .sym{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--lime-ink);}
.def-quote .src{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-top:22px;display:flex;align-items:center;gap:9px;}
.def-quote .src .d{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);}
.layer4{display:grid;grid-template-columns:1fr 1fr;border:1px dashed var(--line-soft);align-self:start;}
.l4{padding:18px 20px;border-right:1px dashed var(--line-soft);border-bottom:1px dashed var(--line-soft);}
.l4:nth-child(2n){border-right:none;}
.l4:nth-last-child(-n+2){border-bottom:none;}
.l4 .no{font-family:var(--mono);font-size:var(--label-sm);color:var(--lime-ink);letter-spacing:.06em;}
.l4 h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-top:10px;}
.l4 h3 .zh{font-family:"Noto Sans HK","PingFang HK",var(--sans);font-weight:500;color:var(--muted);font-size:.86em;}
.l4 p{font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin-top:8px;}

/* ───────────────────────────────────────────────────────────────
   M04 · DIAGNOSTIC LEDGER  [SIGNATURE instrument · dark premium moment]
   motif: one mid-page dark band for rhythm (10a dark-bookends) — the
   keyword-gap ledger is the page's signature instrument and earns the
   glowing-on-substrate premium moment (13b). Panel stays LIGHT (13d).
   Ledger = each patient intent + whether a page resolves it (ok / thin / none).
   Status is qualitative — NOT a fabricated rank. Narrow rail = the four
   ways generic sites lose the patient, with pack figures as data chips.
   ─────────────────────────────────────────────────────────────── */
.gap-wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,56px);
  margin-top:44px;align-items:start;}
/* S-2: the ledger + its data chips share the left column so the instrument
   fills the row height beside the rail — no dead band under the card */
.gap-fig-col{display:flex;flex-direction:column;}
/* light card on the dark #diagnosis module — explicit ink base so no child
   inherits --white on the light ground (§13h.7). */
.gapfig{background:var(--paper-card);border:1px solid var(--line-mid);box-shadow:var(--shadow-card);color:var(--ink);}
.gapfig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px dashed var(--line-dash);
  font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.gapfig-head .lbl{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;}
.gapfig-head .lbl .d{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);}
.gapfig-head .key{display:flex;gap:14px;color:var(--faint);}
.gapfig-head .key span{display:inline-flex;align-items:center;gap:5px;}
.gapfig-head .key i{width:8px;height:8px;border-radius:50%;font-style:normal;}
.gapfig-head .key .ok{background:var(--lime);}
.gapfig-head .key .thin{background:var(--amber);}
.gapfig-head .key .none{background:var(--rk-weak);}
/* §13h.6 column alignment: fixed intent + status tracks so every bar
   starts AND ends on the same vertical line regardless of label length */
.grow{display:grid;grid-template-columns:minmax(0,15.5rem) 1fr 6.2rem;gap:16px;align-items:center;
  padding:13px 20px;border-bottom:1px dashed var(--line-soft);}
.grow:last-child{border-bottom:none;}
.grow .intent{display:flex;flex-direction:column;gap:3px;}
.grow .intent .zh{font-family:"Noto Sans HK","PingFang HK",var(--sans);font-size:.94rem;color:var(--ink);font-weight:500;}
.grow .intent .en{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;color:var(--muted);}
.grow .track{height:8px;border-radius:var(--radius-bar);background:var(--wash-hair);overflow:hidden;}
.grow .track i{display:block;height:100%;border-radius:var(--radius-bar);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) var(--d,0s);}
.grow.ok .track i{background:var(--lime-deep);}
.grow.thin .track i{background:var(--amber);}
.grow.none .track i{background:var(--rk-weak);}
.grow .st{font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;display:inline-flex;align-items:center;gap:6px;justify-self:end;}
.grow .st::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.grow.ok .st{color:var(--lime-ink);}.grow.ok .st::before{background:var(--lime);}
.grow.thin .st{color:var(--amber);}.grow.thin .st::before{background:var(--amber);}
.grow.none .st{color:var(--rk-weak);}.grow.none .st::before{background:var(--rk-weak);}
.gapfig-note{padding:11px 20px;border-top:1px dashed var(--line-dash);
  font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.05em;color:var(--faint);}

/* the narrow rail: how generic sites lose the patient + pack data chips */
.gap-rail{align-self:start;}
.gap-rail .diag{border-top:1px dashed var(--line-on-dash);padding:18px 0;}
.gap-rail .diag:first-child{border-top:none;}
.gap-rail .diag h3{font-size:.98rem;font-weight:600;color:var(--white);letter-spacing:-.01em;}
.gap-rail .diag p{font-size:.86rem;color:var(--tx-on-62);line-height:1.55;margin-top:6px;max-width:42ch;}
.gap-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.gap-chip{border:1px dashed var(--line-on-mid);border-radius:var(--radius-tag);padding:10px 14px;
  display:flex;flex-direction:column;gap:3px;}
.gap-chip .n{font-family:var(--sans);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--white);line-height:1;}
.gap-chip .n .sym{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--lime);}
.gap-chip .l{font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-on-50);}

/* ───────────────────────────────────────────────────────────────
   M05 · WHAT WE BUILD  [INVENTED — 6-card capability grid]
   ─────────────────────────────────────────────────────────────── */
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-mid);
  margin-top:40px;background:var(--bg);}
.build-card{padding:clamp(24px,2.6vw,34px);border-right:1px dashed var(--line-soft);
  border-bottom:1px dashed var(--line-soft);display:flex;flex-direction:column;transition:background .2s;}
.build-card:nth-child(3n){border-right:none;}
.build-card:nth-last-child(-n+3){border-bottom:none;}
.build-card:hover{background:var(--wash-soft);}
.build-card .bc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.build-card .bc-no{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--lime-ink);}
.build-card .bc-glyph{width:26px;height:26px;color:var(--ink);}
.build-card h3{font-size:1.08rem;font-weight:600;letter-spacing:-.01em;margin-top:16px;line-height:1.25;}
.build-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin-top:11px;}
.build-card .go{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:.72rem;
  display:inline-flex;gap:8px;align-items:center;color:var(--ink);}
.build-card .go .arr{color:var(--lime-deep);transition:transform .25s var(--ease);}
@media (hover:hover) and (pointer:fine){.build-card:hover .go .arr{transform:translateX(4px);}}

/* ───────────────────────────────────────────────────────────────
   M06 · vs STANDARD SEO  [INVENTED — sticky-left heading / scrolling table]
   ─────────────────────────────────────────────────────────────── */
.cmp-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4.5vw,64px);margin-top:40px;align-items:start;}
.cmp-pin{position:sticky;top:90px;}
.cmp-pin h2{font-size:var(--h2);font-weight:600;letter-spacing:var(--tr-display);line-height:var(--lead-display);max-width:14ch;}
.cmp-pin h2 .sym{font-family:var(--serif);font-style:italic;font-weight:400;}
.cmp-pin .msub{margin-top:18px;}
.cmp-pin .foot{margin-top:24px;font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.04em;
  color:var(--muted);border-left:2px solid var(--lime);padding-left:14px;max-width:34ch;line-height:1.5;}
.cmp-table{border:1px solid var(--line-mid);background:var(--paper-card);}
.ctr{display:grid;grid-template-columns:.7fr 1fr 1fr;border-bottom:1px dashed var(--line-soft);}
.ctr:last-child{border-bottom:none;}
.ctr.head{border-bottom:1px solid var(--ink);}
.ctr .cd{padding:14px 16px;border-right:1px dashed var(--line-soft);font-size:.88rem;line-height:1.45;}
.ctr .cd:last-child{border-right:none;}
.ctr.head .cd{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ctr.head .cd.pres{color:var(--ink);font-weight:600;}
.ctr .cd.dim{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);align-self:center;}
.ctr .cd.std{color:var(--muted);}
.ctr .cd.pres{color:var(--ink);position:relative;background:var(--wash-min);}
.ctr:not(.head) .cd.pres::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);}

/* ───────────────────────────────────────────────────────────────
   M07 · METHOD  [INVENTED — 5 spec rows: coord · activity · impact]
   ─────────────────────────────────────────────────────────────── */
.mspec{margin-top:40px;border-top:2px solid var(--ink);}
.msrow{display:grid;grid-template-columns:auto 1.1fr 1fr;gap:clamp(18px,3vw,44px);align-items:start;
  padding:24px 0;border-bottom:1px dashed var(--line-dash);}
.msrow:last-child{border-bottom:none;}
.msrow .cn{font-family:var(--sans);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;letter-spacing:-.05em;
  line-height:.85;color:var(--ink);}
.msrow .cn .z{color:var(--faint);}
.msrow .act h3{font-size:1.12rem;font-weight:600;letter-spacing:-.01em;}
.msrow .act p{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin-top:9px;max-width:48ch;}
.msrow .imp{border-left:1px dashed var(--line-rule);padding-left:clamp(18px,3vw,32px);}
.msrow .imp .seg-lbl{color:var(--lime-ink);margin-bottom:8px;}
.msrow .imp p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;max-width:34ch;}

/* ───────────────────────────────────────────────────────────────
   M08 · IMPLEMENTATION EVIDENCE + ENTITY INDEX  [INVENTED]
   Calm: no ranking promises. Evidence rendered as instruments
   (count-up + meter, §13a). Compact mono entity index of routes.
   ─────────────────────────────────────────────────────────────── */
.evid-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);margin-top:40px;align-items:start;}
.evid-grid p{font-size:1rem;color:var(--ink-soft);line-height:1.62;margin-top:18px;max-width:56ch;}
.evid-grid .priv{margin-top:18px;font-family:var(--mono);font-size:var(--label-md);color:var(--muted);
  border-left:2px solid var(--lime);padding-left:16px;max-width:52ch;line-height:1.55;text-transform:none;letter-spacing:.01em;}
.evid-figs{border-top:2px solid var(--ink);}
.efig{padding:22px 0;border-bottom:1px dashed var(--line-dash);}
.efig:last-child{border-bottom:none;}
.efig .top{display:flex;align-items:baseline;gap:14px;}
.efig .n{font-family:var(--sans);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:.9;color:var(--ink);}
.efig .n .sym{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--lime-deep);}
.efig .l{font-size:.9rem;color:var(--ink-soft);line-height:1.4;max-width:26ch;}
.efig .meter{height:8px;border-radius:var(--radius-bar);background:var(--wash-hair);margin-top:16px;overflow:hidden;}
.efig .meter i{display:block;height:100%;background:var(--ink);border-radius:var(--radius-bar);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);position:relative;}
.efig .meter i::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--lime);}

/* entity index — compact mono route list (distinct from hub's pill chips) */
.entindex{margin-top:clamp(36px,4vw,56px);border-top:1px dashed var(--line-mid);padding-top:clamp(26px,3vw,40px);}
.entindex .chip-label{margin-bottom:16px;}
.eix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;
  border:1px dashed var(--line-soft);}
.eix{display:flex;align-items:center;gap:10px;padding:13px 16px;border-right:1px dashed var(--line-soft);
  border-bottom:1px dashed var(--line-soft);font-family:var(--mono);font-size:.78rem;color:var(--ink);
  transition:background .2s,padding-left .2s var(--ease);}
@media (hover:hover) and (pointer:fine){.eix:hover{background:var(--wash-soft);padding-left:22px;}}
.eix .ar{color:var(--lime-deep);}
.eix .cur{color:var(--faint);}

/* ───────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .cseo-hero-grid{grid-template-columns:1fr;gap:36px;}
  .defcard{grid-template-columns:1fr;gap:28px;}
  .gap-wrap{grid-template-columns:1fr;gap:36px;}
  .build-grid{grid-template-columns:1fr 1fr;}
  .build-card:nth-child(3n){border-right:1px dashed var(--line-soft);}
  .build-card:nth-child(2n){border-right:none;}
  .build-card:nth-last-child(-n+3){border-bottom:1px dashed var(--line-soft);}
  .build-card:nth-last-child(-n+2){border-bottom:none;}
  .cmp-wrap{grid-template-columns:1fr;gap:32px;}
  .cmp-pin{position:static;}
  .msrow{grid-template-columns:auto 1fr;gap:18px 22px;}
  .msrow .imp{grid-column:2;border-left:none;border-top:1px dashed var(--line-rule);padding-left:0;padding-top:14px;margin-top:4px;}
  .evid-grid{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:640px){
  .build-grid{grid-template-columns:1fr;}
  .build-card{border-right:none!important;}
  .layer4{grid-template-columns:1fr;}
  .l4{border-right:none;}
  .l4:nth-last-child(2){border-bottom:1px dashed var(--line-soft);}
  .ctr{grid-template-columns:1fr;}
  .ctr .cd{border-right:none;border-bottom:1px dashed var(--line-soft);}
  .ctr .cd:last-child{border-bottom:none;}
  .ctr.head{display:none;}
  .ctr .cd.dim{background:var(--bg-soft);}
  .gapfig-head .key{display:none;}
}

/* reduced-motion: never leave instrument bars at width:0 */
@media(prefers-reduced-motion:reduce){
  .grow .track i,.efig .meter i,.serprow .ln{transition:none;}
  .grow .track i,.efig .meter i{transform:scaleX(1);}
}

/* MOBILE-UX-001 · service detail mobile density/card pass */
@media(max-width:760px){
  [class$="-hero"] .mod-body{padding-block:34px 42px;}
  [class$="-hero"] h1{font-size:clamp(2.05rem,11vw,2.85rem);line-height:1.06;margin-top:14px;}
  /* Mobile progressive disclosure — #build 6-card grid (foundation.js adds [data-collapsible]).
     Cards keep their natural column layout; collapsed shows .bc-top + h3 + a (+/-) row, and the
     p body + .go link reveal on .open. The (+/-) sits on the h3 row via a flex header wrapper. */
  .build-grid[data-collapsible] .build-card{cursor:pointer;}
  .build-grid[data-collapsible] .build-card h3{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .build-grid[data-collapsible] .build-card h3::after{content:"+";flex:0 0 auto;
    font-family:var(--mono);font-size:1.1rem;line-height:1;color:var(--muted);
    transition:transform .24s var(--ease),color .2s var(--ease);}
  .build-grid[data-collapsible] .build-card.open h3::after{transform:rotate(45deg);color:var(--ink);}
  .build-grid[data-collapsible] .build-card p,
  .build-grid[data-collapsible] .build-card .go{display:none;}
  .build-grid[data-collapsible] .build-card.open p,
  .build-grid[data-collapsible] .build-card.open .go{
    transition:opacity .24s var(--ease-out),transform .24s var(--ease-out);
    @starting-style{opacity:0;transform:translateY(-4px);}
  }
  .build-grid[data-collapsible] .build-card.open p{display:block;}
  .build-grid[data-collapsible] .build-card.open .go{display:inline-flex;}
  [class$="-hero"] .lede{font-size:1rem;line-height:1.62;margin-top:16px;}
  .serpfig,.packmini,.wdfig,.aifig,.defcard,.wd-def,.gbp-def,.ai-comp,.principle{box-shadow:none;}
  .serprow,.prow{grid-template-columns:1fr;gap:8px;align-items:start;}
  .serprow .rank,.prow .rank{width:max-content;}
  .grow,.msrow,.wsrow,.gsrow,.asrow{grid-template-columns:1fr;gap:10px;padding-block:18px;}
  .msrow .imp,.wsrow .imp,.gsrow .imp,.asrow .imp{grid-column:auto;border-left:none;border-top:1px dashed var(--line-rule);padding-left:0;padding-top:12px;margin-top:2px;}
  .build-card,.wd-icard,.gbp-icard,.ai-bcard,.wd-dcard,.ai-dcard{padding:22px 18px;}
  .cmp-table,.gctable,.wctable,.actable{font-size:.95rem;}
}
@media(max-width:480px){
  .eix-grid,.gix-grid,.wix-grid,.aix-grid{grid-template-columns:1fr;}
}