/* ─── SCREENS — seam polish + layout ────────────────────────────────
   Controls the transition where an isolated .wf-embed screen region meets
   the paper page above and below it. Shared by folio / meridian / relay /
   halyard, loaded AFTER each page's generated <name>-mockup.css. Hand-owned
   (the *-mockup.css files are generated and must not be edited without
   updating this comment — see the note at the bottom of each of those files).

   Formerly two files: this one (screens-embed.css) plus screens-type.css.
   screens-type.css existed to force chrome/annotation/badge type and color
   onto the generated mockups via `!important`, because those values lived
   only in the generated files' own product-colored declarations. Per
   docs/css-refactor-plan.md Phase 3, every one of screens-type.css's
   declarations has been hand-applied directly into the relevant selector in
   each *-mockup.css file (verified with getComputedStyle against the live
   pages, before/after, zero rendered difference) — so screens-type.css's
   `!important` overrides are no longer needed and the file has been deleted.
   Two rules could not drop `!important` even after migration: Halyard's
   `.turn-txt.sys` / `.turn-txt.earcon` color, which must out-specificity
   revamp.css's own `!important` base `.turn-txt` rule (both are `!important`
   in revamp.css/generated files' own cascade already — see halyard-mockup.css).

   Seam anatomy, top → bottom:
     [ paper "Screens" heading section ]  ← its border-bottom = TOP divider
     [ .wf-embed  (tinted band) ]
         · padding-top  → breathing room before the first mockup
         · … original mockups (unchanged, isolated under @scope) …
         · padding-bottom → breathing room after the last mockup
     [ wrapper <section> ]                ← its border-bottom = BOTTOM divider
     [ paper "Build & Handoff" section ]
   Two clean 1px --line dividers already frame the region; this file only
   adds the interior breathing room so the band reads as intentional. */

.wf-embed {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 80px);
  /* Each project's *-mockup.css sets a TOP-LEVEL (unscoped) reset
     `.wf-embed { … background: var(--page-bg)/--ink/--page }` — the
     mockup's own page color used as its isolated "body" background
     (meridian grey #ECEEF2, relay dark #0D1117, folio cream #F0EBE1).
     This unscoped override loads after that file, so plain source order
     makes it win — the embed band renders as clean paper, framed by the
     two 1px --line dividers. Do NOT move this into @scope: the generated
     rule is unscoped, so a scoped override targeting the root no longer
     overrides it and each project's page color bleeds through. */
  background: transparent;
}

/* ─── FIRST BAND SITS FLUSH UNDER THE STICKY JUMP-NAV ────────────────
   On the standalone full case study pages the sticky .screens-toc is
   immediately followed by the .wf-embed that holds all six screens.
   .wf-embed's padding-top (breathing room that's wanted around the
   inline previews on the case-study pages) here just opens a paper gap
   between the toc's own bottom divider and the first dark .wf-section.
   Zero it only in that adjacent-sibling case so the first band starts
   right under the toc; the case-study inline previews (no preceding
   .screens-toc) keep their padding. */
.screens-toc + .wf-embed { padding-top: 0; }

/* ─── SCREENS TOC — sticky jump-nav ───────────────────────────────────
   Sits directly under the main <nav> (which is itself sticky at top:0).
   top offset is set at runtime by js/screens-scale.js, which measures
   the real nav height — see --nav-h custom property below. */
.screens-toc {
  position: sticky;
  top: var(--nav-h, 62px);
  z-index: 90;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px var(--pad);
  background: rgba(242,241,237,0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, #DDDBD4);
  scrollbar-width: thin;
}
.screens-toc a {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--body); /* was var(--mono) — screen names are editorial labels, only the index is mono */
  font-size: var(--fs-11);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--mid, #8A8781);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background-color .15s;
}
.screens-toc a .screens-toc-num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--line, #DDDBD4); }
.screens-toc a:hover { color: var(--ink, #161514); }
.screens-toc a.is-active {
  color: var(--ink, #161514);
  background: var(--paper-2, #ECEBE6);
  border-color: var(--line, #DDDBD4);
}
.screens-toc a.is-active .screens-toc-num { color: var(--rosa, #0000D5); }
.screens-toc-list { display: contents; }

/* ─── FRAME SCALE-TO-FIT ─────────────────────────────────────────────
   Wraps each .wf-frame / .wf mockup (see js/screens-scale.js). These
   are fixed-width desktop frames (1280px) by design — rather than
   reflowing every internal layout per breakpoint, the whole frame
   scales down to fit its column on narrower viewports, the same way
   an embedded screenshot would, except this stays live HTML/CSS.

   Folio's phone mockups (.phone-showcase / .phone-frame-wrap) are
   deliberately NOT included here — they already have their own working
   responsive strategy (.phone-showcase is a flex row with flex-wrap,
   phones reflow onto additional rows on narrow viewports at their
   native 320px width). Wrapping each .phone-frame-wrap individually in
   a width:100% scale-wrap used to fight that flex layout — every phone
   demanded the full row width and they stacked instead of sitting side
   by side. Fixed by dropping .phone-frame-wrap from the JS selector.

   margin: 0 auto centers the frame when it's at its natural 1:1 scale
   (desktop viewports wider than 1280px + padding) — without it the
   frame just sits flush left in its (wider) column. When scale < 1,
   the math already makes scale × naturalWidth ≈ containerWidth, so
   auto margins resolve to 0 and top-left-origin scaling fills the
   column edge to edge as intended — this rule only matters for the
   unscaled case.

   overflow is split on purpose: -x clips as a safety net against
   horizontal page overflow (the unscaled 1280px frame can momentarily
   exceed a narrow container before JS scales it), -y stays visible so
   each frame's box-shadow renders fully top AND bottom. The wrapper's
   JS-computed height matches the scaled frame exactly, with no room for
   shadow bleed, so the shadow relies entirely on overflow-y being truly
   visible.

   CRITICAL — must be `overflow-x: clip`, NOT `hidden`: per the CSS
   overflow spec, if one axis is `visible` and the other is `hidden`,
   the `visible` axis is coerced to compute as `auto` — which clips.
   That's exactly what defeated the earlier fixes: `overflow-x: hidden`
   silently turned `overflow-y: visible` into `auto`, cropping the
   shadow at both the top and the bottom of the frame. `clip` is exempt
   from that coercion, so paired with it `overflow-y: visible` actually
   stays visible and the shadow bleeds freely on both edges, while -x
   still clips horizontal overflow. No ancestor (.wf-embed,
   .cs-screen-preview, .wf-section) sets overflow, so nothing else
   clips it. */
.frame-scale-wrap {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}
.frame-scale-wrap > * {
  transform-origin: top left;
  margin: 0 auto;
}

/* ─── OVERRIDING RULES INSIDE THE GENERATED FILES' OWN @scope ─────────
   Every *-mockup.css file wraps almost its entire contents in
   `@scope (.wf-embed) { ... }`, to keep these mockups' generic class
   names (.wf, .anno, .card, etc.) from leaking into the rest of the
   page. That has a consequence for overrides: per the CSS cascade,
   scope PROXIMITY is resolved before source order, and an unscoped
   rule counts as having no proximity at all — the weakest possible
   value. So a plain, unscoped `.wf { margin-bottom: 56px }` here,
   despite loading after relay-mockup.css, was LOSING to relay-mockup.
   css's own scoped `.wf { margin-bottom: 20px }`, even though this file
   loads later. This was the actual reason the shadow-clearance and
   annotation-border fixes below silently did nothing the first two
   times — confirmed by tracing exact cascade proximity, not assumed.
   Fix: wrap these specific overrides in the same `@scope (.wf-embed)`
   so proximity ties, and THEN source order (this file loads last)
   correctly decides in our favor. */
@scope (.wf-embed) {

  /* Safety net for folio's phone mockups on very narrow viewports
     (<360px) where a fixed 320px frame plus page padding could
     overflow — graceful shrink instead of a horizontal scrollbar.
     Doesn't affect any viewport where the phone already fits.

     Also reset the screenshot-phone aspect ratio from case-study.css.
     Folio phones inside .wf-embed are live HTML screens, not fixed-ratio
     image masks; if they inherit that aspect-ratio box, taller screens
     reserve too little layout height and spill into the content below. */
  .phone-frame { max-width: 100%; aspect-ratio: auto; height: auto; }

  /* ─── FULL-WIDTH CONTAINER (Rod's call, supersedes the gutter below) ──
     Rod wants this container edge-to-edge, 100% of the viewport, no side
     inset. Previously this had `padding-inline: var(--pad)` specifically to
     stop frames touching the viewport edge below ~1280px — that safety net
     is gone now by request. The mockup frame itself is NOT stretched (still
     fixed-width, still centered via .frame-scale-wrap's margin:auto below) —
     this only removes the section's own side inset, so its paper background
     now truly reaches both edges instead of stopping ~56px short. */
  .wf-section { padding-inline: 0; }

  /* ─── STACKED-FRAME SHADOW CLEARANCE ─────────────────────────────
     Relay's screens gallery puts all 6 .wf frames inside ONE shared
     .wf-embed (interleaved with .anno panels), each separated by the
     generated margin-bottom: 20px. Relay's box-shadow is 0 8px 40px —
     an ~48px vertical bleed — so each frame's shadow was being clipped
     by the opaque element below it.

     Crucially, the clearance must NOT live on .wf/.wf-frame: those are
     the elements js/screens-scale.js transforms, and it pins the
     wrapping .frame-scale-wrap to exactly scaledHeight — so any margin
     on the frame itself is swallowed the moment the frame scales down
     (i.e. on every viewport narrower than the 1280px frame, which is
     most of them). That's why the two previous shadow "fixes" only held
     on wide desktop and reappeared clipped everywhere else. Zero the
     frame's own bottom margin here; the real gap goes on the scale
     wrapper below (scale-independent, since it's a layout element JS
     sizes but doesn't transform). */
  .wf-frame, .wf { margin-bottom: 0; }

  /* ─── FOLIO PHONE ROW CENTERING + ANNOTATIONS DROP BELOW ──────────
     .phone-showcase (folio-mockup.css) is a flex row with no explicit
     width, so on any viewport wider than its content it stretches to
     fill the column and — with the default justify-content: flex-start —
     the phones (and the .anno-panel notes column, a flex:1 sibling
     inside this SAME row, not a separate element) sit pinned left with
     dead space on the right. justify-content: center fixes the phones.
     But Rod wants annotations to always drop under the phones rather
     than sit beside them — since .anno-panel is a flex child of this
     same row (not separate markup), forcing `flex-basis: 100%` makes it
     claim a full row of its own in the wrapping flex container, pushing
     it onto its own line below instead of sharing space with the phones.
     No HTML change needed; this is a pure flex-wrap trick. Once
     .anno-panel stops consuming row width, `justify-content: center`
     centers the phones as originally intended instead of centering
     phones+panel together. */
  .phone-showcase { justify-content: center; margin-top: 40px; }
  .anno-panel { flex-basis: 100%; margin-top: 32px; }

  /* ─── MERIDIAN WF5 (MOBILE APPROVAL) ROW — SAME FIX, ONE SCREEN ────
     Found while auditing the site for left-aligned screens (2026-07-24,
     alongside the Halyard centering fix — see decisions.md). Every
     other Meridian screen uses `.wf-frame` (auto-centered by
     js/screens-scale.js's `.frame-scale-wrap`) followed by
     `.annotation-notes` as a plain block-level sibling below it. WF5 —
     "Payment Approval — CFO Mobile View" — is the one screen built
     differently: a phone-style mockup (hashed classes, not `.wf-frame`,
     so it never gets picked up by the scale-wrap JS at all) sitting in
     a flex row (`.c-7f18f5`) beside its own annotation panel
     (`.c-e01db0`, `flex:1`) — structurally identical to Folio's
     pre-fix `.phone-showcase`/`.anno-panel` pairing above. Same result:
     phone pinned left, annotations eating the rest of the row, on any
     viewport wider than the phone's own content. Same fix: center the
     row, force the annotation panel onto its own full-width row below
     via flex-basis. Hashed classes are unique to this one screen (not
     reused elsewhere in meridian.html/meridian-full.html — confirmed
     via grep), so this is safe as a targeted, non-generic override. */
  .c-7f18f5 { justify-content: center; margin-top: 40px; }
  .c-e01db0 { flex-basis: 100%; margin-top: 32px; }

  /* ─── ANNOTATION PANEL LEFT-BORDER ────────────────────────────────
     Each full case study page's design-rationale callout box has its
     own name (folio/relay: .anno, meridian: .annotation-notes) but
     the same shape: a 1px border all around, with border-left bumped
     to 3px as an accent stripe. Rod wants that stripe gone — just the
     plain 1px border like the rest of the box. Scoped to these two
     classes specifically, not the similarly-styled
     .alert-rail/.ab/.wb/small tag-chip classes elsewhere in the same
     files, which are actual product-UI elements (alerts inside the
     mockups) rather than meta-commentary panels.

     First the left accent stripe was neutralized, then Rod asked to
     drop the whole stroke — the full red/terracotta outline around
     these callouts should be gone, not just the left edge. Remove the
     border entirely on all three (relay/folio .anno, meridian
     .annotation-notes); the panel still reads as a distinct callout via
     its own tinted background + the accent h4 heading (both untouched).
     Border removal only — one rule, no per-page color needed. */
  .anno, .annotation-notes { border: none; }

}

/* ─── HALYARD DEVICE CENTERING + DIALOG PANEL DROPS BELOW ────────────
   Same trick as the Folio block above (.phone-showcase/.anno-panel),
   applied to Halyard's own device+transcript pairing. halyard-mockup.
   css's own `.split` is a CSS Grid (`grid-template-columns:340px 1fr`)
   that permanently pins `.device-wrap` and `.dialog-panel` side by
   side — correct for the detail page's "show both, fully annotated"
   purpose, but it has no way to also satisfy "screens always centered,
   caption/info underneath" once `.dialog-panel` needs to sit below
   rather than beside. Overridden to a flex row: `.device-wrap` (340px,
   no flex-grow) centers on its own line via `justify-content:center`;
   `.dialog-panel` is forced onto a full-width row of its own via
   `flex-basis:100%` (guarantees the wrap regardless of viewport width,
   exactly like `.anno-panel` above), then capped to a readable
   max-width and centered under the device with auto margins — a plain
   full-bleed transcript (Folio's anno-panel treatment) reads fine for
   short bullet annotations but not for flowing dialogue turns.

   halyard-mockup.css NOW wraps its whole mockup ruleset — including
   `.split`/`.dialog-panel` — in `@scope (.wf-embed)`, matching the other
   three projects (inconsistency resolved 2026-08-06; see decisions.md and
   docs/screens-encapsulation-contract.md). Consequence: these overrides
   must be scoped too. Per the cascade, scope PROXIMITY outranks source
   order and an unscoped rule has the weakest proximity — so an unscoped
   `.split{display:flex}` here now LOSES to the generated scoped
   `.split{display:grid}` despite loading later, and the device floats
   left again. Wrapping in the same `@scope (.wf-embed)` ties proximity so
   source order (this file loads last) decides in our favor — the identical
   fix already used for `.wf`/`.phone-showcase`/`.anno` above. */
@scope (.wf-embed) {
  .split { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
  .dialog-panel { flex-basis: 100%; max-width: 720px; margin: 32px auto 0; }
}

/* ─── HALYARD DIALOG PANEL — the two pieces the neutral-chrome pass
   didn't finish (found 2026-08-04, see decisions.md). `.dp-hd`/`.mod-hd`/
   `.spec-hd`/the sys+earcon lines already carry a neutral treatment
   (baked directly into halyard-mockup.css), but the panel itself has
   no background or border of its own — it just shows `.ss`'s paper
   background through — and the main dialogue lines (`.turn-spk`/
   `.turn-txt`) are still set in Halyard's own dark-theme mono font at
   `#D8E1E7`, a pale blue-white that was legible against the mockup's
   original dark backdrop but is a real contrast failure now that
   `.ss`/`.wf-section` render on `--paper` site-wide. Gives the panel
   actual paneling (matching `.anno-panel`'s role elsewhere) and moves
   the transcript onto the shared `--anno-type` voice, same as
   `.turn-note` already uses. */
.dialog-panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; }
.turn-spk { font-family: var(--anno-type); color: var(--mid); }
.turn-txt { font-family: var(--anno-type); color: var(--ink); }
.turn-txt.sys, .turn-txt.earcon { color: var(--mid); }

/* ─── STACKED-FRAME GAP (scale-independent) ──────────────────────────
   Companion to the zeroed frame margin inside the @scope block above.
   The real clearance between stacked mockups lives on .frame-scale-wrap
   — the layout element js/screens-scale.js sizes but never transforms —
   so it survives the scale-down that swallowed the old frame margin.
   Restricted to the standalone full case study pages (.wf-section) so it
   does NOT push apart the single-frame inline previews on the case-study
   pages, where each frame is paired tightly with its .cs-screen-caption.
   .frame-scale-wrap is a JS-only class absent from the generated files,
   so no scope-proximity fight here — plain source order applies. */
.wf-section .frame-scale-wrap { margin-top: 24px; margin-bottom: 64px; }

/* ─── the following migrated from revamp.css (Phase 4 completion, now that
   Phase 5's hashed-class retirement is done) — shared mockup infrastructure
   used by all four projects. Kept unlayered, loading after every
   *-mockup.css, for the same source-order reasons as the rest of this file. ─── */

/* ICONS — real drawn glyphs replaced the emoji; these size and colour them. */
.ui-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-ico svg { display: block; width: 1em; height: 1em; }
.status-ico { display: inline-flex; align-items: center; gap: 5px; }
.status-ico svg { width: 13px; height: 13px; }

/* Annotation numbers, chrome heading/body/eyebrow, badges, component-spec/
   responsive-notes cards — hairline ink discs not filled magenta, quiet
   ink headings, etc. */
@scope (.wf-embed) {
  .anno-num, .anum {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    font-variant-numeric: tabular-nums;
  }
  .anno h4, .annotation-notes h4 { color: var(--mid) !important; letter-spacing: var(--tr-caps); }
  .resp-card, .rc { border-top: 1px solid var(--line) !important; }
  table td, table th, .mono { font-variant-numeric: tabular-nums; }
}

/* ONE STAGING TREATMENT, ALL FOUR PROJECTS — every product screen is a
   shadowed panel with NO stroke and 4px radius. Phone/device bezels are
   stripped; only the inner screen content is visible. */
@scope (.wf-embed) {
  /* Desktop frames: universal shadow */
  .wf, .wf-frame {
    border: none !important;
    box-shadow: 0 16px 36px -14px rgba(22,21,20,.22), 0 5px 14px -6px rgba(22,21,20,.12) !important;
  }
  /* Phone/device bezels: stripped to invisible wrapper */
  .phone-frame, .device {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  .device::before, .device::after { display: none !important; }
  .phone-notch { display: none !important; }
  /* Inner screens: 4px radius, universal shadow */
  .phone-screen {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px -14px rgba(22,21,20,.22), 0 5px 14px -6px rgba(22,21,20,.12) !important;
  }
  .screen {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px -14px rgba(22,21,20,.22), 0 5px 14px -6px rgba(22,21,20,.12) !important;
  }
  /* Screen labels: standardized mono font, always below the frame */
  .phone-frame-wrap, .device-wrap {
    display: flex !important;
    flex-direction: column !important;
  }
  .device-cap, .phone-frame-wrap > :first-child:not(.phone-frame) {
    order: 1 !important;
    font-family: var(--site-mono) !important; /* not var(--mono) — Relay/Halyard/Meridian
      redefine --mono locally inside .wf-embed for their own product-UI theming; --site-mono
      is the escape hatch already used for "presentational eyebrows inside .wf-embed". */
    font-size: var(--fs-10) !important; /* R5 9->10px, 2026-08-30 header consolidation — this !important
      rule (not the unscoped R5 rule below in the shared header block) is what actually wins here,
      since !important beats scope proximity; left at 9px it would have silently kept the old value */
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--mid) !important;
    text-align: center !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
  }
}

/* SCREEN TAGS — the label band above each screen. Same treatment on all four
   projects: paper ground, hairline rule under it, Geist label, mono only for
   the screen ID. */
@scope (.wf-embed) {
  .ss, .screen-section, .wf-section {
    padding-left: clamp(20px, 3vw, 44px) !important;
    padding-right: clamp(20px, 3vw, 44px) !important;
  }
  .badge { letter-spacing: var(--tr-caps) !important; }
}

.cs-screen-preview .wf-embed { padding-top: 0; padding-bottom: 0; }
.cs-screen-preview .wf-embed > * { margin-left: auto; margin-right: auto; }

/* B6 · jump-nav list markers rendering as visible "1." "2." numerals —
   .screens-toc-list uses display:contents, which promotes each <li> to a
   flex item of the nav but leaves its ::marker in play. The nav already
   numbers itself via .screens-toc-num. */
.screens-toc ol, .screens-toc-list, .screens-toc li { list-style: none; }
.screens-toc li::marker { content: none; }

/* ─── SCREEN HEADER SYSTEM — one owner, all six screens pages ─────────
   Section strip · screen/module title · identifier · description ·
   artifact label. Replaces the per-project .sdiv/.sh/.si/.st/.st2/.sd/
   .badge blocks formerly duplicated in folio/meridian/relay/halyard-
   mockup.css (deleted 2026-08-30 — see docs/decisions.md). Left unscoped,
   on purpose: the per-project copies are gone, and HP CEM's screenshot
   detail page uses the same scaffold outside .wf-embed. */

/* A · GROUP / MODULE STRIP — the shared section strip.
   .sdiv and .section-divider are one component under two legacy names;
   both selected so no page markup has to change. Same text voice as
   .sec-head: CTA-like Geist caps in the site accent. */
.sdiv, .section-divider {
  padding: 0;
  background: transparent;
  border-top: none;
  border-bottom: 1px solid var(--line);
}
.sdiv h2, .section-divider h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 11px clamp(20px, 3vw, 44px) 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--body);
  font-size: var(--fs-11);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rosa); /* not var(--accent) — Relay's body.proj-relay .wf-embed and
    Meridian's .wf-embed each locally redefine --accent for their own product-UI
    theming; --rosa is the single, never-locally-shadowed global accent token. */
}
/* optional index: <h2>Balance Hero <i>02 / 06</i></h2> */
.sdiv h2 i, .section-divider h2 i {
  font-style: normal;
  font-family: var(--site-mono); /* not var(--mono) — Relay/Halyard/Meridian redefine --mono
    locally inside .wf-embed for their own product-UI theming; --site-mono is the escape
    hatch already used for "presentational eyebrows inside .wf-embed" (see site.css), which
    is exactly this. var(--mono) here would silently pick up each project's dev-console
    typeface instead of the site's uniform Geist Mono. */
  font-size: var(--fs-11);
  font-weight: var(--w-med);
  letter-spacing: var(--tr-caps-wide);
  text-transform: none;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sdiv p, .section-divider p {
  padding: 18px clamp(20px, 3vw, 44px) 20px;
  max-width: 62ch;
  font-family: var(--body);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--mid);
}

/* B · SCREEN HEADER */
.ss { padding: 48px clamp(20px, 3vw, 44px); border-bottom: 1px solid var(--line); background: var(--site-paper); }
.sh { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; row-gap: 10px; gap: 24px; margin-bottom: 20px; }

/* R3 — normalizes folio 10.5/.12em, relay 9/.10em, halyard 9/.12em.
   var(--site-mono), not var(--mono) — same local-shadowing reason as the R1 index above. */
.si {
  font-family: var(--site-mono);
  font-size: var(--fs-10);
  font-weight: var(--w-med);
  letter-spacing: var(--tr-caps-wide);
  text-transform: uppercase;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
  margin-bottom: 5px;
}
/* Screen/module title — .st and .st2 are the same role under two legacy names.
   Geist keeps product-artifact titles in the same editorial voice as landing
   screen captions; mono remains reserved for IDs, labels, and captions. */
.st, .st2 {
  font-family: var(--body);
  font-size: var(--fs-18);
  font-weight: var(--w-semi);
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 8px;
}
/* R4 */
.sd { font-family: var(--body); font-size: var(--fs-14); line-height: var(--lh-body); color: var(--mid); max-width: 56ch; }

/* Badges — one spec replacing four (3–4px padding, 500–700 weight).
   var(--site-mono), not var(--mono) — same local-shadowing reason as R1/R3 above. */
.badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.badge {
  font-family: var(--site-mono);
  font-size: var(--fs-10);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--mid);
  border: 1px solid var(--line);
}

/* R5 — artifact label under a device. 9px → 10px.
   NOTE: this rule is actually inert — the !important .device-cap rule above
   (in the "ONE STAGING TREATMENT" @scope block) always wins over this one.
   Kept in sync with it anyway (var(--site-mono), not var(--mono) — see that
   rule's comment) so a future reader can't "fix" this copy and get confused
   when nothing changes. See docs/design-system-inventory.md §3. */
.device-cap,
.phone-frame-wrap > :first-child:not(.phone-frame) {
  order: 1;
  font-family: var(--site-mono);
  font-size: var(--fs-10);
  font-weight: var(--w-reg);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  text-align: center;
  margin: 18px 0 0;
}

/* Meridian legacy aliases — same roles, older class names. These must be
   scoped because meridian-mockup.css defines them inside @scope(.wf-embed). */
@scope (.wf-embed) {
  .screen-section {
    padding: 48px clamp(20px, 3vw, 44px);
    border-bottom: 1px solid var(--line);
    background: var(--site-paper);
  }
  .screen-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px;
    gap: 24px;
    margin-bottom: 20px;
  }
  .screen-id {
    font-family: var(--site-mono);
    font-size: var(--fs-10);
    font-weight: var(--w-med);
    letter-spacing: var(--tr-caps-wide);
    text-transform: uppercase;
    color: var(--mid);
    font-variant-numeric: tabular-nums;
    margin-bottom: 5px;
  }
  .screen-title {
    font-family: var(--body);
    font-size: var(--fs-18);
    font-weight: var(--w-semi);
    line-height: var(--lh-ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .screen-desc {
    font-family: var(--body);
    font-size: var(--fs-14);
    line-height: var(--lh-body);
    color: var(--mid);
    max-width: 56ch;
  }
  .screen-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* module-end wrap-up: the same annotation-panel shape folio/relay hand-style
   per project (.anno-panel/.anno/.alist/.aitem), built here with HP Elite
   Earbuds' own accent — dropped once at the end of a module rather than
   annotating every screen with one. */
.module-signal { padding: 8px clamp(20px,4vw,80px) 44px; border-bottom: 1px solid var(--line); background: var(--site-paper); }
.module-signal .anno-panel { max-width: 640px; }
.module-signal .anno { font-family: var(--anno-type); background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; }
.module-signal .anno h4 { font-family: var(--anno-type); font-size: var(--fs-10); letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: var(--mid); margin-bottom: 12px; }
.module-signal .alist { display: flex; flex-direction: column; gap: 10px; }
.module-signal .aitem { display: flex; align-items: flex-start; gap: 8px; }
.module-signal .anum { min-width: 16px; height: 16px; border-radius: 50%; background: var(--client); color: #fff; font-family: var(--anno-type); font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.module-signal .atxt { font-size: var(--fs-12); color: var(--ink); line-height: var(--lh-body); }
.module-signal .atxt strong { color: var(--ink); font-weight: 700; }