/* shell/apprun/site/site.css — the Website Runner + section library skins.
   wr-* = the runner chrome (browser bar, scroll stage); ws-* = the website
   sections themselves. Everything reads the SAME theme tokens as the app
   chrome (--bg --panel --hair --ink --dim --accent --font --font-head …) so
   style packs, generated palettes and font pairings cascade for free.
   Perf-first: transitions ride transform/opacity/color only, gradients are
   static, nothing animates at rest, no blur filters.
   Responsive by CONTAINER query (the site lives in a scaled preview card,
   not the viewport) — the scroll stage is the `site` container. */

/* ================= the runner ================= */
.wr { position:relative; display:flex; flex-direction:column; height:100%; min-height:0; }

/* browser bar — also the window chrome (drags the window) */
.wr-bar { display:flex; align-items:center; gap:10px; height:40px; padding:0 8px 0 12px; flex:none;
  border-bottom:var(--bw, 1px) solid var(--hair); background:var(--panel-2); background-image:var(--surface-grad,none);
  cursor:grab; user-select:none; -webkit-user-select:none; }
.zwin.dragging .wr-bar { cursor:grabbing; }
.wr-ic { width:20px; height:20px; border-radius:6px; overflow:hidden; flex:none; display:grid; place-items:center;
  background:var(--accent-fill); color:var(--accent); font:700 10px var(--font); }
.wr-ic img { width:100%; height:100%; object-fit:cover; display:block; }
.wr-name { font:600 12px var(--font); color:var(--ink); white-space:nowrap; }
.wr-addr { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px;
  max-width:42%; padding:4px 14px; border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  font:500 11px var(--mono); color:var(--dim); white-space:nowrap; overflow:hidden; }
.wr-addr b { color:var(--accent); font-weight:600; }
.wr-addr i { font-style:normal; color:var(--faint); overflow:hidden; text-overflow:ellipsis; }
.wr-lock { display:flex; color:var(--faint); }
.wr-lock svg { width:10px; height:10px; }
.wr-ctls { display:flex; align-items:center; gap:2px; margin-left:auto; }

/* the site scroll stage — THE container sections respond to.
   container-type:size (not inline-size) so the mobile menu can size
   itself in cqh; the stage's height comes from flex, so size containment
   is safe here. */
.wr-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; position:relative;
  container-type:size; container-name:site; background:var(--bg); }
.ws-site { position:relative; min-height:100%; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink); font-family:var(--font); }
.ws-site .ws-body { flex:1 0 auto; }
.ws-page-fade { animation:wsPageIn 240ms ease-out both; }
@keyframes wsPageIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.ws-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:120px 20px; text-align:center; }
.ws-empty b { font:600 17px var(--font-head, var(--font)); color:var(--dim); }
.ws-empty i { font:500 12px var(--font); color:var(--faint); font-style:normal; }

/* ================= shared website atoms ================= */
.ws-in { width:min(1080px, 88cqw); margin:0 auto; position:relative; }
.ws-in.center { text-align:center; }
.ws-in.narrow { width:min(720px, 88cqw); }
.ws-in.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ws-sec { position:relative; padding:calc(84px * var(--density, 1)) 0; overflow:hidden; }
.ws-slot { position:relative; }

/* BRAND TYPE SIZE — --head-scale rides the same brand-vars seam as --font-head.
   Display faces (a collage, a botanical) rarely sit at the same optical size
   as a clean sans, so the brand can compensate globally. zoom multiplies the
   element's own computed size (619 hardcoded clamps stay untouched) and
   defaults to 1 = byte-identical no-op when no brand sets it. */
.ws-site :is(h1, h2, h3, h4, .ws-h1, .ws-h2, .ws-wordmark) { zoom: var(--head-scale, 1); }
.ws-site :is(h1, h2, h3, h4) :is(h1, h2, h3, h4) { zoom: 1; }   /* never compound on nesting */

.ws-h1 { margin:0; font:800 clamp(30px, 6.4cqw, 68px)/1.06 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.02em; }
.ws-h1.giant { font-size:clamp(38px, 9cqw, 104px); letter-spacing:-0.03em; }
.ws-h1.mono { font-family:var(--mono); font-weight:600; font-size:clamp(24px, 4.6cqw, 46px); letter-spacing:-0.01em; }
.ws-h2 { margin:0; font:700 clamp(24px, 3.8cqw, 40px)/1.12 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.015em; }
.ws-grad { background:var(--accent-grad, linear-gradient(120deg, var(--accent), var(--accent2, var(--accent))));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ws-sub { margin:0; font:400 clamp(14px, 1.7cqw, 17px)/1.65 var(--font); color:var(--dim); max-width:56ch; }
.ws-in.center .ws-sub { margin-inline:auto; }
.ws-kick { display:block; font:600 10px var(--mono); letter-spacing:3px; color:var(--accent);
  text-transform:uppercase; font-style:normal; margin-bottom:14px; }
.ws-kick.dim { color:var(--faint); }
.ws-kick.rule { display:flex; align-items:center; gap:12px; }
.ws-kick.rule::after { content:''; flex:1; height:1px; background:var(--hair); }
.ws-badge { display:inline-flex; align-items:center; gap:7px; margin-bottom:20px; padding:5px 14px;
  border-radius:99px; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background:var(--accent-fill); color:var(--accent); font:600 11px var(--font); letter-spacing:.4px; }
.ws-shead { margin-bottom:calc(44px * var(--density, 1)); max-width:640px; }
.ws-in:not(.split) > .ws-shead { margin-inline:auto; text-align:center; }
.ws-in.center .ws-shead { margin-inline:auto; text-align:center; }
.ws-shead .ws-sub { margin-top:12px; }
.ws-shead.left { text-align:left; margin-bottom:0; }

/* buttons + links */
.ws-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:calc(var(--radius, 12px) * .75);
  border:1px solid transparent; font:600 13.5px var(--font); cursor:pointer; text-decoration:none;
  transition:transform 140ms var(--ease-pop, ease-out), opacity 140ms linear; }
.ws-btn:hover { transform:translateY(-1px); }
.ws-btn:active { transform:translateY(0); }
.ws-btn i { display:flex; font-style:normal; }
.ws-btn svg { width:14px; height:14px; }
.ws-btn.primary { background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); }
.ws-btn.ghost { border-color:var(--hair); color:var(--ink); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ws-btn.ghost:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
/* the widened role vocabulary — token-drawn so every theme carries a FULL set;
   button sets override these looks per role, and sets lacking a role fall back
   (secondary→ghost, danger/success→primary) in core.js btn() */
.ws-btn.secondary { background:var(--panel-2, color-mix(in srgb, var(--ink) 8%, transparent)); border-color:var(--hair); color:var(--ink); }
.ws-btn.secondary:hover { background:var(--panel-3, color-mix(in srgb, var(--ink) 12%, transparent)); border-color:var(--dim); }
.ws-btn.danger { background:color-mix(in srgb, var(--bad, #e05a7a) 13%, transparent);
  border-color:color-mix(in srgb, var(--bad, #e05a7a) 45%, transparent); color:var(--bad, #e05a7a); }
.ws-btn.danger:hover { background:color-mix(in srgb, var(--bad, #e05a7a) 22%, transparent); }
.ws-btn.success { background:color-mix(in srgb, var(--ok, #5aae7f) 13%, transparent);
  border-color:color-mix(in srgb, var(--ok, #5aae7f) 45%, transparent); color:var(--ok, #5aae7f); }
.ws-btn.success:hover { background:color-mix(in srgb, var(--ok, #5aae7f) 22%, transparent); }
.ws-btn.inverse { background:var(--accent-text, #04121a); color:var(--accent); }
.ws-btn.sm { padding:8px 16px; font-size:12.5px; }
.ws-ctarow { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.ws-in.center .ws-ctarow, .ws-ctarow.center { justify-content:center; }
.ws-textlink { display:inline-flex; align-items:center; gap:7px; font:600 13.5px var(--font); color:var(--accent);
  cursor:pointer; text-decoration:none; }
.ws-textlink svg { width:14px; height:14px; transition:transform 140ms ease-out; }
.ws-textlink:hover svg { transform:translateX(3px); }
.ws-quietlink { font:500 13px var(--font); color:var(--dim); cursor:pointer; }
.ws-quietlink:hover { color:var(--ink); }

/* inputs + fields — the theme's own FIELD FAMILY, token-drawn so every pack
   carries a full set the way .ws-btn roles do. Input sets (web_components/
   inputs.js) override these per role with a `wsinp-<id>` class layered on top;
   a set that lacks a role falls back (textarea/select→text, toggle→check) in
   applySiteInputStyles. Borders read --bw so pack border-width still cascades.
   NOTHING renders these yet — components hand-roll their fields — so this block
   restyles nothing that exists; it is the surface new components opt into with
   class="ws-input" and the surface a chosen set dresses onto. */
.ws-input { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:calc(var(--radius, 12px) * .7);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad, none);
  color:var(--ink); font:400 14px var(--font); outline:none; appearance:none; -webkit-appearance:none;
  transition:border-color 140ms linear, box-shadow 140ms linear, background 140ms linear; }
.ws-input::placeholder { color:var(--faint); }
.ws-input:hover:not(:disabled) { border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.ws-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ws-input:disabled { opacity:.55; cursor:not-allowed; background:color-mix(in srgb, var(--ink) 5%, var(--panel)); }
.ws-input.err { border-color:var(--bad, #e05a7a); box-shadow:0 0 0 3px color-mix(in srgb, var(--bad, #e05a7a) 16%, transparent); }
.ws-input.textarea { min-height:96px; line-height:1.6; resize:vertical; }
.ws-input.select { padding-right:34px; cursor:pointer; background-repeat:no-repeat; background-size:5px 5px, 5px 5px;
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-image:linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); }
/* check + radio ride the SAME two-class weight as a set style (.ws-input.wsinp-x)
   so an injected set always wins on source order — never .ws-input.check.radio */
.ws-input.check { width:16px; height:16px; flex:0 0 auto; padding:0; cursor:pointer;
  border-radius:calc(var(--radius, 12px) * .3); display:inline-grid; place-content:center; }
.ws-input.radio { border-radius:50%; }
.ws-input.check:checked { background:var(--accent); background-image:none; border-color:var(--accent); }
.ws-input.check:checked::after { content:''; width:4px; height:8px; border:2px solid var(--accent-text, #04121a);
  border-top:none; border-left:none; transform:rotate(45deg) translateY(-1px); }
.ws-input.radio:checked { background:var(--panel); background-image:none; border-color:var(--accent); }
.ws-input.radio:checked::after { content:''; width:7px; height:7px; border:none; border-radius:50%;
  background:var(--accent); transform:none; }
/* toggle — no SB_04 source ships a switch, so this is the theme's own; sets
   inherit it through the toggle→check fallback unless they define one */
.ws-input.toggle { width:38px; height:22px; flex:0 0 auto; padding:0; cursor:pointer; position:relative;
  border-radius:999px; background:color-mix(in srgb, var(--ink) 10%, transparent); background-image:none; }
.ws-input.toggle::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--dim); transition:transform 160ms var(--ease-pop, ease-out), background 160ms linear; }
.ws-input.toggle:checked { background:var(--accent); border-color:var(--accent); }
.ws-input.toggle:checked::after { transform:translateX(16px); background:var(--accent-text, #04121a); }
.ws-inrow { display:flex; align-items:center; gap:9px; }
.ws-inlabel { display:flex; flex-direction:column; gap:6px; }
.ws-inlabel > span { font:600 10.5px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }

/* ================= headers ================= */
.ws-head { display:flex; align-items:center; gap:26px; padding:18px 0;
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom:var(--bw, 1px) solid var(--hair); padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.ws-logo { display:inline-flex; align-items:center; gap:9px; cursor:pointer; }
.ws-logo b { font:700 15.5px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; white-space:nowrap; }
.ws-logodot { width:9px; height:9px; border-radius:3px; background:var(--accent-grad, var(--accent));
  background-color:var(--accent); transform:rotate(45deg); }
.ws-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.ws-navlink { padding:7px 12px; border-radius:8px; font:500 13px var(--font); color:var(--dim); cursor:pointer;
  transition:color 120ms linear, background 120ms linear; white-space:nowrap; }
.ws-navlink:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ws-navlink.on { color:var(--accent); background:var(--accent-fill); }
.h-minimal .ws-nav { margin-left:auto; margin-right:8px; }
/* floating pill */
.ws-head.h-pill { background:none; border-bottom:none; padding:14px 18px; }
.ws-pillbar { display:flex; align-items:center; gap:20px; width:min(980px, 94cqw); margin:0 auto;
  padding:9px 10px 9px 18px; border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 88%, transparent); }
.ws-pillbar .ws-nav { margin-left:auto; }
/* split */
.h-split { gap:0; justify-content:space-between; }
.ws-hgroup { display:flex; align-items:center; gap:26px; }
.ws-hgroup .ws-nav { margin-left:0; }
.ws-hgroup.r { gap:16px; }
/* editorial stack */
.ws-head.h-center { flex-direction:column; gap:12px; padding-top:30px; padding-bottom:0; position:static; }
.ws-hkick { font:600 9px var(--mono); letter-spacing:3px; color:var(--faint); text-transform:uppercase; font-style:normal; }
.ws-wordmark { font:800 clamp(26px, 4cqw, 40px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; }
.h-center .ws-nav { margin:0; width:100%; justify-content:center; border-top:var(--bw, 1px) solid var(--hair); padding:10px 0 12px; }
/* underline */
.h-underline .ws-nav.ul { gap:20px; }
.ws-navlink.ul { padding:7px 2px 15px; border-radius:0; position:relative; margin-bottom:-19px; }
.ws-navlink.ul:hover { background:none; }
.ws-navlink.ul.on { background:none; }
.ws-navlink.ul.on::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); }

/* ================= footers ================= */
.ws-foot { border-top:var(--bw, 1px) solid var(--hair); padding:56px max(24px, calc((100cqw - 1080px) / 2)) 34px;
  background:color-mix(in srgb, var(--panel) 45%, var(--bg)); flex:none; }
.ws-fcols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.ws-fbrand p { margin:12px 0 0; font:400 13px/1.6 var(--font); color:var(--dim); max-width:32ch; }
.ws-fcol { display:flex; flex-direction:column; gap:9px; }
.ws-fcol h5 { margin:0 0 4px; font:600 10px var(--mono); letter-spacing:2px; color:var(--faint); text-transform:uppercase; }
.ws-flink { font:500 12.5px var(--font); color:var(--dim); cursor:pointer; width:fit-content; }
.ws-flink:hover { color:var(--accent); }
.ws-fbar { display:flex; align-items:center; gap:18px; padding-top:22px; border-top:var(--bw, 1px) solid var(--hair);
  font:500 11.5px var(--font); color:var(--faint); }
.ws-fbar .ws-fnav { margin-left:auto; }
.ws-fsep { flex:1; }
.ws-fnav { display:flex; gap:18px; flex-wrap:wrap; }
.ws-foot.f-min { display:flex; align-items:center; gap:26px; padding-top:26px; padding-bottom:26px; }
.f-min .ws-fnav { margin-left:auto; }
/* minimal's optional brand cluster — wordmark + tagline on a shared baseline */
.f-minbrand { display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.f-mintag { font:400 12.5px var(--font); color:var(--dim); letter-spacing:.01em; }
.ws-fcopy { font:500 11.5px var(--mono); color:var(--faint); }
.ws-foot.f-center { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.ws-fnote { margin:0; font:400 12.5px var(--font); color:var(--dim); }
.f-beacon .ws-fhero { display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center;
  padding:36px 0 64px; }
.f-beacon .ws-fhero h2 { margin:0; font:800 clamp(30px, 5.4cqw, 58px)/1.08 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.02em; }
/* social icon row — shared footer/header atom (core.js socialRow) */
.ws-socials { display:inline-flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ws-social { width:34px; height:34px; display:inline-grid; place-items:center; border-radius:9px;
  color:var(--dim); border:var(--bw, 1px) solid var(--hair); cursor:pointer; transition:color .18s ease, border-color .18s ease; }
.ws-social:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 45%, transparent); }
.ws-social svg { width:17px; height:17px; display:block; }
/* mega footer options — brand socials + a newsletter (column | band), reusing
   the .ws-nlrow / .ws-nlmsg atoms from the newsletter CTA card */
.f-mega .f-megasoc { margin-top:18px; }
.ws-fcols.has-nl { grid-template-columns:1.7fr 1fr 1fr 1fr 1.6fr; }
/* mega · compact (SB_04 section-footer-simple) — a brandless 4-column link grid
   with the wordmark + social icons moved into the legal bar. These grid overrides
   outrank the base responsive .ws-fcols, so .compact is re-declared at both
   @container breakpoints below (the has-nl grid-collapse lesson from sprint #9). */
.ws-fcols.compact { grid-template-columns:repeat(4, 1fr); }
.ws-fcols.compact.has-nl { grid-template-columns:repeat(4, 1fr) 1.6fr; }
.f-mega.f-compact .ws-fbar { flex-wrap:wrap; gap:12px 18px; }
.ws-fnlform { display:flex; flex-direction:column; gap:8px; }
.ws-fnl.col { display:flex; flex-direction:column; gap:10px; }
.ws-fnl.col .ws-fnlcopy h5 { margin:0 0 2px; font:600 10px var(--mono); letter-spacing:2px;
  color:var(--faint); text-transform:uppercase; }
.ws-fnl.col .ws-fnlcopy p { margin:0; font:400 12.5px/1.55 var(--font); color:var(--dim); }
.ws-fnl.col .ws-nlrow { flex-direction:column; }
.ws-fnl.col .ws-nlrow .ws-btn { justify-content:center; }
.ws-fnl.band { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:20px 40px; margin-bottom:40px; padding:26px 0; border-block:var(--bw, 1px) solid var(--hair); }
.ws-fnl.band .ws-fnlcopy { max-width:48ch; }
.ws-fnl.band .ws-fnlcopy h5 { margin:0 0 6px; font:700 16px var(--font-head, var(--font));
  letter-spacing:-0.01em; color:var(--ink); }
.ws-fnl.band .ws-fnlcopy p { margin:0; font:400 13px/1.55 var(--font); color:var(--dim); }
.ws-fnl.band .ws-fnlform { flex:0 1 380px; min-width:280px; }

/* ================= heros ================= */
.ws-hero { padding:calc(104px * var(--density, 1)) 0 calc(96px * var(--density, 1)); }
.ws-hero .ws-in.split { grid-template-columns:1.05fr 1fr; }
.ws-hcopy .ws-kick { margin-bottom:16px; }
.ws-hcopy .ws-sub { margin-top:18px; }
.ws-in.center .ws-sub { margin-top:18px; }
/* aurora — still gradient sky, no motion at rest */
.v-aurora .ws-aurora { position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 42% at 24% 4%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
    radial-gradient(46% 38% at 78% 0%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent), transparent 70%); }
.v-aurora .ws-in { z-index:1; }
/* launch — product shot leans in */
.ws-hshot { position:relative; }
.ws-hshot .ws-browser { transform:rotate(1.2deg); }
.ws-ticks { display:flex; gap:20px; margin-top:22px; }
.ws-ticks span { display:inline-flex; align-items:center; gap:7px; font:500 12px var(--font); color:var(--faint); }
.ws-ticks svg { width:13px; height:13px; color:var(--accent); }
/* split panel — ported from SB_04 split-hero (copy + full-height visual + stats); entrance motion
   is intentionally dropped: the site's reveal system (anims.js) owns section entrances. */
.v-split .ws-in.split { align-items:stretch; }
.v-split .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.ws-herostats.start { justify-content:flex-start; margin-top:44px; }
.ws-herostats.start .ws-hstat:first-child { padding-left:0; }
.ws-hpanel { position:relative; min-height:360px; border-radius:var(--radius, 14px); border:var(--bw, 1px) solid var(--hair);
  background-color:var(--panel); background-size:cover; background-position:center; overflow:hidden;
  box-shadow:var(--inset-hi,0 0 #0000), var(--elev,0 0 #0000); }
.ws-hpanel.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%);
  background-size:60px 60px; background-position:0 0, 0 30px, 30px -30px, 30px 0; }
.ws-hpanel.ph::after { content:''; position:absolute; inset:0;
  background:radial-gradient(64% 58% at 50% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%); }
/* ticker — ported from SB_04 ticker-hero (marquee word-bands sandwich the static message);
   CSS-only infinite scroll — track holds items twice so translateX(-50%) loops seamlessly.
   Entrance motion belongs to the site's reveal system, so only the marquee runs at rest.
   Extra specificity (.ws-hero.v-ticker) so narrow-container padding on .ws-hero can't win. */
.ws-hero.v-ticker { padding:0; overflow:hidden; }
.ws-tkband { width:100%; overflow:hidden; white-space:nowrap;
  border-block:var(--bw, 1px) solid var(--hair); padding:14px 0; }
.ws-tkband + .ws-tkband { border-top:none; }
.ws-tktrack { display:inline-flex; align-items:center;
  animation:ws-tk-left 30s linear infinite; }
.ws-tkband.rev .ws-tktrack { animation-name:ws-tk-right; }
.ws-tkband.slow .ws-tktrack { animation-duration:45s; }
.ws-tkband.fast .ws-tktrack { animation-duration:21s; }
.ws-tkitem { display:inline-flex; align-items:center; gap:22px; padding:0 22px; flex-shrink:0;
  user-select:none; text-transform:uppercase; letter-spacing:-0.02em; line-height:1;
  font:900 clamp(48px, 9cqw, 116px) var(--font-head, var(--font));
  color:color-mix(in srgb, var(--ink) 8%, transparent); }
.ws-tkitem.on { color:color-mix(in srgb, var(--accent) 22%, transparent); }
.ws-tkband.lg { padding:20px 0; }
.ws-tkband.sm .ws-tkitem { font-size:clamp(26px, 5cqw, 68px);
  font-weight:700; letter-spacing:0.02em; }
.ws-tkdot { width:9px; height:9px; border-radius:99px; flex-shrink:0;
  background:color-mix(in srgb, var(--ink) 10%, transparent); }
.ws-tkitem.on .ws-tkdot { background:var(--accent); opacity:.55; }
.ws-tkbody { padding:clamp(52px, 9cqw, 104px) 24px; text-align:center; }
@keyframes ws-tk-left  { from { transform:translateX(0); }    to { transform:translateX(-50%); } }
@keyframes ws-tk-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ws-tktrack { animation-play-state:paused; }
}
/* ===== SB_04 ported hero variants (batch port) — each .v-<id> block goes directly ABOVE the sentinel below ===== */
/* about — ported from SB_04 drafts/about-hero (editorial about-page opener:
   mission statement, studio facts, a wide image, then the origin story).
   A centered single column with a full-width image; reuses ws-herostats +
   ws-hpanel atoms. Entrance motion belongs to the reveal system. */
.v-about .ws-abintro { max-width:832px; margin-inline:auto; }
.v-about .ws-abintro .ws-h1 { margin-top:18px; letter-spacing:-0.02em; }
.v-about .ws-abintro .ws-sub { margin-top:22px; }
.v-about .ws-abstats { max-width:832px; margin:52px auto 0; justify-content:flex-start; }
.v-about .ws-abstats .ws-hstat b { font-size:clamp(30px, 4.4cqw, 44px); }
.v-about .ws-abfig { margin:56px 0 0; }
.v-about .ws-abfig .ws-hpanel { min-height:clamp(260px, 42cqw, 460px); }
.v-about .ws-abcap { display:block; margin-top:14px; font:400 12px var(--font);
  letter-spacing:0.02em; color:var(--faint); }
.v-about .ws-abstory { max-width:720px; margin:56px auto 0; }
.v-about .ws-abstory .ws-kick { margin-bottom:20px; }
.v-about .ws-abstory .ws-sub { max-width:none; }
.v-about .ws-abstory .ws-sub + .ws-sub { margin-top:16px; }
/* abstract — ported from SB_04 drafts/abstract-hero (imageless generative field: drifting color
   orbs + faint grid + noise behind a giant centered name). Entrance fades were dropped (anims.js
   owns section entrances); the ambient orb drift runs at rest like the ticker marquee and stops for
   prefers-reduced-motion. The origin's heavy blur() filters were dropped — the orbs are soft radial
   gradients already — so nothing here rides blur/backdrop-filter. Colors map to theme tokens so the
   five origin palette presets become whatever the site's accent/accent2/ink are. */
.v-abstract { position:relative; overflow:hidden; isolation:isolate; text-align:center;
  min-height:clamp(500px, 84cqh, 820px); display:grid; place-items:center; padding:96px 24px; }
.v-abstract .ws-in { position:relative; z-index:1; }
.v-abstract .ws-sub { margin-top:20px; margin-inline:auto; }
.v-abstract .ws-ctarow { margin-top:26px; }
.ws-abfield { position:absolute; inset:0; z-index:0; pointer-events:none; }
.ws-aborb { position:absolute; border-radius:50%; mix-blend-mode:screen; }
.ws-aborb.o1 { width:60cqw; height:60cqw; min-width:360px; min-height:360px; top:-16%; left:-10%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 42%, transparent 70%);
  animation:abhDrift1 20s ease-in-out infinite alternate; }
.ws-aborb.o2 { width:52cqw; height:52cqw; min-width:320px; min-height:320px; bottom:-20%; right:-14%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 28%, transparent) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 8%, transparent) 42%, transparent 70%);
  animation:abhDrift2 25s ease-in-out infinite alternate; }
.ws-aborb.o3 { width:42cqw; height:42cqw; min-width:260px; min-height:260px; top:28%; left:38%;
  background:radial-gradient(circle,
    color-mix(in srgb, color-mix(in srgb, var(--accent) 50%, var(--accent2, var(--accent))) 22%, transparent) 0%,
    transparent 68%);
  animation:abhDrift3 15s ease-in-out infinite alternate; }
.ws-abgrid { position:absolute; inset:0; opacity:.05;
  background-image:linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 80%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 80%); }
.ws-abnoise { position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ws-abscan { position:absolute; inset:0; opacity:.04; background:repeating-linear-gradient(0deg,
  transparent 0 2px, color-mix(in srgb, var(--ink) 55%, transparent) 2px, color-mix(in srgb, var(--ink) 55%, transparent) 4px); }
.ws-abname { max-width:none; text-transform:uppercase; letter-spacing:-0.04em;
  font:800 clamp(46px, 13cqw, 150px)/0.86 var(--font-head, var(--font));
  background:linear-gradient(135deg, var(--ink) 0%, var(--accent) 52%, var(--accent2, var(--accent)) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.ws-absignal { display:inline-flex; align-items:center; gap:.75em; margin-bottom:8px; color:var(--accent);
  font:400 clamp(9px, 1.1cqw, 11px)/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; }
.ws-absignal::before, .ws-absignal::after { content:''; width:1.6em; height:1px;
  background:color-mix(in srgb, var(--accent) 50%, transparent); }
.ws-abdata { display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin-top:30px; }
.ws-abstat { display:flex; flex-direction:column; align-items:center; gap:3px; }
.ws-abstat b { font:500 15px var(--mono); letter-spacing:.04em; color:var(--ink); }
.ws-abstat i { font:400 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-style:normal; }
.ws-abscroll { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.ws-abscroll span { font:400 9px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.ws-abscroll i { width:1px; height:30px; transform-origin:top;
  background:linear-gradient(180deg, var(--faint), transparent); animation:abhScroll 2s ease-in-out infinite; }
@keyframes abhDrift1 { from { transform:translate(0,0) scale(1); } to { transform:translate(9%,7%) scale(1.08); } }
@keyframes abhDrift2 { from { transform:translate(0,0) scale(1); } to { transform:translate(-7%,-5%) scale(1.05); } }
@keyframes abhDrift3 { from { transform:translate(0,0) scale(1); } to { transform:translate(-5%,8%) scale(0.92); } }
@keyframes abhScroll { 0%, 100% { opacity:.2; transform:scaleY(.5); } 50% { opacity:.7; transform:scaleY(1); } }
@container site (max-width: 560px) {
  .v-abstract { min-height:clamp(440px, 78cqh, 620px); padding:72px 18px; }
  .ws-abname { font-size:clamp(40px, 17cqw, 96px); }
  .ws-abdata { gap:18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-aborb, .ws-abscroll i { animation:none; }
}
/* accommodation — ported from SB_04 drafts/accommodation-hero (property showcase + live booking widget).
   Reuses ws-hpanel for the image (themed placeholder + optional img) and ws-in.split for the two columns
   — the 860px container rule already stacks it on narrow. Star gold and the cancellation green stay literal
   semantic hues; everything else rides theme tokens. Entrance motion is the reveal system's job — only
   hover/focus and the reserve-total interaction move here. */
.v-accommodation .ws-in.split { grid-template-columns:1fr 1fr; align-items:stretch; }
.ws-bkcard { display:flex; flex-direction:column; gap:20px; justify-content:center; }
.ws-bkname { font-size:clamp(26px, 3.4cqw, 40px); line-height:1.12; }
.ws-bkloc { display:flex; align-items:center; gap:7px; margin:0; font:400 13.5px var(--font); color:var(--dim); }
.ws-bkpin { display:inline-flex; color:var(--accent); }
.ws-bkpin svg { width:15px; height:15px; }
.ws-bkrating { display:flex; align-items:center; gap:9px; }
.ws-bkstars { display:inline-flex; gap:2px; }
.ws-bkstar { position:relative; display:inline-block; font-size:16px; line-height:1;
  color:color-mix(in srgb, var(--ink) 22%, transparent); }
.ws-bkstar i { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; font-style:normal; color:#f5b325; }
.ws-bkrating b { font:700 14px var(--font); color:var(--ink); }
.ws-bkrcount { font:400 12.5px var(--font); color:var(--faint); }
.ws-bkform { display:flex; flex-direction:column; gap:13px; }
.ws-bkfield { display:flex; flex-direction:column; gap:6px; }
.ws-bkfield > span { font:600 10.5px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.ws-bkdates { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.ws-bkinput { width:100%; padding:11px 13px; border-radius:calc(var(--radius, 12px) * .7);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad, none);
  color:var(--ink); font:400 14px var(--font); outline:none; appearance:none; -webkit-appearance:none;
  transition:border-color 140ms linear; cursor:pointer; }
.ws-bkinput:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.ws-bkinput:focus { border-color:var(--accent); }
select.ws-bkinput { padding-right:34px; background-repeat:no-repeat; background-size:5px 5px, 5px 5px;
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-image:linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); }
.ws-bkinput::-webkit-calendar-picker-indicator { filter:invert(.5); cursor:pointer; }
.ws-bkprice { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:4px; flex-wrap:wrap; }
.ws-bkamount { display:flex; align-items:baseline; gap:5px; }
.ws-bkamount b { font:700 30px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; line-height:1; }
.ws-bkamount i { font:400 13px var(--font); font-style:normal; color:var(--dim); }
.ws-bkreserve { flex:1; min-width:150px; justify-content:center; border:none; }
.ws-bkcancel { margin:0; font:400 12.5px/1.5 var(--font); color:#4ade80; }
.ws-bkcancel.warn { color:var(--accent); }
@container site (max-width: 860px) {
  .v-accommodation .ws-hpanel { min-height:240px; }
}
/* agency — ported from SB_04 drafts/agency-hero: centered manifesto headline with an outline
   word, a column-divided service row, a wide 16:9 showreel and a client-logo strip. Origin
   --agh-* vars -> theme tokens; the outline word rides --ink so it themes both ways; baked
   entrance keyframes dropped (anims.js owns entrances) — only the logo hover is kept as
   interaction motion; responsive by container query, not viewport. */
.v-agency .ws-in.center { display:flex; flex-direction:column; align-items:center; gap:clamp(30px, 4.4cqw, 52px); }
.v-agency .ws-h1 { max-width:18ch; line-height:1.04; letter-spacing:-0.03em; }
.v-agency .ws-aghout { -webkit-text-stroke:2px var(--ink); color:transparent; }
.v-agency .ws-aghserv { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.v-agency .ws-aghserv span { padding:0 clamp(18px, 2.6cqw, 40px);
  font:700 clamp(14px, 1.7cqw, 19px) var(--font-head, var(--font)); letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ink); }
.v-agency .ws-aghserv span + span { border-left:var(--bw, 1px) solid var(--hair); }
.v-agency .ws-hpanel { align-self:stretch; width:100%; aspect-ratio:16 / 9; min-height:0; }
.v-agency .ws-aghlogos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px 36px; }
.v-agency .ws-aghlogo { font:500 12px var(--font); letter-spacing:1.4px; text-transform:uppercase;
  color:var(--dim); opacity:.55; transition:opacity 160ms linear, color 160ms linear; cursor:default; }
.v-agency .ws-aghlogo:hover { opacity:1; color:var(--ink); }
@container site (max-width: 560px) {
  .v-agency .ws-aghserv span { padding:0 clamp(12px, 4cqw, 20px); font-size:13px; }
  .v-agency .ws-aghlogos { gap:14px 24px; }
}
/* album-art — ported from SB_04 drafts/album-art-hero (the site IS the album cover).
   Split layout: release copy + a SQUARE cover with a real play toggle (native <audio> when an
   `audio` prop is set, else a preview/now-playing state) and a selectable tracklist. The cover's
   colour field floods from --accent so it themes with the brand (the origin's 5 baked palettes
   become the theme system's job). Entrance keyframes dropped — the reveal system owns those; only
   hover + play/select interactions move here, and the equaliser animates ONLY while playing and
   honours reduced-motion. Narrow-stack rides the global 860px rule (.ws-hero .ws-in.split). */
.v-album-art .ws-in.split { align-items:center; }
.v-album-art .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-album-art .aa-tag { display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; }
.v-album-art .aa-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.v-album-art .aa-album { margin:14px 0 0; font:300 clamp(15px, 2.4cqw, 22px)/1.3 var(--font-head, var(--font));
  letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.v-album-art .aa-meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:20px; }
.v-album-art .aa-mi { font:400 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.v-album-art .aa-mi b { color:var(--ink); font-weight:500; }
.v-album-art .aa-div { width:1px; height:12px; background:var(--hair); flex:none; }
.v-album-art .aa-side { display:flex; flex-direction:column; gap:16px; width:100%; max-width:460px; margin-inline:auto; }
.v-album-art .aa-cover { position:relative; width:100%; max-width:none; min-height:0; aspect-ratio:1 / 1; display:grid; place-items:center; }
.v-album-art .aa-cover.ph { background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  background-image:
    radial-gradient(120% 90% at 30% 18%, color-mix(in srgb, var(--accent) 78%, transparent) 0%,
      color-mix(in srgb, var(--accent) 30%, transparent) 42%, transparent 74%),
    radial-gradient(90% 80% at 82% 92%, color-mix(in srgb, var(--accent2, var(--accent)) 55%, transparent) 0%, transparent 66%); }
.v-album-art .aa-cover.ph::after { content:none; }
.v-album-art .aa-play { position:relative; z-index:2; width:66px; height:66px; border-radius:50%; border:none;
  display:grid; place-items:center; cursor:pointer; color:var(--accent-text, #04121a);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  box-shadow:0 8px 30px color-mix(in srgb, #000 34%, transparent);
  transition:transform 140ms var(--ease-pop, ease-out); }
.v-album-art .aa-play:hover { transform:scale(1.06); }
.v-album-art .aa-play:active { transform:scale(0.97); }
.v-album-art .aa-play svg { width:26px; height:26px; }
.v-album-art .aa-play .aa-pause-ico { display:none; }
.v-album-art.playing .aa-play .aa-play-ico { display:none; }
.v-album-art.playing .aa-play .aa-pause-ico { display:block; }
.v-album-art .aa-eq { position:absolute; left:14px; bottom:14px; z-index:2; display:flex; align-items:flex-end;
  gap:3px; height:20px; opacity:0; transition:opacity 160ms linear; }
.v-album-art.playing .aa-eq { opacity:1; }
.v-album-art .aa-eq i { width:3px; height:40%; border-radius:2px; background:var(--accent); }
.v-album-art .aa-eq i:nth-child(2) { animation-delay:-.6s; }
.v-album-art .aa-eq i:nth-child(3) { animation-delay:-.3s; }
.v-album-art .aa-eq i:nth-child(4) { animation-delay:-.15s; }
.v-album-art.playing .aa-eq i { animation:aaEq 900ms ease-in-out infinite; }
.v-album-art .aa-audio { display:none; }
.v-album-art .aa-tracks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.v-album-art .aa-track { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:calc(var(--radius, 12px) * .6);
  cursor:pointer; color:var(--dim); transition:color 140ms linear, transform 140ms var(--ease-pop, ease-out); }
.v-album-art .aa-track:hover { color:var(--ink); transform:translateX(2px); }
.v-album-art .aa-track.on { background:var(--accent-fill); color:var(--ink); }
.v-album-art .aa-tn { font:400 11px var(--mono); letter-spacing:.08em; color:var(--faint); min-width:1.7em; }
.v-album-art .aa-track.on .aa-tn { color:var(--accent); }
.v-album-art .aa-tt { flex:1; font:500 13.5px var(--font); }
.v-album-art .aa-tbars { display:inline-flex; align-items:flex-end; gap:2px; height:13px; opacity:0; }
.v-album-art .aa-track.on .aa-tbars { opacity:1; }
.v-album-art .aa-tbars i { width:2px; height:35%; border-radius:1px; background:var(--accent); }
.v-album-art .aa-tbars i:nth-child(2) { animation-delay:-.5s; }
.v-album-art .aa-tbars i:nth-child(3) { animation-delay:-.25s; }
.v-album-art.playing .aa-track.on .aa-tbars i { animation:aaEq 780ms ease-in-out infinite; }
@keyframes aaEq { 0%, 100% { height:22%; } 50% { height:100%; } }
@container site (max-width: 860px) {
  .v-album-art .aa-side { max-width:380px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-album-art.playing .aa-eq i, .v-album-art.playing .aa-track.on .aa-tbars i { animation:none; height:70%; }
}
/* api-docs — ported from SB_04 drafts/api-docs-hero (developer-API opener: eyebrow, headline,
   feature bullets + CTA beside a syntax-lit code window with a real Copy button). The code window
   is an intentionally FIXED dark editor surface on BOTH themes (docs convention) so its chrome +
   syntax tints stay literal and legible; everything on the copy side rides theme tokens so brands
   cascade. Entrance motion is the reveal system's job — only hover/focus + the copy feedback move
   here. Narrow-stacks via the shared 860px container rule; the code scrolls-x inside its own box so
   it never widens the page. */
.v-api-docs .ws-in.split { grid-template-columns:1fr 1.05fr; align-items:center; }
.v-api-docs .ws-hcopy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-api-docs .ah-feats { list-style:none; margin:30px 0 2px; padding:0; display:flex; flex-direction:column; gap:18px; }
.v-api-docs .ah-feat { display:flex; align-items:flex-start; gap:13px; }
.v-api-docs .ah-feat-ic { flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent-fill); color:var(--accent); }
.v-api-docs .ah-feat-ic svg { width:16px; height:16px; }
.v-api-docs .ah-feat-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.v-api-docs .ah-feat-tx b { font:600 14px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.005em; }
.v-api-docs .ah-feat-tx > span { font:400 12.5px/1.5 var(--font); color:var(--dim); }
/* the code window — a fixed dark editor surface, theme-independent (docs convention) */
.v-api-docs .ah-win { min-width:0; align-self:center; border-radius:var(--radius, 14px); overflow:hidden;
  background:#0e0f14; border:1px solid rgba(255,255,255,0.09); box-shadow:0 24px 55px -32px rgba(0,0,0,0.7); }
.v-api-docs .ah-bar { display:flex; align-items:center; gap:8px; padding:11px 14px;
  background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.08); }
.v-api-docs .ah-dot { width:11px; height:11px; border-radius:50%; flex:none; }
.v-api-docs .ah-dot.r { background:#ff5f56; }
.v-api-docs .ah-dot.y { background:#ffbd2e; }
.v-api-docs .ah-dot.g { background:#27c93f; }
.v-api-docs .ah-file { margin-left:8px; font:500 11.5px var(--mono, ui-monospace, monospace); color:#8b91a0; }
.v-api-docs .ah-copy { margin-left:auto; padding:4px 12px; border-radius:7px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#cdd3de;
  font:600 10px var(--mono, ui-monospace, monospace); letter-spacing:0.8px; text-transform:uppercase;
  transition:color 140ms linear, border-color 140ms linear; }
.v-api-docs .ah-copy:hover { color:#fff; border-color:rgba(255,255,255,0.3); }
.v-api-docs .ah-copy.ok { color:#27c93f; border-color:color-mix(in srgb, #27c93f 55%, transparent); }
.v-api-docs .ah-body { padding:18px 20px; overflow-x:auto; }
.v-api-docs .ah-code { margin:0; white-space:pre; color:#e6e8ee;
  font:400 12.5px/1.75 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.v-api-docs .ah-code code { font:inherit; color:inherit; }
/* syntax tints — literal, tuned for the dark editor surface (semantic, not brand) */
.v-api-docs .ah-c-comment { color:#5b6472; font-style:italic; }
.v-api-docs .ah-c-kw  { color:#c4a2fb; }
.v-api-docs .ah-c-var { color:#7cc0ff; }
.v-api-docs .ah-c-fn  { color:#4bd6a6; }
.v-api-docs .ah-c-str { color:#f4bf6a; }
.v-api-docs .ah-c-key { color:#e6e8ee; }
.v-api-docs .ah-c-num { color:#fb9d5b; }
@container site (max-width: 860px) {
  .v-api-docs .ah-feats { margin-top:24px; }
}
/* ===== Hero / API (v-api) — ported SB_04 drafts/api-hero.
   Copy + CTAs beside a syntax-lit code window; a 3-up proof-feature strip below.
   Split narrow-stacks via the global 860px rule (.ws-hero .ws-in.split). The code
   window is a fixed dark editor surface (theme-independent, dev-tool convention)
   with LITERAL syntax tints; it scrolls-x inside its own box so it never widens
   the page. Everything else reads theme tokens. */
.v-api .ws-in.split { grid-template-columns:1fr 1.05fr; align-items:center; }
.v-api .ws-hcopy { display:flex; flex-direction:column; justify-content:center; min-width:0; }

/* code window */
.v-api .aph-win { min-width:0; align-self:center; border-radius:var(--radius, 14px); overflow:hidden;
  background:#0d0d0f; border:1px solid rgba(255,255,255,0.09); box-shadow:0 24px 55px -32px rgba(0,0,0,0.7); }
.v-api .aph-bar { display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.08); }
.v-api .aph-file { font:500 11.5px var(--mono, ui-monospace, monospace); color:#8b91a0; }
.v-api .aph-copy { margin-left:auto; padding:4px 12px; border-radius:7px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#cdd3de;
  font:600 10px var(--mono, ui-monospace, monospace); letter-spacing:0.8px; text-transform:uppercase;
  transition:color 140ms linear, border-color 140ms linear; }
.v-api .aph-copy:hover { color:#fff; border-color:rgba(255,255,255,0.3); }
.v-api .aph-copy.ok { color:#27c93f; border-color:color-mix(in srgb, #27c93f 55%, transparent); }
.v-api .aph-body { padding:18px 20px; overflow-x:auto; }
.v-api .aph-code { margin:0; white-space:pre; color:#e6e8ee;
  font:400 12.5px/1.7 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.v-api .aph-code code { font:inherit; color:inherit; }
/* syntax tints — literal, semantic (not brand); faithful to the source draft */
.v-api .aph-c-cmt   { color:#5b6472; font-style:italic; }
.v-api .aph-c-kw    { color:#3b82f6; }
.v-api .aph-c-str   { color:#4caf82; }
.v-api .aph-c-num   { color:#f5b325; }
.v-api .aph-c-punct { color:#9aa0ab; }

/* proof-feature strip below the split */
.v-api .aph-feats { display:flex; align-items:stretch; margin-top:52px; }
.v-api .aph-feat { flex:1; display:flex; flex-direction:column; gap:6px; padding:0 32px; min-width:0; }
.v-api .aph-feat:first-child { padding-left:0; }
.v-api .aph-feat:last-child { padding-right:0; }
.v-api .aph-feat:not(:first-child) { border-left:var(--bw, 1px) solid var(--hair); }
.v-api .aph-feat b { font:600 14px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.005em; }
.v-api .aph-feat span { font:400 12.5px/1.5 var(--font); color:var(--dim); }

@container site (max-width: 560px) {
  .v-api .aph-feats { flex-direction:column; align-items:stretch; gap:0; margin-top:40px; }
  .v-api .aph-feat { padding:22px 0 0; }
  .v-api .aph-feat:first-child { padding-top:0; }
  .v-api .aph-feat:not(:first-child) { border-left:0; border-top:var(--bw, 1px) solid var(--hair); }
}
/* app-download — ported from SB_04 drafts/app-download-hero (mobile-app opener: copy + store
   badges + a star rating beside a CSS phone mock). Reuses ws-in.split (the 860px rule stacks it),
   ws-hcopy, and the ws-store badge atoms (solid-ink store buttons that auto-theme). The phone frame
   and its mock UI are scoped .adl-*; the accent card tint + bottom bar ride --accent, neutral chrome
   rides --ink mixes, and star gold stays a literal semantic hue. Static accent glow only — entrance
   motion is the reveal system's job. Narrow-stacks on the shared 860px container rule. */
.v-app-download .ws-in.split { align-items:center; }
.v-app-download .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-app-download .adl-stores { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.v-app-download .adl-rating { display:flex; align-items:center; gap:10px; margin-top:22px; }
.v-app-download .adl-stars { color:#f5b325; font-size:15px; line-height:1; letter-spacing:2px; }
.v-app-download .adl-rtext { font:500 12.5px var(--font); color:var(--dim); }
.v-app-download .adl-visual { position:relative; display:grid; place-items:center; min-height:clamp(360px, 46cqw, 460px); }
.v-app-download .adl-visual::before { content:''; position:absolute; width:78%; max-width:440px; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%); }
.v-app-download .adl-phone { position:relative; z-index:1; width:clamp(190px, 22cqw, 232px); aspect-ratio:200 / 400;
  border-radius:34px; overflow:hidden; background:color-mix(in srgb, var(--panel) 82%, var(--bg));
  border:2px solid color-mix(in srgb, var(--ink) 15%, var(--hair)); box-shadow:0 24px 55px -30px rgba(0,0,0,0.55); }
.v-app-download .adl-notch { position:absolute; z-index:2; top:12px; left:50%; transform:translateX(-50%);
  width:30%; height:10px; border-radius:8px; background:color-mix(in srgb, var(--ink) 12%, transparent); }
.v-app-download .adl-screen { position:absolute; inset:0; padding:34px 14px 18px; display:flex; flex-direction:column; gap:10px; }
.v-app-download .adl-bar, .v-app-download .adl-card { flex:none; border-radius:6px; }
.v-app-download .adl-bar.h { height:30px; border-radius:9px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-app-download .adl-bar.t { height:13px; width:55%; border-radius:4px; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.v-app-download .adl-card { height:64px; border-radius:11px; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.v-app-download .adl-card.a { background:color-mix(in srgb, var(--accent) 20%, transparent); }
.v-app-download .adl-bar.s { height:10px; width:70%; border-radius:4px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-app-download .adl-accent { height:34px; margin-top:auto; border-radius:9px; background:var(--accent); opacity:.9; }
@container site (max-width: 860px) {
  .v-app-download .adl-visual { min-height:0; margin-top:4px; }
}
/* athlete — ported from SB_04 drafts/athlete-hero (personal sports hero: full-height portrait panel
   beside a sport eyebrow, giant name, sponsor row, a personal-best stat rail, bio and CTAs). Reuses
   ws-hpanel for the portrait (themed placeholder + optional img), ws-in.split for the two columns (the
   global 860px rule stacks it), and ws-herostats/ws-hstat for the stat rail. Origin --ath-* vars map to
   theme tokens: accent eyebrow (ws-kick), muted sponsors/stat labels on --faint, dividers on --hair,
   surname gradient via ws-grad. Entrance motion is the reveal system's job (anims.js) — only button
   hover moves here. Photo sits left, copy right; on narrow the split collapses photo-over-copy. */
.v-athlete .ws-in.split { grid-template-columns:0.82fr minmax(0, 1fr); align-items:stretch; gap:clamp(32px, 4.5cqw, 64px); }
.v-athlete .ath-photo { min-height:clamp(420px, 52cqw, 600px); }
.v-athlete .ath-info { display:flex; flex-direction:column; justify-content:center; gap:clamp(20px, 2.3cqw, 28px); max-width:540px; }
.v-athlete .ath-info > * { margin:0; }
.v-athlete .ath-name { font-weight:900; text-transform:uppercase; line-height:0.9; letter-spacing:-0.03em;
  font-size:clamp(46px, 7.2cqw, 88px); }
.v-athlete .ath-name .ws-w { display:block; }
.v-athlete .ath-sponsors { display:flex; align-items:center; flex-wrap:wrap; }
.v-athlete .ath-sponsor { padding:0 16px; font:700 10px var(--font); letter-spacing:1.6px;
  text-transform:uppercase; color:var(--faint); }
.v-athlete .ath-sponsor:first-child { padding-left:0; }
.v-athlete .ath-sponsor + .ath-sponsor { border-left:var(--bw, 1px) solid var(--hair); }
.v-athlete .ath-stats { padding-block:clamp(16px, 1.8cqw, 22px); border-block:var(--bw, 1px) solid var(--hair); }
.v-athlete .ath-stats .ws-hstat { padding:0 clamp(18px, 2.2cqw, 30px); }
.v-athlete .ath-stats .ws-hstat b { font-size:clamp(22px, 3cqw, 30px); }
.v-athlete .ath-bio { max-width:46ch; }
@container site (max-width: 560px) {
  .v-athlete .ath-name { font-size:clamp(40px, 13cqw, 62px); }
  .v-athlete .ath-photo { min-height:clamp(300px, 66cqw, 440px); }
  .v-athlete .ath-stats { flex-direction:row; gap:clamp(18px, 5cqw, 30px); }
  .v-athlete .ath-stats .ws-hstat { align-items:flex-start; padding:0; }
}
/* avatar-grid — ported from SB_04 drafts/avatar-grid-hero (centered message over a scattered wall of
   community avatars behind a radial veil — a social-proof opener). Reuses ws-in.center + ws-kick/ws-h1/
   ws-sub/ws-ctarow atoms; the avatar field is data-driven — each avg-av tile shows a background-image when
   a URL is given, else a themed circular placeholder echoing ws-hpanel.ph (ink-mix radial fill, accent
   every 3rd). Origin --agh-* vars map to tokens: field/veil ride --bg mixes, placeholders --ink/--accent,
   hairlines --hair. Entrance keyframes dropped (reveal system owns entrances) — only tile hover moves. */
.v-avatar-grid { display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:clamp(480px, 60cqw, 620px); overflow:hidden; }
.v-avatar-grid .avg-field { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v-avatar-grid .avg-av { position:absolute; border-radius:50%; overflow:hidden; pointer-events:auto;
  background-size:cover; background-position:center; opacity:.52;
  transition:opacity .3s ease, transform .3s ease; }
.v-avatar-grid .avg-av:hover { opacity:.95; transform:scale(1.06); }
.v-avatar-grid .avg-xs { width:clamp(26px, 3cqw, 38px); aspect-ratio:1; }
.v-avatar-grid .avg-sm { width:clamp(34px, 4cqw, 50px); aspect-ratio:1; }
.v-avatar-grid .avg-md { width:clamp(44px, 5cqw, 62px); aspect-ratio:1; }
.v-avatar-grid .avg-lg { width:clamp(56px, 6.2cqw, 78px); aspect-ratio:1; }
.v-avatar-grid .avg-av.ph { background:radial-gradient(circle at 38% 30%,
    color-mix(in srgb, var(--ink) 17%, transparent), color-mix(in srgb, var(--ink) 7%, transparent));
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.v-avatar-grid .avg-av.ph:nth-child(3n) { background:radial-gradient(circle at 38% 30%,
    color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
.v-avatar-grid .avg-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 62% 72% at 50% 48%,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 52%,
    transparent 100%); }
.v-avatar-grid .ws-in { position:relative; z-index:2; }
.v-avatar-grid .ws-kick { margin-bottom:22px; }
.v-avatar-grid .ws-h1 { max-width:20ch; margin-inline:auto; text-wrap:balance; }
.v-avatar-grid .avg-proof { display:flex; align-items:center; justify-content:center; gap:8px;
  margin:26px 0 0; font:500 11.5px var(--font); letter-spacing:.04em; color:var(--dim); }
.v-avatar-grid .avg-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.v-avatar-grid .avg-divider { position:absolute; left:0; right:0; bottom:0; height:1px; z-index:1;
  background:var(--hair); }
@container site (max-width: 560px) {
  .v-avatar-grid .avg-av:nth-child(n+17):nth-child(-n+22) { display:none; }
}
/* award — ported from SB_04 drafts/award-hero (centered recognition opener: a ring of circular award
   badges, an emphasized headline, CTA pair, an analyst quote strip and a divided logo wall). Reuses
   ws-in.center, ws-h1, ws-sub, ws-ctarow + btn(). The award GOLD is a semantic hue kept literal
   (--awd-gold) — badges, stars, the emphasized headline word and the quote mark ride it; all neutral
   chrome (text --ink, muted --dim/--faint, dividers --hair) rides theme tokens. Badge + logo lists are
   data-driven. Only hover motion (a lift + color) transitions; entrances belong to the reveal system. */
.v-award { --awd-gold:#f5b325; }
.v-award .ws-in.center { display:flex; flex-direction:column; align-items:center; }
.v-award .awd-badges { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(14px, 2cqw, 22px); margin-bottom:clamp(34px, 4.4cqw, 56px); }
.v-award .awd-badge { position:relative; flex-shrink:0; width:88px; height:88px; border-radius:50%; padding:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1.5px solid color-mix(in srgb, var(--awd-gold) 42%, transparent); transition:transform 140ms ease-out; }
.v-award .awd-badge::before { content:''; position:absolute; inset:6px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--awd-gold) 13%, transparent), transparent 70%); }
.v-award .awd-badge:hover { transform:translateY(-2px); border-color:var(--awd-gold); }
.v-award .awd-badge.feat { width:104px; height:104px; border-color:var(--awd-gold); }
.v-award .awd-star { font-size:12px; line-height:1; color:var(--awd-gold); }
.v-award .awd-year { font:700 9px var(--font); letter-spacing:1.4px; text-transform:uppercase; color:var(--awd-gold); }
.v-award .awd-name { font:600 9px/1.3 var(--font); letter-spacing:.2px; color:var(--dim); text-align:center; }
.v-award .awd-title { max-width:15ch; text-wrap:balance; letter-spacing:-0.025em; }
.v-award .awd-em { font-style:normal; color:var(--awd-gold); }
.v-award .ws-sub { margin-top:20px; max-width:52ch; }
.v-award .ws-ctarow { margin-top:34px; margin-bottom:clamp(46px, 5.6cqw, 72px); }
.v-award .awd-quote { margin:0 0 clamp(34px, 4.2cqw, 48px); padding:clamp(26px, 3.2cqw, 36px) 24px;
  width:100%; max-width:640px; border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-award .awd-qmark { display:block; margin-bottom:8px; font:400 32px/1 Georgia, 'Times New Roman', serif;
  color:color-mix(in srgb, var(--awd-gold) 62%, transparent); }
.v-award .awd-qtext { margin:0 0 16px; font:italic 400 clamp(15px, 1.7cqw, 17px)/1.7 var(--font); color:var(--dim); }
.v-award .awd-qcite { font:600 13px var(--font); color:var(--ink); }
.v-award .awd-qfirm { font-weight:400; color:var(--faint); }
.v-award .awd-logos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; max-width:680px; }
.v-award .awd-logo { flex:1 1 0; min-width:0; padding:0 clamp(16px, 2.4cqw, 28px); text-align:center; white-space:nowrap;
  font:700 13px var(--font); letter-spacing:.2px; text-transform:uppercase; color:var(--faint); transition:color 140ms ease-out; }
.v-award .awd-logo + .awd-logo { border-left:var(--bw, 1px) solid var(--hair); }
.v-award .awd-logo:hover { color:var(--dim); }
@container site (max-width: 560px) {
  .v-award .awd-badge { width:74px; height:74px; }
  .v-award .awd-badge.feat { width:86px; height:86px; }
  .v-award .awd-logo { font-size:11px; padding:0 13px; }
}
/* atmospheric-portrait — ported from SB_04 drafts/atmospheric-portrait-hero (full-bleed moody portrait
   opener: static fog + film-grain + crop-mark framing over a bottom-anchored italic-serif name). Reuses
   ws-hpanel for the full-bleed portrait (themed placeholder or optional img), ws-in for the content measure,
   and ws-kick / ws-h1 / ws-sub / ws-ctarow for the copy. Origin --aph-* vars map to tokens: bg->--bg,
   text->--ink, accent->--accent, muted->--dim/--faint, fog->--ink mix; vignette + fog ride --bg / --ink
   mixes so it auto-themes. All drift / fade / reveal keyframes dropped (anims.js owns entrances) — every
   layer is static; only crop-mark brackets and the italic-serif name styling remain. Full-viewport height,
   content anchors bottom within the ws-in measure; narrow container hides scroll cue (860) + crop marks (560). */
.ws-hero.v-atmospheric-portrait { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(560px, 90vh, 880px); display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--bg); --atp-fog:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-atmospheric-portrait .atp-portrait { position:absolute; inset:0; z-index:0; min-height:0; border:0;
  border-radius:0; background-position:center top; }
.v-atmospheric-portrait .atp-portrait.ph { background-repeat:no-repeat; background-size:cover; background-position:center;
  background-image:radial-gradient(ellipse 52% 78% at 55% 34%, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg) 70%); }
.v-atmospheric-portrait .atp-portrait.ph::after { display:none; }
.v-atmospheric-portrait .atp-vignette { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 92% 82% at 50% 38%, transparent 22%, color-mix(in srgb, var(--bg) 55%, transparent) 62%, var(--bg) 92%),
    linear-gradient(0deg, var(--bg), color-mix(in srgb, var(--bg) 72%, transparent) 20%, transparent 52%, color-mix(in srgb, var(--bg) 42%, transparent)); }
.v-atmospheric-portrait .atp-fog { position:absolute; inset:0; z-index:2; pointer-events:none; }
.v-atmospheric-portrait .atp-fog::before { content:''; position:absolute; left:-20%; right:-20%; bottom:15%; height:30%;
  background:linear-gradient(0deg, var(--atp-fog), transparent 40%, transparent 60%, var(--atp-fog)); filter:blur(40px); }
.v-atmospheric-portrait .atp-fog::after { content:''; position:absolute; left:-10%; right:-10%; top:20%; height:20%;
  background:linear-gradient(0deg, transparent, var(--atp-fog) 50%, transparent); filter:blur(60px); opacity:.5; }
.v-atmospheric-portrait .atp-grain { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.12;
  mix-blend-mode:overlay; background-repeat:repeat; background-size:256px 256px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='atpn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23atpn)'/%3E%3C/svg%3E"); }
.v-atmospheric-portrait .atp-frame { position:absolute; z-index:4; width:clamp(2.4rem, 3.4cqw, 3.5rem); height:clamp(2.4rem, 3.4cqw, 3.5rem); }
.v-atmospheric-portrait .atp-frame::before, .v-atmospheric-portrait .atp-frame::after { content:'';
  position:absolute; background:color-mix(in srgb, var(--accent) 34%, transparent); }
.v-atmospheric-portrait .atp-frame::before { width:100%; height:1px; }
.v-atmospheric-portrait .atp-frame::after { width:1px; height:100%; }
.v-atmospheric-portrait .atp-tl { top:clamp(1.4rem, 2.4cqw, 2rem); left:clamp(1.4rem, 2.4cqw, 2rem); }
.v-atmospheric-portrait .atp-tl::before, .v-atmospheric-portrait .atp-tl::after { top:0; left:0; }
.v-atmospheric-portrait .atp-tr { top:clamp(1.4rem, 2.4cqw, 2rem); right:clamp(1.4rem, 2.4cqw, 2rem); }
.v-atmospheric-portrait .atp-tr::before, .v-atmospheric-portrait .atp-tr::after { top:0; right:0; }
.v-atmospheric-portrait .atp-bl { bottom:clamp(1.4rem, 2.4cqw, 2rem); left:clamp(1.4rem, 2.4cqw, 2rem); }
.v-atmospheric-portrait .atp-bl::before, .v-atmospheric-portrait .atp-bl::after { bottom:0; left:0; }
.v-atmospheric-portrait .atp-br { bottom:clamp(1.4rem, 2.4cqw, 2rem); right:clamp(1.4rem, 2.4cqw, 2rem); }
.v-atmospheric-portrait .atp-br::before, .v-atmospheric-portrait .atp-br::after { bottom:0; right:0; }
.v-atmospheric-portrait .atp-content { z-index:5; padding:0 0 clamp(2.6rem, 5cqw, 5rem); display:flex;
  flex-direction:column; align-items:flex-start; gap:clamp(.55rem, 1cqw, .9rem); }
.v-atmospheric-portrait .atp-content .ws-kick { margin:0; color:var(--dim); }
.v-atmospheric-portrait .atp-name { margin:0; font-family:var(--font-head, var(--font)); font-style:italic;
  font-weight:400; line-height:0.92; letter-spacing:-0.02em; color:var(--ink); font-size:clamp(3rem, 12cqw, 9rem); }
.v-atmospheric-portrait .atp-tagline { margin:0; max-width:38ch; color:var(--dim); font-weight:300; line-height:1.7; }
.v-atmospheric-portrait .atp-content .ws-ctarow { margin-top:clamp(.5rem, 1.4cqw, 1.1rem); }
.v-atmospheric-portrait .atp-scroll { position:absolute; z-index:5; right:clamp(1.4rem, 3cqw, 3rem);
  bottom:clamp(1.4rem, 2.4cqw, 2rem); display:flex; flex-direction:column; align-items:center; gap:.5rem; pointer-events:none; }
.v-atmospheric-portrait .atp-scroll-text { writing-mode:vertical-lr; font:400 9px var(--mono); letter-spacing:2px;
  text-transform:uppercase; color:var(--faint); }
.v-atmospheric-portrait .atp-scroll-line { width:1px; height:2.4rem; background:linear-gradient(180deg, var(--faint), transparent); }
@container site (max-width: 860px) {
  .v-atmospheric-portrait { min-height:clamp(480px, 80vh, 720px); }
  .v-atmospheric-portrait .atp-scroll { display:none; }
}
@container site (max-width: 560px) {
  .v-atmospheric-portrait .atp-name { font-size:clamp(2.4rem, 14cqw, 4.4rem); }
  .v-atmospheric-portrait .atp-frame { display:none; }
}
/* bento — ported from SB_04 drafts/bento-hero (mixed-size tile mosaic: a headline/CTA lead cell beside
   data-driven stat, feature, media and tag cards). Reuses ws-in for the measure and ws-kick / ws-h1 /
   ws-sub / ws-ctarow + btn() inside the lead cell; the tile list is data-driven (each tile carries a
   kind + optional span=2). Origin --bento-h-* vars map to tokens: bg->--bg, cell->--panel / --panel-2,
   text->--ink, muted->--dim/--faint, accent->--accent, gap/seams->--hair. The media tile echoes the
   ws-hpanel.ph themed placeholder (accent->panel radial). Entrance keyframes dropped (reveal system owns
   entrances) — only tile hover moves (lift + border, transform/border-color only). CSS grid + container
   queries: 4 cols -> 2 (860) -> 1 (560), so the bento reflows instead of overflowing on narrow. */
.v-bento .bnt-grid { display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(clamp(108px, 13cqw, 150px), auto); grid-auto-flow:row dense; gap:clamp(10px, 1.2cqw, 16px); }
.v-bento .bnt-cell { position:relative; overflow:hidden; border-radius:var(--radius, 14px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); padding:clamp(18px, 2.2cqw, 30px);
  display:flex; flex-direction:column; transition:transform 160ms var(--ease-pop, ease-out), border-color 160ms ease-out; }
.v-bento .bnt-cell:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-bento .bnt-cell.w2 { grid-column:span 2; }
.v-bento .bnt-lead { grid-column:span 2; grid-row:span 2; justify-content:center; gap:clamp(9px, 1.1cqw, 15px);
  background:var(--panel-2, var(--panel)); }
.v-bento .bnt-lead:hover { transform:none; border-color:var(--hair); }
.v-bento .bnt-lead .ws-kick { margin-bottom:2px; }
.v-bento .bnt-lead .ws-h1 { font-size:clamp(28px, 4.4cqw, 46px); max-width:16ch; text-wrap:balance; }
.v-bento .bnt-lead .ws-sub { margin-top:2px; max-width:42ch; }
.v-bento .bnt-lead .ws-ctarow { margin-top:clamp(12px, 1.6cqw, 20px); }
.v-bento .bnt-stat { justify-content:flex-end; gap:6px; }
.v-bento .bnt-val { font:800 clamp(30px, 4.4cqw, 50px)/1 var(--font-head, var(--font)); letter-spacing:-0.03em; color:var(--accent); }
.v-bento .bnt-label { font:500 12.5px/1.4 var(--font); color:var(--faint); }
.v-bento .bnt-feature { justify-content:flex-end; gap:8px; }
.v-bento .bnt-ftitle { font:700 clamp(15px, 1.8cqw, 19px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-bento .bnt-text { margin:0; font:400 clamp(13px, 1.5cqw, 14.5px)/1.55 var(--font); color:var(--dim); max-width:42ch; }
.v-bento .bnt-fill { position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 120% at 28% 18%, color-mix(in srgb, var(--accent) 24%, var(--panel)), var(--panel) 72%); }
.v-bento .bnt-fill::after { content:''; position:absolute; inset:0;
  background:linear-gradient(125deg, transparent 42%, color-mix(in srgb, var(--accent) 12%, transparent)); }
.v-bento .bnt-cap { position:relative; z-index:1; margin-top:auto; align-self:flex-start;
  font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-bento .bnt-tag { justify-content:center; align-items:flex-start; }
.v-bento .bnt-tagtext { font:700 clamp(11px, 1.3cqw, 13px) var(--mono); letter-spacing:2.4px; text-transform:uppercase; color:var(--accent); }
@container site (max-width: 860px) {
  .v-bento .bnt-grid { grid-template-columns:repeat(2, 1fr); }
  .v-bento .bnt-lead { grid-column:span 2; grid-row:auto; }
  .v-bento .bnt-cell.w2 { grid-column:span 2; }
}
@container site (max-width: 560px) {
  .v-bento .bnt-grid { grid-template-columns:1fr; grid-auto-rows:auto; }
  .v-bento .bnt-lead, .v-bento .bnt-cell.w2 { grid-column:span 1; }
  .v-bento .bnt-cell { min-height:clamp(112px, 30cqw, 152px); }
  .v-bento .bnt-lead { min-height:0; }
}
/* before-after — ported from SB_04 drafts/before-after-hero. Origin was a STATIC side-by-side; ported
   as a REAL interactive comparison slider: a base "before" layer with a clipped "after" overlay revealed
   by a draggable divider (mouse + touch via pointer events in mount()), plus a focusable arrow-key knob.
   Origin --bah2-* map to tokens: bg->--bg, heading->--ink, body->--dim/--faint, accent->--accent,
   dividers->--hair mixes. Entrance/reveal keyframes dropped (anims.js owns entrances); only a
   prefers-reduced-motion-gated knob-pulse hints interactivity — nothing moves at rest. Transitions ride
   transform/opacity/clip only, no blur. Placeholders keep it readable with no images. Container queries. */
.v-before-after .bah-wrap { display:flex; flex-direction:column; align-items:center; gap:clamp(28px, 4cqw, 48px); text-align:center; }
.v-before-after .bah-copy { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:640px; }
.v-before-after .bah-copy .ws-sub { margin-inline:auto; }
.v-before-after .bah-copy .ws-ctarow { justify-content:center; margin-top:8px; }
.v-before-after .bah-compare { position:relative; width:100%; aspect-ratio:16 / 9; border-radius:var(--radius, 14px);
  overflow:hidden; border:var(--bw, 1px) solid var(--hair); background:var(--panel); cursor:ew-resize;
  touch-action:none; user-select:none; -webkit-user-select:none;
  box-shadow:var(--inset-hi, 0 0 #0000), var(--elev, 0 0 #0000); }
.v-before-after .bah-layer { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.v-before-after .bah-before { z-index:1; }
.v-before-after .bah-after { z-index:2; clip-path:inset(0 0 0 50%); }
/* placeholders: before reads muted + hatched, after reads accent-tinted, so the split still communicates with no images */
.v-before-after .bah-before.ph { background-image:linear-gradient(135deg, color-mix(in srgb, var(--ink) 9%, var(--panel)), var(--panel-2)); }
.v-before-after .bah-before.ph::after { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 10px, transparent 10px 20px); }
.v-before-after .bah-after.ph { background-image:radial-gradient(120% 120% at 72% 28%, color-mix(in srgb, var(--accent) 26%, var(--panel)), var(--panel) 74%); }
.v-before-after .bah-label { position:absolute; top:14px; z-index:3; padding:5px 11px; border-radius:99px;
  font:700 10px var(--mono); letter-spacing:2px; text-transform:uppercase; pointer-events:none; }
.v-before-after .bah-label-a { left:14px; color:var(--dim);
  background:color-mix(in srgb, var(--bg) 62%, transparent); border:var(--bw, 1px) solid var(--hair); }
.v-before-after .bah-label-b { right:14px; color:var(--accent);
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.v-before-after .bah-handle { position:absolute; top:0; bottom:0; left:50%; width:0; z-index:4; }
.v-before-after .bah-line { position:absolute; top:0; bottom:0; left:0; width:2px; transform:translateX(-1px);
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent); }
.v-before-after .bah-knob { position:absolute; top:50%; left:0; transform:translate(-50%, -50%);
  width:clamp(38px, 5cqw, 48px); height:clamp(38px, 5cqw, 48px); border-radius:50%; display:grid; place-items:center;
  cursor:ew-resize; color:var(--accent); border:2px solid var(--accent);
  background:color-mix(in srgb, var(--bg) 82%, var(--panel));
  box-shadow:var(--accent-glow, 0 0 #0000), 0 2px 10px rgba(0,0,0,0.28);
  transition:transform 120ms var(--ease-pop, ease-out); }
.v-before-after .bah-knob:hover { transform:translate(-50%, -50%) scale(1.06); }
.v-before-after .bah-knob:focus-visible { outline:none;
  box-shadow:0 0 0 3px var(--accent-fill), 0 2px 10px rgba(0,0,0,0.28); }
.v-before-after .bah-knob svg { width:56%; height:56%; }
.v-before-after .bah-metrics { display:grid; grid-template-columns:repeat(3, 1fr); width:100%;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden; }
.v-before-after .bah-metric { padding:clamp(18px, 2.6cqw, 30px); display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.v-before-after .bah-metric + .bah-metric::before { content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--hair); }
.v-before-after .bah-mval { font:800 clamp(26px, 4cqw, 40px)/1 var(--font-head, var(--font)); color:var(--accent); letter-spacing:-0.02em; }
.v-before-after .bah-mlabel { font:500 12px var(--font); color:var(--dim); text-align:center; }
/* idle affordance — a soft accent pulse on the knob, only until first interaction AND only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .v-before-after .bah-handle.bah-hint .bah-knob::after { content:''; position:absolute; inset:-2px; border-radius:50%;
    border:2px solid var(--accent); animation:bah-pulse 2.4s ease-out infinite; pointer-events:none; }
}
@keyframes bah-pulse { 0% { opacity:0.5; transform:scale(1); } 70%, 100% { opacity:0; transform:scale(1.5); } }
.bah-grabbing, .bah-grabbing * { cursor:ew-resize !important; }
@container site (max-width: 620px) {
  .v-before-after .bah-compare { aspect-ratio:4 / 3; }
  .v-before-after .bah-metric { padding:16px 8px; }
  .v-before-after .bah-mlabel { font-size:11px; }
}
/* booking-form — ported from SB_04 drafts/booking-form-hero: marketing copy beside a REAL
   appointment form (service / date / time / party-size selects + name & email) with a live
   client-side "Requested: …" confirmation on submit — nothing is posted anywhere. Origin
   --bfh-* vars -> theme tokens (surface->--panel, text->--ink, secondary->--dim/--faint,
   border->--hair, accent/focus->--accent); the controls reuse the shared .ws-bkinput family so
   they theme (no native blue) and gain an --accent focus ring here. The baked two-step wizard
   entrance is dropped (anims.js owns entrances) — only focus/hover and the submit reveal move.
   Split narrow-stacks via the global 860px rule (.ws-hero .ws-in.split); field pairs collapse
   by container query, not viewport media. */
.v-booking-form .ws-in.split { align-items:center; }
.bf-card { padding:clamp(20px, 2.4cqw, 30px); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); background:var(--panel); background-image:var(--surface-grad, none); }
.bf-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.v-booking-form .ws-bkinput:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.v-booking-form input.ws-bkinput[type="text"], .v-booking-form input.ws-bkinput[type="email"] { cursor:text; }
.bf-submit { width:100%; justify-content:center; margin-top:5px; border:none; }
.bf-note { margin:2px 0 0; font:400 12.5px/1.5 var(--font); color:var(--faint); }
.bf-note.ok { color:var(--accent); font-weight:500; padding:11px 13px;
  border-radius:calc(var(--radius, 12px) * .7); background:var(--accent-fill); }
@container site (max-width: 560px) {
  .v-booking-form .bf-row { grid-template-columns:1fr; }
}
/* booking — ported from SB_04 drafts/booking-hero: a flight-search hero (trip-type tabs,
   From/To + date fields, a passenger stepper, a search action and a clickable top-routes strip).
   Distinct from the booking-form variant (an appointment step-flow). Origin --bkh-* vars -> theme
   tokens; the search button reuses .ws-btn.primary. Entrance motion is the reveal system's job —
   only hover/focus/selected and the search+routes interactions move here; backgrounds swap
   instantly, transitions ride color/border-color/opacity only. Narrow-stack via a container query. */
.v-booking .ws-in { display:flex; flex-direction:column; align-items:center; gap:clamp(26px, 3.6cqw, 44px); }
.v-booking .bk-head { max-width:600px; text-align:center; display:flex; flex-direction:column; gap:14px; }
.v-booking .bk-head .ws-kick { margin-bottom:0; }
.v-booking .bk-head .ws-sub { margin-inline:auto; }
.v-booking .bk-widget { width:100%; max-width:800px; display:flex; flex-direction:column; gap:22px;
  padding:clamp(20px, 2.6cqw, 30px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  background:var(--panel); background-image:var(--surface-grad, none); box-shadow:var(--elev, none); }
.v-booking .bk-tabs { display:flex; gap:4px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-booking .bk-tab { appearance:none; -webkit-appearance:none; background:transparent; border:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; padding:9px 18px; font:600 13px var(--font);
  color:var(--dim); cursor:pointer; transition:color 140ms linear, border-color 140ms linear; }
.v-booking .bk-tab:hover { color:var(--ink); }
.v-booking .bk-tab.is-active { color:var(--ink); border-bottom-color:var(--accent); }
.v-booking .bk-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.v-booking .bk-field { display:flex; flex-direction:column; gap:6px; }
.v-booking .bk-field-grow { flex:1 1 150px; min-width:0; }
.v-booking .bk-label { font:600 10.5px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.v-booking .bk-input { width:100%; padding:10px 13px; border-radius:calc(var(--radius, 12px) * .6);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel-2); color:var(--ink); font:400 14px var(--font);
  outline:none; appearance:none; -webkit-appearance:none; transition:border-color 140ms linear; }
.v-booking .bk-input::placeholder { color:color-mix(in srgb, var(--dim) 60%, transparent); }
.v-booking .bk-input:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-booking .bk-input:focus { border-color:var(--accent); }
.v-booking .bk-input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(.5); cursor:pointer; }
.v-booking .bk-field-return { transition:opacity 160ms linear; }
.v-booking .bk-field-return.is-hidden { opacity:0; pointer-events:none; }
.v-booking .bk-pax { flex:0 0 auto; }
.v-booking .bk-counter { display:flex; align-items:center; height:40px; border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * .6); background:var(--panel-2); overflow:hidden; }
.v-booking .bk-cbtn { appearance:none; -webkit-appearance:none; background:transparent; border:none;
  width:38px; height:100%; display:flex; align-items:center; justify-content:center; font:400 18px var(--font);
  color:var(--dim); cursor:pointer; transition:color 140ms linear; }
.v-booking .bk-cbtn:hover:not(:disabled) { color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.v-booking .bk-cbtn:disabled { opacity:.4; cursor:default; }
.v-booking .bk-cval { min-width:30px; text-align:center; font:600 14px var(--font); color:var(--ink); }
.v-booking .bk-search { align-self:flex-end; justify-content:center; height:40px; padding:0 22px; border:none; }
.v-booking .bk-status { margin:0; font:500 13px/1.5 var(--font); color:var(--dim); }
.v-booking .bk-status.warn { color:var(--accent); }
.v-booking .bk-routes { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; }
.v-booking .bk-routes-label { font:400 13px var(--font); color:var(--dim); }
.v-booking .bk-route { appearance:none; -webkit-appearance:none; background:transparent; border:none;
  padding:0; cursor:pointer; font:500 13px var(--font); color:var(--accent); transition:opacity 140ms linear; }
.v-booking .bk-route:hover { opacity:.72; text-decoration:underline; }
.v-booking .bk-route-sep { color:var(--faint); font-size:13px; }
@container site (max-width: 620px) {
  .v-booking .bk-form { flex-direction:column; align-items:stretch; }
  .v-booking .bk-field, .v-booking .bk-field-grow { flex:1 1 auto; }
  .v-booking .bk-pax { align-self:stretch; }
  .v-booking .bk-counter { width:100%; justify-content:space-between; }
  .v-booking .bk-search { width:100%; align-self:stretch; }
}
/* band — ported from SB_04 drafts/band-hero (music-artist opener: full-height stage photo beside the
   band name, a latest-release tracklist and listen / buy CTAs). Reuses ws-hpanel for the stage photo,
   ws-in.split for the two columns (the global 860px rule stacks it — restacked below because the
   .ws-hero.v-band qualifier out-specifies it), ws-kick/ws-h1+ws-grad/ws-sub for the copy and ws-btn for
   the CTAs. NB: v-band is also a STATS variant (.ws-stats.v-band) so every rule here is qualified with
   .ws-hero.v-band. Origin --bndh-* vars map to theme tokens: accent track-numbers + progress on
   --accent, headings on --ink, bio/labels on --dim/--faint, hairlines on --hair. The dead "Listen"
   button and static tracklist become a real, self-contained preview player (mount): click a track or
   Listen to play, an equalizer + progress fill run and tracks auto-advance — user-initiated only,
   nothing animates at rest, honors prefers-reduced-motion. */
.ws-hero.v-band .ws-in.split { grid-template-columns:0.92fr minmax(0, 1fr); align-items:stretch; gap:clamp(30px, 4.2cqw, 60px); }
.ws-hero.v-band .bnd-photo { min-height:clamp(440px, 52cqw, 620px); display:flex; align-items:flex-end; padding:clamp(14px, 2cqw, 22px); }
.ws-hero.v-band .bnd-now { position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; max-width:100%;
  padding:8px 14px; border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  opacity:0; transform:translateY(6px); transition:opacity 160ms linear, transform 160ms var(--ease-pop, ease-out); }
.ws-hero.v-band .bnd-now.show { opacity:1; transform:none; }
.ws-hero.v-band .bnd-now-tx { font:500 11.5px var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-hero.v-band .bnd-now-title { color:var(--ink); font-weight:600; }
.ws-hero.v-band .bnd-now .bnd-eq { color:var(--accent); }
.ws-hero.v-band .bnd-info { display:flex; flex-direction:column; justify-content:center; gap:clamp(15px, 2cqw, 23px); max-width:560px; min-width:0; }
.ws-hero.v-band .bnd-info > * { margin:0; }
.ws-hero.v-band .bnd-name { font-weight:900; text-transform:uppercase; line-height:0.92; letter-spacing:-0.03em;
  font-size:clamp(40px, 6.4cqw, 76px); }
.ws-hero.v-band .bnd-bio { max-width:52ch; }
.ws-hero.v-band .bnd-release { border-top:var(--bw, 1px) solid var(--hair); padding-top:clamp(16px, 2cqw, 24px); }
.ws-hero.v-band .bnd-rel-head { display:flex; flex-direction:column; gap:3px; margin-bottom:clamp(10px, 1.4cqw, 16px); }
.ws-hero.v-band .bnd-album { font:700 clamp(15px, 1.4cqw, 17px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.ws-hero.v-band .bnd-date { font:500 11.5px var(--font); color:var(--faint); letter-spacing:0.4px; }
.ws-hero.v-band .bnd-tracks { list-style:none; display:flex; flex-direction:column; }
.ws-hero.v-band .bnd-trow { position:relative; }
.ws-hero.v-band .bnd-track { position:relative; overflow:hidden; width:100%; display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:clamp(10px, 1.4cqw, 16px);
  padding:11px 12px; border:0; border-bottom:var(--bw, 1px) solid var(--hair); border-radius:8px 8px 0 0;
  background:transparent; text-align:left; cursor:pointer; appearance:none; -webkit-appearance:none;
  font:inherit; color:var(--dim); transition:color 140ms linear; }
.ws-hero.v-band .bnd-trow:last-child .bnd-track { border-bottom:0; }
.ws-hero.v-band .bnd-track:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink); }
.ws-hero.v-band .bnd-track.on { background:color-mix(in srgb, var(--accent) 9%, transparent); color:var(--ink); }
.ws-hero.v-band .bnd-track:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.ws-hero.v-band .bnd-track > span:not(.bnd-tfill) { position:relative; z-index:1; }
.ws-hero.v-band .bnd-tfill { position:absolute; inset:0 auto 0 0; z-index:0; width:100%;
  transform-origin:left center; transform:scaleX(0); will-change:transform;
  background:color-mix(in srgb, var(--accent) 15%, transparent); pointer-events:none; }
.ws-hero.v-band .bnd-tnum { min-width:1.7rem; font:700 11px var(--mono); color:var(--accent); font-variant-numeric:tabular-nums; }
.ws-hero.v-band .bnd-ttitle { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 13.5px var(--font); }
.ws-hero.v-band .bnd-track.playing .bnd-ttitle { color:var(--ink); }
.ws-hero.v-band .bnd-tdur { font:500 11.5px var(--mono); color:var(--faint); font-variant-numeric:tabular-nums; }
.ws-hero.v-band .bnd-actions { margin-top:clamp(6px, 1.2cqw, 12px); }
.ws-hero.v-band .bnd-listen { appearance:none; -webkit-appearance:none; }
/* equalizer glyph — shared by the now-playing badge, the active track row and the Listen button */
.ws-hero.v-band .bnd-eq, .ws-hero.v-band .bnd-teq, .ws-hero.v-band .bnd-listen-eq { display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.ws-hero.v-band .bnd-listen-eq { height:11px; }
.ws-hero.v-band .bnd-teq { opacity:0; transition:opacity 140ms linear; }
.ws-hero.v-band .bnd-track.playing .bnd-teq { opacity:1; }
.ws-hero.v-band .bnd-eq i, .ws-hero.v-band .bnd-teq i, .ws-hero.v-band .bnd-listen-eq i { width:2px; height:100%; border-radius:1px;
  background:currentColor; transform:scaleY(0.35); transform-origin:bottom; }
.ws-hero.v-band .bnd-now.show .bnd-eq i,
.ws-hero.v-band .bnd-track.playing .bnd-teq i,
.ws-hero.v-band .bnd-listen.playing .bnd-listen-eq i { animation:bndEq 0.9s ease-in-out infinite; }
.ws-hero.v-band .bnd-eq i:nth-child(2), .ws-hero.v-band .bnd-teq i:nth-child(2), .ws-hero.v-band .bnd-listen-eq i:nth-child(2) { animation-delay:0.15s; }
.ws-hero.v-band .bnd-eq i:nth-child(3), .ws-hero.v-band .bnd-teq i:nth-child(3), .ws-hero.v-band .bnd-listen-eq i:nth-child(3) { animation-delay:0.3s; }
.ws-hero.v-band .bnd-eq i:nth-child(4), .ws-hero.v-band .bnd-teq i:nth-child(4) { animation-delay:0.45s; }
@keyframes bndEq { 0%, 100% { transform:scaleY(0.3); } 50% { transform:scaleY(1); } }
@container site (max-width: 860px) {
  .ws-hero.v-band .ws-in.split { grid-template-columns:1fr; gap:36px; }
  .ws-hero.v-band .bnd-photo { min-height:clamp(280px, 58cqw, 420px); }
}
@container site (max-width: 560px) {
  .ws-hero.v-band .bnd-name { font-size:clamp(34px, 12cqw, 54px); }
  .ws-hero.v-band .bnd-track { padding-inline:8px; gap:10px; }
  .ws-hero.v-band .bnd-teq { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-hero.v-band .bnd-eq i, .ws-hero.v-band .bnd-teq i, .ws-hero.v-band .bnd-listen-eq i { animation:none !important; transform:scaleY(0.55); }
}
/* blueprint — ported from SB_04 drafts/blueprint-hero (drafting-sheet opener: a token-driven grid-paper
   field, mono "sheet" labels, a decorative dimension rule and a static technical elevation figure with a
   dimension callout + a redline approval stamp). Reuses ws-in.split for the copy|figure split and
   ws-h1 + gradLast / ws-sub / ws-ctarow + btn for the copy. Origin --blu-* vars map to tokens: bg->--bg,
   ink->--ink, ink-dim->--dim/--faint, line/gridline->--hair, cyan+red accents->--accent, mono->--mono.
   The grid rides --hair (minor) + --accent (major) color-mixes so paper/line colours cascade with brand
   & theme — no baked blueprint-blue. All draw-on / stamp-pop / rise entrance keyframes dropped (anims.js
   owns entrances); crosshairs, dim rule, figure and stamp are static. Container queries only. */
.ws-hero.v-blueprint { --bp-unit:8px; position:relative; overflow:hidden; isolation:isolate; background-color:var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--hair) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hair) 55%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--accent) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent) 1px, transparent 1px);
  background-size:var(--bp-unit) var(--bp-unit), var(--bp-unit) var(--bp-unit),
    calc(var(--bp-unit) * 5) calc(var(--bp-unit) * 5), calc(var(--bp-unit) * 5) calc(var(--bp-unit) * 5); }
.v-blueprint .ws-in.split { grid-template-columns:minmax(0, 1.08fr) minmax(0, 0.92fr); align-items:center; gap:clamp(32px, 5cqw, 72px); }
.v-blueprint .bp-reg { position:absolute; z-index:1; width:17px; height:17px; pointer-events:none;
  color:color-mix(in srgb, var(--accent) 60%, transparent); opacity:.75; }
.v-blueprint .bp-reg::before, .v-blueprint .bp-reg::after { content:''; position:absolute; background:currentColor; }
.v-blueprint .bp-reg::before { left:8px; top:0; width:1px; height:17px; }
.v-blueprint .bp-reg::after { top:8px; left:0; height:1px; width:17px; }
.v-blueprint .bp-tl { top:clamp(16px, 2.4cqw, 26px); left:clamp(16px, 2.4cqw, 26px); }
.v-blueprint .bp-tr { top:clamp(16px, 2.4cqw, 26px); right:clamp(16px, 2.4cqw, 26px); }
.v-blueprint .bp-bl { bottom:clamp(16px, 2.4cqw, 26px); left:clamp(16px, 2.4cqw, 26px); }
.v-blueprint .bp-br { bottom:clamp(16px, 2.4cqw, 26px); right:clamp(16px, 2.4cqw, 26px); }
.v-blueprint .bp-copy { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px, 2cqw, 24px); }
.v-blueprint .bp-copy > * { margin:0; }
.v-blueprint .bp-meta { display:flex; flex-wrap:wrap; gap:8px; }
.v-blueprint .bp-chip { padding:4px 9px; border:var(--bw, 1px) solid var(--hair); border-radius:0; font:600 9.5px var(--mono);
  letter-spacing:2px; text-transform:uppercase; color:color-mix(in srgb, var(--accent) 82%, var(--ink)); }
.v-blueprint .bp-chip.lead { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-blueprint .bp-title { font-family:var(--mono); font-weight:600; text-transform:uppercase; line-height:1.08;
  letter-spacing:-0.01em; font-size:clamp(30px, 5.6cqw, 60px); }
.v-blueprint .bp-dim { align-self:stretch; display:flex; align-items:center; gap:10px;
  color:color-mix(in srgb, var(--accent) 72%, transparent); font:500 9.5px var(--mono); letter-spacing:2px; }
.v-blueprint .bp-dim-line { flex:1; height:9px; min-width:24px; border-inline:1px solid currentColor;
  background:linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.v-blueprint .bp-dim-tick { font-variant-numeric:tabular-nums; }
.v-blueprint .bp-note { font:500 9.5px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-blueprint .bp-figure { position:relative; z-index:2; min-width:0; }
.v-blueprint .bp-dwg { display:block; width:100%; height:auto; color:var(--accent); opacity:.9; }
.v-blueprint .bp-stamp { position:absolute; top:8%; right:6%; transform:rotate(-12deg); display:flex; flex-direction:column;
  align-items:center; gap:2px; padding:9px 15px; border:2px solid var(--accent); outline:1px solid var(--accent);
  outline-offset:3px; color:var(--accent); font:700 13px/1.15 var(--mono); letter-spacing:3px; text-transform:uppercase;
  opacity:.9; pointer-events:none; }
.v-blueprint .bp-stamp em { font-style:normal; font-weight:500; font-size:8.5px; letter-spacing:2px; opacity:.85; }
@container site (max-width: 820px) {
  .v-blueprint .ws-in.split { grid-template-columns:1fr; gap:clamp(28px, 6cqw, 44px); }
  .v-blueprint .bp-figure { max-width:440px; width:100%; margin-inline:auto; }
}
@container site (max-width: 560px) {
  .v-blueprint .bp-reg { display:none; }
  .v-blueprint .bp-stamp { top:4%; right:3%; font-size:11px; padding:7px 11px; }
  .v-blueprint .bp-dim-tick { display:none; }
}
/* breadcrumb — ported from SB_04 drafts/breadcrumb-hero (page-interior article/docs opener: a breadcrumb
   trail with chevron separators over a large title + subtitle + two CTAs, closed by a horizontal meta strip:
   avatar, author, date, read time and a tag). Single left-aligned measure column (NOT a split), so it rides
   .ws-in with a tightened width instead of ws-in.split. Reuses ws-h1 + gradLast / ws-sub / ws-ctarow + btn
   for the copy. Origin --brh-* vars map to theme tokens: bg->site --bg (transparent section), heading->--ink,
   body->--dim, muted trail/date/read->--faint, accent (CTA + tag)->--accent, dividers/border->--hair,
   fonts->--font/--font-head/--mono. No baked blog-blue. The dead breadcrumb + CTA links become host-navigable
   via data-page (like the site nav); the meta strip gains a real, self-contained Copy-link button (mount) that
   copies the page URL to the clipboard with transient "Copied" feedback (the api-hero copy idiom). Entrance
   motion belongs to anims.js — only hover/press colour motion here (backgrounds swap instantly). Container
   queries only. */
.ws-hero.v-breadcrumb { padding:clamp(52px, 8cqw, 92px) 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-breadcrumb .ws-in { width:min(900px, 90cqw); display:flex; flex-direction:column; align-items:flex-start;
  text-align:left; gap:clamp(26px, 3.4cqw, 40px); }
.v-breadcrumb .brc-list { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; }
.v-breadcrumb .brc-crumb { display:inline-flex; align-items:center; gap:4px; min-width:0; }
.v-breadcrumb .brc-link { font:400 13px var(--font); color:var(--faint); cursor:pointer; text-decoration:none;
  transition:color 140ms linear; }
.v-breadcrumb .brc-link:hover { color:var(--ink); }
.v-breadcrumb .brc-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; }
.v-breadcrumb .brc-sep { color:color-mix(in srgb, var(--faint) 62%, transparent); font-size:13px; line-height:1; user-select:none; }
.v-breadcrumb .brc-current { font:400 13px var(--font); color:var(--dim); }
.v-breadcrumb .brc-body { align-self:stretch; display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(14px, 1.7cqw, 20px); }
.v-breadcrumb .brc-title { max-width:22ch; line-height:1.1; letter-spacing:-0.02em; }
.v-breadcrumb .brc-sub { max-width:60ch; }
.v-breadcrumb .brc-body .ws-ctarow { margin-top:6px; }
.v-breadcrumb .brc-meta { align-self:stretch; display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  padding-top:clamp(18px, 2.2cqw, 26px); border-top:var(--bw, 1px) solid var(--hair); }
.v-breadcrumb .brc-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:inline-grid; place-items:center; background-color:color-mix(in srgb, var(--accent) 18%, var(--panel));
  background-size:cover; background-position:center; color:var(--ink); font:700 14px var(--font-head, var(--font)); }
.v-breadcrumb .brc-author { font:600 14px var(--font); color:var(--ink); }
.v-breadcrumb .brc-dot { width:3px; height:3px; border-radius:50%; flex-shrink:0; background:var(--faint); }
.v-breadcrumb .brc-date, .v-breadcrumb .brc-read { font:400 13px var(--font); color:var(--faint); }
.v-breadcrumb .brc-tag { font:600 10.5px var(--mono); letter-spacing:1.4px; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 82%, var(--ink)); background:color-mix(in srgb, var(--accent) 13%, transparent);
  padding:4px 9px; border-radius:5px; }
.v-breadcrumb .brc-share { margin-left:auto; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  appearance:none; -webkit-appearance:none; padding:6px 13px; border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:transparent; color:var(--faint); font:500 12.5px var(--font); transition:color 140ms linear; }
.v-breadcrumb .brc-share:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 38%, var(--hair)); }
.v-breadcrumb .brc-share:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-breadcrumb .brc-share.ok { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-breadcrumb .brc-share-ico { display:inline-flex; }
.v-breadcrumb .brc-share-ico svg { width:14px; height:14px; display:block; }
@container site (max-width: 560px) {
  .v-breadcrumb .brc-share { margin-left:0; }
  .v-breadcrumb .brc-meta { gap:8px 10px; }
}
/* bootcamp — ported from SB_04 bootcamp-hero (headline + job-outcome checklist beside a course-details
   card with a live study-format toggle + apply CTA, over an alumni-outcomes stat band). Reuses ws-in.split
   for the two columns, ws-hcopy/ws-kick/ws-h1+ws-grad for the copy, ws-btn for the apply CTA, and
   ws-herostats/ws-hstat for the stat band. Origin --bch-* vars map to theme tokens: accent check bullets +
   active format pill, panel card, hair rules, faint labels. The split uses a high-specificity qualifier so
   it re-stacks explicitly at 860px; only color transitions on the interactive pills (selected background is
   instant); entrance motion is left to the reveal system. */
.ws-hero.v-bootcamp .ws-in.split.bcp-main { grid-template-columns:1.1fr minmax(0, 430px); align-items:center; gap:clamp(32px, 4.6cqw, 64px); }
.ws-hero.v-bootcamp .bcp-copy { display:flex; flex-direction:column; justify-content:center; gap:clamp(18px, 2.4cqw, 30px); min-width:0; }
.ws-hero.v-bootcamp .bcp-copy > * { margin:0; }
.ws-hero.v-bootcamp .bcp-copy .ws-h1 { max-width:18ch; }
.ws-hero.v-bootcamp .bcp-outcomes { list-style:none; display:flex; flex-direction:column; gap:clamp(10px, 1.2cqw, 14px); }
.ws-hero.v-bootcamp .bcp-outcome { position:relative; padding-left:30px; font:400 clamp(14px, 1.6cqw, 17px)/1.5 var(--font); color:var(--dim); }
.ws-hero.v-bootcamp .bcp-outcome::before { content:''; position:absolute; left:2px; top:0.42em; width:12px; height:7px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(-45deg); }
.ws-hero.v-bootcamp .bcp-card { border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); padding:clamp(20px, 2.4cqw, 30px);
  background-color:var(--panel); background-image:var(--surface-grad, none); display:flex; flex-direction:column; }
.ws-hero.v-bootcamp .bcp-rows { display:flex; flex-direction:column; }
.ws-hero.v-bootcamp .bcp-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; min-height:46px; }
.ws-hero.v-bootcamp .bcp-row + .bcp-row { border-top:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-bootcamp .bcp-klabel { flex:none; font:600 10.5px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.ws-hero.v-bootcamp .bcp-kval { text-align:right; font:600 14px var(--font); color:var(--ink); }
.ws-hero.v-bootcamp .bcp-pills { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ws-hero.v-bootcamp .bcp-pill { appearance:none; -webkit-appearance:none; cursor:pointer; padding:5px 13px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:transparent; color:var(--faint); font:500 12px var(--font); transition:color 120ms linear; }
.ws-hero.v-bootcamp .bcp-pill:hover { color:var(--ink); }
.ws-hero.v-bootcamp .bcp-pill.is-active { background:var(--accent-fill); border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--accent); }
.ws-hero.v-bootcamp .bcp-pill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ws-hero.v-bootcamp .bcp-card .ws-btn { margin-top:clamp(18px, 2cqw, 24px); width:100%; justify-content:center; }
.ws-hero.v-bootcamp .bcp-statswrap { margin-top:clamp(40px, 5cqw, 64px); padding-top:clamp(28px, 3.4cqw, 44px); border-top:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-bootcamp .bcp-stats { margin-top:0; }
@container site (max-width: 860px) {
  .ws-hero.v-bootcamp .ws-in.split.bcp-main { grid-template-columns:1fr; gap:clamp(28px, 5cqw, 40px); }
  .ws-hero.v-bootcamp .bcp-card { max-width:480px; }
}
@container site (max-width: 560px) {
  .ws-hero.v-bootcamp .bcp-row { padding:12px 0; }
}
/* careers — ported from SB_04 drafts/careers-hero (recruiting opener: copy + open-roles board +
   proof-stats strip). Origin's decorative 2x2 photo mosaic is reworked into a live, filterable
   open-roles board (ZenOS ships no real imagery) so the "View open roles" promise is real: department
   filter chips + single-select postings + a live status line, all keyboard/ARIA wired in mount.
   Origin --crh-* vars map to theme tokens (accent->--accent, heading->--ink, body->--dim,
   divider->--hair, font->--font). Entrance/reveal motion belongs to anims.js; only a tiny hiring
   pulse runs at rest (paused under reduced-motion). Prefix crs-; scoped under .ws-hero.v-careers. */
.ws-hero.v-careers .crs-top { display:grid; grid-template-columns:1.02fr minmax(0, 1fr);
  gap:clamp(30px, 4.4cqw, 60px); align-items:stretch; }
.ws-hero.v-careers .crs-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.ws-hero.v-careers .crs-copy .ws-sub { max-width:46ch; }
/* open-roles board */
.ws-hero.v-careers .crs-board { display:flex; flex-direction:column; gap:15px; min-width:0;
  padding:clamp(18px, 2.2cqw, 26px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  background:var(--panel); box-shadow:var(--elev, 0 0 #0000); }
.ws-hero.v-careers .crs-bhead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ws-hero.v-careers .crs-btitle { font:700 15px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.ws-hero.v-careers .crs-live { display:inline-flex; align-items:center; gap:7px;
  font:600 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--dim); }
.ws-hero.v-careers .crs-livedot { width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation:crs-pulse 2.4s ease-out infinite; }
@keyframes crs-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  70%, 100% { box-shadow:0 0 0 8px transparent; } }
.ws-hero.v-careers .crs-filters { display:flex; flex-wrap:wrap; gap:8px; }
.ws-hero.v-careers .crs-chip { appearance:none; -webkit-appearance:none; cursor:pointer;
  font:600 12px var(--font); color:var(--dim); background:transparent; border:var(--bw, 1px) solid var(--hair);
  border-radius:999px; padding:6px 13px; transition:color .18s ease, border-color .18s ease; }
.ws-hero.v-careers .crs-chip:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 42%, var(--hair)); }
.ws-hero.v-careers .crs-chip.is-on { color:var(--accent); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.ws-hero.v-careers .crs-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ws-hero.v-careers .crs-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:6px; max-height:340px; overflow-y:auto; }
.ws-hero.v-careers .crs-list li.is-hidden { display:none; }
.ws-hero.v-careers .crs-role { width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:14px; text-align:left; cursor:pointer; appearance:none; -webkit-appearance:none; background:transparent;
  border:1px solid transparent; border-radius:calc(var(--radius, 12px) * .55); padding:12px 14px; color:inherit;
  transition:border-color .18s ease, color .18s ease, transform .18s ease; }
.ws-hero.v-careers .crs-role:hover { border-color:var(--hair); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ws-hero.v-careers .crs-role[aria-current="true"] { border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent); }
.ws-hero.v-careers .crs-role:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ws-hero.v-careers .crs-rmain { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ws-hero.v-careers .crs-rtitle { font:600 14.5px var(--font); color:var(--ink); }
.ws-hero.v-careers .crs-rmeta { display:flex; align-items:center; gap:8px; font:500 12px var(--font);
  color:var(--dim); flex-wrap:wrap; }
.ws-hero.v-careers .crs-rdept { color:var(--accent); }
.ws-hero.v-careers .crs-rsep { color:var(--faint); }
.ws-hero.v-careers .crs-rarrow { flex:0 0 auto; display:inline-flex; color:var(--faint);
  transition:color .18s ease, transform .18s ease; }
.ws-hero.v-careers .crs-rarrow svg { width:16px; height:16px; display:block; }
.ws-hero.v-careers .crs-role:hover .crs-rarrow,
.ws-hero.v-careers .crs-role[aria-current="true"] .crs-rarrow { color:var(--accent); transform:translateX(3px); }
.ws-hero.v-careers .crs-status { margin:2px 0 0; min-height:1.2em; font:500 12.5px var(--font); color:var(--faint); }
/* proof-stats strip */
.ws-hero.v-careers .crs-stats { display:grid; grid-template-columns:repeat(4, 1fr);
  margin-top:clamp(40px, 5cqw, 64px); border-block:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-careers .crs-stat { display:flex; flex-direction:column; gap:6px;
  padding:clamp(20px, 2.4cqw, 28px) clamp(16px, 2cqw, 26px); }
.ws-hero.v-careers .crs-stat + .crs-stat { border-left:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-careers .crs-stat-val { font:800 clamp(24px, 3.2cqw, 32px) var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.02em; }
.ws-hero.v-careers .crs-stat-lbl { font:500 12px var(--font); color:var(--faint); letter-spacing:.02em; }
@container site (max-width: 860px) {
  .ws-hero.v-careers .crs-top { grid-template-columns:1fr; gap:36px; }
}
@container site (max-width: 560px) {
  .ws-hero.v-careers .crs-stats { grid-template-columns:repeat(2, 1fr); }
  .ws-hero.v-careers .crs-stat + .crs-stat { border-left:none; }
  .ws-hero.v-careers .crs-stat:nth-child(2n) { border-left:var(--bw, 1px) solid var(--hair); }
  .ws-hero.v-careers .crs-stat:nth-child(n+3) { border-top:var(--bw, 1px) solid var(--hair); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-hero.v-careers .crs-livedot { animation:none; }
}
/* centered — ported from SB_04 drafts/centered-hero (the classic symmetrical SaaS opener: a plain
   accent eyebrow, a big balanced headline, twin CTAs and an optional social-proof row, closed by a
   full-width hairline that marks the fold). Reuses ws-in.center + cen-wrap flex column (a 1:1 of the
   origin __content) + ws-h1/gradLast + ws-sub + ws-ctarow + btn. The flow trust row replaces the
   origin's position:absolute viewport pin (ZenOS heroes size to content, not 100vh) and the baked
   fade-up entrances are dropped (anims.js owns reveals). Origin --hero-* vars map to tokens:
   bg->--bg, text->--ink, text-secondary->--dim/--faint, accent->--accent, border->--hair,
   fonts->--font/--font-head. Container queries only, no blur. */
.v-centered .cen-wrap { display:flex; flex-direction:column; align-items:center; }
.v-centered .cen-tag { font:600 clamp(10px, 1.05cqw, 11.5px)/1 var(--font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:clamp(18px, 2.2cqw, 26px); }
.v-centered .ws-h1 { max-width:22ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-centered .ws-sub { max-width:50ch; margin-top:clamp(16px, 1.8cqw, 20px); text-wrap:balance; }
.v-centered .ws-ctarow { margin-top:clamp(26px, 3cqw, 34px); }
.v-centered .cen-trust { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(16px, 2.6cqw, 32px); margin-top:clamp(34px, 4.6cqw, 60px); }
.v-centered .cen-item { display:inline-flex; align-items:center; gap:8px; font:500 11.5px var(--font);
  letter-spacing:.04em; color:var(--faint); }
.v-centered .cen-dot { width:4px; height:4px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.v-centered .cen-divider { position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair); }
@container site (max-width: 560px) {
  .v-centered .cen-trust { flex-direction:column; gap:12px; }
}
/* case-study — ported from SB_04 drafts/case-study-hero (dark editorial case-study opener:
   breadcrumb / 40-60 project-meta + cover split with a bordered client·industry·year·services
   detail list / prev-next footer nav). Reuses ws-in for the measure and ws-hpanel for the cover
   (themed .ph placeholder when no img). Its own .csy-grid (NOT ws-in.split) so the global 860px
   split-stack rule doesn't apply — this block re-stacks itself at 860px. Origin --csh-* vars map
   to theme tokens: accent->--accent (breadcrumb link + nav arrows), heading->--ink, body->--dim,
   label->--faint, border->--hair. Entrance motion is the reveal system's job; only hover
   (opacity/transform/color) moves here — nothing transitions a background. */
.ws-hero.v-case-study .csy-wrap { display:flex; flex-direction:column; }
.ws-hero.v-case-study .csy-crumb { display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-bottom:clamp(28px, 4cqw, 52px); }
.ws-hero.v-case-study .csy-crumb-link { font:600 11px var(--mono); letter-spacing:1.4px; text-transform:uppercase;
  color:var(--accent); text-decoration:none; cursor:pointer; transition:opacity 160ms linear; }
.ws-hero.v-case-study .csy-crumb-link:hover { opacity:.68; }
.ws-hero.v-case-study .csy-crumb-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.ws-hero.v-case-study .csy-crumb-sep { font-size:12px; line-height:1; color:var(--faint); }
.ws-hero.v-case-study .csy-crumb-cur { font:500 11px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.ws-hero.v-case-study .csy-grid { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);
  gap:clamp(30px, 5cqw, 72px); align-items:start; }
.ws-hero.v-case-study .csy-meta { min-width:0; }
.ws-hero.v-case-study .csy-title { font-size:clamp(28px, 4.2cqw, 52px); line-height:1.1; letter-spacing:-0.02em; }
.ws-hero.v-case-study .csy-desc { margin-top:20px; max-width:44ch; color:var(--dim); }
.ws-hero.v-case-study .csy-details { margin-top:clamp(28px, 3.4cqw, 44px); display:flex; flex-direction:column; }
.ws-hero.v-case-study .csy-detail { display:flex; flex-direction:column; gap:4px; padding:14px 0; border-top:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-case-study .csy-detail:last-child { border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-case-study .csy-dt { font:600 10px var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); }
.ws-hero.v-case-study .csy-dd { font:500 14.5px var(--font); color:var(--ink); }
.ws-hero.v-case-study .csy-services { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.ws-hero.v-case-study .csy-services li { font:500 14.5px var(--font); color:var(--ink); }
.ws-hero.v-case-study .csy-visual { align-self:start; width:100%; aspect-ratio:16 / 9; min-height:0; }
.ws-hero.v-case-study .csy-nav { display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin-top:clamp(30px, 4cqw, 48px); padding-top:24px; border-top:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-case-study .csy-nav-link { display:inline-flex; align-items:center; gap:12px; min-width:0; text-decoration:none;
  color:var(--dim); font:500 13px var(--font); letter-spacing:.3px; cursor:pointer; transition:color 160ms linear; }
.ws-hero.v-case-study .csy-nav-link:hover { color:var(--ink); }
.ws-hero.v-case-study .csy-nav-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.ws-hero.v-case-study .csy-next { text-align:right; }
.ws-hero.v-case-study .csy-nav-arrow { flex-shrink:0; font-size:16px; line-height:1; color:var(--accent);
  transition:transform 160ms var(--ease-pop, ease-out); }
.ws-hero.v-case-study .csy-prev:hover .csy-nav-arrow { transform:translateX(-3px); }
.ws-hero.v-case-study .csy-next:hover .csy-nav-arrow { transform:translateX(3px); }
@container site (max-width: 860px) {
  .ws-hero.v-case-study .csy-grid { grid-template-columns:1fr; gap:clamp(24px, 5cqw, 40px); }
  .ws-hero.v-case-study .csy-visual { order:-1; }
}
@container site (max-width: 560px) {
  .ws-hero.v-case-study .csy-nav { gap:14px; }
  .ws-hero.v-case-study .csy-nav-link { font-size:12px; gap:9px; }
}
/* card — ported from SB_04 drafts/card-hero (editorial data-card manifesto: a live "signal" eyebrow, a
   serif display headline and an asymmetric, hairline-ruled grid of numbered "artifact" cards whose
   gradient accent bars reveal on hover). Reuses ws-in for the centered column + ws-kick / ws-h1 +
   gradLast / ws-sub for the header; the card grid is data-driven (items prop) with auto-numbered
   indices. Origin --hero-* vars map to theme tokens: bg->--bg, text->--ink, dim text->--dim/--faint,
   surfaces->--panel + accent tints, borders->--hair, blue accent + gradient->--accent/--accent2,
   fonts->--font-head (display) / --font (body) / --mono (signal, index, meta). The blurred glow orbs
   become a blur-free radial wash (::before, like v-aurora) and the baked grain texture is dropped for
   theme portability; the staggered card-entrance keyframes are dropped (anims.js owns entrances). Card
   hover keeps the border-color shift + accent-bar reveal (opacity/color only; the hover surface flips
   instantly) and the live "signal" dot keeps a gentle pulse (static under reduced-motion). Container
   queries only. */
.ws-hero.v-card { position:relative; overflow:hidden; isolation:isolate; }
.ws-hero.v-card::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 42% at 15% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(44% 40% at 90% 98%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent), transparent 72%); }
.v-card .crd-wrap { position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(32px, 5cqw, 58px); }
.v-card .crd-head { display:flex; flex-direction:column; align-items:flex-start; }
.v-card .crd-head > * { margin:0; }
.v-card .crd-signal { display:inline-flex; align-items:center; gap:0.7em; text-transform:uppercase;
  margin-bottom:clamp(16px, 2.2cqw, 28px); }
.v-card .crd-dot { width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); animation:crdPulse 2.6s ease-in-out infinite; }
.v-card .crd-h { max-width:20ch; margin-bottom:clamp(14px, 1.8cqw, 22px); }
.v-card .crd-sub { max-width:52ch; }
.v-card .crd-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(10px, 1.3cqw, 14px); }
.v-card .crd-card { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:0.7rem;
  padding:clamp(22px, 2.7cqw, 40px); border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  transition:border-color 200ms linear; }
.v-card .crd-card > * { margin:0; }
.v-card .crd-card:hover { border-color:color-mix(in srgb, var(--accent) 38%, var(--hair));
  background:color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.v-card .crd-accent { position:absolute; top:0; left:0; right:0; height:2px; opacity:0;
  transition:opacity 220ms linear;
  background:linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent2, var(--accent)) 70%, transparent); }
.v-card .crd-card:hover .crd-accent { opacity:1; }
.v-card .crd-index { font:700 11px var(--mono); letter-spacing:2px; color:var(--accent); opacity:0.7; }
.v-card .crd-ctitle { font:700 clamp(16px, 1.7cqw, 19px)/1.3 var(--font); letter-spacing:-0.01em; color:var(--ink); }
.v-card .crd-desc { font:400 clamp(13px, 1.4cqw, 14.5px)/1.65 var(--font); color:var(--dim); max-width:42ch; }
.v-card .crd-meta { margin-top:0.3rem; padding-top:0.7rem; border-top:var(--bw, 1px) solid var(--hair);
  font:400 10.5px var(--mono); letter-spacing:0.5px; text-transform:lowercase; color:var(--faint); }
.v-card .crd-baseline { position:absolute; left:10%; right:10%; bottom:clamp(26px, 4cqw, 50px); height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent2, var(--accent)) 75%, transparent);
  opacity:0.3; pointer-events:none; }
@keyframes crdPulse { 0%, 100% { opacity:1; } 50% { opacity:0.35; } }
@container site (max-width: 860px) {
  .v-card .crd-grid { grid-template-columns:1fr; }
}
@container site (max-width: 560px) {
  .v-card .crd-card { padding:clamp(18px, 5cqw, 26px); }
  .v-card .crd-desc { max-width:100%; }
  .v-card .crd-baseline { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-card .crd-dot { animation:none; }
}
/* changelog — ported from SB_04 drafts/changelog-hero (a two-column "What's new" release opener: a left
   version-detail panel — mono version badge, headline, release date, summary — beside a right "Recent
   releases" list of version entries). The static origin list is made REAL: each entry is a <button> that
   drives the left detail panel (master/detail) with aria-current selection, a polite status line and full
   arrow-key / Home-End navigation; the latest release keeps a fixed accent rail + "Latest" pill (selection
   is a separate, movable tint). Its own .chl-grid (not ws-in.split) so the global split-stack rule doesn't
   apply — it re-stacks itself at 860px, and the origin's position:sticky left rail is dropped (ZenOS heroes
   size to content, not 100vh). Origin --clh-* vars map to tokens: bg->--bg, heading->--ink, body->--dim/
   --faint, accent->--accent (+ --accent-fill tint), dividers->--hair/--hair-soft, mono->--mono. The source
   carries no change-type tags, so none were invented (faithful). Container queries only; hover/selected
   backgrounds switch instantly (only color/border/transform transition); no blur. */
.ws-hero.v-changelog .chl-grid { display:grid; grid-template-columns:minmax(0, 0.82fr) minmax(0, 1fr);
  gap:clamp(36px, 5.4cqw, 80px); align-items:start; }
.v-changelog .chl-detail { display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(14px, 1.8cqw, 20px); }
.v-changelog .chl-badge { font:700 11px var(--mono); letter-spacing:.06em; color:var(--accent);
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:5px; padding:4px 10px; }
.v-changelog .chl-detail .ws-h1 { letter-spacing:-0.03em; }
.v-changelog .chl-date { margin:0; font:500 12.5px var(--mono); letter-spacing:.02em; color:var(--faint); }
.v-changelog .chl-summary { max-width:40ch; margin:0; }
.v-changelog .chl-releases { display:flex; flex-direction:column; gap:clamp(14px, 1.6cqw, 20px); min-width:0; }
.v-changelog .chl-label { margin:0; font:600 11px var(--font); letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); }
.v-changelog .chl-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.v-changelog .chl-item { display:flex; }
.v-changelog .chl-entry { width:100%; text-align:left; cursor:pointer; appearance:none; -webkit-appearance:none;
  background:transparent; border:0; border-left:2px solid var(--hair); border-top:var(--bw, 1px) solid var(--hair-soft);
  padding:clamp(13px, 1.5cqw, 17px) clamp(14px, 1.6cqw, 20px); display:flex; flex-direction:column; gap:7px;
  color:inherit; font:inherit; transition:border-color .16s ease, transform .16s ease; }
.v-changelog .chl-item:first-child .chl-entry { border-top:0; }
.v-changelog .chl-entry:hover { border-left-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-changelog .chl-entry[aria-current="true"] { border-left-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent); }
.v-changelog .chl-entry:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-changelog .chl-emeta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.v-changelog .chl-ever { font:700 13px var(--mono); letter-spacing:.04em; color:var(--ink); }
.v-changelog .chl-entry.is-latest .chl-ever { color:var(--accent); }
.v-changelog .chl-edate { font:500 12px var(--mono); letter-spacing:.02em; color:var(--faint); }
.v-changelog .chl-tag { margin-left:auto; font:700 9px var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-fill);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:999px; padding:2px 8px; }
.v-changelog .chl-enote { font:400 13.5px/1.55 var(--font); color:var(--dim); }
.v-changelog .chl-status { min-height:1.1em; margin:2px 0 0; font:500 12px var(--font); color:var(--faint); }
.v-changelog .chl-archive { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-top:2px;
  color:var(--accent); font:600 13px var(--font); text-decoration:none; cursor:pointer;
  transition:opacity .16s ease, transform .16s ease; }
.v-changelog .chl-archive svg { width:15px; height:15px; display:block; }
.v-changelog .chl-archive:hover { opacity:.72; transform:translateX(2px); }
.v-changelog .chl-archive:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
@container site (max-width: 860px) {
  .ws-hero.v-changelog .chl-grid { grid-template-columns:1fr; gap:clamp(28px, 6cqw, 40px); }
  .v-changelog .chl-summary { max-width:60ch; }
}
@container site (max-width: 560px) {
  .v-changelog .chl-emeta { gap:8px; }
  .v-changelog .chl-tag { margin-left:0; }
}
/* clinic — ported from SB_04 drafts/clinic-hero (a medical-clinic opener: an accent specialty
   eyebrow, the clinic name, a "now accepting new patients" trust line, an icon detail list
   [address / phone / hours], a Book-an-Appointment CTA, and a service-tag bar below the split).
   Reuses ws-in.split for copy|image (the global 860px rule stacks it), ws-hcopy, ws-h1/gradLast,
   ws-hpanel for the photo (themed .ph placeholder when no img) and ws-btn.primary for the CTA.
   The origin's static service tags become a REAL single-select service picker (role=radiogroup,
   roving tabindex, arrow/Home/End/Space keys) and the CTA writes a live client-side confirmation
   into an aria-live status line — nothing posts. Origin --clih-* vars map to tokens: bg->--bg,
   heading->--ink, body->--dim/--faint, accent->--accent, border/divider->--hair, fonts->--font;
   the trust green is a fixed semantic hue, kept literal. Baked fade-up/fade-in entrance keyframes
   are dropped (anims.js owns entrances) — only hover/selection + a gentle trust pulse move here, and
   selection/hover backgrounds flip instantly (never transitioned). Container queries only, no blur. */
.v-clinic .cln-main { align-items:stretch; }
.v-clinic .cln-copy { display:flex; flex-direction:column; justify-content:center; }
.v-clinic .cln-spec { font:600 clamp(11px, 1.2cqw, 12.5px) var(--font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:clamp(12px, 1.6cqw, 16px); }
.v-clinic .cln-name { max-width:15ch; line-height:1.06; letter-spacing:-0.03em; text-wrap:balance; }
.v-clinic .cln-trust { align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(12px, 1.6cqw, 16px); font:600 clamp(12.5px, 1.3cqw, 13.5px) var(--font);
  letter-spacing:.01em; color:#22c55e; }
.v-clinic .cln-pulse { width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0;
  box-shadow:0 0 7px color-mix(in srgb, #22c55e 65%, transparent); animation:clnPulse 2.6s ease-in-out infinite; }
.v-clinic .cln-details { display:flex; flex-direction:column; margin-top:clamp(22px, 2.8cqw, 30px); }
.v-clinic .cln-drow { display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-clinic .cln-drow:first-child { border-top:var(--bw, 1px) solid var(--hair); }
.v-clinic .cln-dico { flex-shrink:0; display:flex; width:17px; height:17px; margin-top:1px; color:var(--faint); }
.v-clinic .cln-dico svg { width:17px; height:17px; }
.v-clinic .cln-dtext { font:400 clamp(13px, 1.35cqw, 14px)/1.5 var(--font); color:var(--dim); }
.v-clinic .cln-dlink { font:400 clamp(13px, 1.35cqw, 14px)/1.5 var(--font); color:var(--dim);
  text-decoration:none; transition:color 160ms linear; }
.v-clinic .cln-dlink:hover { color:var(--ink); }
.v-clinic .cln-dlink:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.v-clinic .cln-book { align-self:flex-start; margin-top:clamp(24px, 3cqw, 32px); }
.v-clinic .cln-note { min-height:1.25em; margin-top:14px; font:500 12px/1.5 var(--font); color:var(--faint);
  letter-spacing:.01em; transition:color 160ms linear; }
.v-clinic .cln-note.ok { color:#22c55e; }
/* service picker — the origin's static tag bar, now a real single-select radiogroup */
.v-clinic .cln-services { display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:clamp(30px, 4cqw, 52px); padding-top:clamp(22px, 2.8cqw, 30px); border-top:var(--bw, 1px) solid var(--hair); }
.v-clinic .cln-slabel { font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:var(--faint); margin-right:6px; }
.v-clinic .cln-tag { font:500 clamp(12px, 1.3cqw, 13px) var(--font); color:var(--dim); white-space:nowrap;
  padding:7px 15px; border:var(--bw, 1px) solid var(--hair); border-radius:100px; background:transparent; cursor:pointer;
  letter-spacing:.01em; transition:color 160ms linear, border-color 160ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-clinic .cln-tag:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 35%, transparent); }
.v-clinic .cln-tag:active { transform:scale(0.97); }
.v-clinic .cln-tag:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-clinic .cln-tag.on { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:var(--accent-fill); }
@keyframes clnPulse { 0%, 100% { opacity:1; } 50% { opacity:0.4; } }
@container site (max-width: 560px) {
  .v-clinic .cln-slabel { width:100%; margin:0 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-clinic .cln-pulse { animation:none; }
}
/* cinematic — ported from SB_04 drafts/cinematic-hero (a full-bleed film-noir opener: a dashed accent
   overline, a large italic display headline with a gradient accent word, a tagline and twin CTAs, all
   vertically centred over a CSS-generated atmosphere — an off-centre accent spotlight, a lower accent
   glow and a corner vignette — closed by a bottom-right scroll cue and an accent-gradient fold hairline).
   Reuses ws-in + ws-kick / ws-h1 + gradLast / ws-sub / ws-ctarow + btn; the atmosphere is static layered
   radial gradients (the v-aurora / v-abstract idiom), NOT the origin's drifting blend-mode layers — the
   baked drift / light-sweep / cinematic-reveal keyframes are dropped (anims.js owns entrances; nothing
   rides blur). Origin --hero-* vars map to tokens: bg->--bg, text->--ink, text-secondary->--dim/--faint,
   accent->--accent (+ --accent2 for the second glow), fonts->--font-head (display) / --font (body) /
   --mono (overline + scroll cue). The dark-cinematic mood is kept theme-portably: the vignette deepens
   --bg toward black via color-mix (the v-starfield / v-gridpulse idiom) rather than a baked dark hex, and
   an optional img prop drops a cover photo behind the same veil. The origin's decorative scroll indicator
   becomes a REAL focusable button (mount() scrolls the site stage); its line keeps a gentle pulse (static
   under reduced-motion, like v-card's signal dot). Container queries only. */
.ws-hero.v-cinematic { position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(460px, 84cqh, 820px); padding-block:clamp(80px, 12cqh, 130px); overflow:hidden;
  isolation:isolate; background-color:var(--bg); background-size:cover; background-position:center; }
.v-cinematic .cin-atmos { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v-cinematic .cin-glow { position:absolute; inset:0;
  background:
    radial-gradient(72% 56% at 72% 16%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(60% 62% at 16% 82%, color-mix(in srgb, var(--accent2, var(--accent)) 13%, transparent), transparent 58%); }
.v-cinematic .cin-veil { position:absolute; inset:0;
  background:
    radial-gradient(135% 125% at 50% 30%, transparent 38%, color-mix(in srgb, var(--bg) 60%, black) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--bg) 55%, transparent), transparent 40%); }
.v-cinematic .cin-wrap { position:relative; z-index:1; }
.v-cinematic .cin-over { display:inline-flex; align-items:center; gap:.85em; margin-bottom:clamp(18px, 2.4cqw, 28px); }
.v-cinematic .cin-dash { width:2.4em; height:1px; background:var(--accent); flex:none; }
.v-cinematic .cin-h { font-style:italic; font-size:clamp(38px, 8.4cqw, 92px); line-height:1.02;
  letter-spacing:-0.02em; max-width:15ch; text-wrap:balance; }
.v-cinematic .cin-tag { margin-top:clamp(16px, 2cqw, 22px); max-width:42ch; }
.v-cinematic .ws-ctarow { margin-top:clamp(26px, 3cqw, 34px); }
.v-cinematic .cin-scroll { position:absolute; right:clamp(16px, 2.4cqw, 30px); bottom:clamp(18px, 2.6cqw, 32px);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:9px; padding:6px 6px 0;
  border:0; background:none; cursor:pointer; color:var(--faint); transition:color 160ms linear; }
.v-cinematic .cin-scroll:hover { color:var(--ink); }
.v-cinematic .cin-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
.v-cinematic .cin-scroll-t { font:600 9.5px var(--mono); letter-spacing:2.5px; text-transform:uppercase; writing-mode:vertical-lr; }
.v-cinematic .cin-scroll-line { width:1px; height:clamp(30px, 4cqw, 46px); transform-origin:top;
  background:linear-gradient(180deg, currentColor, transparent); animation:cinScroll 2.1s ease-in-out infinite; }
.v-cinematic .cin-divider { position:absolute; left:0; right:0; bottom:0; z-index:1; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 34%, transparent) 30%,
    color-mix(in srgb, var(--accent) 34%, transparent) 70%, transparent); }
/* poster mode — centre the column and drop the overline dash (origin .cinematic-hero--centered) */
.v-cinematic.cin-center .cin-wrap { text-align:center; }
.v-cinematic.cin-center .cin-over { justify-content:center; }
.v-cinematic.cin-center .cin-dash { display:none; }
.v-cinematic.cin-center .cin-h { max-width:18ch; margin-inline:auto; }
@keyframes cinScroll { 0%, 100% { opacity:.35; transform:scaleY(.55); } 50% { opacity:1; transform:scaleY(1); } }
@container site (max-width: 560px) {
  .ws-hero.v-cinematic { min-height:clamp(430px, 76cqh, 640px); padding-block:clamp(64px, 12cqh, 96px); }
  .v-cinematic .cin-tag { max-width:100%; }
  .v-cinematic .cin-scroll { right:12px; bottom:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-cinematic .cin-scroll-line { animation:none; }
}
/* coming-soon — ported from SB_04 drafts/coming-soon-hero (a centered launch teaser: wordmark,
   headline, an accent product line, a LIVE countdown to a data-driven target date, an email notify
   form and social links). Origin --csh2-* vars map to theme tokens: bg->--bg, heading->--ink,
   body->--dim/--faint, accent->--accent, border->--hair, input surface->an --ink tint, mono
   digits->--mono. The full-viewport centering is dropped for the standard ws-sec fold rhythm; the
   countdown ticks via whenVisible in mount (pauses offscreen) and the form confirms via aria-live.
   Transitions ride opacity/color only, no blur; container queries handle narrow reflow. */
.v-coming-soon .cms-wrap { display:flex; flex-direction:column; align-items:center; }
.v-coming-soon .cms-logo { display:inline-flex; align-items:center; gap:10px; margin-bottom:clamp(26px, 3.4cqw, 42px); }
.v-coming-soon .cms-mark { width:26px; height:26px; border-radius:7px; flex:none;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); }
.v-coming-soon .cms-brand { font:600 clamp(15px, 1.6cqw, 17px) var(--font-head, var(--font));
  color:var(--ink); letter-spacing:.01em; }
.v-coming-soon .cms-h { max-width:18ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-coming-soon .cms-product { margin:clamp(12px, 1.5cqw, 16px) 0 0;
  font:500 clamp(15px, 1.9cqw, 19px) var(--font); color:var(--accent); letter-spacing:.01em; }
.v-coming-soon .cms-desc { margin-top:clamp(12px, 1.5cqw, 16px); max-width:52ch; }
.v-coming-soon .cms-countdown { display:flex; align-items:flex-start; justify-content:center;
  flex-wrap:wrap; gap:clamp(8px, 1.4cqw, 14px); margin-top:clamp(30px, 4.2cqw, 46px); }
.v-coming-soon .cms-unit { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:62px; }
.v-coming-soon .cms-num { font:800 clamp(34px, 6cqw, 62px)/1 var(--mono); color:var(--ink);
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.v-coming-soon .cms-ulabel { font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); }
.v-coming-soon .cms-sep { font:800 clamp(34px, 6cqw, 62px)/1 var(--mono); color:var(--faint);
  opacity:.35; user-select:none; }
.v-coming-soon .cms-countdown.cms-done .cms-num { color:var(--accent); }
.v-coming-soon .cms-form { display:flex; width:min(420px, 100%); margin-top:clamp(24px, 3.2cqw, 34px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55); overflow:hidden;
  transition:border-color 160ms linear; }
.v-coming-soon .cms-form:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-coming-soon .cms-input { flex:1; min-width:0; padding:12px 15px; border:none; outline:none;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:400 14px var(--font); }
.v-coming-soon .cms-input::placeholder { color:var(--faint); }
.v-coming-soon .cms-btn { flex:none; padding:12px 20px; border:none; cursor:pointer; white-space:nowrap;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:600 13px var(--font); transition:opacity 140ms linear; }
.v-coming-soon .cms-btn:hover { opacity:.9; }
.v-coming-soon .cms-btn:active { opacity:.82; }
.v-coming-soon .cms-btn:focus-visible,
.v-coming-soon .cms-slink:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-coming-soon .cms-note { min-height:1.25em; margin-top:12px; font:500 12.5px var(--font); color:var(--dim); }
.v-coming-soon .cms-note.cms-ok { color:var(--accent); }
.v-coming-soon .cms-note.cms-err { color:#e5484d; }
.v-coming-soon .cms-social { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px; margin-top:clamp(22px, 3cqw, 30px); }
.v-coming-soon .cms-slink { font:500 13px var(--font); color:var(--dim); text-decoration:none; cursor:pointer;
  transition:color 140ms linear; }
.v-coming-soon .cms-slink:hover { color:var(--ink); }
.v-coming-soon .cms-sdiv { color:var(--faint); opacity:.5; user-select:none; font-size:13px; }
@container site (max-width: 560px) {
  .v-coming-soon .cms-unit { min-width:50px; gap:7px; }
  .v-coming-soon .cms-num, .v-coming-soon .cms-sep { font-size:clamp(30px, 11cqw, 44px); }
  .v-coming-soon .cms-ulabel { font-size:9px; letter-spacing:.1em; }
}
/* community — ported from SB_04 drafts/community-hero (a social-proof split opener: headline + twin CTAs +
   stat rail on the left, a "Live feed" activity panel on the right). Reuses ws-in.split (the global 860px
   rule stacks it), ws-hcopy + ws-kick / ws-h1+gradLast / ws-sub / ws-ctarow + btn for the copy, and
   ws-herostats.start / ws-hstat for the stat rail. The right feed is its own cmn- block. The origin's
   faked "Live feed" is made REAL in mount(): whenVisible-gated, a new post streams in every ~4-5s (drops
   the oldest, ages every timestamp), and each like is a genuine aria-pressed toggle (event-delegated so it
   survives the stream re-render). Avatars are monogram initials by default (optional per-post img). Origin
   --cmh-* vars map to tokens: bg->--bg, feed surface->--panel, text->--ink, sub->--dim, muted->--faint,
   accent->--accent, divider->--hair; the live dot keeps a literal semantic green (ok=green). Baked fade-up
   entrances dropped (anims.js owns entrances); only the stream-arrival + like motion (opacity/transform)
   and the dot pulse move — no background transitions, no blur. Container queries only. */
.v-community .ws-in.split { grid-template-columns:1.05fr 1fr; gap:0; align-items:stretch; }
.v-community .ws-hcopy { display:flex; flex-direction:column; justify-content:center;
  padding-right:clamp(28px, 4cqw, 56px); }
.v-community .ws-hcopy .ws-h1 { max-width:16ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-community .cmn-stats { gap:0; }
.v-community .cmn-side { display:flex; flex-direction:column; gap:14px; min-width:0;
  padding-left:clamp(28px, 4cqw, 56px); border-left:var(--bw, 1px) solid var(--hair); justify-content:center; }
.v-community .cmn-feedhead { display:flex; align-items:center; gap:9px; }
.v-community .cmn-feedtitle { font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-community .cmn-live { width:6px; height:6px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 8px color-mix(in srgb, #22c55e 60%, transparent); animation:cmnPulse 2s ease-in-out infinite; }
.v-community .cmn-feed { display:flex; flex-direction:column; border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); background:var(--panel); overflow:hidden; }
.v-community .cmn-item { display:flex; align-items:flex-start; gap:13px; padding:15px 17px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-community .cmn-item:last-child { border-bottom:none; }
.v-community .cmn-av { width:36px; height:36px; border-radius:50%; flex-shrink:0; margin-top:2px;
  background-size:cover; background-position:center; display:grid; place-items:center; }
.v-community .cmn-av.mono { background:color-mix(in srgb, var(--accent) 16%, var(--panel));
  color:var(--accent); font:700 12px var(--font); letter-spacing:.5px; }
.v-community .cmn-body { flex:1; min-width:0; }
.v-community .cmn-meta { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.v-community .cmn-user { font:600 13px var(--font); color:var(--ink); }
.v-community .cmn-time { font:400 11px var(--font); color:var(--faint); }
.v-community .cmn-text { margin:0 0 8px; font:400 13.5px/1.6 var(--font); color:var(--dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.v-community .cmn-actions { display:flex; align-items:center; gap:14px; }
.v-community .cmn-like { display:inline-flex; align-items:center; gap:6px; padding:0; border:none;
  background:none; cursor:pointer; font:500 12px var(--font); color:var(--faint); transition:color 140ms linear; }
.v-community .cmn-like svg { width:13px; height:13px; transition:transform 140ms var(--ease-pop, ease-out); }
.v-community .cmn-like:hover { color:var(--dim); }
.v-community .cmn-like.on { color:var(--accent); }
.v-community .cmn-like.on svg { fill:var(--accent); stroke:var(--accent); transform:scale(1.1); }
.v-community .cmn-like:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; }
.v-community .cmn-tag { font:600 10px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--accent); opacity:.8; }
.v-community .cmn-enter { animation:cmnEnter 420ms var(--ease-pop, ease-out) both; }
@keyframes cmnPulse { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.8); } }
@keyframes cmnEnter { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@container site (max-width: 860px) {
  .v-community .ws-hcopy { padding-right:0; }
  .v-community .cmn-side { padding-left:0; border-left:none; }
}
@container site (max-width: 560px) {
  .v-community .cmn-stats.ws-herostats.start { flex-direction:row; flex-wrap:wrap; gap:18px 26px; align-items:flex-start; }
  .v-community .cmn-stats.ws-herostats.start .ws-hstat { align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .v-community .cmn-live { animation:none; }
  .v-community .cmn-enter { animation:none; }
}
/* comparison — ported from SB_04 drafts/comparison-hero (a side-by-side "us vs them" feature face-off: a
   centered header over a two-column arena — your column vs the rival — split by a "vs" medallion, each
   capability a check/cross row). The static origin is made REAL: every "your" row is a selectable button
   that lines up its paired rival shortcoming (sync .is-sel highlight across the divider) and writes a live
   head-to-head into a polite status line, with roving arrow-key / Home-End navigation and aria-pressed
   state. Origin --cph-* vars map to tokens: bg->--bg, heading->--ink, body->--dim/--faint, borders/divider
   ->--hair, accent->--accent, fonts->--font/--mono; the "your" column is emphasized with ACCENT (tint bg +
   border + a flag pill + accent label) instead of the origin's baked green. check=ok-green / cross=bad-red
   stay as the only literal semantic hues (scoped --cmp-ok/--cmp-bad). Reuses ws-in/ws-kick/ws-h1+gradLast/
   ws-sub for the header and btn() for the CTA. Its own .cmp-arena grid re-stacks at 640px (columns stack,
   the vs-divider turns horizontal) so it never overflows narrow; container queries only, hover/selected
   backgrounds switch instantly (only color/border transition), no blur. */
.v-comparison { --cmp-ok:#4ade80; --cmp-bad:#f26d6d; }
.v-comparison .cmp-wrap { display:flex; flex-direction:column; gap:clamp(34px, 5cqw, 60px); }
.v-comparison .cmp-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.v-comparison .cmp-head > * { margin:0; }
.v-comparison .cmp-head .ws-kick { color:var(--faint); }
.v-comparison .cmp-head .ws-sub { max-width:52ch; }
.v-comparison .cmp-arena { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0;
  max-width:960px; width:100%; margin-inline:auto; }
.v-comparison .cmp-col { display:flex; flex-direction:column; gap:clamp(20px, 2.4cqw, 30px);
  padding:clamp(24px, 2.8cqw, 40px) clamp(20px, 2.4cqw, 32px); min-width:0; }
.v-comparison .cmp-us { background:color-mix(in srgb, var(--accent) 6%, var(--panel));
  border:1px solid color-mix(in srgb, var(--accent) 32%, var(--hair));
  border-radius:var(--radius, 12px) 0 0 var(--radius, 12px); }
.v-comparison .cmp-them { background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-left:none;
  border-radius:0 var(--radius, 12px) var(--radius, 12px) 0; }
.v-comparison .cmp-chead { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:24px; }
.v-comparison .cmp-clabel { font:700 11px var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); }
.v-comparison .cmp-us .cmp-clabel { color:var(--accent); }
.v-comparison .cmp-flag { font:700 9.5px var(--mono); letter-spacing:1.2px; text-transform:uppercase; color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.v-comparison .cmp-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; flex:1; }
.v-comparison .cmp-row { width:100%; text-align:left; appearance:none; -webkit-appearance:none; cursor:pointer;
  background:transparent; border:0; border-left:2px solid transparent; border-radius:0 8px 8px 0;
  padding:9px 10px 9px 12px; display:flex; align-items:center; gap:11px; min-width:0;
  color:var(--ink); font:inherit; transition:color .16s linear, border-color .16s linear; }
.v-comparison .cmp-row:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.v-comparison .cmp-row[aria-pressed="true"] { background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-left-color:var(--accent); }
.v-comparison .cmp-row:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-comparison .cmp-trow { display:flex; align-items:center; gap:11px; padding:9px 10px 9px 12px;
  border-left:2px solid transparent; border-radius:0 8px 8px 0; color:var(--dim); transition:color .16s linear; }
.v-comparison .cmp-trow.is-sel { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.v-comparison .cmp-txt { font:500 clamp(13.5px, 1.5cqw, 15px)/1.45 var(--font); min-width:0; }
.v-comparison .cmp-mark { flex:none; width:19px; height:19px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; }
.v-comparison .cmp-mark svg { width:12px; height:12px; display:block; }
.v-comparison .cmp-ok { color:var(--cmp-ok); background:color-mix(in srgb, var(--cmp-ok) 15%, transparent); }
.v-comparison .cmp-bad { color:var(--cmp-bad); background:color-mix(in srgb, var(--cmp-bad) 14%, transparent); }
.v-comparison .cmp-cta { margin-top:auto; }
.v-comparison .cmp-cta .ws-btn { width:100%; justify-content:center; }
.v-comparison .cmp-note { margin-top:auto; font:italic 400 12.5px var(--font); color:var(--faint); }
.v-comparison .cmp-divider { position:relative; display:flex; align-items:center; justify-content:center;
  width:clamp(40px, 5cqw, 56px); }
.v-comparison .cmp-divider::before { content:''; position:absolute; top:8%; bottom:8%; left:50%; width:1px;
  transform:translateX(-50%); background:var(--hair); }
.v-comparison .cmp-vs { position:relative; z-index:1; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--panel-2); border:var(--bw, 1px) solid var(--hair);
  font:700 10px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--dim); }
.v-comparison .cmp-status { min-height:1.3em; margin:0; text-align:center; font:500 12.5px var(--font); color:var(--faint); }
@container site (max-width: 640px) {
  .v-comparison .cmp-arena { grid-template-columns:1fr; }
  .v-comparison .cmp-us { border-radius:var(--radius, 12px) var(--radius, 12px) 0 0; }
  .v-comparison .cmp-them { border-left:var(--bw, 1px) solid var(--hair); border-top:none;
    border-radius:0 0 var(--radius, 12px) var(--radius, 12px); }
  .v-comparison .cmp-divider { width:100%; height:clamp(36px, 9cqw, 44px); }
  .v-comparison .cmp-divider::before { top:50%; bottom:auto; left:8%; right:8%; width:auto; height:1px;
    transform:translateY(-50%); }
}
@container site (max-width: 560px) {
  .v-comparison .cmp-col { padding:clamp(18px, 5cqw, 24px); }
  .v-comparison .cmp-txt { font-size:13.5px; }
}
/* countdown — ported from SB_04 drafts/countdown-hero (a centered launch-teaser fold: an eyebrow, a
   headline, a LIVE drift-free countdown of giant day/hour/minute/second digits split by hairline
   dividers, an email notify form, over an ambient accent glow). Kept DISTINCT from v-coming-soon
   (which is colon-separated mono digits + wordmark/product line/social links): this one is
   divider-barred display-font digits with no wordmark. Origin --cd-* vars map to tokens: bg->--bg,
   text->--ink, text-secondary->--dim/--faint, accent->--accent, divider/border->--hair, input
   surface->an --ink tint, font->--font-head (digits + headline) / --font (body). The origin's
   full-viewport centering + baked fade-up entrances are dropped (standard ws-sec fold rhythm; anims.js
   owns entrances); the ambient glow is theme-portable via color-mix (no baked blue). The only motion
   is the per-tick digit nudge (functional state, killed under reduced-motion) + hover/focus. Countdown
   ticks via whenVisible in mount (pauses offscreen); role=timer + a throttled polite summary announce
   it; the form confirms via aria-live. Transitions ride transform/opacity/color only, no blur;
   container queries handle narrow reflow. */
.ws-hero.v-countdown { position:relative; isolation:isolate; overflow:hidden; }
.v-countdown .cdn-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 62%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 66%),
    radial-gradient(ellipse 42% 42% at 50% 12%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%); }
.v-countdown .cdn-wrap { position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:clamp(16px, 2.2cqw, 24px); }
.v-countdown .cdn-eye { margin:0; font:500 clamp(13px, 1.5cqw, 16px) var(--font); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); }
.v-countdown .cdn-h { max-width:18ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-countdown .cdn-desc { max-width:46ch; }
.v-countdown .cdn-clock { display:flex; align-items:center; justify-content:center; flex-wrap:nowrap;
  gap:0; margin-top:clamp(10px, 1.4cqw, 18px); }
.v-countdown .cdn-unit { display:flex; flex-direction:column; align-items:center;
  gap:clamp(6px, .9cqw, 9px); padding:0 clamp(14px, 3cqw, 32px); }
.v-countdown .cdn-num { display:inline-block; min-width:2ch; text-align:center;
  font:800 clamp(44px, 9cqw, 92px)/1 var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.v-countdown .cdn-num.is-tick { animation:cdnTick 150ms ease; }
.v-countdown .cdn-ulabel { font:500 clamp(9px, 1cqw, 11px) var(--font); letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint); }
.v-countdown .cdn-div { flex:none; align-self:center; width:1px; height:clamp(40px, 6cqw, 64px);
  background:var(--hair); }
.v-countdown .cdn-clock.cdn-done .cdn-num { color:var(--accent); }
.v-countdown .cdn-form { display:flex; width:min(448px, 100%); margin-top:clamp(20px, 2.8cqw, 30px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55); overflow:hidden;
  transition:border-color 160ms linear; }
.v-countdown .cdn-form:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-countdown .cdn-input { flex:1; min-width:0; padding:13px 16px; border:none; outline:none;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:400 14px var(--font); }
.v-countdown .cdn-input::placeholder { color:var(--faint); }
.v-countdown .cdn-btn { flex:none; padding:13px 22px; border:none; cursor:pointer; white-space:nowrap;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:600 13px var(--font); letter-spacing:.01em;
  transition:opacity 140ms linear; }
.v-countdown .cdn-btn:hover { opacity:.9; }
.v-countdown .cdn-btn:active { opacity:.82; }
.v-countdown .cdn-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-countdown .cdn-note { min-height:1.25em; margin:0; font:500 12.5px var(--font); color:var(--dim); }
.v-countdown .cdn-note.cdn-ok { color:var(--accent); }
.v-countdown .cdn-note.cdn-err { color:#e5484d; }
.v-countdown .cdn-sr { 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; }
@keyframes cdnTick { from { transform:translateY(-3px); } to { transform:translateY(0); } }
@container site (max-width: 560px) {
  .v-countdown .cdn-unit { padding:0 clamp(8px, 2.5cqw, 16px); }
  .v-countdown .cdn-num { font-size:clamp(34px, 13cqw, 52px); }
  .v-countdown .cdn-div { height:clamp(32px, 9cqw, 44px); }
  .v-countdown .cdn-ulabel { font-size:9px; letter-spacing:.1em; }
  .v-countdown .cdn-form { flex-direction:column; border:none; overflow:visible; gap:10px;
    width:100%; max-width:360px; }
  .v-countdown .cdn-input { border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5); }
  .v-countdown .cdn-btn { width:100%; border-radius:calc(var(--radius, 12px) * .5); }
}
@media (prefers-reduced-motion: reduce) {
  .v-countdown .cdn-num.is-tick { animation:none; }
}
/* content-grid — ported from SB_04 drafts/content-grid-hero. Origin was a blog opener whose category
   "filters" only toggled an active class (dead); ported as a REAL filter — the sidebar is a roving-tabindex
   radiogroup (arrow/Home/End, aria-checked) that live-narrows the card grid by category via mount(), with an
   aria-live count. Origin --cgh-* map to tokens: bg->--bg, heading->--ink, body->--dim, muted->--faint,
   accent->--accent, dividers->--hair; card thumbs + avatars become themed placeholders (accent radial,
   echoing bento's media tile) so it reads with no images. Entrance keyframes dropped (anims.js owns
   entrances); only title/thumb-border move on hover (color/border-color only) and filter/selected
   BACKGROUNDS switch instantly. Container queries: sidebar+grid -> stacked pills (860) -> 1-col (560). */
.v-content-grid .cg-wrap { display:flex; flex-direction:column; gap:clamp(34px, 5cqw, 56px); }
.v-content-grid .cg-head { max-width:640px; display:flex; flex-direction:column; gap:14px; }
.v-content-grid .cg-head > * { margin:0; }
.v-content-grid .cg-body { display:grid; grid-template-columns:minmax(150px, 200px) 1fr; align-items:start;
  gap:clamp(28px, 4cqw, 48px); }
/* sidebar — category filter radiogroup */
.v-content-grid .cg-side { position:sticky; top:clamp(12px, 2cqw, 20px); }
.v-content-grid .cg-flabel { margin:0 0 12px; padding-left:14px; font:700 10px var(--mono);
  letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-content-grid .cg-filters { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.v-content-grid .cg-filter { width:100%; text-align:left; appearance:none; -webkit-appearance:none; cursor:pointer;
  background:transparent; border:0; border-left:2px solid transparent; border-radius:0 8px 8px 0;
  padding:9px 14px; font:500 clamp(13.5px, 1.5cqw, 14.5px) var(--font); color:var(--dim);
  transition:color .16s linear, border-color .16s linear; }
.v-content-grid .cg-filter:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.v-content-grid .cg-filter[aria-checked="true"] { color:var(--accent); font-weight:600;
  background:color-mix(in srgb, var(--accent) 10%, transparent); border-left-color:var(--accent); }
.v-content-grid .cg-filter:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* article grid — editorial ledger: a hairline rule tops each card, gaps between */
.v-content-grid .cg-grid { display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(200px, 24cqw, 250px), 1fr));
  gap:clamp(24px, 3cqw, 36px) clamp(20px, 2.6cqw, 32px); }
.v-content-grid .cg-card { display:flex; flex-direction:column; gap:14px; padding-top:22px;
  border-top:var(--bw, 1px) solid var(--hair); min-width:0; }
.v-content-grid .cg-card[hidden] { display:none; }
.v-content-grid .cg-thumb { position:relative; width:100%; aspect-ratio:16 / 10; border-radius:var(--radius, 10px);
  overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat;
  border:var(--bw, 1px) solid var(--hair); transition:border-color .16s linear; }
.v-content-grid .cg-thumb.ph { background-image:radial-gradient(120% 120% at 28% 18%,
  color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel) 72%); }
.v-content-grid .cg-thumb.ph::after { content:''; position:absolute; inset:0;
  background:linear-gradient(125deg, transparent 42%, color-mix(in srgb, var(--accent) 12%, transparent)); }
.v-content-grid .cg-card:hover .cg-thumb { border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-content-grid .cg-cbody { display:flex; flex-direction:column; gap:8px; min-width:0; }
.v-content-grid .cg-cat { font:700 10px var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); }
.v-content-grid .cg-title { margin:0; font:700 clamp(15px, 1.7cqw, 17px)/1.35 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; text-wrap:balance; transition:color .16s linear; }
.v-content-grid .cg-card:hover .cg-title { color:var(--accent); }
.v-content-grid .cg-foot { display:flex; align-items:center; gap:10px; margin-top:2px; flex-wrap:wrap; }
.v-content-grid .cg-read { font:400 12px var(--font); color:var(--faint); }
.v-content-grid .cg-dot { width:3px; height:3px; border-radius:50%; background:var(--faint); flex:none; }
.v-content-grid .cg-author { display:flex; align-items:center; gap:7px; min-width:0; }
.v-content-grid .cg-avatar { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font:700 9px var(--mono); letter-spacing:.4px; color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 14%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.v-content-grid .cg-aname { font:500 12px var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-content-grid .cg-status { min-height:1.3em; margin:0; font:500 12px var(--font); color:var(--faint); }
@container site (max-width: 860px) {
  .v-content-grid .cg-body { grid-template-columns:1fr; gap:clamp(20px, 3cqw, 28px); }
  .v-content-grid .cg-side { position:static; }
  .v-content-grid .cg-flabel { padding-left:0; }
  .v-content-grid .cg-filters { flex-direction:row; flex-wrap:wrap; gap:8px; }
  .v-content-grid .cg-filter { width:auto; border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:7px 14px; }
  .v-content-grid .cg-filter[aria-checked="true"] { border-color:var(--accent); }
  .v-content-grid .cg-grid { grid-template-columns:repeat(2, 1fr); }
}
@container site (max-width: 560px) {
  .v-content-grid .cg-grid { grid-template-columns:1fr; }
}
/* consulting — ported from SB_04 drafts/consulting-hero (centered strategy statement, a
   three-pillar practice rail and a trusted-by client row over a wireframe globe). Origin
   --cnh-* vars map to theme tokens: bg->--bg, heading->--ink, body->--dim, accent->--accent,
   divider/pillar-border->--hair, globe-stroke->faint ink-mix, logo/clients-label->--faint.
   The globe is rebuilt from clean concentric rings + meridian ellipses (no box-shadow hacks)
   and stays static; entrance motion belongs to the reveal system. The pillars, dead in the
   draft, become a real roving-tabindex selectable group (see mount): arrows/Home/End,
   aria-pressed, aria-live status. Selected background switches instantly (transform-only
   transition, per the perf rules). */
.v-consulting { --cs-line:color-mix(in srgb, var(--ink) 6%, transparent); padding:clamp(72px, 10cqw, 116px) 0; }
.v-consulting .ws-in { z-index:1; }
.v-consulting .cs-stack { display:flex; flex-direction:column; align-items:center; gap:clamp(40px, 6cqw, 64px); }
/* wireframe globe — decorative, bleeds in from the right */
.v-consulting .cs-globe { position:absolute; right:clamp(-120px, -6cqw, -40px); top:50%; transform:translateY(-50%);
  width:min(560px, 68cqw); height:min(560px, 68cqw); border-radius:50%; border:1px solid var(--cs-line); pointer-events:none; }
.v-consulting .cs-globe i { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.v-consulting .cs-ring, .v-consulting .cs-mer { border:1px solid var(--cs-line); border-radius:50%; }
.v-consulting .cs-r1 { width:67%; height:67%; }
.v-consulting .cs-r2 { width:34%; height:34%; }
.v-consulting .cs-mer { height:100%; }
.v-consulting .cs-m1 { width:67%; }
.v-consulting .cs-m2 { width:34%; }
.v-consulting .cs-eq { width:100%; height:0; border-top:1px solid var(--cs-line); }
.v-consulting .cs-axis { width:0; height:100%; border-left:1px solid var(--cs-line); }
/* header block */
.v-consulting .cs-head { display:flex; flex-direction:column; align-items:center; gap:clamp(16px, 2cqw, 22px); }
.v-consulting .cs-head .ws-ctarow { margin-top:8px; }
/* pillars — a selectable practice rail (mount adds roving tabindex + keyboard + aria) */
.v-consulting .cs-pillars { width:100%; display:flex; align-items:stretch;
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); padding:clamp(26px, 4cqw, 40px) 0; }
.v-consulting .cs-pillar { flex:1; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:6px clamp(16px, 3cqw, 32px); text-align:center; cursor:pointer; color:inherit; font:inherit;
  appearance:none; -webkit-appearance:none; background:none; border:none; border-radius:10px;
  transition:transform 140ms var(--ease-pop, ease-out); }
.v-consulting .cs-pillar + .cs-pillar { border-left:var(--bw, 1px) solid var(--hair); }
.v-consulting .cs-pillar:hover { transform:translateY(-2px); }
.v-consulting .cs-pillar:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-consulting .cs-pillar[aria-pressed="true"] { background:color-mix(in srgb, var(--accent) 7%, transparent); }
.v-consulting .cs-pnum { font:600 11px var(--mono); letter-spacing:.14em; color:var(--accent); }
.v-consulting .cs-pname { font:600 clamp(15px, 1.8cqw, 17px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-consulting .cs-pdesc { margin:0; font:400 clamp(12.5px, 1.4cqw, 13.5px)/1.5 var(--font); color:var(--dim); max-width:26ch; }
/* clients row */
.v-consulting .cs-clients { display:flex; flex-direction:column; align-items:center; gap:16px; }
.v-consulting .cs-clabel { font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.v-consulting .cs-logos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(20px, 4cqw, 40px); }
.v-consulting .cs-logo { font:600 13px var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
/* aria-live readout — announced to AT, visually redundant with the pillar text */
.v-consulting .cs-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@container site (max-width: 860px) {
  .v-consulting .cs-globe { width:min(440px, 92cqw); height:min(440px, 92cqw); right:-90px; opacity:.6; }
}
@container site (max-width: 560px) {
  .v-consulting .cs-pillars { flex-direction:column; padding:0; }
  .v-consulting .cs-pillar { padding:24px 8px; border-radius:0; }
  .v-consulting .cs-pillar + .cs-pillar { border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
  .v-consulting .cs-pdesc { max-width:42ch; }
  .v-consulting .cs-globe { opacity:.4; }
}
/* concert — ported from SB_04 drafts/concert-hero (a full-bleed tour poster: a small
   accent eyebrow, a huge uppercase artist wordmark and a glass "dates box" listing shows,
   each with city / venue / date and a Get-Tickets link or a SOLD OUT tag). Origin --cnch-*
   vars map to tokens: bg->--bg, heading->--ink, body->--dim/--faint, accent->--accent,
   border->--hair/--hair-soft, font->--font-head (wordmark) / --font (body); the sold-out red
   stays a semantic literal (--cnh-sold, matched to v-comparison's --cmp-bad). The origin's
   fixed dark image-overlay + backdrop blur are dropped: the dark-cinematic mood is kept
   theme-portably by deepening --bg toward black via color-mix (the v-cinematic / v-starfield
   idiom), NO blur; an optional img prop drops a cover photo behind the same veil. The static
   date list becomes a REAL roving-tabindex button group — arrow / Home / End move focus,
   Enter/Space activate, and an aria-live status line announces the show + ticket state; sold
   rows are aria-disabled but still reachable. Hover/active backgrounds switch instantly
   (only color/transform transition); container queries handle the narrow stack. */
.ws-hero.v-concert { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:clamp(480px, 86cqh, 860px); padding:clamp(64px, 10cqh, 120px) 0; overflow:hidden;
  isolation:isolate; background-color:var(--bg); background-size:cover; background-position:center; }
.v-concert .cnh-atmos { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v-concert .cnh-glow { position:absolute; inset:0;
  background:
    radial-gradient(82% 60% at 50% -6%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(70% 48% at 50% 110%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent), transparent 58%); }
.v-concert .cnh-veil { position:absolute; inset:0;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 60%, transparent), color-mix(in srgb, var(--bg) 88%, black) 100%),
    radial-gradient(130% 120% at 50% 24%, transparent 42%, color-mix(in srgb, var(--bg) 55%, black) 100%); }
.v-concert .cnh-in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:clamp(20px, 3cqw, 36px); }
.v-concert .cnh-kick { font-size:11px; letter-spacing:3.4px; text-transform:uppercase; color:var(--accent); margin:0; }
.v-concert .cnh-name { margin:0; text-transform:uppercase; font-weight:900; line-height:.9; letter-spacing:-.02em;
  font-size:clamp(3rem, 11cqw, 8rem); font-family:var(--font-head, var(--font)); color:var(--ink); }
.v-concert .cnh-sub { max-width:46ch; margin:0; }
.v-concert .cnh-list { list-style:none; margin:0; padding:0; width:100%; max-width:640px;
  background:color-mix(in srgb, var(--bg) 64%, transparent); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); overflow:hidden; text-align:left; }
.v-concert .cnh-li { border-bottom:var(--bw, 1px) solid var(--hair-soft, var(--hair)); }
.v-concert .cnh-li:last-child { border-bottom:0; }
.v-concert .cnh-row { width:100%; text-align:left; appearance:none; -webkit-appearance:none; cursor:pointer;
  background:transparent; border:0; color:var(--ink); font:inherit;
  display:flex; align-items:center; gap:clamp(10px, 1.6cqw, 18px);
  padding:clamp(11px, 1.5cqw, 15px) clamp(14px, 2cqw, 22px); transition:color .16s linear; }
.v-concert .cnh-row:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-concert .cnh-row.is-on { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.v-concert .cnh-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-concert .cnh-row.is-sold { cursor:default; }
.v-concert .cnh-row.is-sold .cnh-city { color:var(--dim); }
.v-concert .cnh-city { flex:0 0 auto; min-width:104px; font-weight:700; font-size:clamp(.9rem, 1.4cqw, 1rem); color:var(--ink); }
.v-concert .cnh-venue { flex:1 1 auto; min-width:0; font-size:clamp(.8rem, 1.2cqw, .9rem); color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-concert .cnh-date { flex:0 0 auto; min-width:92px; text-align:right; font-size:.8rem; color:var(--dim);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.v-concert .cnh-cta { flex:0 0 auto; min-width:112px; font-weight:600; font-size:.8rem; color:var(--accent);
  white-space:nowrap; display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; }
.v-concert .cnh-cta svg { width:13px; height:13px; flex:none; transition:transform .16s ease; }
.v-concert .cnh-row:hover .cnh-cta svg, .v-concert .cnh-row:focus-visible .cnh-cta svg { transform:translateX(3px); }
.v-concert .cnh-sold { flex:0 0 auto; min-width:112px; text-align:right; font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cnh-sold, #f26d6d); white-space:nowrap; }
.v-concert .cnh-status { min-height:1.3em; margin:0; text-align:center; font:500 12.5px var(--font); color:var(--faint); }
@container site (max-width: 560px) {
  .v-concert .cnh-row { flex-wrap:wrap; gap:4px 12px; padding:12px 16px; }
  .v-concert .cnh-city { flex:1 1 100%; min-width:0; }
  .v-concert .cnh-venue { flex:1 1 100%; white-space:normal; }
  .v-concert .cnh-date { min-width:0; text-align:left; }
  .v-concert .cnh-cta, .v-concert .cnh-sold { min-width:0; text-align:left; justify-content:flex-start; margin-left:auto; }
}
/* course — ported from SB_04 drafts/course-hero (online-course landing opener: bestseller badge,
   instructor, star rating + enrolment proof, a what-you-will-learn checklist, an enrol-with-price CTA,
   beside the course thumbnail). Reuses ws-in.split for the two columns, ws-badge/ws-h1+gradLast/ws-sub
   for the copy and ws-btn for the enrol CTA. Origin --crs-* vars map to theme tokens (accent->--accent,
   heading->--ink, body->--dim, muted->--faint, border->--hair, badge->ws-badge, gold rating->--accent to
   stay on-theme). The 5-star track fills to the exact rating fraction via an overlay clip (no baked hex).
   Split re-stacks at 860px; entrance motion is left to anims.js. Prefix cor-; scoped under .ws-hero.v-course. */
.ws-hero.v-course .ws-in.split.cor-main { grid-template-columns:1.05fr minmax(0, 460px); align-items:stretch; gap:clamp(32px, 4.6cqw, 64px); }
.ws-hero.v-course .cor-copy { display:flex; flex-direction:column; justify-content:center; gap:clamp(13px, 1.8cqw, 19px); min-width:0; }
.ws-hero.v-course .cor-copy > * { margin:0; }
.ws-hero.v-course .cor-copy .ws-badge { align-self:flex-start; }
.ws-hero.v-course .cor-title { max-width:20ch; font-size:clamp(26px, 3.6cqw, 44px); line-height:1.12; }
/* instructor */
.ws-hero.v-course .cor-instructor { display:flex; align-items:center; gap:10px; }
.ws-hero.v-course .cor-avatar { width:34px; height:34px; border-radius:50%; flex:none;
  background-color:var(--panel); background-size:cover; background-position:center; border:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-course .cor-avatar--ph { display:flex; align-items:center; justify-content:center;
  background:var(--accent-fill); color:var(--accent); font:700 14px var(--font-head, var(--font)); }
.ws-hero.v-course .cor-iname { font:500 13.5px var(--font); color:var(--dim); }
/* rating */
.ws-hero.v-course .cor-rating { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ws-hero.v-course .cor-stars { position:relative; display:inline-block; white-space:nowrap;
  font-size:15px; line-height:1; letter-spacing:2px; }
.ws-hero.v-course .cor-startrack { color:color-mix(in srgb, var(--ink) 20%, transparent); }
.ws-hero.v-course .cor-starfill { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--accent); }
.ws-hero.v-course .cor-rval { font:700 13.5px var(--font); color:var(--ink); }
.ws-hero.v-course .cor-rcount { font:500 12.5px var(--font); color:var(--faint); }
.ws-hero.v-course .cor-enrolled { font:500 12.5px var(--font); color:var(--faint);
  padding-left:9px; border-left:var(--bw, 1px) solid var(--hair); }
/* meta */
.ws-hero.v-course .cor-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font:500 12.5px var(--font); color:var(--dim); }
.ws-hero.v-course .cor-msep { color:var(--faint); }
/* outcomes checklist */
.ws-hero.v-course .cor-outcomes { list-style:none; display:flex; flex-direction:column; gap:clamp(9px, 1.1cqw, 12px); padding:2px 0 0; }
.ws-hero.v-course .cor-outcome { position:relative; padding-left:28px; font:400 clamp(13.5px, 1.5cqw, 15.5px)/1.5 var(--font); color:var(--dim); }
.ws-hero.v-course .cor-outcome::before { content:''; position:absolute; left:2px; top:0.34em; width:11px; height:6px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(-45deg); }
/* enrol CTA + price */
.ws-hero.v-course .cor-ctarow { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px; }
.ws-hero.v-course .cor-price { font:800 clamp(22px, 2.6cqw, 28px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
/* thumbnail panel */
.ws-hero.v-course .cor-thumb { position:relative; min-height:340px; border-radius:var(--radius, 14px); border:var(--bw, 1px) solid var(--hair);
  background-color:var(--panel); background-size:cover; background-position:center; overflow:hidden;
  box-shadow:var(--inset-hi, 0 0 #0000), var(--elev, 0 0 #0000); }
.ws-hero.v-course .cor-thumb--ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%);
  background-size:60px 60px; background-position:0 0, 0 30px, 30px -30px, 30px 0; }
.ws-hero.v-course .cor-thumb--ph::after { content:''; position:absolute; inset:0;
  background:radial-gradient(64% 58% at 50% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%); }
@container site (max-width: 860px) {
  .ws-hero.v-course .ws-in.split.cor-main { grid-template-columns:1fr; gap:clamp(28px, 5cqw, 40px); }
  .ws-hero.v-course .cor-thumb { min-height:230px; }
}
@container site (max-width: 560px) {
  .ws-hero.v-course .cor-enrolled { padding-left:0; border-left:none; }
}
/* creative studio — ported from SB_04 drafts/creative-hero (full-bleed agency statement:
   giant two-line headline + grain field + foot strip with quick-links & est. line).
   Origin --crh-* vars map to tokens: bg->--bg, text->--ink, text-dim->a ghost of --ink,
   text-secondary->--dim/--faint, accent->--accent, border->--hair, font->--font-head/--font.
   ZenOS heroes size to content (min-height clamp on cqh) rather than the origin's 100vh pin;
   the baked fade-up entrance keyframes are dropped (anims.js owns entrances). The origin's
   static closing word becomes a REAL control: mount() cycles it through the studio disciplines
   (auto-advance pauses offscreen via whenVisible and on hover/focus, skipped under reduced-motion;
   click / Enter / Space / arrows drive it by hand, announced through an aria-live status). Grain is
   a token-neutral noise texture (no blur, no backdrop-filter). Container queries only. */
.ws-hero.v-creative { position:relative; overflow:hidden; padding:0; isolation:isolate;
  --crv-pad:clamp(20px, 5cqw, 76px);
  display:flex; flex-direction:column; min-height:clamp(480px, 86cqh, 860px); background-color:var(--bg); }
.v-creative .crv-grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; }
.v-creative .crv-in { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; width:100%;
  padding:clamp(30px, 6cqw, 72px) var(--crv-pad) clamp(24px, 3cqw, 40px); }
.v-creative .crv-kick { color:var(--faint); margin-bottom:0; }
.v-creative .crv-headwrap { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  gap:clamp(16px, 2.2cqw, 26px); }
.v-creative .crv-head { display:flex; flex-direction:column; gap:0; line-height:0.92;
  font-size:clamp(44px, 13cqw, 128px); letter-spacing:-0.04em; }
.v-creative .crv-lead { display:block; font-weight:300; color:color-mix(in srgb, var(--ink) 38%, transparent); }
.v-creative .crv-rot, .v-creative .crv-rotw-static { display:block; font:inherit; font-weight:900;
  letter-spacing:inherit; color:var(--ink); }
.v-creative .crv-rot { appearance:none; -webkit-appearance:none; background:none; border:0; margin:0; padding:0;
  text-align:left; cursor:pointer; transition:color .18s linear; }
.v-creative .crv-rot .crv-rotw { display:inline-block; }
.v-creative .crv-rot:hover { color:var(--accent); }
.v-creative .crv-rot:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:4px; }
.v-creative .crv-sub { margin:0; max-width:46ch; }
.v-creative .crv-strip { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding:clamp(14px, 1.6cqw, 20px) var(--crv-pad); border-top:var(--bw, 1px) solid var(--hair); }
.v-creative .crv-links { display:flex; flex-wrap:wrap; }
.v-creative .crv-link { display:inline-flex; align-items:center; gap:.35em; text-decoration:none;
  font:500 clamp(12px, 1.3cqw, 13.5px)/1 var(--font); letter-spacing:.04em; color:var(--dim);
  padding:.5em 1.5em .5em 0; transition:color .18s linear; }
.v-creative .crv-link:hover { color:var(--ink); }
.v-creative .crv-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.v-creative .crv-arr { width:.9em; height:.9em; opacity:.6; transition:transform .18s ease-out, opacity .18s linear; }
.v-creative .crv-link:hover .crv-arr, .v-creative .crv-link:focus-visible .crv-arr { transform:translate(2px, -2px); opacity:1; }
.v-creative .crv-est { margin:0; font:400 clamp(10px, 1.1cqw, 11.5px)/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.v-creative .crv-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@container site (max-width: 860px) {
  .v-creative .crv-head { font-size:clamp(40px, 15cqw, 96px); }
  .v-creative .crv-link { padding-right:1.15em; }
}
@container site (max-width: 560px) {
  .ws-hero.v-creative { min-height:clamp(440px, 82cqh, 720px); }
  .v-creative .crv-strip { flex-direction:column; align-items:flex-start; gap:12px; }
  .v-creative .crv-head { font-size:clamp(38px, 17cqw, 74px); }
}
/* dashboard — ported from SB_04 drafts/dashboard-hero: SaaS split hero (copy + CTAs) beside a
   token-driven analytics dashboard mock. Origin --dbh-* vars -> theme tokens; abstract nav/sidebar are
   decorative product-shot chrome (aria-hidden), the range pills are a real radiogroup and the bar chart
   is CSS/transform-only. Split narrow-stacks via the global 860px rule (.ws-hero .ws-in.split). Entrance
   motion is anims.js's job — the only motion here is the chart's whenVisible grow-in + pill/hover
   feedback, all on transform/opacity/color. Semantic delta hues stay literal (up green / down red). */
.v-dashboard .dsh-copy { display:flex; flex-direction:column; justify-content:center; }
.v-dashboard .dsh-copy .ws-ctarow { margin-top:26px; }
.v-dashboard .dsh-figure { min-width:0; }
.v-dashboard .dsh-ui { display:flex; flex-direction:column; min-width:0;
  height:clamp(360px, 40cqw, 440px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  overflow:hidden; background:var(--panel);
  box-shadow:var(--elev, 0 24px 60px -30px rgba(12,15,20,.5)); }
/* top nav — decorative chrome */
.v-dashboard .dsh-nav { display:flex; align-items:center; gap:20px; flex-shrink:0; height:46px;
  padding:0 16px; background:var(--panel-2, var(--panel)); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-dashboard .dsh-logo { font:700 13px var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.v-dashboard .dsh-navitems { display:flex; gap:14px; flex:1; }
.v-dashboard .dsh-navitems i { width:40px; height:7px; border-radius:2px;
  background:color-mix(in srgb, var(--ink) 9%, transparent); }
.v-dashboard .dsh-navitems i.on { background:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-dashboard .dsh-avatar { width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:color-mix(in srgb, var(--accent) 28%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
/* body + sidebar */
.v-dashboard .dsh-body { display:flex; flex:1; min-height:0; }
.v-dashboard .dsh-side { width:172px; flex-shrink:0; padding:16px 12px; display:flex; flex-direction:column;
  gap:22px; overflow:hidden; background:var(--panel-2, var(--panel)); border-right:var(--bw, 1px) solid var(--hair); }
.v-dashboard .dsh-msec { display:flex; flex-direction:column; gap:5px; }
.v-dashboard .dsh-mlabel { width:46px; height:6px; border-radius:2px; margin-bottom:6px;
  background:color-mix(in srgb, var(--ink) 9%, transparent); }
.v-dashboard .dsh-mitem { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; }
.v-dashboard .dsh-mitem.on { background:var(--accent-fill); }
.v-dashboard .dsh-mico { width:13px; height:13px; border-radius:3px; flex-shrink:0;
  background:color-mix(in srgb, var(--ink) 15%, transparent); }
.v-dashboard .dsh-mitem.on .dsh-mico { background:color-mix(in srgb, var(--accent) 60%, transparent); }
.v-dashboard .dsh-mtx { width:76px; height:7px; border-radius:2px;
  background:color-mix(in srgb, var(--ink) 9%, transparent); }
.v-dashboard .dsh-mtx.sh { width:52px; }
.v-dashboard .dsh-mitem.on .dsh-mtx { background:color-mix(in srgb, var(--ink) 18%, transparent); }
/* main */
.v-dashboard .dsh-main { flex:1; min-width:0; padding:15px; display:flex; flex-direction:column;
  gap:13px; overflow:hidden; }
.v-dashboard .dsh-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.v-dashboard .dsh-stat { display:flex; flex-direction:column; gap:5px; padding:2px 14px; min-width:0;
  border-right:var(--bw, 1px) solid var(--hair); }
.v-dashboard .dsh-stat:first-child { padding-left:2px; }
.v-dashboard .dsh-stat:last-child { border-right:none; padding-right:2px; }
.v-dashboard .dsh-slabel { font:500 10px var(--font); letter-spacing:.04em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-dashboard .dsh-svalue { font:700 clamp(15px, 1.7cqw, 19px) var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-dashboard .dsh-sdelta { font:600 10.5px var(--mono, var(--font)); letter-spacing:.02em; }
.v-dashboard .dsh-sdelta.is-pos { color:#3fb27f; }
.v-dashboard .dsh-sdelta.is-neg { color:#e0645f; }
/* chart card */
.v-dashboard .dsh-card { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px;
  padding:12px 14px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .6);
  background:color-mix(in srgb, var(--ink) 2%, transparent); overflow:hidden; }
.v-dashboard .dsh-chead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.v-dashboard .dsh-ctitle { font:600 12px var(--font-head, var(--font)); color:var(--dim);
  letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-dashboard .dsh-ranges { display:flex; gap:4px; flex-shrink:0; }
.v-dashboard .dsh-pill { appearance:none; border:1px solid transparent; border-radius:5px; cursor:pointer;
  padding:3px 9px; font:600 10.5px var(--mono, var(--font)); letter-spacing:.03em; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 6%, transparent); transition:color .15s linear; }
.v-dashboard .dsh-pill:hover { color:var(--ink); }
.v-dashboard .dsh-pill[aria-checked="true"] { color:var(--accent); background:var(--accent-fill);
  border-color:color-mix(in srgb, var(--accent) 32%, transparent); }
.v-dashboard .dsh-pill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* bar chart — value drives scaleY (transform-only), peak bar rides full accent */
.v-dashboard .dsh-chart { position:relative; flex:1; min-height:0; }
.v-dashboard .dsh-grid { position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:space-between; pointer-events:none; }
.v-dashboard .dsh-grid span { width:100%; height:1px; background:var(--hair); opacity:.7; }
.v-dashboard .dsh-bars { position:relative; z-index:1; height:100%; display:flex; align-items:flex-end; gap:5px; }
.v-dashboard .dsh-bar { flex:1; min-width:0; height:100%; transform-origin:bottom;
  transform:scaleY(var(--v, 0)); border-radius:3px 3px 0 0;
  background:color-mix(in srgb, var(--accent) 26%, transparent);
  transition:transform .55s cubic-bezier(.22, 1, .36, 1); }
.v-dashboard .dsh-bar.is-peak { background:var(--accent); }
.v-dashboard .dsh-bar:hover { background:color-mix(in srgb, var(--accent) 46%, transparent); }
.v-dashboard .dsh-bar.is-peak:hover { background:var(--accent); }
.v-dashboard .dsh-live { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@container site (max-width: 860px) {
  .v-dashboard .dsh-ui { height:clamp(320px, 54cqw, 430px); }
  .v-dashboard .dsh-side { width:150px; }
}
@container site (max-width: 560px) {
  .v-dashboard .dsh-ui { height:344px; }
  .v-dashboard .dsh-side { display:none; }
  .v-dashboard .dsh-stat { padding:2px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-dashboard .dsh-bar { transition:none; }
}
/* data-viz — ported from SB_04 data-viz-hero (copy + a token-driven bar-chart card).
   The chart is a real radiogroup: bars scale-in on first view (whenVisible in mount, skipped
   under reduced-motion), roving tabindex + arrows select a day and read its value into the
   aria-live caption. Single accent series (peak solid, the rest a color-mix step) — no baked
   palette, no fixed hues. Split narrow-stacks via the global 860px rule (.ws-hero .ws-in.split). */
.v-data-viz .dvz-panel { display:flex; flex-direction:column; gap:clamp(16px, 2cqw, 24px);
  padding:clamp(18px, 2.4cqw, 30px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  background:color-mix(in srgb, var(--panel) 55%, var(--bg)); }
.v-data-viz .dvz-caption { font:600 clamp(9.5px, 1.05cqw, 11px)/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); }
.v-data-viz .dvz-chartwrap { display:flex; flex-direction:column; }
.v-data-viz .dvz-bars { display:flex; align-items:flex-end; gap:clamp(6px, 1cqw, 12px);
  height:clamp(178px, 24cqw, 262px); }
.v-data-viz .dvz-col { flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:10px; appearance:none; -webkit-appearance:none;
  background:none; border:0; margin:0; padding:0; font:inherit; cursor:pointer; }
.v-data-viz .dvz-col:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.v-data-viz .dvz-bar-track { width:100%; flex:1; display:flex; align-items:flex-end; }
.v-data-viz .dvz-bar { width:100%; height:var(--h, 50%); min-height:3px; border-radius:3px 3px 0 0;
  background:color-mix(in srgb, var(--accent) 20%, transparent);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .6s cubic-bezier(.22, .61, .36, 1); transition-delay:calc(var(--i, 0) * 70ms); }
.v-data-viz.is-drawn .dvz-bar { transform:scaleY(1); }
.v-data-viz .dvz-col:hover .dvz-bar { background:color-mix(in srgb, var(--accent) 40%, transparent); }
.v-data-viz .dvz-bar.is-peak { background:var(--accent); }
.v-data-viz .dvz-col.is-sel .dvz-bar { background:var(--accent); }
.v-data-viz .dvz-blabel { flex-shrink:0; font:500 clamp(10px, 1.05cqw, 11px)/1 var(--font);
  letter-spacing:.05em; color:var(--faint); transition:color .18s linear; }
.v-data-viz .dvz-col:hover .dvz-blabel { color:var(--dim); }
.v-data-viz .dvz-col.is-sel .dvz-blabel { color:var(--accent); font-weight:600; }
.v-data-viz .dvz-baseline { height:1px; background:var(--hair); }
.v-data-viz .dvz-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.v-data-viz .dvz-readout { min-width:0; font:500 clamp(11px, 1.1cqw, 12.5px)/1.35 var(--font); color:var(--dim); }
.v-data-viz .dvz-total { flex-shrink:0; font:600 clamp(11px, 1.1cqw, 12.5px)/1 var(--font); color:var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .v-data-viz .dvz-bar { transition:none; transform:none; }
}
@container site (max-width: 560px) {
  .v-data-viz .dvz-bars { height:clamp(150px, 40cqw, 200px); gap:5px; }
  .v-data-viz .dvz-meta { flex-direction:column; align-items:flex-start; gap:6px; }
}
/* ===== Hero / Crypto Exchange (v-crypto) — ported SB_04 drafts/crypto-hero.
   Split: trade/earn/own copy + CTAs beside a live market ticker. Origin --crph-* vars map to theme
   tokens; per-coin brand hues ride as DATA (inline on each chip); pos/neg use the semantic good/bad
   literals. Prices drift-simulate in mount() (drift-free accumulator; pauses offscreen + on the Live
   toggle). Static dot field only — entrance motion is the reveal system's. Narrow-stacks via the
   global 860px .ws-hero .ws-in.split rule. */
.v-crypto { position:relative; overflow:hidden; }
.v-crypto .cry-grid { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 80% 78% at 50% 44%, #000 36%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 78% at 50% 44%, #000 36%, transparent 100%); }
.v-crypto .ws-in { position:relative; z-index:1; }
.v-crypto .cry-copy { display:flex; flex-direction:column; justify-content:center; }
.v-crypto .cry-trust { margin:18px 0 0; font:500 clamp(12px, 1.4cqw, 13px)/1.5 var(--font); color:var(--faint); }
/* ticker panel */
.v-crypto .cry-ticker, .v-crypto .cry-ticker * { box-sizing:border-box; }
.v-crypto .cry-ticker { border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad, none); font-variant-numeric:tabular-nums; }
.v-crypto .cry-bar { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:var(--bw, 1px) solid var(--hair); background:var(--panel-2); }
.v-crypto .cry-bar-t { font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-crypto .cry-live { display:inline-flex; align-items:center; gap:7px; appearance:none; -webkit-appearance:none;
  margin:0; padding:5px 11px 5px 9px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  background:var(--accent-fill); color:var(--accent);
  font:600 10px var(--mono); letter-spacing:1.5px; text-transform:uppercase;
  transition:color .18s linear, transform .18s ease-out; }
.v-crypto .cry-live:hover { transform:translateY(-1px); }
.v-crypto .cry-live:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-crypto .cry-live.is-paused { color:var(--faint); background:color-mix(in srgb, var(--ink) 9%, transparent); }
.v-crypto .cry-live-t { line-height:1; }
.v-crypto .cry-dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0;
  animation:cryPulse 1.8s ease-in-out infinite; }
.v-crypto .cry-live.is-paused .cry-dot { animation:none; opacity:.55; }
/* column labels + rows share one grid so cells line up */
.v-crypto .cry-cols, .v-crypto .cry-row { display:grid; grid-template-columns:1fr auto auto;
  align-items:center; gap:16px; padding:13px 16px; }
.v-crypto .cry-cols { border-bottom:var(--bw, 1px) solid var(--hair);
  font:600 9px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.v-crypto .cry-row { border-bottom:1px solid color-mix(in srgb, var(--hair) 60%, transparent); }
.v-crypto .cry-rows .cry-row:last-child { border-bottom:0; }
.v-crypto .cry-row:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-crypto .cry-mkt { display:flex; align-items:center; gap:11px; min-width:0; }
.v-crypto .cry-coin { display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:26px; height:26px; border-radius:50%; color:#fff; font:700 10px var(--font);
  background:color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.v-crypto .cry-pair { min-width:0; font:600 clamp(12px, 1.5cqw, 13.5px) var(--font); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-crypto .cry-quote { font-style:normal; font-weight:500; color:var(--faint); }
.v-crypto .cry-cols span:nth-child(2), .v-crypto .cry-price { min-width:98px; text-align:right; }
.v-crypto .cry-cols span:nth-child(3), .v-crypto .cry-chg { min-width:64px; text-align:right; }
.v-crypto .cry-cols span:nth-child(3) { padding-right:8px; }
.v-crypto .cry-price { font:600 clamp(12px, 1.5cqw, 13.5px) var(--font); color:var(--ink); }
.v-crypto .cry-chg { justify-self:end; padding:3px 8px; border-radius:6px;
  font:600 clamp(11px, 1.35cqw, 12.5px) var(--font); }
.v-crypto .cry-chg.is-pos { color:#4caf82; background:color-mix(in srgb, #4caf82 14%, transparent); }
.v-crypto .cry-chg.is-neg { color:#e05c5c; background:color-mix(in srgb, #e05c5c 14%, transparent); }
.v-crypto .cry-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@keyframes cryPulse { 0%, 100% { opacity:1; } 50% { opacity:.3; } }
@keyframes cryFlashUp { from { color:#4caf82; } to { color:var(--ink); } }
@keyframes cryFlashDown { from { color:#e05c5c; } to { color:var(--ink); } }
.v-crypto .cry-price.flash-up { animation:cryFlashUp .6s ease-out; }
.v-crypto .cry-price.flash-down { animation:cryFlashDown .6s ease-out; }
@container site (max-width: 560px) {
  .v-crypto .cry-cols, .v-crypto .cry-row { gap:10px; padding-left:14px; padding-right:14px; }
  .v-crypto .cry-quote { display:none; }
  .v-crypto .cry-cols span:nth-child(2), .v-crypto .cry-price { min-width:74px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-crypto .cry-dot { animation:none; }
  .v-crypto .cry-price.flash-up, .v-crypto .cry-price.flash-down { animation:none; }
  .v-crypto .cry-live { transition:none; }
}
/* demo-video — ported from SB_04 drafts/demo-video-hero (centered product-demo opener: eyebrow +
   headline + sub, a browser-framed demo poster with a real play button, and a social-proof avatar
   strip). Centered column reuses ws-in.center + ws-kick / ws-h1+gradLast / ws-sub / ws-ctarow + btn.
   Origin --dvh-* vars map to theme tokens: surfaces -> --panel/--panel-2, the "glowing browser" frame
   -> --accent via color-mix (no baked hex), text -> --ink/--dim/--faint, hairlines -> --hair, avatars +
   stars -> --accent. The dead "Watch demo" link + static dashboard screenshot become a real,
   self-contained video affordance (mount): a focusable play button (and the Watch-demo CTA) reveal the
   player region — a <video controls> loads when a source is set, otherwise an "add a URL" note. No
   autoplay, nothing animates at rest, prefers-reduced-motion honored; poster scrim is color-mix on --bg
   (no baked black, no blur). Responsive via container queries. */
.v-demo-video .dmv-in { display:flex; flex-direction:column; align-items:center; }
.v-demo-video .dmv-kick { text-transform:uppercase; margin-bottom:18px; }
.v-demo-video .dmv-in .ws-h1 { max-width:18ch; }
.v-demo-video .dmv-in .ws-sub { margin-top:18px; max-width:60ch; }
.v-demo-video .dmv-actions { margin-top:30px; justify-content:center; }
.v-demo-video .dmv-watch { appearance:none; -webkit-appearance:none; }
.v-demo-video .dmv-watch .dmv-tri { display:inline-flex; }
.v-demo-video .dmv-player { width:100%; max-width:860px; margin:clamp(40px, 5cqw, 60px) 0 clamp(34px, 4.5cqw, 52px);
  border:1px solid color-mix(in srgb, var(--accent) 36%, var(--hair)); border-radius:14px; overflow:hidden;
  background:var(--panel);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
    0 30px 70px color-mix(in srgb, var(--accent) 12%, transparent); }
.v-demo-video .dmv-bar { display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-bottom:var(--bw, 1px) solid var(--hair); background:var(--panel-2, var(--panel)); }
.v-demo-video .dmv-dots { display:inline-flex; gap:6px; flex:none; }
.v-demo-video .dmv-dots i { width:10px; height:10px; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 16%, transparent); }
.v-demo-video .dmv-url { flex:1; min-width:0; text-align:center; padding:4px 12px; border-radius:6px;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--bg) 55%, transparent);
  font:500 11.5px var(--mono); color:var(--faint); letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-demo-video .dmv-stage { position:relative; width:100%; aspect-ratio:16 / 9;
  background-color:var(--panel); background-size:cover; background-position:center; overflow:hidden; }
.v-demo-video .dmv-stage.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%);
  background-size:60px 60px; background-position:0 0, 0 30px, 30px -30px, 30px 0; }
.v-demo-video .dmv-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%, color-mix(in srgb, var(--bg) 20%, transparent),
    color-mix(in srgb, var(--bg) 55%, transparent)); }
.v-demo-video .dmv-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%, -50%);
  width:clamp(58px, 8cqw, 74px); height:clamp(58px, 8cqw, 74px); border-radius:50%; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; appearance:none; -webkit-appearance:none;
  background:var(--accent); color:var(--accent-text, var(--bg));
  box-shadow:0 10px 34px color-mix(in srgb, var(--accent) 42%, transparent);
  transition:transform 160ms var(--ease-pop, ease-out); }
.v-demo-video .dmv-play:hover { transform:translate(-50%, -50%) scale(1.07); }
.v-demo-video .dmv-play:active { transform:translate(-50%, -50%) scale(1); }
.v-demo-video .dmv-play:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.v-demo-video .dmv-play-ico { display:inline-flex; margin-left:3px; }
.v-demo-video .dmv-play-ico svg { width:26px; height:26px; }
.v-demo-video .dmv-stage.is-playing .dmv-play,
.v-demo-video .dmv-stage.is-playing .dmv-scrim { display:none; }
.v-demo-video .dmv-region { position:absolute; inset:0; z-index:3; display:flex; align-items:center;
  justify-content:center; background:var(--bg); }
.v-demo-video .dmv-region[hidden] { display:none; }
.v-demo-video .dmv-region:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-demo-video .dmv-video { width:100%; height:100%; display:block; object-fit:contain; background:var(--bg); }
.v-demo-video .dmv-msg { margin:0; padding:22px 28px; max-width:42ch; text-align:center;
  font:500 13.5px/1.6 var(--font); color:var(--dim); }
.v-demo-video .dmv-proof { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.v-demo-video .dmv-proof-item { display:flex; align-items:center; gap:10px; padding:10px 22px; }
.v-demo-video .dmv-proof-item + .dmv-proof-item { border-left:var(--bw, 1px) solid var(--hair); }
.v-demo-video .dmv-avatar { flex:none; width:36px; height:36px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font:700 11.5px var(--font); letter-spacing:.02em;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); user-select:none; }
.v-demo-video .dmv-proof-info { display:flex; flex-direction:column; gap:4px; text-align:left; }
.v-demo-video .dmv-proof-name { font:600 12.5px var(--font); color:var(--ink); line-height:1; }
.v-demo-video .dmv-stars { font-size:11px; line-height:1; letter-spacing:1.5px; color:var(--accent); }
@container site (max-width: 860px) {
  .v-demo-video .dmv-player { max-width:none; }
}
@container site (max-width: 560px) {
  .v-demo-video .dmv-actions { flex-direction:column; align-items:stretch; width:100%; max-width:300px; }
  .v-demo-video .dmv-actions .ws-btn { width:100%; justify-content:center; }
  .v-demo-video .dmv-proof { gap:4px; }
  .v-demo-video .dmv-proof-item { padding:8px 12px; }
  .v-demo-video .dmv-proof-item + .dmv-proof-item { border-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  .v-demo-video .dmv-play { transition:none; }
}
/* darkroom — ported from SB_04 drafts/darkroom-hero (silver-gelatin community lab). Origin --dk-*
   vars map to theme tokens (bg / panel / panel-2 / ink / dim / hair / accent / mono) so the "dark"
   look is built from color-mix on --bg/--ink rather than baked hex — it themes both ways. The origin
   fake CSS develop becomes a REAL contact sheet: a roving-tabindex tablist prints the chosen frame
   while a whenVisible-gated JS clock drives the veil/emerge/safelight and counts the bath. No CSS
   entrance (anims.js owns reveals), no blur/backdrop-filter, transitions ride transform/color only;
   reduced-motion shows the fixed print at once. Split narrow-stacks via the global 860px rule. */
.v-darkroom { position:relative; overflow:clip; }
.v-darkroom .ws-in.split { grid-template-columns:1.02fr 0.98fr; align-items:center; gap:clamp(32px, 5cqw, 72px); }
.v-darkroom .ws-in { position:relative; z-index:1; }
.v-darkroom .dkr-glow { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(52% 46% at 84% -8%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 66%); }
/* copy column */
.v-darkroom .dkr-kick { display:inline-flex; align-items:center; gap:10px; }
.v-darkroom .dkr-lamp { flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.v-darkroom .dkr-chem { list-style:none; margin:26px 0 0; padding:18px 0 0; border-top:var(--bw, 1px) solid var(--hair);
  display:flex; flex-wrap:wrap; gap:10px 22px; font:500 10.5px/1 var(--mono); letter-spacing:0.1em; color:var(--dim); }
.v-darkroom .dkr-chem li { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.v-darkroom .dkr-chem li::before { content:"\25B8"; color:var(--accent); font-size:.9em; }
/* stage + tray */
.v-darkroom .dkr-stage { min-width:0; display:flex; flex-direction:column; gap:14px; }
.v-darkroom .dkr-tray { position:relative; padding:clamp(16px, 3cqw, 30px); background:var(--panel-2, var(--panel));
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 14px) * 1.2);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 24px 55px -34px rgba(0,0,0,0.6); }
.v-darkroom .dkr-print { position:relative; transform:rotate(-1.2deg); background:var(--panel); padding:8px 8px 22px;
  border-radius:2px; box-shadow:0 12px 30px -14px rgba(0,0,0,0.55); }
.v-darkroom .dkr-print:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.v-darkroom .dkr-photo { position:relative; display:block; aspect-ratio:5 / 4; overflow:hidden; border:5px solid var(--bg);
  filter:grayscale(1) contrast(1.05) brightness(1);
  background:
    radial-gradient(20% 24% at var(--dkr-hx,58%) var(--dkr-hy,26%),
      color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 28%, transparent) 42%, transparent 66%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 70%, var(--bg)) 0%, color-mix(in srgb, var(--ink) 42%, var(--bg)) 34%,
      color-mix(in srgb, var(--ink) 16%, var(--bg)) 52%, var(--bg) 84%); }
.v-darkroom .dkr-photo--img { background-size:cover; background-position:center; background-repeat:no-repeat; }
.v-darkroom .dkr-photo::after { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background-image:radial-gradient(130% 110% at 50% 46%, transparent 58%, color-mix(in srgb, var(--bg) 60%, transparent) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:auto, 160px 160px; }
.v-darkroom .dkr-veil { position:absolute; inset:0; pointer-events:none; opacity:0;
  background:color-mix(in srgb, var(--panel) 78%, var(--ink)); }
/* safelight + enlarger timer */
.v-darkroom .dkr-safelight { position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.12;
  background:radial-gradient(120% 92% at 50% 0%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 72%); }
.v-darkroom .dkr-timer { position:absolute; top:12px; right:12px; margin:0; display:inline-flex; align-items:baseline; gap:5px;
  padding:5px 8px; border:var(--bw, 1px) solid var(--hair); border-radius:3px; background:color-mix(in srgb, var(--bg) 68%, transparent);
  font:500 10px var(--mono); letter-spacing:0.1em; color:var(--dim); font-variant-numeric:tabular-nums; }
.v-darkroom .dkr-timer b { font-weight:700; color:var(--ink); }
.v-darkroom .dkr-tray.is-fixed .dkr-timer { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.v-darkroom .dkr-tray.is-fixed .dkr-timer b { color:var(--accent); }
/* contact sheet (tablist) */
.v-darkroom .dkr-sheet { display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.v-darkroom .dkr-frame { position:relative; flex:0 0 auto; width:clamp(64px, 15cqw, 92px); padding:0; border:var(--bw, 1px) solid var(--hair);
  border-radius:3px; background:var(--panel); cursor:pointer; overflow:hidden; transition:transform 160ms ease, border-color 160ms ease; }
.v-darkroom .dkr-frame:hover { transform:translateY(-2px); }
.v-darkroom .dkr-frame:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-darkroom .dkr-frame[aria-selected="true"] { border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.v-darkroom .dkr-thumb { display:block; width:100%; aspect-ratio:5 / 4; filter:grayscale(1) contrast(1.05);
  background:
    radial-gradient(24% 26% at var(--dkr-hx,58%) var(--dkr-hy,26%), color-mix(in srgb, var(--ink) 88%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 62%, var(--bg)) 0%, color-mix(in srgb, var(--ink) 22%, var(--bg)) 52%, var(--bg) 92%); }
.v-darkroom .dkr-frame--img .dkr-thumb { background-size:cover; background-position:center; background-repeat:no-repeat; }
.v-darkroom .dkr-fcode { display:block; padding:4px 6px; font:600 8.5px/1 var(--mono); letter-spacing:0.08em; text-transform:uppercase;
  color:var(--dim); text-align:left; background:var(--panel); border-top:var(--bw, 1px) solid var(--hair);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-darkroom .dkr-frame[aria-selected="true"] .dkr-fcode { color:var(--ink); }
/* rebate caption + sr-only live region */
.v-darkroom .dkr-rebate { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 22px; margin:2px 0 0;
  font:600 9.5px/1.4 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); }
.v-darkroom .dkr-reb-code { color:var(--accent); }
.v-darkroom .dkr-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
@container site (max-width: 860px) {
  .v-darkroom .ws-in.split { grid-template-columns:1fr; gap:clamp(30px, 6cqw, 46px); }
  .v-darkroom .dkr-stage { max-width:560px; }
}
@container site (max-width: 560px) {
  .v-darkroom .dkr-chem { gap:8px 16px; }
  .v-darkroom .dkr-frame { width:clamp(56px, 22cqw, 80px); }
  .v-darkroom .dkr-rebate { font-size:9px; letter-spacing:0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .v-darkroom .dkr-frame { transition:none; }
  .v-darkroom .dkr-frame:hover { transform:none; }
}
/* dashboard preview — ported from SB_04 drafts/dashboard-preview-hero (SaaS analytics hero:
   centered copy + CTAs over a perspective-tilted product-UI frame). DISTINCT variant from v-dashboard.
   Origin --dph-* vars -> tokens: bg->--bg, surface->--panel, surface-2->--panel-2, border->--hair,
   heading->--ink, body->--dim, label->--faint, accent->--accent (accent-dim -> a color-mix soft);
   up/down keep semantic green/red literals. The draft's placeholder-image chart becomes a REAL
   token-drawn bar chart; its cursor:default nav items + range pills become TWO real roving-tabindex
   tablists (nav switches KPI cards + chart title; 7D/30D/90D pills reshape the chart), announced via an
   aria-live status. No entrance anims (anims.js owns those) — the only motion is a transform-only bar
   transition on switch, off under reduced-motion. No blur/backdrop-filter. Container queries only; the
   tilt flattens and the sidebar hides on narrow. */
.v-dashboard-preview .dpv-in { display:flex; flex-direction:column; align-items:center; gap:clamp(34px, 5cqw, 56px); }
.v-dashboard-preview .dpv-copy { text-align:center; max-width:640px; }
.v-dashboard-preview .dpv-kick { margin-bottom:16px; }
.v-dashboard-preview .dpv-h1 { font-size:clamp(28px, 4.8cqw, 46px); letter-spacing:-0.02em; }
.v-dashboard-preview .dpv-sub { margin:16px auto 0; }
.v-dashboard-preview .dpv-ctarow { justify-content:center; margin-top:26px; }
/* stage + perspective frame */
.v-dashboard-preview .dpv-stage { position:relative; width:100%; perspective:1500px;
  --dpv-soft:color-mix(in srgb, var(--accent) 14%, transparent); --dpv-up:#22c55e; --dpv-down:#ef4444; }
.v-dashboard-preview .dpv-frame { transform:rotateX(6deg); transform-origin:top center; overflow:hidden;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:14px;
  box-shadow:var(--elev, 0 30px 60px -28px rgba(0,0,0,0.5)); }
/* top bar */
.v-dashboard-preview .dpv-bar { display:flex; align-items:center; gap:20px; height:48px; padding:0 16px;
  background:var(--panel-2); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-dashboard-preview .dpv-logo { display:inline-flex; align-items:center; gap:8px; flex:none; }
.v-dashboard-preview .dpv-logo-mark { width:18px; height:18px; border-radius:5px; background:var(--accent); }
.v-dashboard-preview .dpv-logo-tx { font:700 13px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-dashboard-preview .dpv-nav { display:flex; gap:2px; flex:1; min-width:0; }
.v-dashboard-preview .dpv-tab { appearance:none; -webkit-appearance:none; border:0; background:none; cursor:pointer;
  font:500 12px var(--font); color:var(--faint); padding:5px 10px; border-radius:6px; white-space:nowrap;
  transition:color .16s linear; }
.v-dashboard-preview .dpv-tab:hover { color:var(--dim); }
.v-dashboard-preview .dpv-tab.is-active { color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-dashboard-preview .dpv-tab:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.v-dashboard-preview .dpv-avatar { width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--dpv-soft); border:1px solid var(--accent); }
/* body: sidebar + main */
.v-dashboard-preview .dpv-body { display:flex; min-height:300px; }
.v-dashboard-preview .dpv-side { width:158px; flex:none; border-right:var(--bw, 1px) solid var(--hair);
  padding:14px 10px; display:flex; flex-direction:column; gap:2px; }
.v-dashboard-preview .dpv-slink { display:flex; align-items:center; gap:9px; font:500 12px var(--font);
  color:var(--faint); padding:7px 10px; border-radius:7px; }
.v-dashboard-preview .dpv-slink.is-active { background:var(--dpv-soft); color:var(--accent); }
.v-dashboard-preview .dpv-sicon { width:13px; height:13px; flex:none; opacity:.55; background:currentColor; border-radius:3px; }
.v-dashboard-preview .dpv-slink.is-active .dpv-sicon { opacity:1; }
.v-dashboard-preview .dpv-main { flex:1; min-width:0; padding:18px; display:flex; flex-direction:column; gap:16px; }
/* KPI cards */
.v-dashboard-preview .dpv-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.v-dashboard-preview .dpv-stat { background:var(--panel-2); border:var(--bw, 1px) solid var(--hair); border-radius:9px;
  padding:12px 14px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.v-dashboard-preview .dpv-stat-l { font:600 9.5px var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-dashboard-preview .dpv-stat-v { font:800 clamp(18px, 2.4cqw, 24px) var(--font-head, var(--font));
  color:var(--accent); letter-spacing:-0.02em; line-height:1; }
.v-dashboard-preview .dpv-stat-d { font:700 10px var(--font); }
.v-dashboard-preview .dpv-stat-d.up { color:var(--dpv-up); }
.v-dashboard-preview .dpv-stat-d.down { color:var(--dpv-down); }
/* chart */
.v-dashboard-preview .dpv-chart { background:var(--panel-2); border:var(--bw, 1px) solid var(--hair); border-radius:9px;
  padding:14px; flex:1; display:flex; flex-direction:column; gap:12px; }
.v-dashboard-preview .dpv-chead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.v-dashboard-preview .dpv-ctitle { font:700 12px var(--font-head, var(--font)); color:var(--ink); }
.v-dashboard-preview .dpv-pills { display:flex; gap:3px; flex:none; }
.v-dashboard-preview .dpv-pill { appearance:none; -webkit-appearance:none; border:0; cursor:pointer;
  font:700 10px var(--font); padding:4px 9px; border-radius:5px; color:var(--faint);
  background:color-mix(in srgb, var(--ink) 5%, transparent); transition:color .16s linear; }
.v-dashboard-preview .dpv-pill:hover { color:var(--dim); }
.v-dashboard-preview .dpv-pill.is-active { color:var(--accent); background:var(--dpv-soft); }
.v-dashboard-preview .dpv-pill:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* token bar chart — no libs, no images */
.v-dashboard-preview .dpv-plot { flex:1; min-height:120px; display:flex; align-items:flex-end;
  gap:clamp(3px, 0.6cqw, 7px); padding-top:8px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-dashboard-preview .dpv-col { flex:1 1 0; height:100%; display:flex; align-items:flex-end; min-width:0; }
.v-dashboard-preview .dpv-fill { width:100%; height:100%; transform-origin:bottom; transform:scaleY(0.4);
  border-radius:3px 3px 0 0; background:color-mix(in srgb, var(--accent) 32%, transparent);
  transition:transform .5s cubic-bezier(.22, .61, .36, 1); }
.v-dashboard-preview .dpv-col.is-peak .dpv-fill { background:var(--accent); }
@media (prefers-reduced-motion: reduce) { .v-dashboard-preview .dpv-fill { transition:none; } }
/* visually-hidden live status */
.v-dashboard-preview .dpv-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* responsive — container queries (components live in panes/cards of any width) */
@container site (max-width: 860px) {
  .v-dashboard-preview .dpv-frame { transform:rotateX(3deg); }
  .v-dashboard-preview .dpv-body { min-height:0; }
  .v-dashboard-preview .dpv-side { width:132px; }
}
@container site (max-width: 560px) {
  .v-dashboard-preview .dpv-frame { transform:none; }
  .v-dashboard-preview .dpv-side { display:none; }
  .v-dashboard-preview .dpv-avatar, .v-dashboard-preview .dpv-logo-tx { display:none; }
  .v-dashboard-preview .dpv-bar { gap:8px; padding:0 12px; }
  .v-dashboard-preview .dpv-nav { gap:1px; overflow-x:auto; scrollbar-width:none; }
  .v-dashboard-preview .dpv-nav::-webkit-scrollbar { display:none; }
  .v-dashboard-preview .dpv-tab { padding:5px 8px; font-size:11px; }
  .v-dashboard-preview .dpv-main { padding:14px; }
  .v-dashboard-preview .dpv-stats { grid-template-columns:1fr 1fr; }
}
/* diagonal — ported from SB_04 drafts/diagonal-hero (copy on a diagonally-clipped panel over a
   full-bleed visual; the image is revealed along the slanted edge). Origin --diag-* map to tokens:
   bg->--bg, heading->--ink, body->--dim/--faint, accent->--accent, border->--hair, display/body
   fonts->--font-head/--font. The cut is a clip-path (no blur); the accent edge is a SECOND clipped
   layer nudged 3px right so the stripe tracks the diagonal at ANY aspect ratio (origin used a fixed
   skewX(-10deg) bar that only lined up at one size). Baked fade-up entrance dropped — anims.js owns
   entrances, nothing animates at rest. Contained as a rounded card in .ws-in (not full-bleed) so the
   clip can't run off-screen; container-query flatten to an image-over-copy stack when narrow. */
.v-diagonal .dgn-stage { position:relative; display:flex; align-items:center;
  min-height:clamp(420px, 52cqw, 560px); overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 16px); background:var(--bg);
  box-shadow:var(--inset-hi, 0 0 #0000), var(--elev, 0 0 #0000); }
.v-diagonal .dgn-media { position:absolute; inset:0; background-size:cover; background-position:center;
  background-repeat:no-repeat; background-color:var(--panel); }
.v-diagonal .dgn-media.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--panel)) 0%, var(--panel-2, var(--panel)) 72%); }
.v-diagonal .dgn-media.ph::after { content:''; position:absolute; inset:0;
  background:
    radial-gradient(78% 72% at 78% 24%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 12px, transparent 12px 24px); }
/* accent stripe: same cut nudged 3px right, then the panel covers all but the sliver */
.v-diagonal .dgn-accent { position:absolute; inset:0; pointer-events:none;
  clip-path:polygon(0 0, calc(56% + 3px) 0, calc(67% + 3px) 100%, 0 100%);
  background:linear-gradient(to bottom, transparent, var(--accent) 18%, var(--accent) 82%, transparent);
  opacity:.6; }
/* solid themed copy panel with the diagonal right edge */
.v-diagonal .dgn-panel { position:absolute; inset:0; pointer-events:none;
  clip-path:polygon(0 0, 56% 0, 67% 100%, 0 100%);
  background:
    radial-gradient(120% 96% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 55%, var(--bg)) 0%, var(--bg) 100%); }
.v-diagonal .dgn-copy { position:relative; z-index:2; min-width:0; max-width:31rem;
  padding:clamp(2.4rem, 5cqw, 4rem) clamp(1.4rem, 5cqw, 4rem); }
.v-diagonal .dgn-copy .ws-kick { margin-bottom:16px; }
.v-diagonal .dgn-copy .ws-sub { margin-top:18px; max-width:42ch; }
.v-diagonal .dgn-copy .ws-ctarow { margin-top:28px; }
/* flatten: image band over full-width copy, no diagonal */
@container site (max-width: 860px) {
  .v-diagonal .dgn-stage { flex-direction:column; align-items:stretch; min-height:0; }
  .v-diagonal .dgn-media { position:relative; inset:auto; width:100%;
    height:clamp(180px, 42cqw, 300px); flex:none; }
  .v-diagonal .dgn-accent, .v-diagonal .dgn-panel { display:none; }
  .v-diagonal .dgn-copy { max-width:none; width:100%;
    padding:clamp(1.8rem, 5cqw, 2.6rem) clamp(1.4rem, 5cqw, 2rem); }
}
@container site (max-width: 560px) {
  .v-diagonal .dgn-copy .ws-ctarow { flex-direction:column; align-items:flex-start; }
  .v-diagonal .dgn-copy .ws-ctarow .ws-btn { width:100%; justify-content:center; }
}
/* devtools — ported from SB_04 drafts/devtools-hero (CLI / developer-tools opener: copy left —
   headline, a working copy-to-clipboard install pill, feature bullets, CTAs; a dev console right).
   Origin --dth-* vars -> tokens: bg->--bg, term-bg->--panel/--panel-2, heading->--ink, body->--dim,
   border->--hair, accent->--accent, prompt->--faint, mono font->--mono. The draft's DEAD Copy button
   becomes a REAL clipboard copy (announced via a visually-hidden aria-live status), and its CSS-typed
   terminal (a baked entrance) becomes a REAL roving-tabindex tablist — deploy/test/logs swap the console
   transcript, also announced. Window dots follow the house neutral convention; ok-green / warn-amber /
   bad-red stay literal semantic hues. No entrance anims (anims.js owns those), nothing animates at rest;
   transitions ride color only. Container queries only — the split narrow-stacks via the global 860px
   rule (.ws-hero .ws-in.split) and the console scrolls-x inside its own box so it never widens the page. */
.v-devtools .dvt-in { align-items:center; }
.v-devtools .dvt-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-devtools .dvt-copy .ws-h1 { font-size:clamp(30px, 4.6cqw, 50px); letter-spacing:-0.02em; line-height:1.08; }
.v-devtools .dvt-copy .ws-sub { margin-top:18px; max-width:48ch; }
/* install pill — real copy-to-clipboard */
.v-devtools .dvt-install { display:inline-flex; align-items:center; gap:12px; margin-top:26px; max-width:100%;
  padding:9px 10px 9px 15px; border-radius:10px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 60%, var(--bg)); font:500 13px var(--mono); }
.v-devtools .dvt-dollar { color:var(--faint); flex:none; }
.v-devtools .dvt-cmd { color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-devtools .dvt-copy-btn { flex:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  appearance:none; -webkit-appearance:none; border:var(--bw, 1px) solid var(--hair); border-radius:7px;
  background:var(--panel-2); color:var(--dim); padding:6px 10px; font:600 11px var(--font);
  transition:color .16s linear, border-color .16s linear; }
.v-devtools .dvt-copy-btn:hover { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-devtools .dvt-copy-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-devtools .dvt-copy-btn.is-done { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.v-devtools .dvt-copy-btn svg { width:13px; height:13px; flex:none; }
/* feature bullets */
.v-devtools .dvt-feats { list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.v-devtools .dvt-feat { display:flex; align-items:flex-start; gap:11px; font:500 14px var(--font); color:var(--dim); line-height:1.5; }
.v-devtools .dvt-fico { flex:none; margin-top:1px; width:15px; height:15px; color:var(--accent); }
.v-devtools .dvt-fico svg { width:100%; height:100%; display:block; }
.v-devtools .dvt-ctarow { margin-top:30px; }
/* console panel */
.v-devtools .dvt-panel { border:var(--bw, 1px) solid var(--hair); border-radius:14px; overflow:hidden; background:var(--panel);
  box-shadow:var(--elev, 0 30px 60px -34px rgba(0,0,0,0.5)); --dvt-ok:#22c55e; --dvt-warn:#f5b325; --dvt-bad:#ef4444; }
.v-devtools .dvt-chrome { display:flex; align-items:center; gap:14px; height:46px; padding:0 14px;
  background:var(--panel-2); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-devtools .dvt-dots { display:inline-flex; gap:7px; flex:none; }
.v-devtools .dvt-dots i { width:11px; height:11px; border-radius:50%; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.v-devtools .dvt-tablist { display:flex; gap:3px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.v-devtools .dvt-tablist::-webkit-scrollbar { display:none; }
.v-devtools .dvt-tab { appearance:none; -webkit-appearance:none; border:0; background:none; cursor:pointer;
  font:600 12px var(--mono); color:var(--faint); padding:5px 11px; border-radius:7px; white-space:nowrap;
  transition:color .16s linear; }
.v-devtools .dvt-tab:hover { color:var(--dim); }
.v-devtools .dvt-tab.is-active { color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-devtools .dvt-tab:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* console body — the transcript; scrolls-x in its own box */
.v-devtools .dvt-console { padding:18px; min-height:250px; overflow-x:auto;
  font:500 12.5px/1.75 var(--mono); background:color-mix(in srgb, var(--panel) 65%, var(--bg)); }
.v-devtools .dvt-line { display:flex; gap:10px; align-items:baseline; white-space:nowrap; }
.v-devtools .dvt-line.out { padding-left:19px; }
.v-devtools .dvt-p { color:var(--accent); flex:none; }
.v-devtools .dvt-t { min-width:0; }
.v-devtools .dvt-t.k-cmd { color:var(--ink); }
.v-devtools .dvt-t.k-ok { color:var(--dvt-ok); }
.v-devtools .dvt-t.k-warn { color:var(--dvt-warn); }
.v-devtools .dvt-t.k-bad { color:var(--dvt-bad); }
.v-devtools .dvt-t.k-info { color:var(--accent); }
.v-devtools .dvt-t.k-link { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.v-devtools .dvt-t.k-dim { color:var(--faint); }
.v-devtools .dvt-caret { display:inline-block; width:0.5em; height:1em; background:var(--accent); vertical-align:-0.12em; }
/* visually-hidden live status */
.v-devtools .dvt-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* responsive — container queries; split narrow-stacks via the global 860px rule */
@container site (max-width: 560px) {
  .v-devtools .dvt-copy .ws-sub { max-width:none; }
  .v-devtools .dvt-console { padding:14px; min-height:200px; font-size:11.5px; }
  .v-devtools .dvt-chrome { gap:10px; padding:0 12px; }
}
/* directory — ported from SB_04 drafts/directory-hero (a listings directory opener: headline,
   a search field and category chips over a grid of listing cards). Origin --drh-* vars map to
   theme tokens: bg->--bg, card surface->--panel, heading->--ink, body->--dim/--faint,
   border->--hair, accent->--accent, font->--font/--font-head/--mono. The origin's dead search
   box + active-only chips become a REAL combined filter (see heros.js mount); dead accent submit
   button -> a functional clear button. Transitions ride color/border/transform only; hover and
   selected BACKGROUNDS switch instantly. Container queries: 3-up auto grid -> 2-col (860) -> 1-col (560). */
.v-directory .dir-in { display:flex; flex-direction:column; align-items:center; gap:clamp(26px, 3.6cqw, 44px); }
.v-directory .dir-head { max-width:640px; display:flex; flex-direction:column; gap:14px; }
.v-directory .dir-head > * { margin:0; }
/* search — leading magnifier + live input + clear button */
.v-directory .dir-search { width:100%; max-width:640px; }
.v-directory .dir-sfield { display:flex; align-items:center; gap:10px; padding:0 8px 0 16px;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  transition:border-color .16s linear; }
.v-directory .dir-sfield:focus-within { border-color:var(--accent); }
.v-directory .dir-sicon { flex:none; width:18px; height:18px; color:var(--faint); }
.v-directory .dir-sinput { flex:1; min-width:0; background:transparent; border:0; outline:none;
  padding:14px 0; font:400 clamp(14px, 1.6cqw, 15.5px) var(--font); color:var(--ink); text-align:left; }
.v-directory .dir-sinput::placeholder { color:var(--faint); }
.v-directory .dir-sinput::-webkit-search-cancel-button { display:none; }
.v-directory .dir-sclear { flex:none; display:none; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent;
  color:var(--dim); cursor:pointer; transition:color .16s linear; }
.v-directory .dir-sclear svg { width:16px; height:16px; }
.v-directory .dir-sclear.show { display:inline-flex; }
.v-directory .dir-sclear:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-directory .dir-sclear:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* category chips — a roving-tabindex radiogroup */
.v-directory .dir-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:840px; }
.v-directory .dir-chip { appearance:none; -webkit-appearance:none; cursor:pointer;
  border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:8px 16px; background:transparent;
  font:500 clamp(12.5px, 1.4cqw, 13.5px) var(--font); color:var(--dim); white-space:nowrap;
  transition:color .16s linear, border-color .16s linear; }
.v-directory .dir-chip:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-directory .dir-chip[aria-checked="true"] { color:var(--accent); font-weight:600;
  border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.v-directory .dir-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* listing grid + cards */
.v-directory .dir-grid { width:100%; text-align:left; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(220px, 26cqw, 300px), 1fr));
  gap:clamp(20px, 2.6cqw, 30px); }
.v-directory .dir-card { display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  transition:border-color .16s linear, transform .16s ease; }
.v-directory .dir-card[hidden] { display:none; }
.v-directory .dir-card:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); transform:translateY(-2px); }
.v-directory .dir-thumb { position:relative; width:100%; aspect-ratio:16 / 9; border-bottom:var(--bw, 1px) solid var(--hair);
  background-size:cover; background-position:center; background-repeat:no-repeat; }
.v-directory .dir-thumb.ph { background-image:radial-gradient(120% 120% at 28% 18%,
  color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel) 72%); }
.v-directory .dir-thumb.ph::after { content:''; position:absolute; inset:0;
  background:linear-gradient(125deg, transparent 42%, color-mix(in srgb, var(--accent) 12%, transparent)); }
.v-directory .dir-cbody { flex:1; display:flex; flex-direction:column; gap:9px; padding:clamp(15px, 1.7cqw, 20px); }
.v-directory .dir-cat { font:700 10px var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); }
.v-directory .dir-ctitle { margin:0; font:700 clamp(15px, 1.7cqw, 17px)/1.3 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; text-wrap:balance; transition:color .16s linear; }
.v-directory .dir-card:hover .dir-ctitle { color:var(--accent); }
.v-directory .dir-cdesc { margin:0; font:400 clamp(13px, 1.5cqw, 13.5px)/1.6 var(--font); color:var(--dim); }
.v-directory .dir-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.v-directory .dir-tag { font:600 10px var(--mono); letter-spacing:.5px; color:var(--faint);
  background:color-mix(in srgb, var(--ink) 6%, transparent); padding:3px 9px; border-radius:6px; }
/* empty state + live count */
.v-directory .dir-empty { margin:0; width:100%; padding:clamp(26px, 4cqw, 44px); text-align:center;
  font:500 14px var(--font); color:var(--dim); border:var(--bw, 1px) dashed var(--hair); border-radius:var(--radius, 12px); }
.v-directory .dir-empty[hidden] { display:none; }
.v-directory .dir-status { min-height:1.3em; margin:0; font:500 12px var(--font); color:var(--faint); }
@container site (max-width: 860px) {
  .v-directory .dir-grid { grid-template-columns:repeat(2, 1fr); }
}
@container site (max-width: 560px) {
  .v-directory .dir-grid { grid-template-columns:1fr; }
}
/* editorial-sb — ported from SB_04 drafts/editorial-hero. Registered as editorial-sb because the id `editorial`
   is already taken; all rules are qualified .ws-hero.v-editorial-sb and helpers use the edt- prefix so nothing
   bleeds to/from the existing .v-editorial. The origin's warm cream/red palette, its four baked theme variants and
   the Google-Fonts CDN are dropped: colour rides tokens (--bg/--ink/--dim/--faint/--accent/--hair) and the display
   serif rides --font-head with a generic serif fallback so the editorial voice survives with no brand head font.
   Motion is hover/interaction only (transform/opacity/color); no blur, no baked entrance. */
.ws-hero.v-editorial-sb { position:relative; isolation:isolate; }
.ws-hero.v-editorial-sb .edt-in { position:relative; z-index:1; }
/* oversized issue number — decorative watermark, token-tinted, behind the lead */
.ws-hero.v-editorial-sb .edt-bignum { position:absolute; z-index:0; top:clamp(-16px, -1.6cqw, -4px); right:2cqw;
  font:800 clamp(140px, 34cqw, 360px)/0.8 var(--font-head, Georgia, 'Times New Roman', serif); font-style:italic;
  color:color-mix(in srgb, var(--accent) 9%, transparent); letter-spacing:-0.04em; pointer-events:none; user-select:none; }
/* asymmetric body — dominant headline column beside a narrower meta/standfirst aside */
.ws-hero.v-editorial-sb .edt-body { display:grid; grid-template-columns:minmax(0, 1.62fr) minmax(0, 0.92fr);
  gap:clamp(28px, 4cqw, 60px); align-items:stretch; }
.ws-hero.v-editorial-sb .edt-lead { min-width:0; display:flex; flex-direction:column; }
.ws-hero.v-editorial-sb .edt-kick { margin-bottom:22px; }
.ws-hero.v-editorial-sb .edt-head { font-family:var(--font-head, Georgia, 'Times New Roman', serif); font-style:italic;
  font-weight:600; line-height:0.98; letter-spacing:-0.02em; max-width:15ch; }
.ws-hero.v-editorial-sb .edt-byline { margin:22px 0 0; font:500 12.5px var(--font); color:var(--faint); letter-spacing:0.02em; }
.ws-hero.v-editorial-sb .edt-aside { min-width:0; display:flex; flex-direction:column; justify-content:flex-end; gap:18px;
  padding-left:clamp(20px, 2.6cqw, 38px); border-left:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-editorial-sb .edt-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font:600 10.5px var(--mono);
  letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); }
.ws-hero.v-editorial-sb .edt-meta i { font-style:normal; color:color-mix(in srgb, var(--ink) 24%, transparent); }
.ws-hero.v-editorial-sb .edt-stand { max-width:42ch; }
.ws-hero.v-editorial-sb .edt-read { align-self:flex-start; }
/* bold rule with an accent lead segment */
.ws-hero.v-editorial-sb .edt-rule { position:relative; height:0; border:0; border-top:2px solid var(--hair);
  margin:clamp(34px, 4.4cqw, 60px) 0 clamp(24px, 3cqw, 38px); }
.ws-hero.v-editorial-sb .edt-rule::before { content:''; position:absolute; top:-2px; left:0; width:60px; border-top:2px solid var(--accent); }
/* issue-contents rail — honest static contents, not fake links */
.ws-hero.v-editorial-sb .edt-strip { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:0; }
.ws-hero.v-editorial-sb .edt-item { display:flex; flex-direction:column; gap:9px; padding:0 24px; min-width:0; border-left:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-editorial-sb .edt-item:first-child { padding-left:0; border-left:0; }
.ws-hero.v-editorial-sb .edt-item:last-child { padding-right:0; }
.ws-hero.v-editorial-sb .edt-idx { font:700 10px var(--mono); letter-spacing:2px; color:var(--accent); }
.ws-hero.v-editorial-sb .edt-ititle { margin:0; font:600 13.5px/1.4 var(--font); color:var(--ink); letter-spacing:-0.005em; }
.ws-hero.v-editorial-sb .edt-iread { font:500 10px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
/* responsive — container queries (the asymmetric grid collapses toward one column on narrow) */
@container site (max-width: 860px) {
  .ws-hero.v-editorial-sb .edt-body { grid-template-columns:1fr; gap:clamp(22px, 4cqw, 32px); align-items:start; }
  .ws-hero.v-editorial-sb .edt-aside { padding-left:0; border-left:0; padding-top:26px; border-top:var(--bw, 1px) solid var(--hair); justify-content:flex-start; }
  .ws-hero.v-editorial-sb .edt-head { max-width:20ch; }
  .ws-hero.v-editorial-sb .edt-bignum { font-size:clamp(120px, 40cqw, 240px); }
  .ws-hero.v-editorial-sb .edt-strip { grid-template-columns:1fr 1fr; gap:26px 0; }
  .ws-hero.v-editorial-sb .edt-item:nth-child(2n+1) { padding-left:0; border-left:0; }
  .ws-hero.v-editorial-sb .edt-item:nth-child(2n) { padding-right:0; }
}
@container site (max-width: 560px) {
  .ws-hero.v-editorial-sb .edt-bignum { top:auto; bottom:12cqw; right:-4cqw; font-size:44cqw; }
  .ws-hero.v-editorial-sb .edt-strip { grid-template-columns:1fr; gap:0; }
  .ws-hero.v-editorial-sb .edt-item { flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:6px 12px;
    padding:16px 0; border-left:0; border-top:var(--bw, 1px) solid var(--hair); }
  .ws-hero.v-editorial-sb .edt-item:first-child { border-top:0; padding-top:0; }
  .ws-hero.v-editorial-sb .edt-item:last-child { padding-bottom:0; }
  .ws-hero.v-editorial-sb .edt-idx { flex:none; }
  .ws-hero.v-editorial-sb .edt-ititle { flex:1; min-width:62%; }
}
/* education — ported from SB_04 drafts/education-hero (learning-platform split: copy + enroll
   CTAs beside a featured-courses grid). Origin --edh-* vars map to theme tokens: bg->--bg,
   heading->--ink, body->--dim, muted->--faint, accent->--accent, border->--hair, surface->--panel.
   The origin's dead search box + static topic chips + fixed 2x2 image grid become ONE real control:
   the subject chips are a roving-tabindex radiogroup (see mount) that swaps the featured course set
   and updates the panel heading + an aria-live count. Selected/hover backgrounds switch instantly
   (transform/color/border transitions only, nothing at rest); entrance motion belongs to the reveal
   system. Split narrow-stacks via a re-declared 860 rule (higher specificity than the global one);
   the course grid drops to one column at 560. */
.v-education .ws-in.split.edu-in { grid-template-columns:1.02fr minmax(0, 1fr); align-items:stretch; gap:clamp(36px, 5cqw, 64px); }
.v-education .edu-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
/* subject filter — a real roving-tabindex radiogroup (mount adds keyboard + aria + course swap) */
.v-education .edu-filter { margin-top:clamp(24px, 3cqw, 34px); }
.v-education .edu-flabel { display:block; margin-bottom:12px; font:700 10px var(--mono); letter-spacing:2px;
  text-transform:uppercase; color:var(--faint); }
.v-education .edu-chips { display:flex; flex-wrap:wrap; gap:9px; }
.v-education .edu-chip { appearance:none; -webkit-appearance:none; cursor:pointer; margin:0;
  padding:8px 16px; border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:transparent;
  font:500 13px var(--font); color:var(--dim); letter-spacing:-0.01em;
  transition:color .16s linear, border-color .16s linear, transform 140ms var(--ease-pop, ease-out); }
.v-education .edu-chip:hover { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-education .edu-chip.is-sel, .v-education .edu-chip[aria-checked="true"] { color:var(--accent); font-weight:600;
  background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:var(--accent); }
.v-education .edu-chip:active { transform:translateY(1px); }
.v-education .edu-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-education .edu-stats { margin-top:clamp(30px, 3.6cqw, 44px); }
/* featured-courses panel — heading updates live with the chosen subject */
.v-education .edu-panel { display:flex; flex-direction:column; gap:16px; min-width:0; }
.v-education .edu-phead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.v-education .edu-ptitle { font:700 13px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-education .edu-pcount { font:600 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.v-education .edu-stage { flex:1; }
.v-education .edu-group { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(12px, 1.6cqw, 18px); height:100%; align-content:start; }
.v-education .edu-group[hidden] { display:none; }
.v-education .edu-course { display:flex; flex-direction:column; overflow:hidden; min-width:0;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); background:var(--panel);
  transition:transform 160ms var(--ease-pop, ease-out), border-color .16s linear; }
.v-education .edu-course:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 42%, var(--hair)); }
.v-education .edu-thumb { position:relative; aspect-ratio:16 / 10; background-size:cover; background-position:center; }
.v-education .edu-thumb.ph { background-image:radial-gradient(120% 120% at 26% 16%,
  color-mix(in srgb, var(--accent) 26%, var(--panel-2, var(--panel))), var(--panel-2, var(--panel)) 74%); }
.v-education .edu-thumb.ph::after { content:''; position:absolute; inset:0;
  background:linear-gradient(130deg, transparent 44%, color-mix(in srgb, var(--accent) 14%, transparent)); }
.v-education .edu-level { position:absolute; left:10px; bottom:10px; padding:3px 9px; border-radius:999px;
  font:700 9px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--ink);
  background:color-mix(in srgb, var(--bg) 74%, transparent); border:var(--bw, 1px) solid var(--hair); }
.v-education .edu-cbody { display:flex; flex-direction:column; gap:6px; padding:13px 14px 15px; min-width:0; }
.v-education .edu-ctitle { font:700 clamp(13.5px, 1.5cqw, 15px)/1.3 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; text-wrap:balance; transition:color .16s linear; }
.v-education .edu-course:hover .edu-ctitle { color:var(--accent); }
.v-education .edu-cmeta { font:500 11.5px var(--font); color:var(--faint); }
.v-education .edu-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@container site (max-width: 860px) {
  .v-education .ws-in.split.edu-in { grid-template-columns:1fr; gap:clamp(30px, 5cqw, 44px); }
}
@container site (max-width: 560px) {
  .v-education .edu-group { grid-template-columns:1fr; }
}
/* ecommerce — ported from SB_04 drafts/ecommerce-hero: a product buy-panel beside a gallery.
   Origin --ech-* vars -> theme tokens (text->--ink/--dim/--faint, border->--hair, accent->--accent);
   swatch dots stay literal (they ARE product colour data, like an image). Colour + size are real
   roving-tabindex radiogroups, the thumb rail swaps the main image, the stepper recomputes the total,
   Add-to-cart / wishlist announce via aria-live. Selected/hover backgrounds set instantly; only
   transform/opacity/colour transition. Split narrow-stacks on the global 860px rule. */
.v-ecommerce .ecm-in { align-items:center; gap:clamp(30px, 4.6cqw, 60px); }
.v-ecommerce .ecm-buy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-ecommerce .ecm-title { font-size:clamp(28px, 4.6cqw, 46px); }
.v-ecommerce .ecm-pricerow { display:flex; align-items:baseline; gap:12px; margin-top:14px; }
.v-ecommerce .ecm-price { font:800 clamp(20px, 2.7cqw, 28px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; }
.v-ecommerce .ecm-sub { margin-top:16px; max-width:46ch; }
.v-ecommerce .ecm-opt { margin-top:24px; }
.v-ecommerce .ecm-opthead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.v-ecommerce .ecm-optlabel { font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-ecommerce .ecm-optval { font:600 13px var(--font); color:var(--ink); }
.v-ecommerce .ecm-sizeguide { font:500 12px var(--font); color:var(--dim); cursor:pointer; text-decoration:underline; text-underline-offset:2px; transition:color 140ms linear; }
.v-ecommerce .ecm-sizeguide:hover { color:var(--accent); }
/* colour swatches — roving radiogroup; dot colour is product data (literal) */
.v-ecommerce .ecm-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.v-ecommerce .ecm-swatch { appearance:none; -webkit-appearance:none; border:0; padding:3px; margin:0; background:none; cursor:pointer;
  border-radius:50%; box-shadow:0 0 0 1px var(--hair); transition:transform 140ms var(--ease-pop, ease-out); }
.v-ecommerce .ecm-swatch:hover { transform:translateY(-1px); }
.v-ecommerce .ecm-swatch.is-on { box-shadow:0 0 0 2px var(--accent); }
.v-ecommerce .ecm-swatch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-ecommerce .ecm-swdot { display:block; width:26px; height:26px; border-radius:50%; background:var(--sw, #888888);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.22); }
/* size radiogroup */
.v-ecommerce .ecm-sizes { display:flex; gap:8px; flex-wrap:wrap; }
.v-ecommerce .ecm-size { appearance:none; -webkit-appearance:none; cursor:pointer; min-width:46px; padding:9px 13px;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55); background:color-mix(in srgb, var(--ink) 3%, transparent);
  color:var(--ink); font:600 13px var(--font); transition:transform 140ms var(--ease-pop, ease-out), color 140ms linear; }
.v-ecommerce .ecm-size:hover { transform:translateY(-1px); }
.v-ecommerce .ecm-size.is-on { border-color:var(--accent); background:var(--accent-fill); color:var(--accent); }
.v-ecommerce .ecm-size.is-out { opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.v-ecommerce .ecm-size.is-out:hover { transform:none; }
.v-ecommerce .ecm-size:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* buy row: stepper + add-to-cart + wishlist */
.v-ecommerce .ecm-buyrow { display:flex; align-items:stretch; gap:12px; margin-top:30px; flex-wrap:wrap; }
.v-ecommerce .ecm-stepper { display:inline-flex; align-items:center; flex:none; border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * .75); overflow:hidden; }
.v-ecommerce .ecm-step { appearance:none; -webkit-appearance:none; border:0; cursor:pointer; width:38px; align-self:stretch;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:600 18px/1 var(--font); transition:color 140ms linear; }
.v-ecommerce .ecm-step:hover:not(:disabled) { color:var(--accent); }
.v-ecommerce .ecm-step:disabled { opacity:.35; cursor:not-allowed; }
.v-ecommerce .ecm-step:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-ecommerce .ecm-qty { min-width:42px; text-align:center; font:600 14px var(--font); color:var(--ink); }
.v-ecommerce .ecm-add { flex:1 1 auto; justify-content:center; min-width:170px; gap:8px; }
.v-ecommerce .ecm-add .ecm-total::before { content:'\00B7'; margin-right:8px; opacity:.55; }
.v-ecommerce .ecm-add.is-added { opacity:.92; }
.v-ecommerce .ecm-wish { appearance:none; -webkit-appearance:none; cursor:pointer; width:46px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * .75); background:color-mix(in srgb, var(--ink) 3%, transparent); color:var(--dim);
  transition:transform 140ms var(--ease-pop, ease-out), color 140ms linear; }
.v-ecommerce .ecm-wish:hover { transform:translateY(-1px); color:var(--accent); }
.v-ecommerce .ecm-wish svg { width:19px; height:19px; }
.v-ecommerce .ecm-wish[aria-pressed="true"] { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.v-ecommerce .ecm-wish[aria-pressed="true"] svg { fill:color-mix(in srgb, var(--accent) 24%, transparent); }
.v-ecommerce .ecm-wish:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-ecommerce .ecm-details { margin-top:18px; }
.v-ecommerce .ecm-live { margin:14px 0 0; min-height:1.1em; font:500 12px var(--font); color:var(--faint); }
/* gallery: placeholder look shared by main + thumbs; --src (image) overrides the wash, --va shifts its angle */
.v-ecommerce .ecm-gallery { display:flex; flex-direction:column; gap:12px; min-width:0; }
.v-ecommerce .ecm-ph { background-color:var(--panel); background-position:center, center; background-repeat:no-repeat, repeat;
  background-image:var(--src,
    linear-gradient(var(--va, 120deg), color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 3%, transparent) 58%, transparent 82%),
    radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1.4px, transparent 1.5px)); }
.v-ecommerce .ecm-main { position:relative; width:100%; aspect-ratio:1 / 1; border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 14px); overflow:hidden; background-size:cover, 22px 22px; }
.v-ecommerce .ecm-thumbs { display:flex; gap:10px; }
.v-ecommerce .ecm-thumb { flex:1 1 0; min-width:0; aspect-ratio:1 / 1; padding:0; cursor:pointer; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55); background-size:cover, 15px 15px;
  transition:transform 140ms var(--ease-pop, ease-out); }
.v-ecommerce .ecm-thumb:hover { transform:translateY(-2px); }
.v-ecommerce .ecm-thumb.is-on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.v-ecommerce .ecm-thumb:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* promise strip — origin's diamond becomes a themed spark icon; divider rides --hair */
.v-ecommerce .ecm-promo { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap;
  margin-top:clamp(32px, 4.6cqw, 54px); padding-top:22px; border-top:var(--bw, 1px) solid var(--hair); }
.v-ecommerce .ecm-promoitem { display:inline-flex; align-items:center; justify-content:center; gap:9px; flex:1; min-width:190px;
  font:500 12.5px var(--font); color:var(--dim); letter-spacing:.2px; }
.v-ecommerce .ecm-promoico { display:inline-flex; color:var(--accent); }
.v-ecommerce .ecm-promoico svg { width:13px; height:13px; }
.v-ecommerce .ecm-promosep { width:1px; height:22px; flex:none; background:var(--hair); }
@container site (max-width: 560px) {
  .v-ecommerce .ecm-promo { flex-direction:column; align-items:flex-start; gap:12px; }
  .v-ecommerce .ecm-promoitem { justify-content:flex-start; min-width:0; }
  .v-ecommerce .ecm-promosep { display:none; }
  .v-ecommerce .ecm-add { min-width:0; }
}
@media (prefers-reduced-motion: reduce) {
  .v-ecommerce .ecm-swatch, .v-ecommerce .ecm-size, .v-ecommerce .ecm-thumb,
  .v-ecommerce .ecm-wish, .v-ecommerce .ecm-step, .v-ecommerce .ecm-sizeguide { transition:none; }
}
/* enterprise — ported from SB_04 drafts/enterprise-hero (B2B split opener: copy + trusted-by list
   beside a decorative dashboard skeleton, trust-badge strip below). The origin's baked #0a0a0a dark
   palette + Inter map onto theme tokens so it recolours with the site; the mock is aria-hidden
   decoration. Entrance motion belongs to anims.js — this block is static/interaction-only. */
.v-enterprise .ws-in.split { align-items:center; }
.v-enterprise .ent-copy { display:flex; flex-direction:column; justify-content:center; }
/* trusted-by list */
.v-enterprise .ent-trust { display:flex; flex-direction:column; gap:10px; margin-top:clamp(26px, 3.2cqw, 36px); }
.v-enterprise .ent-trustlabel { font:600 10px var(--mono); letter-spacing:2.4px; text-transform:uppercase; color:var(--faint); }
.v-enterprise .ent-custlist { display:flex; flex-wrap:wrap; gap:8px 24px; }
.v-enterprise .ent-cust { font:600 12px var(--font); letter-spacing:1px; text-transform:uppercase; color:var(--dim); }
.v-enterprise .ent-copy .ws-ctarow { margin-top:clamp(26px, 3.2cqw, 34px); }
/* dashboard mock — decorative two-panel skeleton (titlebar · list · detail) */
.v-enterprise .ent-right { display:flex; align-items:center; min-width:0; }
.v-enterprise .ent-mock { width:100%; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad, none); box-shadow:var(--elev, 0 0 #0000); }
.v-enterprise .ent-mtop { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 4%, var(--panel)); }
.v-enterprise .ent-mdot { width:8px; height:8px; border-radius:50%; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.v-enterprise .ent-mlabel { margin-left:8px; font:500 10px var(--mono); letter-spacing:.3px; color:var(--faint); }
.v-enterprise .ent-mbody { display:grid; grid-template-columns:clamp(150px, 32%, 200px) 1fr; height:clamp(280px, 32cqw, 340px); }
.v-enterprise .ent-mlist { background:color-mix(in srgb, var(--ink) 3%, var(--panel)); border-right:var(--bw, 1px) solid var(--hair); overflow:hidden; }
.v-enterprise .ent-lhead { padding:12px 14px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-enterprise .ent-lheadbar { display:block; height:8px; width:60%; border-radius:4px; background:color-mix(in srgb, var(--ink) 11%, transparent); }
.v-enterprise .ent-li { display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 4%, transparent); }
.v-enterprise .ent-li.on { background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent)); }
.v-enterprise .ent-dot { width:6px; height:6px; border-radius:50%; flex:none; background:color-mix(in srgb, var(--ink) 18%, transparent); }
.v-enterprise .ent-dot.ac { background:var(--accent); }
.v-enterprise .ent-libar { display:block; height:7px; border-radius:4px; flex:1; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.v-enterprise .ent-libar.s { max-width:55%; }
.v-enterprise .ent-libar.m { max-width:75%; }
.v-enterprise .ent-mdetail { background:color-mix(in srgb, var(--bg) 45%, var(--panel)); padding:18px 20px;
  display:flex; flex-direction:column; gap:10px; overflow:hidden; min-width:0; }
.v-enterprise .ent-dhead { display:flex; align-items:center; justify-content:space-between; }
.v-enterprise .ent-dtitle { height:10px; width:42%; border-radius:4px; background:color-mix(in srgb, var(--ink) 11%, transparent); }
.v-enterprise .ent-dbadge { height:18px; width:60px; border-radius:9px;
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 16%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.v-enterprise .ent-dmeta { display:flex; gap:8px; }
.v-enterprise .ent-chip { height:20px; width:64px; border-radius:5px; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.v-enterprise .ent-chip.wide { width:96px; }
.v-enterprise .ent-slabel { height:6px; width:28%; border-radius:3px; margin-top:4px; background:color-mix(in srgb, var(--ink) 5%, transparent); }
.v-enterprise .ent-slabel.lower { margin-top:6px; }
.v-enterprise .ent-dbar { height:8px; border-radius:4px; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.v-enterprise .ent-dbar.s { width:68%; }
.v-enterprise .ent-dbar.m { width:83%; }
.v-enterprise .ent-drow { display:flex; gap:10px; }
.v-enterprise .ent-cell { flex:1; height:36px; border-radius:7px; background:color-mix(in srgb, var(--ink) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 5%, transparent); }
.v-enterprise .ent-cell.s { flex:0 0 38%; }
/* trust-badge strip — check chips + hairline dividers, aligned to the content column */
.v-enterprise .ent-badges { display:flex; align-items:center; flex-wrap:wrap;
  margin-top:clamp(38px, 4.8cqw, 64px); padding-top:28px; border-top:var(--bw, 1px) solid var(--hair); }
.v-enterprise .ent-badge { display:inline-flex; align-items:center; gap:9px; padding-right:24px;
  font:500 12.5px var(--font); color:var(--dim); white-space:nowrap; }
.v-enterprise .ent-badgeico { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none;
  border-radius:50%; color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.v-enterprise .ent-badgeico svg { width:11px; height:11px; }
.v-enterprise .ent-bdiv { width:1px; height:20px; flex:none; margin-right:24px; background:var(--hair); }
/* narrow: split stacks via the global 860px rule; tighten the mock + drop badge dividers */
@container site (max-width: 560px) {
  .v-enterprise .ent-mbody { grid-template-columns:130px 1fr; height:auto; min-height:238px; }
  .v-enterprise .ent-badges { gap:14px 22px; }
  .v-enterprise .ent-bdiv { display:none; }
  .v-enterprise .ent-badge { padding-right:0; }
}
/* error-404 — ported from SB_04 drafts/error-404-hero: a centred "page not found" opener.
   Origin --e4h-* vars -> theme tokens: no fixed dark bg (the section wears the site theme's --bg),
   text->--ink, secondary->--dim/--faint, divider->--hair. The giant code rode a baked blue->cyan
   gradient; here it's a token tint (color-mix on --accent + --ink) so it recolours with the theme.
   Reuses the site atoms ws-in.center / ws-h1+gradLast / ws-sub / ws-ctarow+btn. Upgrades the origin's
   JS-less shell + dead href="#" links into a REAL <form role=search> (native GET submit) and a
   data-driven <nav> of genuine links. Only hover transitions (transform/opacity/colour); entrance
   motion belongs to anims.js; narrow-stack + reduced-motion honoured. */
.v-error-404 { display:flex; align-items:center; min-height:clamp(520px, 78cqh, 880px); }
.v-error-404 .e404-in { display:flex; flex-direction:column; align-items:center; }
.v-error-404 .e404-code { margin:0; font:900 clamp(90px, 30cqw, 208px)/0.84 var(--font-head, var(--font));
  letter-spacing:-0.05em; user-select:none; -webkit-user-select:none;
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--accent) 90%, var(--ink)) 0%,
    color-mix(in srgb, var(--accent) 48%, var(--ink)) 55%,
    color-mix(in srgb, var(--ink) 30%, var(--accent)) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.v-error-404 .e404-head { margin-top:clamp(8px, 1.4cqw, 18px); font-size:clamp(26px, 3.4cqw, 42px); }
.v-error-404 .e404-sub { margin-top:16px; text-align:center; }
/* real search — native GET submit, not a decorative box */
.v-error-404 .e404-search { display:flex; align-items:center; gap:8px; width:min(440px, 100%); margin-top:30px;
  padding:6px 6px 6px 15px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * 1.25);
  background:color-mix(in srgb, var(--ink) 3%, transparent); transition:border-color 140ms linear; }
.v-error-404 .e404-search:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-error-404 .e404-search-ico { display:inline-flex; flex:none; color:var(--faint); }
.v-error-404 .e404-search-ico svg { width:18px; height:18px; }
.v-error-404 .e404-search-input { flex:1 1 auto; min-width:0; appearance:none; -webkit-appearance:none; border:0;
  outline:0; background:none; color:var(--ink); font:400 14.5px var(--font); }
.v-error-404 .e404-search-input::placeholder { color:var(--faint); }
.v-error-404 .e404-search-input::-webkit-search-cancel-button { -webkit-appearance:none; }
.v-error-404 .e404-search-go { flex:none; appearance:none; -webkit-appearance:none; cursor:pointer; border:0;
  padding:9px 17px; border-radius:calc(var(--radius, 12px) * 0.92); background:var(--accent);
  color:var(--accent-text, var(--bg)); font:600 13px var(--font);
  transition:transform 120ms var(--ease-pop, ease-out), opacity 140ms linear; }
.v-error-404 .e404-search-go:hover { opacity:0.9; }
.v-error-404 .e404-search-go:active { transform:translateY(1px); }
.v-error-404 .e404-search-go:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-error-404 .e404-actions { margin-top:22px; }
.v-error-404 .e404-rule { width:min(520px, 100%); height:1px; background:var(--hair); margin:38px 0 30px; }
.v-error-404 .e404-links-wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 0; }
.v-error-404 .e404-links-label { margin:0; padding-right:18px; font:600 10px var(--mono); letter-spacing:2px;
  text-transform:uppercase; color:var(--faint); position:relative; }
.v-error-404 .e404-links-label::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  height:11px; width:1px; background:var(--hair); }
.v-error-404 .e404-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.v-error-404 .e404-link { position:relative; padding:5px 18px; font:500 13.5px var(--font); color:var(--dim);
  text-decoration:none; cursor:pointer; transition:color 140ms linear; }
.v-error-404 .e404-link:hover { color:var(--accent); }
.v-error-404 .e404-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.v-error-404 .e404-link + .e404-link::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:11px; width:1px; background:var(--hair); }
@container site (max-width: 560px) {
  .v-error-404 { min-height:0; }
  .v-error-404 .e404-actions { display:flex; width:100%; }
  .v-error-404 .e404-actions .ws-btn { flex:1 1 auto; justify-content:center; }
  .v-error-404 .e404-links-wrap { flex-direction:column; gap:12px; }
  .v-error-404 .e404-links-label { padding-right:0; }
  .v-error-404 .e404-links-label::after { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-error-404 .e404-search, .v-error-404 .e404-search-go, .v-error-404 .e404-link { transition:none; }
}
/* featured — ported from SB_04 featured-hero (editorial fold: ruled eyebrow + standfirst + CTAs
   left, tall featured image right, meta strip under the copy). Origin's staggered fade/slide
   entrances are dropped (anims.js owns entrances) and its backdrop-filter credit chip is
   reinterpreted as an opaque color-mix plate — no blur anywhere. Narrow stacks image-first
   via container queries, matching the origin's mobile order. */
.v-featured .ws-ftgrid { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
.v-featured .ws-ftcopy { display:flex; flex-direction:column; justify-content:center; }
.v-featured .ws-ftkick { display:inline-flex; align-items:center; gap:10px; color:var(--accent); }
.v-featured .ws-ftkick::before { content:''; width:24px; height:2px; flex:none; background:var(--accent); }
.v-featured .ws-h1 { max-width:20ch; }
.v-featured .ws-ctarow { margin-top:26px; }
/* meta strip — the origin hid this below 768px; here it is real content at every width */
.v-featured .ws-ftmeta { display:flex; flex-wrap:wrap; gap:12px 40px; margin:44px 0 0;
  padding-top:22px; border-top:var(--bw, 1px) solid var(--hair); }
.v-featured .ws-ftmi { display:flex; flex-direction:column; gap:4px; }
.v-featured .ws-ftmi dt { font:600 10px/1.2 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.v-featured .ws-ftmi dd { margin:0; font:500 13px/1.3 var(--font); color:var(--ink); }
/* figure — tall portrait crop, the image IS the argument */
.v-featured .ws-ftfig { position:relative; margin:0; }
.v-featured .ws-ftimg { width:100%; aspect-ratio:4 / 5; min-height:0; max-height:640px; }
.v-featured .ws-ftcap { position:absolute; top:12px; right:12px; margin:0;
  font:600 10px/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:color-mix(in srgb, var(--panel) 92%, var(--bg));
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 14px) / 3); padding:6px 10px; }
@container site (max-width: 860px) {
  .v-featured .ws-ftgrid { grid-template-columns:1fr; gap:34px; }
  .v-featured .ws-ftfig { order:-1; }                 /* origin's mobile order: image on top */
  .v-featured .ws-ftimg { aspect-ratio:21 / 9; max-height:none; }
  .v-featured .ws-h1 { max-width:none; }
  .v-featured .ws-ftmeta { margin-top:32px; }
}
@container site (max-width: 560px) {
  .v-featured .ws-ftimg { aspect-ratio:16 / 10; }
  .v-featured .ws-ftmeta { gap:12px 26px; }
  .v-featured .ws-ftcap { top:auto; bottom:10px; right:10px; }
}
/* exhibition — ported from SB_04 drafts/exhibition-hero: a monospace gallery entrance, zero imagery.
   Origin --eh-* vars -> theme tokens: the baked near-black bg is dropped (the section wears --bg),
   text->--ink, system/meta->--dim/--faint, structure->--hair, Nova Purple->--accent, Courier New->--mono.
   The ambient glow + hover fill are color-mix on --accent (the origin's rgba() froze the purple, so a
   brand change left it behind). The "arc" was ten dead spans with a hardcoded --active; here each work is
   a real button — click / Enter / arrows / Home / End select it and drive a live "Selected" readout.
   Baked entrance stagger dropped (anims.js owns entrances); only colour/transform hovers remain. */
.v-exhibition { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  align-items:center; min-height:clamp(560px, 84cqh, 900px); padding:80px 0 64px; font-family:var(--mono); }
.v-exhibition .exh-ambient { position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 40% at 50% 52%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
.v-exhibition .exh-in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:26px; }
.v-exhibition .exh-label { font-family:var(--mono); font-size:9px; letter-spacing:0.2em; color:var(--faint); }
.v-exhibition .exh-title { margin:0; max-width:20ch; font:400 clamp(22px, 3.2cqw, 34px)/1.3 var(--mono);
  letter-spacing:0; color:var(--ink); }
.v-exhibition .exh-tag { margin:0; font:400 clamp(13px, 1.3cqw, 15px)/1.7 var(--mono); color:var(--accent); }
.v-exhibition .exh-rule { width:48px; height:1px; background:var(--hair); }
.v-exhibition .exh-stmt { margin:0; max-width:56ch; font:400 clamp(13px, 1.3cqw, 15px)/1.7 var(--mono); color:var(--dim); }
/* the arc — every work is a real, selectable control */
.v-exhibition .exh-arc { display:flex; flex-wrap:wrap; justify-content:center; margin-top:-4px; }
.v-exhibition .exh-exp { appearance:none; -webkit-appearance:none; border:0; background:none; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:5px; padding:5px 10px; border-radius:3px;
  transition:transform 120ms var(--ease-pop, ease-out); }
.v-exhibition .exh-exp:hover { transform:translateY(-1px); }
.v-exhibition .exh-exp:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.v-exhibition .exh-num { font:400 9px/1 var(--mono); letter-spacing:0.15em; color:var(--faint); transition:color 140ms linear; }
.v-exhibition .exh-name { font:400 12px/1 var(--mono); letter-spacing:0.05em; color:var(--dim); transition:color 140ms linear; }
.v-exhibition .exh-exp:hover .exh-num, .v-exhibition .exh-exp:hover .exh-name { color:var(--accent); }
.v-exhibition .exh-exp.on .exh-num, .v-exhibition .exh-exp.on .exh-name { color:var(--accent); }
.v-exhibition .exh-exp.on { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.v-exhibition .exh-now { margin:-12px 0 0; font:400 10px/1.6 var(--mono); letter-spacing:0.15em;
  text-transform:uppercase; color:var(--faint); }
.v-exhibition .exh-now b { font-weight:400; color:var(--dim); }
.v-exhibition .exh-ctarow { margin-top:2px; }
.v-exhibition .exh-ctarow .ws-btn { border-radius:0; font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; padding:12px 26px; }
.v-exhibition .exh-meta { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:24px; margin-top:52px; }
.v-exhibition .exh-meta span { font:400 9px/1 var(--mono); letter-spacing:0.15em; text-transform:uppercase; color:var(--faint); }
@container site (max-width: 560px) {
  .v-exhibition { min-height:0; padding:56px 0 44px; }
  .v-exhibition .exh-in { gap:20px; }
  .v-exhibition .exh-exp { padding:4px 6px; }
  .v-exhibition .exh-meta { flex-direction:column; gap:8px; margin-top:36px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-exhibition .exh-exp, .v-exhibition .exh-num, .v-exhibition .exh-name { transition:none; }
}
/* feature-tabs — SB_04 · drafts/feature-tabs-hero
   Centered pitch, an underlined tab row, and a bullet-list panel beside its visual. The origin's
   --fth-* vars map to tokens (bg->--bg, heading->--ink, body->--dim, accent->--accent,
   divider->--hair). The origin's tabs were a dead JS shell in component.html; here they are a real
   pure-CSS radio group (nextTab() names it), so tabs switch in the builder, in preview and in the
   exported static site — and the sr-only radios keep native arrow-key roving focus. Panels reuse the
   shared ws-hpanel .ph placeholder for the visual (per-tab img prop overrides it). Viewport media
   queries became container queries; entrance motion is the reveal system's. */
.v-feature-tabs { padding:96px 0 88px; }
.v-feature-tabs .ws-shead { margin-bottom:34px; }
.v-feature-tabs .ft-wrap { position:relative; }
/* sr-only, NOT display:none — keeps the radio group keyboard-navigable (arrow keys switch tabs) */
.v-feature-tabs .ft-in { position:absolute; width:1px; height:1px; margin:0; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.v-feature-tabs .ft-bar { display:flex; gap:0; border-bottom:var(--bw, 1px) solid var(--hair);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.v-feature-tabs .ft-bar::-webkit-scrollbar { display:none; }
.v-feature-tabs .ft-tab { flex:none; cursor:pointer; white-space:nowrap; padding:14px 28px;
  margin-bottom:-1px; border-bottom:2px solid transparent; color:var(--dim);
  font:500 clamp(13px, 1.35cqw, 14.5px) var(--font); transition:color 140ms linear; }
.v-feature-tabs .ft-tab:hover { color:var(--ink); }
.v-feature-tabs .ft-in:nth-of-type(1):checked ~ .ft-bar .ft-tab:nth-child(1),
.v-feature-tabs .ft-in:nth-of-type(2):checked ~ .ft-bar .ft-tab:nth-child(2),
.v-feature-tabs .ft-in:nth-of-type(3):checked ~ .ft-bar .ft-tab:nth-child(3),
.v-feature-tabs .ft-in:nth-of-type(4):checked ~ .ft-bar .ft-tab:nth-child(4)
  { color:var(--ink); border-bottom-color:var(--accent); }
.v-feature-tabs .ft-in:nth-of-type(1):focus-visible ~ .ft-bar .ft-tab:nth-child(1),
.v-feature-tabs .ft-in:nth-of-type(2):focus-visible ~ .ft-bar .ft-tab:nth-child(2),
.v-feature-tabs .ft-in:nth-of-type(3):focus-visible ~ .ft-bar .ft-tab:nth-child(3),
.v-feature-tabs .ft-in:nth-of-type(4):focus-visible ~ .ft-bar .ft-tab:nth-child(4)
  { outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px 4px 0 0; }
.v-feature-tabs .ft-pane { display:none; grid-template-columns:5fr 4fr; gap:56px; align-items:center;
  padding-top:48px; }
.v-feature-tabs .ft-in:nth-of-type(1):checked ~ .ft-panes .ft-pane:nth-child(1),
.v-feature-tabs .ft-in:nth-of-type(2):checked ~ .ft-panes .ft-pane:nth-child(2),
.v-feature-tabs .ft-in:nth-of-type(3):checked ~ .ft-panes .ft-pane:nth-child(3),
.v-feature-tabs .ft-in:nth-of-type(4):checked ~ .ft-panes .ft-pane:nth-child(4)
  { display:grid; }
.v-feature-tabs .ft-h { margin:0 0 20px; font:700 clamp(19px, 2.4cqw, 26px)/1.25 var(--font-head, var(--font));
  letter-spacing:-0.02em; color:var(--ink); }
.v-feature-tabs .ft-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.v-feature-tabs .ft-list li { position:relative; padding-left:20px; color:var(--dim);
  font:400 clamp(13.5px, 1.5cqw, 15px)/1.65 var(--font); }
.v-feature-tabs .ft-list li::before { content:''; position:absolute; left:0; top:0.62em; width:5px; height:5px;
  border-radius:50%; background:var(--accent); }
.v-feature-tabs .ft-shot { min-height:0; aspect-ratio:4 / 3; }
@container site (max-width: 860px) {
  .v-feature-tabs { padding:72px 0 64px; }
  .v-feature-tabs .ft-pane { grid-template-columns:1fr; gap:30px; padding-top:36px; }
  .v-feature-tabs .ft-shot { aspect-ratio:16 / 9; }
}
@container site (max-width: 560px) {
  .v-feature-tabs .ft-tab { padding:12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-feature-tabs .ft-tab { transition:none; }
}
/* FAQ Opener (SB_04 · drafts/faq-hero) — question-led fold: live search, category chips, working accordion */
.v-faq .ws-in { display:flex; flex-direction:column; gap:30px; }
.v-faq .ws-faqhead { display:flex; flex-direction:column; align-items:center; gap:12px; }
.v-faq .ws-faqtools { display:flex; flex-direction:column; gap:12px; }
.v-faq .ws-faqsearch { width:100%; font:400 15px/1.4 var(--font); color:var(--ink);
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:10px; padding:14px 16px;
  outline:none; -webkit-appearance:none; appearance:none; transition:border-color .18s ease; }
.v-faq .ws-faqsearch::placeholder { color:var(--faint); }
.v-faq .ws-faqsearch::-webkit-search-cancel-button { display:none; }
.v-faq .ws-faqsearch:focus { border-color:var(--accent); }
.v-faq .ws-faqcats { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.v-faq .ws-faqchip { font:500 12px/1 var(--font); letter-spacing:.02em; color:var(--dim);
  background:transparent; border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:8px 14px;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, transform .18s ease; }
.v-faq .ws-faqchip:hover { color:var(--ink); border-color:var(--accent); transform:translateY(-1px); }
.v-faq .ws-faqchip.on { color:var(--accent); border-color:var(--accent); }
.v-faq .ws-faqlist { display:flex; flex-direction:column; text-align:left; }
.v-faq .ws-faqitem { border-bottom:var(--bw, 1px) solid var(--hair); }
.v-faq .ws-faqitem:first-child { border-top:var(--bw, 1px) solid var(--hair); }
.v-faq .ws-faqitem[hidden] { display:none; }
.v-faq .ws-faqq { display:flex; align-items:center; justify-content:space-between; gap:24px;
  list-style:none; cursor:pointer; user-select:none; padding:18px 2px;
  font:600 clamp(14px, 1.6cqw, 16px)/1.45 var(--font-head, var(--font)); color:var(--ink);
  transition:color .18s ease; }
.v-faq .ws-faqq::-webkit-details-marker { display:none; }
.v-faq .ws-faqq:hover { color:var(--accent); }
.v-faq .ws-faqmark { position:relative; flex:0 0 12px; width:12px; height:12px; }
.v-faq .ws-faqmark::before, .v-faq .ws-faqmark::after { content:''; position:absolute; left:0; right:0; top:50%;
  height:1.5px; background:var(--dim); transform:translateY(-50%); transition:transform .2s ease; }
.v-faq .ws-faqmark::after { transform:translateY(-50%) rotate(90deg); }
.v-faq .ws-faqitem[open] .ws-faqmark::before, .v-faq .ws-faqitem[open] .ws-faqmark::after { background:var(--accent); }
.v-faq .ws-faqitem[open] .ws-faqmark::after { transform:translateY(-50%) rotate(90deg) scaleX(0); }
.v-faq .ws-faqa { padding:0 2px 20px; }
.v-faq .ws-faqa p { margin:0; max-width:64ch; font:400 14px/1.75 var(--font); color:var(--dim); }
.v-faq .ws-faqempty { margin:0; text-align:center; padding:10px 0 4px; font:400 14px/1.6 var(--font); color:var(--faint); }
.v-faq .ws-faqempty[hidden] { display:none; }
@container site (max-width: 560px) {
  .v-faq .ws-in { gap:24px; }
  .v-faq .ws-faqcats { justify-content:flex-start; }
  .v-faq .ws-faqq { gap:14px; padding:16px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-faq .ws-faqchip, .v-faq .ws-faqq, .v-faq .ws-faqmark::before, .v-faq .ws-faqmark::after { transition:none; }
}
/* gallery — ported from SB_04 drafts/gallery-hero (asymmetric image grid + translucent overlay bar).
   Tiles are data-driven (items: [{img,cap}]) and echo ws-hpanel.ph when no image is supplied, so
   imagegen can drop art in later. Side frames are real buttons (mount promotes one to the feature).
   Origin's fade-up keyframes dropped — anims.js owns entrances; only hover/press motion stays.
   Height rides container units instead of 100dvh so the section behaves inside builder panes. */
.ws-hero.v-gallery { padding:0; position:relative; overflow:hidden; }
.v-gallery .gal-grid { display:grid; gap:3px; width:100%;
  height:clamp(440px, 56cqw, 760px);
  grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr;
  grid-template-areas:"feature top" "feature bottom"; }
.v-gallery .gal-cell { position:relative; display:block; overflow:hidden; margin:0; padding:0;
  border:none; background-color:var(--panel); background-size:cover; background-position:center; }
.v-gallery .gal-cell.feature { grid-area:feature; }
.v-gallery .gal-cell.t1 { grid-area:top; }
.v-gallery .gal-cell.t2 { grid-area:bottom; }
.v-gallery .gal-cell.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%);
  background-size:60px 60px; background-position:0 0, 0 30px, 30px -30px, 30px 0; }
.v-gallery .gal-cell.ph::before { content:''; position:absolute; inset:0;
  background:radial-gradient(64% 58% at 50% 42%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); }
.v-gallery .gal-cap { position:absolute; left:12px; top:12px; z-index:2;
  font:600 10px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  background:color-mix(in srgb, var(--bg) 74%, transparent); border:var(--bw, 1px) solid var(--hair);
  padding:6px 9px; border-radius:999px; }
.v-gallery button.gal-cell { cursor:pointer; font:inherit; color:inherit; text-align:left; }
.v-gallery button.gal-cell::after { content:''; position:absolute; inset:0;
  background:color-mix(in srgb, var(--accent) 26%, transparent); opacity:0; transition:opacity .18s ease; }
.v-gallery button.gal-cell:hover::after, .v-gallery button.gal-cell:focus-visible::after { opacity:1; }
.v-gallery button.gal-cell:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.v-gallery button.gal-cell:active .gal-cap { transform:scale(.97); }
.v-gallery .gal-cap { transition:transform .18s ease; }
.v-gallery .gal-overlay { position:absolute; left:0; right:0; bottom:0; z-index:3; pointer-events:none;
  background:linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent) 58%, var(--bg));
  padding-top:clamp(80px, 12cqw, 150px); padding-bottom:clamp(22px, 3.4cqw, 52px); }
.v-gallery .gal-overlay .ws-in { pointer-events:auto; display:flex; flex-wrap:wrap; gap:24px;
  align-items:flex-end; justify-content:space-between; }
.v-gallery .gal-copy { flex:1 1 380px; min-width:0; }
.v-gallery .gal-copy .ws-h1 { margin:0; }
.v-gallery .gal-copy .ws-sub { max-width:52ch; margin:10px 0 0; }
.v-gallery .gal-overlay .ws-ctarow { flex:0 0 auto; margin:0; }
@container site (max-width: 860px) {
  /* narrow: the bar leaves the stack. A column-flow overlay is ~320px tall and would swallow both
     side frames (and with them the promote affordance), so the copy sits BELOW the grid instead. */
  .v-gallery .gal-grid { grid-template-columns:1fr 1fr; grid-template-rows:1.5fr 1fr;
    grid-template-areas:"feature feature" "top bottom"; height:clamp(380px, 100cqw, 560px); }
  .v-gallery .gal-overlay { position:static; background:var(--bg); border-top:var(--bw, 1px) solid var(--hair);
    padding-top:clamp(22px, 5cqw, 34px); padding-bottom:clamp(24px, 5cqw, 38px); }
  .v-gallery .gal-overlay .ws-in { flex-direction:column; align-items:flex-start; gap:18px; }
  .v-gallery .gal-copy { flex:0 0 auto; width:100%; }
}
/* gradient — ported from SB_04 drafts/gradient-hero (imageless Stripe/Linear mesh: four drifting
   radial-gradient orbs + grain behind massive centered type, pill CTAs, a gradient hairline at the
   foot). The origin's five baked palettes (violet/sunset/ocean/emerald/light) collapse into ONE
   theme-driven mesh: every orb is a color-mix of --accent/--accent2 over --bg, so a brand swap
   repaints the whole sky. The origin's filter:blur(60px) is dropped — the orbs are soft radial
   falloffs already, so nothing here rides blur/backdrop-filter. Entrance fades are dropped too
   (anims.js owns section entrances); only the ambient drift runs at rest, like the ticker marquee,
   and it stops for prefers-reduced-motion. */
.ws-hero.v-gradient { position:relative; overflow:hidden; isolation:isolate; text-align:center;
  min-height:clamp(520px, 86cqh, 860px); display:grid; place-items:center; padding:96px 24px; }
.v-gradient .ws-in { position:relative; z-index:1; }
.v-gradient .ws-sub { margin-top:20px; margin-inline:auto; }
.v-gradient .ws-ctarow { margin-top:30px; }
/* pill CTAs are the origin's signature — button sets still supply the fill/colour */
.ws-hero.v-gradient .ws-ctarow .ws-btn { border-radius:99px; padding:13px 28px; }
.ws-gh1 { max-width:12ch; margin-inline:auto; letter-spacing:-0.04em;
  font:800 clamp(40px, 8.6cqw, 92px)/1.02 var(--font-head, var(--font)); }
/* the mesh */
.ws-gmesh { position:absolute; inset:0; z-index:0; pointer-events:none; }
.ws-gorb { position:absolute; border-radius:50%; mix-blend-mode:screen; }
.ws-gorb.g1 { width:80cqw; height:80cqw; min-width:520px; min-height:520px; top:-30%; left:-20%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 48%, transparent) 0%,
    color-mix(in srgb, var(--accent) 18%, transparent) 40%, transparent 70%);
  animation:gradOrb1 14s ease-in-out infinite; }
.ws-gorb.g2 { width:70cqw; height:70cqw; min-width:460px; min-height:460px; top:-12%; right:-24%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 42%, transparent) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 15%, transparent) 40%, transparent 70%);
  animation:gradOrb2 16s ease-in-out infinite; }
.ws-gorb.g3 { width:60cqw; height:60cqw; min-width:400px; min-height:400px; bottom:-26%; left:18%;
  background:radial-gradient(circle,
    color-mix(in srgb, color-mix(in srgb, var(--accent2, var(--accent)) 65%, var(--accent)) 36%, transparent) 0%,
    transparent 68%);
  animation:gradOrb3 18s ease-in-out infinite; }
.ws-gorb.g4 { width:40cqw; height:40cqw; min-width:280px; min-height:280px; top:28%; left:8%;
  background:radial-gradient(circle,
    color-mix(in srgb, color-mix(in srgb, var(--accent) 55%, var(--accent2, var(--accent))) 32%, transparent) 0%,
    transparent 66%);
  animation:gradOrb4 12s ease-in-out infinite; }
.ws-ggrain { position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* foot hairline picks up the same palette */
.ws-gline { position:absolute; left:10%; right:10%; bottom:0; height:1px; z-index:1; opacity:.5;
  background:linear-gradient(90deg, transparent 0%, var(--accent) 22%,
    color-mix(in srgb, var(--accent) 50%, var(--accent2, var(--accent))) 50%, var(--accent2, var(--accent)) 78%, transparent 100%); }
@keyframes gradOrb1 { 0%, 100% { transform:translate(0,0) scale(1); } 33% { transform:translate(5%,8%) scale(1.05); } 66% { transform:translate(-3%,4%) scale(.97); } }
@keyframes gradOrb2 { 0%, 100% { transform:translate(0,0) scale(1); } 33% { transform:translate(-6%,5%) scale(.95); } 66% { transform:translate(4%,-6%) scale(1.03); } }
@keyframes gradOrb3 { 0%, 100% { transform:translate(0,0) scale(1); } 33% { transform:translate(8%,-4%) scale(1.06); } 66% { transform:translate(-5%,6%) scale(.96); } }
@keyframes gradOrb4 { 0%, 100% { transform:translate(0,0) scale(1); } 50% { transform:translate(10%,-8%) scale(1.08); } }
@container site (max-width: 560px) {
  .ws-hero.v-gradient { min-height:clamp(460px, 80cqh, 640px); padding:76px 18px; }
  .ws-gh1 { font-size:clamp(36px, 12cqw, 64px); max-width:14ch; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-gorb { animation:none; }
}
/* hero · hero-404-page — SB_04 drafts/hero-404-page: minimal centred not-found, giant ghost code */
.v-hero-404-page { display:flex; align-items:center; min-height:clamp(460px, 68cqh, 800px); }
.v-hero-404-page .h404-in { display:flex; flex-direction:column; align-items:center; text-align:center; max-width:560px; }
.v-hero-404-page .h404-num { font:800 clamp(96px, 19cqw, 200px)/1 var(--font-head, var(--font)); letter-spacing:-0.06em;
  color:color-mix(in srgb, var(--ink) 9%, transparent); user-select:none; -webkit-user-select:none;
  transition:transform 200ms var(--ease-pop, ease-out); }
.v-hero-404-page .h404-head { margin-top:clamp(10px, 1.2cqw, 18px); font-size:clamp(24px, 3.2cqw, 38px); }
.v-hero-404-page .h404-sub { margin-top:14px; text-align:center; }
.v-hero-404-page .h404-path { display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:6px 13px;
  border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:color-mix(in srgb, var(--ink) 3%, transparent); }
.v-hero-404-page .h404-path i { font:600 10.5px/1 var(--font); font-style:normal; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); }
.v-hero-404-page .h404-path code { font:400 12.5px/1 var(--mono, monospace); color:var(--dim); }
.v-hero-404-page .h404-actions { margin-top:26px; justify-content:center; flex-wrap:wrap; }
@media (prefers-reduced-motion: reduce) { .v-hero-404-page .h404-num { transition:none; } }
@container site (max-width: 560px) {
  .v-hero-404-page { min-height:clamp(400px, 60cqh, 620px); }
  .v-hero-404-page .h404-num { font-size:clamp(84px, 30cqw, 132px); }
  .v-hero-404-page .h404-path { max-width:100%; }
  .v-hero-404-page .h404-path code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* geo — ported from SB_04 drafts/geo-hero (a location-search opener: centered copy, a search row
   with a "use my location" button, and a strip of nearby result cards with distance + star rating).
   Origin --geh-* vars map to theme tokens: bg->--bg, input/card surface->--panel, heading->--ink,
   body->--dim/--faint, divider->--hair, accent (#3b82f6)->--accent, font->--font/--font-head/--mono.
   Star gold stays literal (a fixed semantic hue, like ok/warn/bad). The origin's dead search box,
   locate button and submit button all become REAL (see heros.js mount): the input live-filters the
   cards, submit re-applies, and "use my location" asks the browser then orders cards by distance via
   CSS `order`. Transitions ride color/border/transform/opacity only; hover BACKGROUNDS switch
   instantly. Container queries: 3-up card row -> 1-col at 860, search row stacks at 560. */
.v-geo .geo-in { display:flex; flex-direction:column; align-items:center; gap:clamp(24px, 3.2cqw, 36px); }
.v-geo .geo-head { max-width:640px; display:flex; flex-direction:column; gap:14px; }
.v-geo .geo-head > * { margin:0; }
/* search row — field + locate + submit */
.v-geo .geo-search { display:flex; gap:12px; width:100%; max-width:680px; }
.v-geo .geo-sfield { flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:0 14px;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 10px);
  transition:border-color .16s linear; }
.v-geo .geo-sfield:focus-within { border-color:var(--accent); }
.v-geo .geo-sicon { flex:none; width:18px; height:18px; color:var(--faint); }
.v-geo .geo-sinput { flex:1; min-width:0; background:transparent; border:0; outline:none; padding:14px 0;
  font:400 clamp(14px, 1.6cqw, 15px) var(--font); color:var(--ink); text-align:left; }
.v-geo .geo-sinput::placeholder { color:var(--faint); }
.v-geo .geo-sinput::-webkit-search-cancel-button { display:none; }
.v-geo .geo-locate { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 18px; background:transparent; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 10px);
  font:500 clamp(13px, 1.5cqw, 14px) var(--font); color:var(--dim); white-space:nowrap; cursor:pointer;
  transition:color .16s linear, border-color .16s linear, opacity .16s linear; }
.v-geo .geo-locate svg { flex:none; width:16px; height:16px; }
.v-geo .geo-locate:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 25%, var(--hair)); }
.v-geo .geo-locate:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-geo .geo-locate[disabled] { opacity:.6; cursor:default; }
.v-geo .geo-locate.on { color:var(--accent); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.v-geo .geo-go { flex:none; padding:14px 26px; border:1px solid var(--accent); border-radius:var(--radius, 10px);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  font:600 clamp(14px, 1.6cqw, 15px) var(--font); color:var(--accent-text, #04121a);
  white-space:nowrap; cursor:pointer; transition:opacity .16s linear, transform .16s ease; }
.v-geo .geo-go:hover { opacity:.86; transform:translateY(-1px); }
.v-geo .geo-go:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* result cards — one bordered slab, hairline-divided */
.v-geo .geo-results { display:flex; width:100%; text-align:left;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden; background:var(--panel); }
.v-geo .geo-card { flex:1; min-width:0; display:flex; flex-direction:column;
  transition:transform .16s ease; }
.v-geo .geo-card[hidden] { display:none; }
.v-geo .geo-card + .geo-card { border-left:var(--bw, 1px) solid var(--hair); }
.v-geo .geo-card:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-geo .geo-shot { position:relative; width:100%; height:clamp(140px, 15cqw, 170px); flex:none;
  border-bottom:var(--bw, 1px) solid var(--hair); background-size:cover; background-position:center; background-repeat:no-repeat; }
.v-geo .geo-shot.ph { background-image:radial-gradient(120% 120% at 30% 20%,
  color-mix(in srgb, var(--accent) 24%, var(--panel-2, var(--panel))), var(--panel-2, var(--panel)) 74%); }
.v-geo .geo-shot.ph::after { content:''; position:absolute; inset:0;
  background:linear-gradient(125deg, transparent 44%, color-mix(in srgb, var(--accent) 12%, transparent)); }
.v-geo .geo-cbody { flex:1; display:flex; flex-direction:column; gap:6px; padding:clamp(14px, 1.6cqw, 18px) clamp(16px, 1.8cqw, 20px); }
.v-geo .geo-name { margin:0; font:600 clamp(14.5px, 1.6cqw, 15.5px)/1.35 var(--font-head, var(--font)); color:var(--ink); }
.v-geo .geo-cat { margin:0; font:700 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); }
.v-geo .geo-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:8px; margin-top:auto; padding-top:6px; }
.v-geo .geo-dist { font:400 12.5px var(--font); color:var(--dim); }
.v-geo .geo-stars { display:inline-flex; align-items:center; gap:1px; }
.v-geo .geo-star { font-size:13px; line-height:1; color:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-geo .geo-star.on, .v-geo .geo-star.half { color:#f59e0b; }
.v-geo .geo-star.half { opacity:.65; }
.v-geo .geo-rate { margin-left:5px; font:600 12px var(--font); color:var(--ink); }
/* empty state + live count */
.v-geo .geo-empty { margin:0; width:100%; padding:clamp(24px, 4cqw, 40px); text-align:center;
  font:500 14px var(--font); color:var(--dim); border:var(--bw, 1px) dashed var(--hair); border-radius:var(--radius, 12px); }
.v-geo .geo-empty[hidden] { display:none; }
.v-geo .geo-status { margin:0; min-height:1em; font:500 12.5px var(--font); color:var(--faint); }
@container site (max-width: 860px) {
  .v-geo .geo-results { flex-direction:column; }
  .v-geo .geo-card + .geo-card { border-left:0; border-top:var(--bw, 1px) solid var(--hair); }
  .v-geo .geo-shot { height:clamp(150px, 34cqw, 200px); }
}
@container site (max-width: 560px) {
  .v-geo .geo-search { flex-direction:column; }
  .v-geo .geo-locate, .v-geo .geo-go { width:100%; }
}
/* form — ported from SB_04 drafts/form-hero: a 55/45 SaaS lead-capture fold (headline + trust
   bullets left, signup card right). Origin --fh-* map to tokens: bg->--bg, card-bg->--panel,
   card-border/input-border->--hair, input-bg->an --ink color-mix (so it inverts on light themes),
   text->--ink, text-secondary->--dim/--faint, accent->--accent, font->--font. The origin's fixed
   blue ambient radials become accent color-mix, so brands cascade. Origin was zero-JS ("form is
   display-only") — the port validates and submits for real, so the card also carries a confirmation
   state (.is-done). Baked entrance keyframes dropped (anims.js owns entrances); only focus/hover/
   press motion kept, on transform/opacity/color only. Narrow-stacks via the global 860px
   .ws-hero .ws-in.split rule; the card flattens to bare fields at 560px like the origin did. */
.v-form { position:relative; isolation:isolate; padding:clamp(70px, 8.5cqw, 108px) 0; }
.v-form .fmh-glow { position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 60% at 18% 52%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 82% 18%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%); }
.v-form .ws-in.split { position:relative; z-index:1; grid-template-columns:1.16fr minmax(0, 0.9fr);
  gap:clamp(36px, 4.8cqw, 64px); align-items:center; }
.v-form .fmh-copy .ws-h1 { letter-spacing:-0.03em; }
/* trust bullets — the origin's pure-CSS circled tick, redrawn on the accent token */
.v-form .fmh-bullets { list-style:none; margin:clamp(22px, 2.6cqw, 30px) 0 0; padding:0;
  display:flex; flex-direction:column; gap:11px; }
.v-form .fmh-bullet { display:flex; align-items:center; gap:11px; margin:0;
  font:400 14.5px/1.45 var(--font); color:var(--dim); }
.v-form .fmh-check { position:relative; flex:none; width:20px; height:20px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.v-form .fmh-check::after { content:''; position:absolute; top:50%; left:50%; width:6px; height:3.5px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:translate(-55%, -70%) rotate(-45deg); }
/* the card */
.v-form .fmh-right { width:100%; }
.v-form .fmh-card { background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); padding:clamp(24px, 2.6cqw, 34px); }
.v-form .fmh-ctitle { margin:0; font:700 1.3rem/1.25 var(--font-head, var(--font));
  letter-spacing:-0.02em; color:var(--ink); }
.v-form .fmh-csub { margin:8px 0 0; font:400 13.5px/1.55 var(--font); color:var(--dim); }
.v-form .fmh-form { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.v-form .fmh-field { display:flex; flex-direction:column; gap:6px; }
.v-form .fmh-label { font:500 12.5px var(--font); color:var(--dim); letter-spacing:.01em; }
.v-form .fmh-input { width:100%; min-width:0; appearance:none; -webkit-appearance:none;
  padding:11px 14px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55);
  background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink);
  font:400 14px var(--font); outline:none; transition:border-color 140ms linear, color 140ms linear; }
.v-form .fmh-input::placeholder { color:var(--faint); }
.v-form .fmh-input:focus { border-color:color-mix(in srgb, var(--accent) 60%, var(--hair)); }
.v-form .fmh-input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-form .fmh-input.is-bad { border-color:#e5484d; }
.v-form .fmh-ferr:empty { display:none; }
.v-form .fmh-ferr { font:500 12px/1.4 var(--font); color:#e5484d; }
.v-form .fmh-submit { margin-top:4px; width:100%; appearance:none; -webkit-appearance:none;
  cursor:pointer; border:0; padding:12px 16px; border-radius:calc(var(--radius, 12px) * .55);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, var(--bg)); font:600 14px var(--font); letter-spacing:.01em;
  transition:opacity 140ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-form .fmh-submit:hover { opacity:.9; }
.v-form .fmh-submit:active { transform:translateY(1px); }
.v-form .fmh-submit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-form .fmh-privacy { margin:14px 0 0; text-align:center; font:400 12px/1.5 var(--font); color:var(--faint); }
/* submitted state */
.v-form .fmh-done { display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(8px, 1.2cqw, 16px) 0; }
.v-form .fmh-done[hidden] { display:none; }
.v-form .fmh-donemark { position:relative; flex:none; width:46px; height:46px; border-radius:50%;
  margin-bottom:18px; background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.v-form .fmh-donemark::after { content:''; position:absolute; top:50%; left:50%; width:15px; height:8px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translate(-52%, -70%) rotate(-45deg); }
.v-form .fmh-donemsg { max-width:34ch; }
.v-form .fmh-again { margin-top:20px; appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:9px 18px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55);
  background:none; color:var(--ink); font:600 13px var(--font);
  transition:color 140ms linear, border-color 140ms linear; }
.v-form .fmh-again:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-form .fmh-again:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@container site (max-width: 560px) {
  /* origin flattened the card on phones — bare fields read as a continuation of the copy */
  .v-form .fmh-card { background:none; border:0; border-radius:0; padding:0; }
  .v-form .fmh-privacy { text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  .v-form .fmh-input, .v-form .fmh-submit, .v-form .fmh-again { transition:none; }
}
/* ── hero · v-event (SB_04 · drafts/event-hero) — conference fold: meta line, speaker cluster, full-bleed countdown strip ── */
.ws-hero.v-event { position:relative; padding-bottom:0; overflow:hidden; }
.v-event .evh-wrap { display:flex; flex-direction:column; align-items:flex-start; }
.v-event .evh-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 clamp(12px, 1.6cqw, 20px);
  font:500 clamp(10.5px, 1.05cqw, 12px) var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.v-event .evh-when { color:var(--accent); }
.v-event .evh-dot { color:var(--hair); }
.v-event .evh-h { max-width:14ch; font-size:clamp(44px, 8.2cqw, 96px); line-height:0.98; letter-spacing:-0.04em; text-wrap:balance; }
.v-event .evh-tag { max-width:46ch; margin-top:clamp(14px, 1.6cqw, 20px); }
.v-event .evh-cta { justify-content:flex-start; margin-top:clamp(20px, 2.4cqw, 28px); }
.v-event .evh-speakers { display:flex; align-items:center; flex-wrap:wrap; gap:clamp(16px, 2.2cqw, 32px);
  margin-top:clamp(34px, 4.4cqw, 60px); }
.v-event .evh-avs { display:flex; align-items:center; flex:none; }
.v-event .evh-av { position:relative; flex:none; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); background-size:cover; background-position:center;
  border:2px solid var(--bg); color:var(--dim); font:600 13px var(--font);
  transition:transform .18s ease, color .18s ease; }
.v-event .evh-av + .evh-av { margin-left:-14px; }
.v-event .evh-av.is-on { transform:translateY(-4px) scale(1.06); z-index:1; color:var(--accent); }
.v-event .evh-more { background:var(--panel); color:var(--faint); font-size:11px; letter-spacing:.02em; }
.v-event .evh-names { list-style:none; margin:0; padding:0 0 0 clamp(16px, 2.2cqw, 32px); border-left:var(--bw, 1px) solid var(--hair);
  display:flex; flex-wrap:wrap; gap:10px clamp(20px, 2.6cqw, 40px); }
.v-event .evh-sp { display:flex; flex-direction:column; gap:2px; transition:transform .18s ease; }
.v-event .evh-sp.is-on { transform:translateY(-2px); }
.v-event .evh-spn { font:600 13.5px var(--font); color:var(--ink); }
.v-event .evh-sp.is-on .evh-spn { color:var(--accent); }
.v-event .evh-spr { font:400 11.5px var(--font); font-style:normal; color:var(--faint); }
.v-event .evh-strip { position:relative; display:flex; align-items:stretch;
  margin-top:clamp(40px, 5cqw, 72px); border-top:var(--bw, 1px) solid var(--hair); }
.v-event .evh-cunit { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:clamp(18px, 2.4cqw, 32px) 8px; }
.v-event .evh-cnum { font:600 clamp(28px, 4.4cqw, 56px) var(--font-head, var(--font)); line-height:1;
  letter-spacing:-0.04em; color:var(--ink); font-variant-numeric:tabular-nums; }
.v-event .evh-cnum.is-tick { animation:cdnTick 150ms ease; }
.v-event .evh-clabel { font:500 clamp(9px, .95cqw, 10.5px) var(--font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); }
.v-event .evh-cdiv { flex:none; align-self:stretch; width:1px; background:var(--hair); }
.v-event .evh-strip.evh-open .evh-cnum { color:var(--accent); }
.v-event .evh-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
@container site (max-width: 860px) {
  .v-event .evh-names { padding-left:0; border-left:none; }
}
@container site (max-width: 560px) {
  /* the meta line stacks rather than wrapping mid-phrase (which orphaned the divider dot) */
  .v-event .evh-meta { flex-direction:column; align-items:flex-start; gap:5px; }
  .v-event .evh-dot { display:none; }
  .v-event .evh-speakers { flex-direction:column; align-items:flex-start; gap:18px; }
  .v-event .evh-av { width:38px; height:38px; font-size:12px; }
  .v-event .evh-cunit { padding:16px 4px; }
  .v-event .evh-cnum { font-size:clamp(24px, 9cqw, 34px); }
  .v-event .evh-clabel { letter-spacing:.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .v-event .evh-cnum.is-tick { animation:none; }
  .v-event .evh-av, .v-event .evh-sp { transition:none; }
}

/* abstract shapes — ported from SB_04 hero-abstract-shapes (centered copy over floating
   geometric outlines). Baked drift keyframes dropped; shapes instead parallax to the pointer
   via mount (real interaction, not dead decoration). Only transform is transitioned. */
.v-hero-abstract-shapes { position:relative; overflow:hidden; }
.v-hero-abstract-shapes .ws-shapes { position:absolute; inset:0; pointer-events:none; z-index:0; }
.v-hero-abstract-shapes .ws-shape { position:absolute; border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  transform:translate(var(--px,0), var(--py,0)) rotate(var(--rot,0deg));
  transition:transform .5s cubic-bezier(.22,1,.36,1); }
.v-hero-abstract-shapes .ws-shape.s1 { width:min(300px, 34cqw); aspect-ratio:1; top:8%; right:6%; --rot:45deg; opacity:.5; }
.v-hero-abstract-shapes .ws-shape.s2 { width:min(200px, 24cqw); aspect-ratio:1; border-radius:50%; bottom:12%; left:5%;
  border-color:color-mix(in srgb, var(--accent) 16%, transparent); opacity:.45; }
.v-hero-abstract-shapes .ws-shape.s3 { width:min(160px, 18cqw); aspect-ratio:1; border-radius:20px; top:38%; left:18%; --rot:12deg;
  border-color:color-mix(in srgb, var(--ink) 14%, transparent); opacity:.4; }
.v-hero-abstract-shapes .ws-in { position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce) { .v-hero-abstract-shapes .ws-shape { transition:none; } }

/* affiliate — ported from SB_04 hero-affiliate (centered pitch, 3-step flow, earnings-tier
   calculator, CTA). Entrance keyframes dropped (anims.js owns reveals); tier bars are now
   derived from the referral counts so the calculator is honest, not decorative. */
.v-hero-affiliate .af-wrap { display:flex; flex-direction:column; align-items:center; gap:56px; }
.v-hero-affiliate .af-head { display:flex; flex-direction:column; align-items:center; gap:18px;
  max-width:680px; }
.v-hero-affiliate .af-head .ws-kick { margin:0; }
.v-hero-affiliate .af-steps { display:flex; align-items:stretch; justify-content:center;
  gap:14px; width:100%; max-width:960px; }
.v-hero-affiliate .af-step { flex:1; display:flex; flex-direction:column; gap:14px;
  padding:24px 26px; background:color-mix(in srgb, var(--ink) 3%, transparent);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); text-align:left; }
.v-hero-affiliate .af-step-num { font:800 34px/1 var(--font-head, var(--font)); letter-spacing:-0.04em;
  color:var(--accent); opacity:.4; }
.v-hero-affiliate .af-step-body { display:flex; flex-direction:column; gap:6px; }
.v-hero-affiliate .af-step-title { margin:0; font:600 16px var(--font); color:var(--ink); }
.v-hero-affiliate .af-step-desc { margin:0; font:400 13.5px/1.6 var(--font); color:var(--dim); }
.v-hero-affiliate .af-arrow { flex:0 0 auto; align-self:center; display:grid; place-items:center;
  color:var(--dim); opacity:.5; }
.v-hero-affiliate .af-arrow svg { display:block; }
.v-hero-affiliate .af-calc { width:100%; max-width:900px; display:flex; flex-direction:column;
  gap:6px; }
.v-hero-affiliate .af-calc-label { margin:0; text-align:center; font:600 10px var(--mono);
  letter-spacing:3px; text-transform:uppercase; color:var(--faint); }
.v-hero-affiliate .af-calc-sub { margin:0 0 14px; text-align:center; font:400 12.5px var(--font);
  color:var(--faint); }
.v-hero-affiliate .af-tiers { display:flex; flex-direction:column; }
.v-hero-affiliate .af-tier { display:grid; grid-template-columns:10rem 1fr 8rem; grid-template-rows:auto auto;
  gap:2px 24px; align-items:center; padding:18px 4px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-affiliate .af-tier:first-child { border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-affiliate .af-tier-refs { grid-column:1; grid-row:1; font:600 15px var(--font); color:var(--ink); }
.v-hero-affiliate .af-tier-per { grid-column:1; grid-row:2; font:400 12px var(--font); color:var(--dim); }
.v-hero-affiliate .af-tier-track { grid-column:2; grid-row:1 / 3; height:4px; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 8%, transparent); overflow:hidden; }
.v-hero-affiliate .af-tier-bar { height:100%; border-radius:99px; background:var(--accent);
  transform-origin:left; }
.v-hero-affiliate .af-tier.on .af-tier-bar { background:linear-gradient(90deg, var(--accent),
  color-mix(in srgb, var(--accent) 55%, var(--ink))); }
.v-hero-affiliate .af-tier-earn { grid-column:3; grid-row:1 / 3; text-align:right; font:700 18px var(--font);
  letter-spacing:-0.02em; color:var(--ink); }
.v-hero-affiliate .af-tier-earn span { font:500 12px var(--font); color:var(--dim); }
.v-hero-affiliate .ws-ctarow.center { margin-top:0; }
@container site (max-width: 860px) {
  .v-hero-affiliate .af-steps { flex-direction:column; align-items:stretch; }
  .v-hero-affiliate .af-arrow { transform:rotate(90deg); }
}
@container site (max-width: 560px) {
  .v-hero-affiliate .af-wrap { gap:40px; }
  .v-hero-affiliate .af-tier { grid-template-columns:1fr auto; grid-template-rows:auto auto auto; gap:4px 16px; }
  .v-hero-affiliate .af-tier-refs { grid-column:1; grid-row:1; }
  .v-hero-affiliate .af-tier-per { grid-column:1; grid-row:2; }
  .v-hero-affiliate .af-tier-earn { grid-column:2; grid-row:1 / 3; }
  .v-hero-affiliate .af-tier-track { grid-column:1 / 3; grid-row:3; margin-top:6px; }
}
/* animated words — ported from SB_04 hero-animated-words (centered hero whose headline
   accent word cycles). Baked staggered entrance dropped (anims.js owns entrances); the
   word-cycle is genuine loop motion driven by mount(). Words share one grid cell so the box
   sizes to the widest word (no layout jump, base word visible with no JS). Only transform,
   opacity and color transition. */
.v-hero-animated-words { text-align:center; }
.v-hero-animated-words .ws-in.center { max-width:820px; }
.v-hero-animated-words .ws-hawh1 { display:block; }
.v-hero-animated-words .ws-hawlead { color:var(--ink); }
.v-hero-animated-words .ws-hawcycle {
  display:inline-grid; vertical-align:baseline; text-align:center;
}
.v-hero-animated-words .ws-hawword {
  grid-area:1 / 1; color:var(--accent); white-space:nowrap;
  opacity:0; transform:translateY(0.34em);
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.v-hero-animated-words .ws-hawword.is-on { opacity:1; transform:translateY(0); }
.v-hero-animated-words .ws-hawword.is-out { opacity:0; transform:translateY(-0.34em); }
@media (prefers-reduced-motion: reduce) {
  .v-hero-animated-words .ws-hawword { transition:none; }
}
/* hero-announcement-bar — dismissible news strip over a centered pitch + trust logos (SB_04) */
.ws-hero.v-hero-announcement-bar { padding:0; }
.v-hero-announcement-bar .hab-bar {
  width:100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 24px; font-size:13px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.v-hero-announcement-bar .hab-bar.is-dismissed { display:none; }
.v-hero-announcement-bar .hab-badge {
  flex-shrink:0; font:700 9px var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--bg); background:var(--accent); padding:3px 8px; border-radius:4px;
}
.v-hero-announcement-bar .hab-btext { flex:1; min-width:200px; color:var(--dim); }
.v-hero-announcement-bar .hab-blink {
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-weight:600; color:var(--accent); text-decoration:none; transition:opacity .2s;
}
.v-hero-announcement-bar .hab-blink:hover { opacity:.78; }
.v-hero-announcement-bar .hab-blink svg { width:14px; height:14px; }
.v-hero-announcement-bar .hab-close {
  margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; border:0; border-radius:6px;
  background:transparent; color:var(--faint); font-size:13px; line-height:1; cursor:pointer;
  transition:color .2s;
}
.v-hero-announcement-bar .hab-close:hover { color:var(--ink); }
.v-hero-announcement-bar .hab-inner { padding:clamp(60px, 9cqw, 92px) 24px clamp(56px, 8cqw, 80px); }
.v-hero-announcement-bar .hab-inner .ws-kick { margin-inline:auto; margin-bottom:18px; }
.v-hero-announcement-bar .hab-inner .ws-ctarow { margin-top:34px; }
.v-hero-announcement-bar .hab-trust {
  margin-top:52px; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
}
.v-hero-announcement-bar .hab-trust-label {
  font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim);
}
.v-hero-announcement-bar .hab-trust-logos { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.v-hero-announcement-bar .hab-trust-logo {
  font-weight:700; font-size:13px; color:var(--dim); opacity:.55; transition:opacity .2s;
}
.v-hero-announcement-bar .hab-trust-logo:hover { opacity:.9; }
@container site (max-width: 560px) {
  .v-hero-announcement-bar .hab-bar { padding:10px 16px; font-size:12px; }
  .v-hero-announcement-bar .hab-blink { margin-left:0; }
  .v-hero-announcement-bar .hab-trust { flex-direction:column; gap:12px; }
}
/* v-hero-announcement — SB_04 · drafts/hero-announcement — dismissible accent bar + grid-lit center stage + trust badges */
.ws-hero.v-hero-announcement { padding:0; overflow:hidden; }
.v-hero-announcement .han-bar { position:relative; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 44px; background:var(--accent); color:var(--accent-text, #04121a);
  font:500 12.5px/1.4 var(--font); letter-spacing:.01em; text-align:center; transition:opacity 180ms linear; }
.v-hero-announcement .han-bar.han-bar-off { display:none; }
.v-hero-announcement .han-bar-tx { max-width:70ch; }
.v-hero-announcement .han-bar-x { position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0;
  border:0; border-radius:8px; background:transparent; color:currentColor; opacity:.78;
  font:400 20px/1 var(--font); cursor:pointer; transition:opacity 140ms linear, transform 140ms ease-out; }
.v-hero-announcement .han-bar-x:hover { opacity:1; transform:translateY(-50%) scale(1.1); }
.v-hero-announcement .han-stage { position:relative; display:flex; align-items:center; justify-content:center;
  padding:clamp(64px, 9cqw, 104px) clamp(20px, 3cqw, 24px); overflow:hidden; }
.v-hero-announcement .han-grid { position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size:60px 60px; }
.v-hero-announcement .han-grid::after { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, transparent 38%, var(--bg) 100%); }
.v-hero-announcement .ws-in.center { position:relative; z-index:1; max-width:760px; }
.v-hero-announcement .ws-kick { margin-bottom:18px; }
.v-hero-announcement .han-badges { display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(30px, 4cqw, 48px); }
.v-hero-announcement .han-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 22px;
  font:500 12.5px var(--font); color:var(--dim); }
.v-hero-announcement .han-badge + .han-badge { border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-announcement .han-badge i { display:flex; color:var(--accent); }
.v-hero-announcement .han-badge svg { width:15px; height:15px; }
@container site (max-width: 560px) {
  .v-hero-announcement .han-stage { padding:clamp(48px, 12cqw, 64px) 20px; }
  .v-hero-announcement .han-bar { padding:9px 40px; font-size:11.5px; }
  .v-hero-announcement .han-badge { padding:7px 14px; font-size:11.5px; }
}
/* bold statement — ported from SB_04 hero-bold-statement (giant left-set headline, a
   gradient-accented final word, one CTA and a single supporting line at the foot). Origin
   vars mapped to tokens, the big type rides --font-head, baked entrance dropped (anims.js
   owns entrances), only transform/opacity/color transition, container queries for stacking. */
.v-hero-bold-statement { padding:120px 0 110px; }
.v-hero-bold-statement .hbs-head {
  font:900 clamp(44px, 11cqw, 116px)/0.95 var(--font-head, var(--font));
  letter-spacing:-0.04em; color:var(--ink); margin:0 0 3.2rem; max-width:16ch;
}
.v-hero-bold-statement .hbs-foot {
  display:flex; align-items:center; flex-wrap:wrap; gap:2rem;
}
.v-hero-bold-statement .hbs-support { margin:0; max-width:42ch; color:var(--dim); }
@container site (max-width: 560px) {
  .v-hero-bold-statement { padding:76px 0 68px; }
  .v-hero-bold-statement .hbs-head { margin-bottom:2rem; }
  .v-hero-bold-statement .hbs-foot { flex-direction:column; align-items:flex-start; gap:1.25rem; }
}
/* app store — ported from SB_04 drafts/hero-app-store (app-download opener: headline,
   store badges, a real proportional star rating, feature bullets + a CSS phone mock).
   Store glyphs are inline SVG (no remote images); the phone screen is a token-drawn app
   UI. Split narrow-stacks via the global 860px rule (.ws-hero .ws-in.split); entrance
   motion belongs to the reveal system, only hover motion runs at rest. */
.v-appstore .ws-in.split { align-items:center; }
.v-appstore .ws-hcopy { display:flex; flex-direction:column; }
.v-appstore .ws-sub { margin-top:18px; max-width:46ch; }
.v-appstore-badges { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.v-appstore-badge { display:inline-flex; align-items:center; gap:11px; min-width:158px;
  padding:10px 20px; border-radius:999px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 4%, transparent); text-decoration:none;
  transition:transform .2s ease, color .2s ease; }
.v-appstore-badge:hover { transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.v-appstore-bico { flex-shrink:0; color:var(--ink); display:flex; }
.v-appstore-bico svg { width:22px; height:22px; display:block; }
.v-appstore-btxt { display:flex; flex-direction:column; line-height:1.15; }
.v-appstore-btxt i { font:500 10px var(--font); letter-spacing:.4px; color:var(--dim); font-style:normal; }
.v-appstore-btxt b { font:600 15px var(--font); color:var(--ink); letter-spacing:-0.01em; }
.v-appstore-rating { display:flex; align-items:center; gap:9px; margin-top:22px; }
.v-appstore-stars { display:inline-flex; gap:3px; }
.v-appstore-star { position:relative; display:inline-block; font-size:17px; line-height:1;
  color:color-mix(in srgb, var(--ink) 18%, transparent); }
.v-appstore-star i { position:absolute; inset:0; overflow:hidden; white-space:nowrap;
  color:var(--accent); font-style:normal; }
.v-appstore-rating b { font:600 14px var(--font); color:var(--ink); }
.v-appstore-rating i { font:400 13px var(--font); color:var(--dim); font-style:normal; }
.v-appstore-rating i::before { content:'\00b7\00a0'; }
.v-appstore-bullets { list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-direction:column; gap:11px; }
.v-appstore-bullet { display:flex; align-items:center; gap:11px;
  font:400 14px/1.5 var(--font); color:var(--dim); }
.v-appstore-bullet i { width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--accent); }
.v-appstore-visual { display:flex; justify-content:center; }
.v-appstore-phone { position:relative; width:236px; height:472px; border-radius:38px;
  border:2px solid var(--hair); background:var(--panel); overflow:hidden;
  box-shadow:var(--elev, 0 24px 60px -28px rgba(0,0,0,.5)); }
.v-appstore-notch { position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:96px; height:22px; background:var(--panel);
  border:2px solid var(--hair); border-top:none; border-radius:0 0 15px 15px; z-index:3; }
.v-appstore-status { position:absolute; top:0; left:0; right:0; height:40px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  font:600 11px var(--font); color:var(--faint); }
.v-appstore-sigs { display:inline-flex; gap:4px; align-items:center; }
.v-appstore-sigs i { width:12px; height:8px; border-radius:2px;
  background:color-mix(in srgb, var(--ink) 30%, transparent); }
.v-appstore-screen { position:absolute; inset:40px 0 0; background:var(--panel-2);
  padding:22px 18px; display:flex; flex-direction:column; gap:14px; }
.v-appstore-apphead { display:flex; align-items:center; justify-content:space-between; }
.v-appstore-apphead b { font:800 20px var(--font-head, var(--font)); color:var(--ink); }
.v-appstore-apphead span { width:26px; height:26px; border-radius:50%;
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.v-appstore-appcard { height:96px; border-radius:14px; border:var(--bw, 1px) solid var(--hair);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--panel)), var(--panel)); }
.v-appstore-applist { display:flex; flex-direction:column; gap:10px; }
.v-appstore-approw { display:flex; align-items:center; gap:10px; }
.v-appstore-approw span { width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-appstore-approw i { flex:1; height:9px; border-radius:5px;
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-appstore-appbtn { margin-top:auto; text-align:center; padding:11px; border-radius:11px;
  background:var(--accent); color:var(--accent-text, #04121a); font:600 13px var(--font); }
@container site (max-width: 860px) {
  .v-appstore .ws-hcopy { align-items:center; text-align:center; }
  .v-appstore .ws-sub { margin-inline:auto; }
  .v-appstore-badges, .v-appstore-rating { justify-content:center; }
  .v-appstore-bullets { width:max-content; max-width:100%; margin-inline:auto; }
  .v-appstore-visual { margin-top:8px; }
}
/* ===== Hero / API Reference (v-hero-api-reference) — ported SB_04 drafts/hero-api-reference.
   Centered dev-docs opener: mono badge, accent-word headline, sub, dual CTA, then a row of
   endpoint pills that act as TABS switching a syntax-lit code window below (wired live in
   mount, plus a working Copy button). The code window is a fixed dark editor surface
   (theme-independent, dev-tool convention) with literal syntax tints and scrolls-x inside
   its own box; everything else reads theme tokens. Baked entrance anims dropped. */
.v-hero-api-reference .ws-in.center { display:flex; flex-direction:column; align-items:center; }
.v-hero-api-reference .har-badge { font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:0.05em; text-transform:none; color:var(--accent); }
.v-hero-api-reference .ws-h1 { max-width:16ch; }
.v-hero-api-reference .har-accent { color:var(--accent); }
.v-hero-api-reference .ws-sub { margin-top:18px; max-width:52ch; }

/* endpoint tabs */
.v-hero-api-reference .har-eps { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.v-hero-api-reference .har-ep { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:500 11px var(--mono); color:var(--dim); padding:5px 12px; border-radius:6px;
  background:color-mix(in srgb, var(--ink) 4%, transparent); border:var(--bw, 1px) solid var(--hair);
  transition:color 140ms linear, border-color 140ms linear; }
.v-hero-api-reference .har-ep:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-hero-api-reference .har-ep.on { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.v-hero-api-reference .har-ep-m { font-weight:700; letter-spacing:0.5px; }
.v-hero-api-reference .har-ep-m.get { color:#4bd6a6; }
.v-hero-api-reference .har-ep-m.post { color:#7cc0ff; }
.v-hero-api-reference .har-ep-m.del { color:#ff6f6f; }

/* code window — fixed dark editor surface, theme-independent (dev-tool convention) */
.v-hero-api-reference .har-win { width:min(100%, 640px); margin:34px auto 0; text-align:left;
  border-radius:var(--radius, 12px); overflow:hidden; background:#0e0f14;
  border:1px solid rgba(255,255,255,0.09); box-shadow:0 24px 55px -32px rgba(0,0,0,0.7); }
.v-hero-api-reference .har-bar { display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.08); }
.v-hero-api-reference .har-dot { width:11px; height:11px; border-radius:50%; flex:none; }
.v-hero-api-reference .har-dot.r { background:#ff5f56; }
.v-hero-api-reference .har-dot.y { background:#ffbd2e; }
.v-hero-api-reference .har-dot.g { background:#27c93f; }
.v-hero-api-reference .har-lang { margin-left:8px; font:500 11px var(--mono); color:#8b91a0; }
.v-hero-api-reference .har-copy { margin-left:auto; padding:4px 12px; border-radius:7px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#cdd3de;
  font:600 10px var(--mono); letter-spacing:0.8px; text-transform:uppercase;
  transition:color 140ms linear, border-color 140ms linear; }
.v-hero-api-reference .har-copy:hover { color:#fff; border-color:rgba(255,255,255,0.3); }
.v-hero-api-reference .har-copy.ok { color:#27c93f; border-color:color-mix(in srgb, #27c93f 55%, transparent); }
.v-hero-api-reference .har-body { padding:18px 20px; overflow-x:auto; }
.v-hero-api-reference .har-code { display:none; margin:0; white-space:pre; color:#e6e8ee;
  font:400 12.5px/1.75 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.v-hero-api-reference .har-code.on { display:block; }
.v-hero-api-reference .har-code code { font:inherit; color:inherit; }
/* syntax tints — literal, tuned for the dark editor surface (semantic, not brand) */
.v-hero-api-reference .har-c-kw  { color:#c792ea; }
.v-hero-api-reference .har-c-str { color:#c3e88d; }
.v-hero-api-reference .har-c-id  { color:#82aaff; }
.v-hero-api-reference .har-c-pu  { color:#89ddff; }
.v-hero-api-reference .har-c-cmt { color:#5b6472; font-style:italic; }
.v-hero-api-reference .har-c-num { color:#f5b325; }

@container site (max-width: 560px) {
  .v-hero-api-reference .har-win { margin-top:26px; }
  .v-hero-api-reference .har-code { font-size:11.5px; }
}

/* AI Powered — ported from SB_04 hero-ai-powered (centered pitch over a chat panel).
   The static mock is now a LIVE assistant: mount wires the input + capability tags to
   canned typing replies. Origin hex vars mapped to theme tokens; blink is opacity-only;
   no entrance anims (anims.js owns those); transitions limited to color/opacity/transform. */
.v-hero-ai-powered .hap-wrap { gap:32px; max-width:720px; }
.v-hero-ai-powered .hap-h { letter-spacing:-0.03em; }
.v-hero-ai-powered .hap-sub { max-width:560px; }

.v-hero-ai-powered .hap-chat { width:100%; text-align:left; background:var(--panel);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); overflow:hidden; }
.v-hero-ai-powered .hap-bar { display:flex; align-items:center; gap:7px;
  padding:12px 20px; background:var(--panel-2); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-ai-powered .hap-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.v-hero-ai-powered .hap-dot.r { background:#ff5f57; }
.v-hero-ai-powered .hap-dot.y { background:#febc2e; }
.v-hero-ai-powered .hap-dot.g { background:#28c840; }
.v-hero-ai-powered .hap-label { margin-left:auto; font:600 12px var(--font);
  letter-spacing:.04em; color:var(--faint); }

.v-hero-ai-powered .hap-msgs { display:flex; flex-direction:column; gap:18px;
  padding:22px; max-height:340px; overflow-y:auto; }
.v-hero-ai-powered .hap-msg { display:flex; gap:11px; align-items:flex-start; }
.v-hero-ai-powered .hap-msg--user { justify-content:flex-end; }
.v-hero-ai-powered .hap-bubble { max-width:88%; padding:12px 15px; border-radius:12px;
  font:400 14px/1.6 var(--font); }
.v-hero-ai-powered .hap-bubble--user { color:var(--ink); border-radius:12px 12px 3px 12px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.v-hero-ai-powered .hap-bubble--ai { color:var(--dim); background:var(--panel-2);
  border:var(--bw, 1px) solid var(--hair); border-radius:12px 12px 12px 3px; }
.v-hero-ai-powered .hap-bubble--ai strong { color:var(--ink); font-weight:600; }
.v-hero-ai-powered .hap-avatar { flex:none; width:30px; height:30px; border-radius:50%;
  margin-top:2px; display:flex; align-items:center; justify-content:center;
  font:800 9px var(--font); letter-spacing:.05em; color:#fff;
  background:var(--accent-grad, linear-gradient(135deg, var(--accent), var(--accent2, var(--accent)))); }
.v-hero-ai-powered .hap-cursor { display:inline-block; width:2px; height:.9em; margin-left:3px;
  vertical-align:middle; border-radius:1px; background:var(--accent);
  animation:hap-blink 1s step-end infinite; }
@keyframes hap-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

.v-hero-ai-powered .hap-input { display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-top:var(--bw, 1px) solid var(--hair); background:var(--panel-2); }
.v-hero-ai-powered .hap-field { flex:1; min-width:0; border:none; outline:none; background:transparent;
  font:400 14px var(--font); color:var(--ink); }
.v-hero-ai-powered .hap-field::placeholder { color:var(--faint); }
.v-hero-ai-powered .hap-send { flex:none; width:34px; height:34px; border:none; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff;
  background:var(--accent); transition:opacity .2s, transform .2s; }
.v-hero-ai-powered .hap-send:hover { opacity:.85; }
.v-hero-ai-powered .hap-send:active { transform:scale(.94); }

.v-hero-ai-powered .hap-tags { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.v-hero-ai-powered .hap-tag { cursor:pointer; font:500 13px var(--font); color:var(--dim);
  padding:7px 14px; border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  transition:color .2s, transform .2s; }
.v-hero-ai-powered .hap-tag:hover { color:var(--ink);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); transform:translateY(-1px); }

@container site (max-width: 560px) {
  .v-hero-ai-powered .hap-wrap { gap:26px; }
  .v-hero-ai-powered .hap-bubble { max-width:92%; }
  .v-hero-ai-powered .hap-msgs { padding:16px; max-height:300px; }
}
/* hero-automation — ported from SB_04 drafts/hero-automation (workflow-automation fold:
   copy + integration pills on the left, a vertical node flow on the right). The flow is REAL:
   mount() cycles the running/done state through the nodes (spinner + check + filling connectors),
   so it plays an actual automation rather than freezing on one "Running" node. Origin --hau-*
   vars + brand hexes -> theme tokens; baked entrance keyframes dropped (anims.js owns entrances) —
   only the spinner and the JS-driven state run at rest; container queries, not media queries. */
.v-hero-automation .hau-in { align-items:center; }
.v-hero-automation .ws-hcopy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-hero-automation .hau-int { margin-top:clamp(22px, 2.6cqw, 30px); display:flex; flex-direction:column; gap:10px; }
.v-hero-automation .hau-int-label { font:700 10px var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.v-hero-automation .hau-pills { display:flex; flex-wrap:wrap; gap:8px; }
.v-hero-automation .hau-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
  border-radius:8px; border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  font:600 13px var(--font); color:var(--dim); }
.v-hero-automation .hau-pdot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.v-hero-automation .ws-ctarow { margin-top:clamp(26px, 3cqw, 32px); }
/* flow column */
.v-hero-automation .hau-flow { display:flex; align-items:center; justify-content:center; min-width:0; }
.v-hero-automation .hau-track { width:100%; max-width:400px; display:flex; flex-direction:column; align-items:stretch; }
.v-hero-automation .hau-node { position:relative; display:flex; align-items:center; gap:14px;
  padding:15px 17px; border-radius:12px; border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  transition:border-color .25s ease, background-color .25s ease; }
.v-hero-automation .hau-node.is-done { border-color:color-mix(in srgb, var(--accent) 24%, var(--hair)); }
.v-hero-automation .hau-node.is-run { border-color:color-mix(in srgb, var(--accent) 46%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.v-hero-automation .hau-nicon { position:relative; flex:none; width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; color:var(--faint);
  background:color-mix(in srgb, var(--ink) 4%, transparent); border:var(--bw, 1px) solid var(--hair);
  transition:color .25s ease, border-color .25s ease; }
.v-hero-automation .hau-nicon svg { width:18px; height:18px; }
.v-hero-automation .hau-node.is-run .hau-nicon,
.v-hero-automation .hau-node.is-done .hau-nicon { color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); }
.v-hero-automation .hau-nbody { display:flex; flex-direction:column; gap:3px; min-width:0; }
.v-hero-automation .hau-ntype { display:flex; align-items:center; gap:8px;
  font:700 11px var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  transition:color .25s ease; }
.v-hero-automation .hau-node.is-run .hau-ntype { color:var(--accent); }
.v-hero-automation .hau-nname { font:600 15px var(--font); color:var(--ink); line-height:1.3; }
.v-hero-automation .hau-badge { display:none; padding:2px 7px; border-radius:5px;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent);
  font:700 9px var(--font); letter-spacing:.08em; }
.v-hero-automation .hau-node.is-run .hau-badge { display:inline-block; }
.v-hero-automation .hau-ncheck { flex:none; margin-left:auto; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 15%, transparent); opacity:0; transition:opacity .25s ease; }
.v-hero-automation .hau-ncheck svg { width:12px; height:12px; }
.v-hero-automation .hau-node.is-done .hau-ncheck { opacity:1; }
/* spinner rides the running node's icon */
.v-hero-automation .hau-node.is-run .hau-nicon::after { content:''; position:absolute; top:-5px; right:-5px;
  width:14px; height:14px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color:var(--accent);
  animation:hau-spin .8s linear infinite; }
@keyframes hau-spin { to { transform:rotate(360deg); } }
/* connectors — dim by default, fill accent as the flow passes them */
.v-hero-automation .hau-conn { position:relative; align-self:center; width:2px; height:32px;
  border-radius:2px; background:var(--hair); overflow:hidden; }
.v-hero-automation .hau-conn-fill { position:absolute; inset:0; background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .4s ease; }
.v-hero-automation .hau-conn.is-done .hau-conn-fill { transform:scaleY(1); }
@container site (max-width: 860px) {
  .v-hero-automation .hau-track { max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-automation .hau-node, .v-hero-automation .hau-nicon, .v-hero-automation .hau-ntype,
  .v-hero-automation .hau-ncheck, .v-hero-automation .hau-conn-fill { transition:none; }
  .v-hero-automation .hau-node.is-run .hau-nicon::after { animation:none; }
}
/* hero-big-stats — ported from SB_04 drafts/hero-big-stats: copy beside an oversized 2x2
   grid of headline metrics. Origin --hbs-* vars -> theme tokens (surface->--panel, text->--ink,
   dim->--dim, border/accent->--hair/--accent, radius->--radius). No baked entrances (anims.js
   owns those) — only the card border hover is kept; transitions ride border-color only. Numbers
   count up on scroll via mount()/whenVisible and settle on their exact values. Responsive by
   container query; the two columns narrow-stack via the global 860px .ws-hero .ws-in.split rule. */
.v-hero-big-stats .ws-in.split { grid-template-columns:1fr 1fr; align-items:center; gap:clamp(40px, 5.5cqw, 80px); }
.v-hero-big-stats .ws-hcopy { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.v-hero-big-stats .ws-sub { max-width:42ch; }
.v-hero-big-stats .hbs-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px, 1.2cqw, 14px); }
.v-hero-big-stats .hbs-stat { display:flex; flex-direction:column; gap:6px;
  padding:clamp(20px, 2.6cqw, 30px) clamp(18px, 2.2cqw, 26px);
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  transition:border-color .2s ease; }
.v-hero-big-stats .hbs-stat:hover { border-color:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-hero-big-stats .hbs-num { font:800 clamp(30px, 3.6cqw, 48px)/1 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.045em; font-variant-numeric:tabular-nums; }
.v-hero-big-stats .hbs-slabel { font:700 clamp(12px, 1.35cqw, 14px) var(--font); color:var(--ink); font-style:normal; }
.v-hero-big-stats .hbs-ctx { font:400 clamp(10px, 1.05cqw, 12px)/1.4 var(--font); color:var(--dim); }
@container site (max-width: 560px) {
  .v-hero-big-stats .hbs-grid { gap:10px; }
  .v-hero-big-stats .hbs-stat { padding:20px 18px; }
}
/* hero-background-video — ported from SB_04 drafts/hero-background-video (a full-screen "video
   background" opener: cinematic dark stage + animated light + dark overlay + centered copy). NO
   remote video: the origin's simulated CSS gradient and animated light-rays become a token-lit base
   plus a whenVisible-gated canvas that drifts soft accent bokeh like abstract footage (rAF pauses
   offscreen). Origin --hbv-* vars map to tokens: overlay/veil->--bg tints, text->--ink, dim text->
   --dim/--faint, accent + btn->--accent, border->--hair, font->--font-head. The baked entrance
   (hbv-rise) is dropped — anims.js owns section entrances; only the decorative drift plus a gentle
   live-dot and play-ring pulse run at rest. No backdrop-filter; transitions ride transform/opacity/
   color only; a container query handles narrow reflow. */
.ws-hero.v-hero-background-video { position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(460px, 84cqh, 820px); padding-block:clamp(80px, 12cqh, 130px); overflow:hidden;
  isolation:isolate; background-color:var(--bg); }
.v-hero-background-video .hbv-base { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 62%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(80% 72% at 78% 2%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, black), color-mix(in srgb, var(--bg) 97%, black)); }
.v-hero-background-video .hbv-fx { z-index:1; }
.v-hero-background-video .hbv-veil { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(132% 122% at 50% 34%, transparent 40%, color-mix(in srgb, var(--bg) 66%, black) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--bg) 52%, transparent), transparent 44%); }
.v-hero-background-video .hbv-in { position:relative; z-index:3; }
.v-hero-background-video .ws-h1 { max-width:16ch; margin-inline:auto; text-wrap:balance;
  font-size:clamp(38px, 8cqw, 84px); letter-spacing:-0.03em; }
.v-hero-background-video .ws-sub { max-width:46ch; margin-top:clamp(16px, 2cqw, 22px); color:var(--dim); }
.v-hero-background-video .ws-ctarow { margin-top:clamp(26px, 3cqw, 34px); justify-content:center; }
.v-hero-background-video .hbv-tag { display:inline-flex; align-items:center; gap:9px;
  margin-bottom:clamp(20px, 2.6cqw, 28px); padding:6px 15px 6px 13px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 6%, transparent);
  font:600 11px var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.v-hero-background-video .hbv-dot { width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--accent); animation:hbvPulse 2.4s ease-out infinite; }
@keyframes hbvPulse {
  0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow:0 0 0 8px transparent; } }
.v-hero-background-video .hbv-play { position:relative; padding-left:15px; }
.v-hero-background-video .hbv-pico { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; flex:none; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition:border-color 140ms linear; }
.v-hero-background-video .hbv-pico::before { content:''; width:0; height:0; margin-left:2px;
  border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor; }
.v-hero-background-video .hbv-pico::after { content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation:hbvRing 2.6s ease-out infinite; }
.v-hero-background-video .hbv-play:hover .hbv-pico { border-color:var(--accent); }
@keyframes hbvRing {
  0% { transform:scale(1); opacity:.6; }
  70%, 100% { transform:scale(1.7); opacity:0; } }
@container site (max-width: 560px) {
  .ws-hero.v-hero-background-video { min-height:clamp(430px, 76cqh, 640px); padding-block:clamp(64px, 12cqh, 96px); }
  .v-hero-background-video .ws-sub { max-width:100%; } }
@media (prefers-reduced-motion: reduce) {
  .v-hero-background-video .hbv-dot,
  .v-hero-background-video .hbv-pico::after { animation:none; } }
/* appointment — ported from SB_04 hero-appointment (booking fold: copy + live mini-calendar).
   The origin's calendar & time pills were a dead static shell; mount() makes days and slots
   selectable, the month nav switches pre-rendered panels, and Confirm reveals a real confirmed
   state. Origin --hap2-* vars mapped to theme tokens; entrance anims dropped; only color/transform
   /opacity transition; text on accent uses --bg so it reads in light and dark themes. */
.ws-hero.v-hero-appointment .ap-in { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5cqw, 72px); align-items:center; }
.v-hero-appointment .ap-copy { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px, 1.8cqw, 22px); }
.v-hero-appointment .ap-trust { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.v-hero-appointment .ap-trust li { position:relative; padding-left:26px; font:500 clamp(12.5px, 1.15cqw, 14px) var(--font); color:var(--dim); }
.v-hero-appointment .ap-trust li::before { content:''; position:absolute; left:0; top:50%; width:16px; height:16px; margin-top:-8px;
  border-radius:50%; background:color-mix(in srgb, var(--accent) 16%, transparent); }
.v-hero-appointment .ap-trust li::after { content:''; position:absolute; left:5px; top:50%; width:6px; height:3px; margin-top:-2px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg); }
.v-hero-appointment .ap-widget { position:relative; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * 1.1); overflow:hidden; width:100%; max-width:440px; }
.v-hero-appointment .ap-cal-head { display:flex; align-items:center; justify-content:space-between;
  padding:clamp(12px, 1.4cqw, 16px) clamp(14px, 1.6cqw, 20px); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-appointment .ap-month { font:700 clamp(13px, 1.2cqw, 15px) var(--font); color:var(--ink); letter-spacing:-0.01em; }
.v-hero-appointment .ap-nav { width:30px; height:30px; border-radius:8px; background:none; border:var(--bw, 1px) solid var(--hair);
  color:var(--dim); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font:400 15px var(--font); appearance:none; -webkit-appearance:none; transition:color .16s linear, transform .16s ease; }
.v-hero-appointment .ap-nav:hover:not(:disabled) { color:var(--accent); transform:translateY(-1px); }
.v-hero-appointment .ap-nav:disabled { opacity:.35; cursor:default; }
.v-hero-appointment .ap-nav:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-appointment .ap-dow { display:grid; grid-template-columns:repeat(7, 1fr); padding:10px clamp(12px, 1.4cqw, 16px) 4px; }
.v-hero-appointment .ap-dow span { text-align:center; font:600 10px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.v-hero-appointment .ap-grid { grid-template-columns:repeat(7, 1fr); gap:3px;
  padding:2px clamp(12px, 1.4cqw, 16px) clamp(12px, 1.4cqw, 16px); }
.v-hero-appointment .ap-grid:not([hidden]) { display:grid; }
.v-hero-appointment .ap-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative;
  border-radius:8px; font:500 clamp(11px, 1cqw, 13px) var(--font); color:var(--dim);
  background:none; border:0; appearance:none; -webkit-appearance:none; }
.v-hero-appointment .ap-empty { visibility:hidden; }
.v-hero-appointment .ap-off, .v-hero-appointment .ap-past { color:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-hero-appointment .ap-avail { color:var(--ink); cursor:pointer; transition:color .15s linear, transform .15s ease; }
.v-hero-appointment .ap-avail::after { content:''; position:absolute; bottom:4px; left:50%; width:4px; height:4px;
  margin-left:-2px; border-radius:50%; background:var(--accent); }
.v-hero-appointment .ap-avail:hover { color:var(--accent); transform:translateY(-1px); }
.v-hero-appointment .ap-avail:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-appointment .ap-today { font-weight:700; }
.v-hero-appointment .ap-today::after { background:color-mix(in srgb, var(--accent) 55%, transparent); }
.v-hero-appointment .ap-cell.is-sel { background:var(--accent); color:var(--bg); font-weight:700; }
.v-hero-appointment .ap-cell.is-sel::after { display:none; }
.v-hero-appointment .ap-slots { display:flex; flex-direction:column; gap:10px;
  padding:clamp(12px, 1.4cqw, 16px) clamp(14px, 1.6cqw, 20px); border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-appointment .ap-slots-label { font:600 10px var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.v-hero-appointment .ap-slot-row { display:flex; flex-wrap:wrap; gap:8px; }
.v-hero-appointment .ap-slot { padding:8px 15px; border-radius:100px; border:var(--bw, 1px) solid var(--hair); background:none;
  color:var(--ink); font:500 clamp(12px, 1.05cqw, 13.5px) var(--font); cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:color .15s linear, transform .15s ease; }
.v-hero-appointment .ap-slot:hover:not(:disabled) { color:var(--accent); transform:translateY(-1px); }
.v-hero-appointment .ap-slot.is-sel { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.v-hero-appointment .ap-slot.is-off { opacity:.32; cursor:default; text-decoration:line-through; }
.v-hero-appointment .ap-slot:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-appointment .ap-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:clamp(12px, 1.4cqw, 16px) clamp(14px, 1.6cqw, 20px); border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-appointment .ap-sel { font:600 clamp(12px, 1.1cqw, 13.5px) var(--font); color:var(--ink); }
.v-hero-appointment .ap-book { appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer; flex:none; }
.v-hero-appointment .ap-book:disabled { opacity:.5; cursor:default; }
.v-hero-appointment .ap-confirm { position:absolute; inset:0; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center; padding:28px; background:var(--panel); }
.v-hero-appointment .ap-confirm:not([hidden]) { display:flex; }
.v-hero-appointment .ap-check { width:52px; height:52px; border-radius:50%; position:relative;
  background:color-mix(in srgb, var(--accent) 16%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.v-hero-appointment .ap-check::after { content:''; position:absolute; top:50%; left:50%; width:16px; height:8px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translate(-52%, -70%) rotate(-45deg); }
.v-hero-appointment .ap-confirm-t { font:700 clamp(16px, 1.5cqw, 19px) var(--font-head, var(--font)); color:var(--ink); }
.v-hero-appointment .ap-confirm-d { font:500 clamp(13px, 1.2cqw, 15px) var(--font); color:var(--dim); }
.v-hero-appointment .ap-again { margin-top:8px; appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:9px 18px; border-radius:calc(var(--radius, 12px) * .5); border:var(--bw, 1px) solid var(--hair); background:none;
  color:var(--ink); font:600 13px var(--font); transition:color .15s linear; }
.v-hero-appointment .ap-again:hover { color:var(--accent); }
.v-hero-appointment .ap-again:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@container site (max-width: 860px) {
  .ws-hero.v-hero-appointment .ap-in { grid-template-columns:1fr; gap:clamp(28px, 5cqw, 40px); }
  .v-hero-appointment .ap-widget { max-width:420px; }
}
@container site (max-width: 560px) {
  .v-hero-appointment .ap-foot { flex-direction:column; align-items:stretch; }
  .v-hero-appointment .ap-book { justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-appointment .ap-nav, .v-hero-appointment .ap-avail,
  .v-hero-appointment .ap-slot, .v-hero-appointment .ap-again { transition:none; }
}
/* hero-bold-type — ported from SB_04 drafts/hero-bold-type (ultra-minimal typographic hero:
   one massive clamp() headline filling the fold, a single accent word, and a sub + CTA sitting on
   a hairline). Origin 8 --hbt-* vars map to tokens: bg->--bg, text->--ink, dim->--dim, border->--hair,
   accent rides the framework .ws-grad (accent token gradient), radius->--radius, fonts->--font-head/--font.
   The Google-Fonts Inter CDN and hard-coded palette are dropped. The accent word is italic (origin's
   signature). Big-type sizing is container-query based (cqw) so it fills its column, not the viewport;
   overflow-wrap guards long words at narrow. Motion is hover only via the shared .ws-btn; no baked
   entrance, no background/blur transitions. */
.v-hero-bold-type .hbt-title { font-family:var(--font-head, var(--font)); font-weight:900;
  font-size:clamp(52px, 11cqw, 132px); line-height:0.95; letter-spacing:-0.045em;
  margin:0 0 clamp(36px, 4.4cqw, 52px); overflow-wrap:break-word; }
.v-hero-bold-type .hbt-title .ws-grad { font-style:italic; }
.v-hero-bold-type .hbt-foot { display:flex; align-items:center; gap:clamp(24px, 3cqw, 40px);
  flex-wrap:wrap; padding-top:clamp(26px, 3cqw, 34px); border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-bold-type .hbt-sub { margin:0; max-width:46ch; color:var(--dim);
  font-size:clamp(15px, 1.6cqw, 20px); line-height:1.5; }
.v-hero-bold-type .hbt-cta { margin-left:auto; flex-shrink:0; }
@container site (max-width: 560px) {
  .v-hero-bold-type .hbt-title { font-size:clamp(40px, 13cqw, 132px); }
  .v-hero-bold-type .hbt-foot { flex-direction:column; align-items:flex-start; gap:22px; }
  .v-hero-bold-type .hbt-cta { margin-left:0; }
}
/* brand-story — centered brand-narrative quote (SB_04 drafts/hero-brand-story). Origin --hbs-*
   vars map to tokens (ink/dim/accent/hair); the quote mark + italic brand highlight use a serif
   stack; the radial glow is color-mix(accent). Entrance motion dropped (anims.js owns reveals);
   only the attribution hover lift remains. Container queries only, no blur. */
.v-hero-brand-story { position:relative; isolation:isolate; overflow:hidden; }
.v-hero-brand-story::before { content:''; position:absolute; z-index:0; top:20%; left:50%;
  width:min(600px, 82cqw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(ellipse, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  pointer-events:none; }
.v-hero-brand-story .ws-in.center { position:relative; z-index:1; }
.v-hero-brand-story .hbs-inner { display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:clamp(20px, 3cqw, 28px); max-width:700px; margin:0 auto; }
.v-hero-brand-story .hbs-mark { font-family:var(--font-head, Georgia, 'Times New Roman', serif);
  font-size:clamp(80px, 12cqw, 140px); line-height:0.6;
  color:color-mix(in srgb, var(--accent) 22%, transparent); }
.v-hero-brand-story .hbs-statement { margin:0; font-weight:600; font-size:clamp(24px, 3.5cqw, 36px);
  line-height:1.45; letter-spacing:-0.02em; color:var(--ink); }
.v-hero-brand-story .hbs-em { font-family:var(--font-head, Georgia, 'Times New Roman', serif);
  font-style:italic; color:var(--accent); font-size:1.08em; }
.v-hero-brand-story .hbs-sub { margin:0; max-width:440px; font-size:15.5px; line-height:1.6; color:var(--dim); }
.v-hero-brand-story .hbs-attribution { display:inline-flex; align-items:center; gap:12px; margin:0;
  padding:8px 16px 8px 8px; border-radius:999px; border:var(--bw, 1px) solid var(--hair);
  transition:transform .18s ease, color .18s ease; }
.v-hero-brand-story .hbs-attribution:hover { transform:translateY(-2px); }
.v-hero-brand-story .hbs-av { width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font:800 12px var(--font); color:#fff;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); }
.v-hero-brand-story .hbs-attribution figcaption { display:flex; flex-direction:column; text-align:left; }
.v-hero-brand-story .hbs-attr-name { font:700 13px var(--font); color:var(--ink); }
.v-hero-brand-story .hbs-attr-title { font:500 11px var(--font); color:var(--dim); }
@container site (max-width: 560px) {
  .v-hero-brand-story .hbs-statement { font-size:clamp(21px, 6.6cqw, 27px); }
  .v-hero-brand-story .hbs-sub { font-size:14.5px; }
}
/* case study — ported from SB_04 hero-case-study (narrow outcome hero: category+type,
   result headline, project meta row, result stats, full-width visual). Entrance motion
   dropped (anims.js owns section entrances); only hover/interaction motion kept. */
.v-hero-case-study { padding:clamp(64px, 9cqw, 120px) 0 clamp(48px, 6cqw, 72px); }
.v-hero-case-study .cs-in { text-align:left; }
.v-hero-case-study .cs-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:clamp(22px, 3cqw, 32px); }
.v-hero-case-study .cs-cat { font:600 11px var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.v-hero-case-study .cs-sep { width:1px; height:14px; background:var(--hair); flex:none; }
.v-hero-case-study .cs-type { font:600 11px var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.v-hero-case-study .cs-h1 { font-size:clamp(2rem, 5cqw, 3.25rem); line-height:1.1; letter-spacing:-.025em; margin:0 0 clamp(18px, 2.4cqw, 24px); }
.v-hero-case-study .cs-desc { font-size:clamp(1rem, 1.4cqw, 1.0625rem); line-height:1.7; color:var(--dim); max-width:none; margin:0 0 clamp(32px, 4.4cqw, 40px); }
.v-hero-case-study .cs-projmeta { display:flex; flex-wrap:wrap; border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); margin-bottom:clamp(36px, 5cqw, 48px); }
.v-hero-case-study .cs-mitem { flex:1 1 auto; min-width:120px; padding:20px 24px 20px 0; }
.v-hero-case-study .cs-mitem + .cs-mitem { padding-left:24px; border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-case-study .cs-mlabel { font:600 10px var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.v-hero-case-study .cs-mvalue { font:600 .9375rem var(--font); color:var(--ink); line-height:1.3; }
.v-hero-case-study .cs-stats { display:flex; flex-wrap:wrap; }
.v-hero-case-study .cs-stat { flex:1 1 0; min-width:140px; padding:0 28px 0 0; }
.v-hero-case-study .cs-stat + .cs-stat { padding-left:28px; border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-case-study .cs-svalue { font:700 clamp(1.75rem, 4cqw, 2.5rem)/1 var(--font-head, var(--font)); letter-spacing:-.03em; color:var(--ink); margin-bottom:8px; }
.v-hero-case-study .cs-slabel { font-size:.8125rem; color:var(--dim); line-height:1.4; }
.v-hero-case-study .cs-visual-wrap { margin-top:clamp(40px, 6cqw, 72px); }
.v-hero-case-study .cs-visual { width:100%; height:clamp(280px, 40cqw, 520px); border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair); overflow:hidden; background-size:cover; background-position:center; }
.v-hero-case-study .cs-visual.ph { background:
  radial-gradient(120% 140% at 18% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 58%),
  linear-gradient(135deg, var(--panel), var(--panel-2)); }
@container site (max-width: 560px) {
  .v-hero-case-study .cs-projmeta { flex-direction:column; }
  .v-hero-case-study .cs-mitem { padding:16px 0; }
  .v-hero-case-study .cs-mitem + .cs-mitem { padding-left:0; border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
  .v-hero-case-study .cs-stats { flex-direction:column; gap:24px; }
  .v-hero-case-study .cs-stat { padding:0; }
  .v-hero-case-study .cs-stat + .cs-stat { padding-left:0; border-left:none; border-top:var(--bw, 1px) solid var(--hair); padding-top:24px; }
}
/* hero-centered-cta — ported from SB_04 drafts/hero-centered-cta (single-column centered fold:
   badge, headline, subtitle, one dominant CTA, a reassurance line, and a star-rating proof block).
   Origin --hcc-* vars map to tokens: bg->--bg, heading->--ink, body->--dim, accent rides the shared
   .ws-badge/.ws-btn (accent token). The star gold is a semantic hue (no token exists) so it stays as
   a scoped --hcc-star hex. Google-Fonts Inter CDN dropped. The dead 5-star row is made real: each
   star fills by a computed width % from the rating prop, so 4.9/5 renders as 4.9 stars filled, not a
   painted decoration. Layout uses the shared .ws-in.center.narrow column + container queries; motion
   is hover-only via .ws-btn (no baked entrance, no background/blur transitions). */
.v-hero-centered-cta { --hcc-star:#f5a623; padding-block:clamp(72px, 13cqw, 128px); }
.v-hero-centered-cta .ws-ctarow { margin-top:32px; }
.v-hero-centered-cta .ws-btn.primary { padding:14px 30px; font-size:15px; }
.v-hero-centered-cta .hcc-note { margin:14px 0 0; font:400 13px var(--font); color:var(--dim); }
.v-hero-centered-cta .hcc-proof { margin-top:44px; display:flex; flex-direction:column;
  align-items:center; gap:8px; }
.v-hero-centered-cta .hcc-stars { display:inline-flex; gap:4px; }
.v-hero-centered-cta .hcc-star { position:relative; width:18px; height:18px; font-size:18px;
  line-height:1; color:color-mix(in srgb, var(--hcc-star) 24%, var(--bg)); }
.v-hero-centered-cta .hcc-star::before { content:'\2605'; position:absolute; inset:0; }
.v-hero-centered-cta .hcc-star i { position:absolute; inset:0; overflow:hidden; width:0;
  color:var(--hcc-star); font-style:normal; }
.v-hero-centered-cta .hcc-star i::before { content:'\2605'; }
.v-hero-centered-cta .hcc-rating { margin:0; font:400 13px var(--font); color:var(--dim);
  letter-spacing:.01em; }
@container site (max-width: 560px) {
  .v-hero-centered-cta { padding-block:clamp(56px, 15cqw, 88px); }
  .v-hero-centered-cta .ws-btn.primary { width:100%; justify-content:center; }
}
/* hero-booking-cta — ported from SB_04 drafts/hero-booking-cta: centered headline over an inline
   booking strip (service / date / time) with a real availability check that confirms the slot, plus
   a divided social-proof stat row. Origin --hbc-* vars -> theme tokens (surface -> --panel, borders
   -> --hair, secondary -> --dim/--faint, accent -> --accent). Baked entrance keyframes dropped
   (anims.js owns entrances); only hover + focus + the submit/confirm state move here. Transitions on
   colour/border/opacity only, no backdrop-filter. Responsive by container query, not viewport. */
.v-hero-booking-cta .ws-in.center { display:flex; flex-direction:column; align-items:center; gap:clamp(30px, 4cqw, 48px); }
.v-hero-booking-cta .ws-bchead { display:flex; flex-direction:column; align-items:center; gap:16px; max-width:44rem; text-align:center; }
.v-hero-booking-cta .ws-kick { color:var(--accent); font:600 clamp(11px, 1.3cqw, 12.5px) var(--mono, var(--font)); letter-spacing:2.4px; text-transform:uppercase; font-style:normal; }
.v-hero-booking-cta .ws-h1 { line-height:1.06; letter-spacing:-0.03em; }
.v-hero-booking-cta .ws-sub { max-width:52ch; margin:0 auto; }
.v-hero-booking-cta .ws-bcwrap { width:100%; max-width:820px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.v-hero-booking-cta .ws-bcform { width:100%; display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:end; gap:12px;
  padding:16px; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); background:var(--panel); background-image:var(--surface-grad, none); }
.v-hero-booking-cta .ws-bcform[hidden] { display:none; }
.v-hero-booking-cta .ws-bcfield { display:flex; flex-direction:column; gap:6px; text-align:left; min-width:0; }
.v-hero-booking-cta .ws-bcfield > span { font:600 10.5px var(--mono, var(--font)); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.v-hero-booking-cta .ws-bcinput { width:100%; padding:11px 13px; border-radius:calc(var(--radius, 12px) * .6);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel-2, var(--panel)); color:var(--ink); font:400 14px var(--font);
  outline:none; appearance:none; -webkit-appearance:none; cursor:pointer; transition:border-color 140ms linear, color 140ms linear; }
.v-hero-booking-cta .ws-bcinput:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-hero-booking-cta .ws-bcinput:focus { border-color:var(--accent); }
.v-hero-booking-cta .ws-bcinput.bad { border-color:#f26d6d; }
.v-hero-booking-cta select.ws-bcinput { padding-right:34px; background-repeat:no-repeat; background-size:5px 5px, 5px 5px;
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-image:linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); }
.v-hero-booking-cta .ws-bcinput::-webkit-calendar-picker-indicator { filter:invert(.5); cursor:pointer; }
.v-hero-booking-cta .ws-bccheck { align-self:end; justify-content:center; border:none; white-space:nowrap; padding:12px 22px; }
.v-hero-booking-cta .ws-bcnote { display:flex; align-items:center; justify-content:center; gap:7px; margin:0;
  font:400 12.5px/1.5 var(--font); color:var(--faint); }
.v-hero-booking-cta .ws-bcnote[hidden] { display:none; }
.v-hero-booking-cta .ws-bclock { display:inline-flex; color:var(--dim); }
.v-hero-booking-cta .ws-bclock svg { width:14px; height:14px; }
.v-hero-booking-cta .ws-bcdone { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%;
  padding:24px 20px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--hair)); border-radius:var(--radius, 12px);
  background:color-mix(in srgb, var(--accent) 8%, var(--panel)); text-align:center; }
.v-hero-booking-cta .ws-bcdone[hidden] { display:none; }
.v-hero-booking-cta .ws-bcdoneic { display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; background:var(--accent); }
.v-hero-booking-cta .ws-bcdoneic svg { width:20px; height:20px; }
.v-hero-booking-cta .ws-bcdonet { font:700 clamp(18px, 2.4cqw, 22px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-hero-booking-cta .ws-bcdones { font:500 14px var(--font); color:var(--dim); }
.v-hero-booking-cta .ws-bcreset { margin-top:4px; }
.v-hero-booking-cta .ws-bcstats { display:flex; align-items:stretch; width:100%; max-width:640px; }
.v-hero-booking-cta .ws-bcstat { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:18px 14px; text-align:center; }
.v-hero-booking-cta .ws-bcstat + .ws-bcstat { border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-booking-cta .ws-bcstat b { font:800 clamp(22px, 3.4cqw, 30px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.025em; line-height:1; }
.v-hero-booking-cta .ws-bcstat i { font:500 12.5px/1.3 var(--font); font-style:normal; color:var(--dim); }
@container site (max-width: 860px) {
  .v-hero-booking-cta .ws-bcform { grid-template-columns:1fr 1fr; }
  .v-hero-booking-cta .ws-bccheck { grid-column:1 / -1; }
}
@container site (max-width: 560px) {
  .v-hero-booking-cta .ws-bcform { grid-template-columns:1fr; }
}
/* hero-changelog — centered what's-new hero over a tagged version feed */
.v-hero-changelog { padding:clamp(72px, 11cqw, 128px) 0 clamp(64px, 9cqw, 104px); }
.v-hero-changelog .ws-in.center { max-width:660px; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:clamp(20px, 2.6cqw, 30px); }
.v-hero-changelog .ws-sub { max-width:52ch; }
.v-hero-changelog .cl-feed { width:100%; display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.v-hero-changelog .cl-entry { text-align:left; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); padding:clamp(20px, 2.4cqw, 28px); }
.v-hero-changelog .cl-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.v-hero-changelog .cl-ver { font:500 12px var(--mono); color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 14%, transparent));
  padding:3px 9px; border-radius:6px; }
.v-hero-changelog .cl-date { font:500 12px var(--font); color:var(--dim); }
.v-hero-changelog .cl-title { font:700 clamp(16px, 1.6cqw, 19px) var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-.01em; margin-bottom:14px; }
.v-hero-changelog .cl-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.v-hero-changelog .cl-item { display:flex; align-items:flex-start; gap:10px; }
.v-hero-changelog .cl-tag { flex:none; margin-top:1px; font:600 10px var(--font); letter-spacing:.05em;
  text-transform:uppercase; padding:3px 8px; border-radius:100px; border:1px solid transparent; }
.v-hero-changelog .cl-new { color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-color:color-mix(in srgb, var(--accent) 32%, transparent); }
.v-hero-changelog .cl-imp { color:var(--ok, #4ade80);
  background:color-mix(in srgb, var(--ok, #4ade80) 13%, transparent);
  border-color:color-mix(in srgb, var(--ok, #4ade80) 30%, transparent); }
.v-hero-changelog .cl-fix { color:var(--warn, #f5b342);
  background:color-mix(in srgb, var(--warn, #f5b342) 14%, transparent);
  border-color:color-mix(in srgb, var(--warn, #f5b342) 30%, transparent); }
.v-hero-changelog .cl-txt { font:400 clamp(13px, 1.15cqw, 14px) var(--font); color:var(--dim); line-height:1.55; }
.v-hero-changelog .cl-all { appearance:none; -webkit-appearance:none; cursor:pointer; margin-top:4px;
  display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:100px;
  border:var(--bw, 1px) solid var(--hair); background:none; color:var(--accent);
  font:700 13px var(--font); transition:color .15s linear, transform .15s ease; }
.v-hero-changelog .cl-all:hover { transform:translateY(-1px);
  color:color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.v-hero-changelog .cl-all:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-changelog .cl-all svg, .v-hero-changelog .cl-all i { transition:transform .15s ease; }
.v-hero-changelog .cl-all.is-open svg, .v-hero-changelog .cl-all.is-open i { transform:rotate(90deg); }
@container site (max-width: 560px) {
  .v-hero-changelog .cl-entry { padding:18px; }
  .v-hero-changelog .cl-head { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-changelog .cl-all, .v-hero-changelog .cl-all svg, .v-hero-changelog .cl-all i { transition:none; }
}
/* hero-coming-soon — ported from SB_04 drafts/hero-coming-soon (a centered pre-launch teaser: wordmark,
   big "Coming Soon" headline, one-line promise, an inline email notify form and a social-links row on a
   softly glowing dark fold). 8 --hcs-* vars mapped to theme tokens; entrance anim dropped (anims.js owns
   it); email form is real — validates and confirms via the aria-live note. */
.v-hero-coming-soon .hcs-wrap { position:relative; display:flex; flex-direction:column; align-items:center; }
.v-hero-coming-soon .hcs-glow { position:absolute; top:38%; left:50%; width:min(520px, 90%); aspect-ratio:1;
  transform:translate(-50%, -50%); pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%); }
.v-hero-coming-soon .hcs-wrap > *:not(.hcs-glow) { position:relative; z-index:1; }
.v-hero-coming-soon .hcs-logo { font:800 clamp(17px, 1.9cqw, 21px) var(--font-head, var(--font));
  color:var(--accent); letter-spacing:-0.03em; margin-bottom:clamp(24px, 3.2cqw, 40px); }
.v-hero-coming-soon .hcs-h { max-width:16ch; letter-spacing:-0.04em; text-wrap:balance;
  font-size:clamp(40px, 8cqw, 72px); }
.v-hero-coming-soon .hcs-sub { margin-top:clamp(14px, 1.8cqw, 20px); max-width:44ch; color:var(--dim);
  line-height:1.6; }
.v-hero-coming-soon .hcs-form { display:flex; width:min(440px, 100%); margin-top:clamp(24px, 3.2cqw, 34px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .8); overflow:hidden;
  transition:border-color 160ms linear; }
.v-hero-coming-soon .hcs-form:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-coming-soon .hcs-form.hcs-sent { border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.v-hero-coming-soon .hcs-input { flex:1; min-width:0; padding:13px 16px; border:none; outline:none;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:400 14px var(--font); }
.v-hero-coming-soon .hcs-input::placeholder { color:var(--faint); }
.v-hero-coming-soon .hcs-submit { flex:none; padding:13px 20px; border:none; cursor:pointer; white-space:nowrap;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:700 14px var(--font); transition:opacity 140ms linear; }
.v-hero-coming-soon .hcs-submit:hover { opacity:.88; }
.v-hero-coming-soon .hcs-submit:active { opacity:.8; }
.v-hero-coming-soon .hcs-submit:focus-visible,
.v-hero-coming-soon .hcs-soc:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-coming-soon .hcs-note { min-height:1.25em; margin-top:12px; font:500 12.5px var(--font); color:var(--dim); }
.v-hero-coming-soon .hcs-note.hcs-ok { color:var(--accent); }
.v-hero-coming-soon .hcs-note.hcs-err { color:#e5484d; }
.v-hero-coming-soon .hcs-social { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(16px, 2.4cqw, 22px); margin-top:clamp(20px, 2.8cqw, 28px); }
.v-hero-coming-soon .hcs-soc { font:600 12px var(--font); letter-spacing:.02em; color:var(--dim);
  text-decoration:none; cursor:pointer; transition:color 140ms linear; }
.v-hero-coming-soon .hcs-soc:hover { color:var(--ink); }
@container site (max-width: 560px) {
  .v-hero-coming-soon .hcs-form { flex-direction:column; border:none; overflow:visible; gap:10px; }
  .v-hero-coming-soon .hcs-input { border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .8);
    background:color-mix(in srgb, var(--ink) 5%, transparent); }
  .v-hero-coming-soon .hcs-submit { border-radius:calc(var(--radius, 12px) * .8); }
}
/* hero-compliance — ported from SB_04 drafts/hero-compliance (centered compliance pitch:
   eyebrow + headline + sub, a hairline-bordered grid of certification badges, then a
   reassurance line and two CTAs). Origin --hco-* vars map to tokens: bg->--bg, heading->--ink,
   body->--dim, divider->--hair, surface fills via color-mix on --ink. The green check keeps a
   semantic ok hue (--cmp-ok). Inter CDN + hardcoded palette dropped; the checkmark is the shared
   S_ICONS.check SVG (no remote images). Badge count drives the grid via --cmp-n; hover is the only
   motion (color/transform, background snaps instantly); no entrance anim, no backdrop-filter. */
.v-hero-compliance { --cmp-ok:#22c55e; }
.v-hero-compliance .ws-in { display:flex; flex-direction:column; align-items:center; gap:clamp(40px, 5cqw, 56px); }
.v-hero-compliance .cmp-head { display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px, 1.8cqw, 20px); max-width:680px; }
.v-hero-compliance .cmp-head .ws-kick { margin-bottom:0; }
.v-hero-compliance .cmp-grid { display:grid; grid-template-columns:repeat(var(--cmp-n, 6), minmax(0, 1fr));
  width:100%; max-width:900px; border-top:var(--bw, 1px) solid var(--hair); border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-compliance .cmp-badge { display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:12px; padding:clamp(22px, 2.4cqw, 32px) clamp(16px, 1.6cqw, 24px);
  border-right:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 3%, transparent); transition:transform .18s ease; }
.v-hero-compliance .cmp-badge:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); transform:translateY(-2px); }
.v-hero-compliance .cmp-check { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:50%; color:var(--cmp-ok);
  background:color-mix(in srgb, var(--cmp-ok) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--cmp-ok) 32%, transparent); }
.v-hero-compliance .cmp-check svg { width:17px; height:17px; }
.v-hero-compliance .cmp-name { font:700 clamp(13.5px, 1.15cqw, 15px) var(--font); color:var(--ink); letter-spacing:.02em; }
.v-hero-compliance .cmp-desc { font:400 clamp(11px, .95cqw, 12px)/1.5 var(--font); color:var(--dim);
  font-style:normal; text-align:center; }
.v-hero-compliance .cmp-foot { display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px, 2cqw, 24px); max-width:540px; }
.v-hero-compliance .cmp-reassure { margin:0; font:400 clamp(13px, 1.2cqw, 15px)/1.7 var(--font);
  color:var(--dim); text-align:center; }
.v-hero-compliance .cmp-foot .ws-ctarow { margin-top:0; }
@container site (max-width: 860px) {
  .v-hero-compliance .cmp-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@container site (max-width: 560px) {
  .v-hero-compliance .cmp-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-compliance .cmp-badge { transition:none; }
}
/* Hero / Centered Video — centered copy above a wide product-video card.
   Tokens throughout; the play affordance + equalizer are wired live in mount(). */
.ws-hero.v-hero-centered-video { text-align:center; isolation:isolate; }
.v-hero-centered-video .hcv-glow { position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:min(820px, 92cqw); height:420px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 68%); }
.v-hero-centered-video .hcv-content { position:relative; z-index:1; max-width:760px;
  margin:0 auto clamp(40px, 6cqw, 64px); }
.v-hero-centered-video .hcv-tag { color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.v-hero-centered-video .hcv-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.v-hero-centered-video .hcv-content .ws-sub { max-width:520px; margin-inline:auto; }

.v-hero-centered-video .hcv-card { position:relative; z-index:1; max-width:1000px; margin:0 auto;
  width:min(1000px, 92cqw); aspect-ratio:16 / 9; cursor:pointer; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-top-left-radius:var(--radius, 16px); border-top-right-radius:var(--radius, 16px);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 12%, var(--panel)) 0%,
    var(--panel) 48%,
    color-mix(in srgb, var(--accent) 10%, var(--panel-2, var(--panel))) 100%);
  box-shadow:0 -20px 80px color-mix(in srgb, var(--accent) 8%, transparent); }
.v-hero-centered-video .hcv-card::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:linear-gradient(color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px);
  background-size:48px 48px; }
.v-hero-centered-video .hcv-fx { position:absolute; inset:0; width:100%; height:100%; display:block; }
.v-hero-centered-video .hcv-card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.v-hero-centered-video .hcv-chrome { position:absolute; top:0; left:0; right:0; height:40px; z-index:2;
  display:flex; align-items:center; gap:8px; padding:0 16px;
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-centered-video .hcv-chrome i { width:10px; height:10px; border-radius:50%; background:var(--hair); }
.v-hero-centered-video .hcv-chrome i:nth-child(1) { background:color-mix(in srgb, var(--bad, #e5533c) 62%, transparent); }
.v-hero-centered-video .hcv-chrome i:nth-child(2) { background:color-mix(in srgb, var(--warn, #e0a63c) 62%, transparent); }
.v-hero-centered-video .hcv-chrome i:nth-child(3) { background:color-mix(in srgb, var(--ok, #4caf76) 62%, transparent); }
.v-hero-centered-video .hcv-chrome span { font:600 12px var(--mono, var(--font)); color:var(--dim); letter-spacing:0.02em; }

.v-hero-centered-video .hcv-play { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2;
  width:80px; height:80px; border-radius:50%; display:grid; place-items:center;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  transition:transform .2s ease, color .2s ease; }
.v-hero-centered-video .hcv-play svg { width:30px; height:30px; }
.v-hero-centered-video .hcv-i-play { margin-left:4px; }
.v-hero-centered-video .hcv-i-pause { display:none; }
.v-hero-centered-video .hcv-card.playing .hcv-i-play { display:none; }
.v-hero-centered-video .hcv-card.playing .hcv-i-pause { display:block; }
.v-hero-centered-video .hcv-card:hover .hcv-play { transform:translate(-50%, -50%) scale(1.08); }

.v-hero-centered-video .hcv-scrub { position:absolute; left:16px; right:16px; bottom:16px; height:4px; z-index:2;
  border-radius:100px; background:color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden; opacity:0; transition:opacity .2s ease; }
.v-hero-centered-video .hcv-card.playing .hcv-scrub { opacity:1; }
.v-hero-centered-video .hcv-scrub i { display:block; height:100%; width:38%; border-radius:100px; background:var(--accent); }

@container site (max-width: 640px) {
  .v-hero-centered-video .hcv-play { width:64px; height:64px; }
  .v-hero-centered-video .hcv-play svg { width:24px; height:24px; }
}
/* ===== Hero / Code Preview (v-hero-code-preview) — ported SB_04 drafts/hero-code-preview.
   Split dev opener: badge + copy + CTAs + proof-stat strip beside a tall syntax-lit code
   editor window. The window is a fixed dark editor surface (theme-independent, dev-tool
   convention) with LITERAL syntax tints; it scrolls-x inside its own box so it never widens
   the page. Everything else reads theme tokens. Copy button works (mount). Split narrow-stacks
   via the global 860px rule (.ws-hero .ws-in.split); container queries only. */
.v-hero-code-preview .ws-in.split { grid-template-columns:1fr 1fr; align-items:center; gap:clamp(36px, 6cqw, 80px); }
.v-hero-code-preview .ws-hcopy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; }
.v-hero-code-preview .ws-badge { align-self:flex-start; }
.v-hero-code-preview .ws-sub { margin-top:16px; }
.v-hero-code-preview .cpv-stats { margin-top:36px; }

/* code window — fixed dark editor surface */
.v-hero-code-preview .cpv-win { min-width:0; align-self:center; border-radius:var(--radius, 12px); overflow:hidden;
  background:#0e0e14; border:1px solid rgba(255,255,255,0.1); box-shadow:0 24px 55px -32px rgba(0,0,0,0.7); }
.v-hero-code-preview .cpv-bar { display:flex; align-items:center; gap:7px; padding:10px 14px;
  background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.1); }
.v-hero-code-preview .cpv-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.v-hero-code-preview .cpv-dot.r { background:#ff5f57; }
.v-hero-code-preview .cpv-dot.y { background:#febc2e; }
.v-hero-code-preview .cpv-dot.g { background:#28c840; }
.v-hero-code-preview .cpv-file { margin-left:8px; font:500 12px var(--mono, ui-monospace, monospace); color:#8a8898; }
.v-hero-code-preview .cpv-copy { margin-left:auto; padding:4px 12px; border-radius:7px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#cdd3de;
  font:600 10px var(--mono, ui-monospace, monospace); letter-spacing:0.8px; text-transform:uppercase;
  transition:color 140ms linear, border-color 140ms linear; }
.v-hero-code-preview .cpv-copy:hover { color:#fff; border-color:rgba(255,255,255,0.3); }
.v-hero-code-preview .cpv-copy.ok { color:#28c840; border-color:color-mix(in srgb, #28c840 55%, transparent); }
.v-hero-code-preview .cpv-body { padding:22px 24px; overflow-x:auto; }
.v-hero-code-preview .cpv-code { margin:0; white-space:pre; color:#c8c0b0;
  font:400 13px/1.75 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.v-hero-code-preview .cpv-code code { font:inherit; color:inherit; }
/* syntax tints — literal, semantic (not brand); faithful to the source draft */
.v-hero-code-preview .cpv-c-kw   { color:#9a6ade; }
.v-hero-code-preview .cpv-c-str  { color:#5a9e7a; }
.v-hero-code-preview .cpv-c-cmt  { color:#5a5868; font-style:italic; }
.v-hero-code-preview .cpv-c-b    { color:#c8a872; }
.v-hero-code-preview .cpv-c-op   { color:#8a8898; }
.v-hero-code-preview .cpv-c-prop { color:#5a7ade; }
@container site (max-width: 860px) {
  .v-hero-code-preview .cpv-stats { margin-top:28px; }
}
/* Hero / Countdown — SB_04 drafts/hero-countdown. Centered launch clock. */
.v-hero-countdown .hcd-wrap { display:flex; flex-direction:column; align-items:center; text-align:center; }
.v-hero-countdown .hcd-badge { display:inline-flex; align-items:center; gap:8px; margin-bottom:clamp(20px, 3cqw, 28px); }
.v-hero-countdown .hcd-rocket { font-size:.95em; line-height:1; }
.v-hero-countdown .hcd-h { max-width:16ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-hero-countdown .hcd-sub { margin-top:clamp(12px, 1.5cqw, 16px); max-width:48ch; }
.v-hero-countdown .hcd-clock { display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(8px, 1.4cqw, 12px); margin-top:clamp(28px, 3.6cqw, 44px); }
.v-hero-countdown .hcd-unit { display:flex; flex-direction:column; align-items:center; gap:10px; }
.v-hero-countdown .hcd-digit { position:relative; min-width:clamp(64px, 9cqw, 96px); padding:16px 8px;
  border-radius:12px; background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair);
  font:800 clamp(32px, 5.4cqw, 56px)/1 var(--mono); letter-spacing:-0.03em; color:var(--accent);
  font-variant-numeric:tabular-nums; text-align:center; }
.v-hero-countdown .hcd-digit::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:color-mix(in srgb, var(--bg) 55%, transparent); }
.v-hero-countdown .hcd-ulabel { font:700 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.v-hero-countdown .hcd-sep { align-self:flex-start; font:800 clamp(28px, 4.4cqw, 46px)/1 var(--mono);
  color:var(--faint); opacity:.4; padding-top:14px; }
.v-hero-countdown .hcd-clock.hcd-done .hcd-digit { color:var(--accent); }
.v-hero-countdown .hcd-form { display:flex; width:min(440px, 100%); margin-top:clamp(24px, 3.2cqw, 40px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .6); overflow:hidden;
  background:var(--panel); transition:border-color 160ms linear; }
.v-hero-countdown .hcd-form:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-countdown .hcd-input { flex:1; min-width:0; padding:13px 16px; border:none; outline:none;
  background:transparent; color:var(--ink); font:400 14px var(--font); }
.v-hero-countdown .hcd-input::placeholder { color:var(--faint); }
.v-hero-countdown .hcd-submit { flex:none; padding:13px 22px; border:none; cursor:pointer; white-space:nowrap;
  background:var(--accent); color:var(--accent-text, #04121a); font:600 14px var(--font); transition:opacity 140ms linear; }
.v-hero-countdown .hcd-submit:hover { opacity:.9; }
.v-hero-countdown .hcd-submit:active { opacity:.82; }
.v-hero-countdown .hcd-submit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-countdown .hcd-note { min-height:1.25em; margin-top:12px; font:500 12.5px var(--font); color:var(--dim); }
.v-hero-countdown .hcd-note.hcd-ok { color:var(--accent); }
.v-hero-countdown .hcd-note.hcd-err { color:#e5484d; }
@container site (max-width: 560px) {
  .v-hero-countdown .hcd-clock { gap:6px; }
  .v-hero-countdown .hcd-digit { min-width:clamp(52px, 15cqw, 66px); padding:13px 6px;
    font-size:clamp(26px, 11cqw, 40px); border-radius:10px; }
  .v-hero-countdown .hcd-sep { font-size:clamp(22px, 8cqw, 34px); padding-top:11px; }
  .v-hero-countdown .hcd-ulabel { font-size:9px; letter-spacing:.09em; }
  .v-hero-countdown .hcd-form { flex-direction:column; }
  .v-hero-countdown .hcd-submit { padding:12px; }
}
/* hero-contact-form — ported from SB_04 drafts/hero-contact-form (info column + real contact form).
   Brand --hcf-* vars mapped to theme tokens; scoped resets dropped (site owns box-sizing). Entrance
   motion belongs to anims.js; only hover/focus motion here, transitions on transform/opacity/color. */
.v-hero-contact-form .hcf-inner { width:min(1080px, 88cqw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0, 400px) 1px minmax(0, 1fr); gap:56px; align-items:start; }
.v-hero-contact-form .hcf-info { display:flex; flex-direction:column; }
.v-hero-contact-form .hcf-info .ws-kick { margin-bottom:16px; }
.v-hero-contact-form .hcf-info .ws-h1 { font-size:clamp(34px, 5cqw, 60px); letter-spacing:-0.03em; line-height:1.05; }
.v-hero-contact-form .hcf-info .ws-sub { margin-top:18px; max-width:46ch; }
.v-hero-contact-form .hcf-methods { list-style:none; margin:32px 0 0; padding:0;
  display:flex; flex-direction:column; gap:20px; }
.v-hero-contact-form .hcf-method { display:flex; align-items:flex-start; gap:14px; }
.v-hero-contact-form .hcf-mi { flex-shrink:0; width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); margin-top:2px; }
.v-hero-contact-form .hcf-mi svg { width:18px; height:18px; }
.v-hero-contact-form .hcf-mbody { display:flex; flex-direction:column; gap:3px; }
.v-hero-contact-form .hcf-mname { font:600 10px var(--mono, var(--font)); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--faint); }
.v-hero-contact-form .hcf-mdetail { font:400 14px/1.5 var(--font); color:var(--ink); }
.v-hero-contact-form .hcf-hours { display:flex; flex-direction:column; gap:4px; margin:28px 0 0;
  padding-top:24px; border-top:var(--bw, 1px) solid var(--hair); font:400 13px var(--font); color:var(--dim); }
.v-hero-contact-form .hcf-hours-l { font:600 10px var(--mono, var(--font)); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--faint); }
.v-hero-contact-form .hcf-socials { display:flex; align-items:center; gap:10px; margin-top:24px; }
.v-hero-contact-form .hcf-social { display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; color:var(--dim); text-decoration:none;
  border:var(--bw, 1px) solid var(--hair); transition:color .18s ease, transform .18s ease; }
.v-hero-contact-form .hcf-social svg { width:16px; height:16px; }
.v-hero-contact-form .hcf-social:hover { color:var(--ink); transform:translateY(-2px); }
.v-hero-contact-form .hcf-divider { align-self:stretch; width:1px; background:var(--hair); }
.v-hero-contact-form .hcf-form-wrap { min-width:0; }
.v-hero-contact-form .hcf-form { display:flex; flex-direction:column; gap:18px; }
.v-hero-contact-form .hcf-row2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.v-hero-contact-form .hcf-field { display:flex; flex-direction:column; gap:8px; }
.v-hero-contact-form .hcf-label { font:600 10px var(--mono, var(--font)); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--faint); }
.v-hero-contact-form .hcf-input { width:100%; background:var(--panel); color:var(--ink);
  border:var(--bw, 1px) solid var(--hair); border-radius:10px; padding:12px 14px; font:400 14px var(--font);
  outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .18s ease, box-shadow .18s ease, color .18s ease; }
.v-hero-contact-form .hcf-input::placeholder { color:var(--faint); }
.v-hero-contact-form .hcf-input:focus { border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.v-hero-contact-form .hcf-field.is-err .hcf-label { color:var(--bad, #e5484d); }
.v-hero-contact-form .hcf-field.is-err .hcf-input { border-color:var(--bad, #e5484d);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bad, #e5484d) 22%, transparent); }
.v-hero-contact-form .hcf-textarea { resize:vertical; min-height:140px; line-height:1.6; }
.v-hero-contact-form .hcf-submit { align-self:flex-start; background:var(--accent);
  color:var(--accent-ink, #fff); border:none; border-radius:10px; padding:13px 28px;
  font:600 14px var(--font); cursor:pointer; transition:opacity .18s ease, transform .12s ease; }
.v-hero-contact-form .hcf-submit:hover { opacity:.9; }
.v-hero-contact-form .hcf-submit:active { transform:translateY(1px); }
.v-hero-contact-form .hcf-success { display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:32px; border:var(--bw, 1px) solid var(--hair); border-radius:14px; background:var(--panel); }
.v-hero-contact-form .hcf-success[hidden] { display:none; }
.v-hero-contact-form .hcf-scheck { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; color:var(--ok, #30a46c);
  background:color-mix(in srgb, var(--ok, #30a46c) 14%, transparent); }
.v-hero-contact-form .hcf-scheck svg { width:22px; height:22px; }
.v-hero-contact-form .hcf-success b { font:700 18px var(--font-head, var(--font)); color:var(--ink); }
.v-hero-contact-form .hcf-stext { font:400 14px/1.5 var(--font); color:var(--dim); max-width:42ch; }
.v-hero-contact-form .hcf-again { margin-top:6px; background:transparent; color:var(--accent);
  border:var(--bw, 1px) solid var(--hair); border-radius:10px; padding:9px 18px; font:600 13px var(--font);
  cursor:pointer; transition:color .18s ease, transform .12s ease; }
.v-hero-contact-form .hcf-again:hover { transform:translateY(-1px); }
@container site (max-width: 860px) {
  .v-hero-contact-form .hcf-inner { grid-template-columns:1fr; gap:40px; }
  .v-hero-contact-form .hcf-divider { display:none; }
}
@container site (max-width: 560px) {
  .v-hero-contact-form .hcf-row2 { grid-template-columns:1fr; }
  .v-hero-contact-form .hcf-success { padding:24px; }
}
/* hero-countdown-launch — ported from SB_04 drafts/hero-countdown-launch. A centered launch teaser:
   eyebrow + headline over a live day:hour:minute:second countdown (colon separators), an email notify
   form that swaps to a locked success state, and a real share-the-link action. Countdown ticks for real
   via setInterval in mount(); origin's hardcoded #hex/rgba mapped to theme tokens, baked entrance drops
   (anims.js owns those), transitions ride opacity/color only, no blur; container queries handle reflow. */
.ws-hero.v-hero-countdown-launch { position:relative; isolation:isolate; overflow:hidden; }
.v-hero-countdown-launch .hcl-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 66% 48% at 50% 60%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 66%),
    radial-gradient(ellipse 40% 40% at 50% 10%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%); }
.v-hero-countdown-launch .hcl-wrap { position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:clamp(16px, 2.2cqw, 26px); }
.v-hero-countdown-launch .hcl-label { margin:0; font:600 clamp(12px, 1.4cqw, 13px) var(--font); letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); }
.v-hero-countdown-launch .hcl-h { max-width:16ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-hero-countdown-launch .hcl-desc { max-width:46ch; }
.v-hero-countdown-launch .hcl-clock { display:flex; align-items:flex-start; justify-content:center; flex-wrap:nowrap;
  gap:0; margin:clamp(4px, 1cqw, 10px) 0; }
.v-hero-countdown-launch .hcl-unit { display:flex; flex-direction:column; align-items:center;
  gap:clamp(6px, .9cqw, 10px); min-width:clamp(72px, 12cqw, 116px); }
.v-hero-countdown-launch .hcl-num { display:inline-block; min-width:2ch; text-align:center;
  font:800 clamp(46px, 9.5cqw, 96px)/1 var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.v-hero-countdown-launch .hcl-num.is-tick { animation:hclTick 150ms ease; }
.v-hero-countdown-launch .hcl-ulabel { font:500 clamp(9px, 1cqw, 12px) var(--font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); }
.v-hero-countdown-launch .hcl-sep { flex:none; align-self:flex-start; padding:0 clamp(2px, .6cqw, 6px);
  font:700 clamp(38px, 8cqw, 80px)/1 var(--font-head, var(--font));
  color:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-hero-countdown-launch .hcl-clock.hcl-done .hcl-num { color:var(--accent); }
.v-hero-countdown-launch .hcl-form { display:flex; gap:10px; width:min(460px, 100%);
  margin-top:clamp(6px, 1cqw, 12px); }
.v-hero-countdown-launch .hcl-input { flex:1; min-width:0; padding:13px 16px;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5); outline:none;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:400 14px var(--font);
  transition:border-color 160ms linear; }
.v-hero-countdown-launch .hcl-input::placeholder { color:var(--faint); }
.v-hero-countdown-launch .hcl-input:focus { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-countdown-launch .hcl-input:disabled { opacity:.6; }
.v-hero-countdown-launch .hcl-btn { flex:none; padding:13px 24px; border:none; cursor:pointer; white-space:nowrap;
  border-radius:calc(var(--radius, 12px) * .5);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:600 13.5px var(--font); letter-spacing:.01em;
  transition:opacity 140ms linear; }
.v-hero-countdown-launch .hcl-btn:hover { opacity:.9; }
.v-hero-countdown-launch .hcl-btn:active { opacity:.82; }
.v-hero-countdown-launch .hcl-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-countdown-launch .hcl-btn:disabled { cursor:default; }
.v-hero-countdown-launch .hcl-form.hcl-sent .hcl-btn { opacity:1; }
.v-hero-countdown-launch .hcl-note { min-height:1.25em; margin:0; font:500 12.5px var(--font); color:var(--dim); }
.v-hero-countdown-launch .hcl-note.hcl-ok { color:var(--accent); }
.v-hero-countdown-launch .hcl-note.hcl-err { color:#e5484d; }
.v-hero-countdown-launch .hcl-share { margin:0; font:400 13px var(--font); color:var(--dim); }
.v-hero-countdown-launch .hcl-share-link { color:var(--accent); text-decoration:none; cursor:pointer;
  transition:opacity 150ms linear; }
.v-hero-countdown-launch .hcl-share-link:hover { opacity:.78; }
.v-hero-countdown-launch .hcl-sr { 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; }
@keyframes hclTick { from { transform:translateY(-3px); } to { transform:translateY(0); } }
@container site (max-width: 560px) {
  .v-hero-countdown-launch .hcl-unit { min-width:clamp(58px, 20cqw, 84px); }
  .v-hero-countdown-launch .hcl-num { font-size:clamp(34px, 15cqw, 56px); }
  .v-hero-countdown-launch .hcl-sep { font-size:clamp(30px, 12cqw, 46px); }
  .v-hero-countdown-launch .hcl-ulabel { font-size:9px; letter-spacing:.1em; }
  .v-hero-countdown-launch .hcl-form { flex-direction:column; width:100%; max-width:360px; align-items:stretch; }
  .v-hero-countdown-launch .hcl-btn { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-countdown-launch .hcl-num.is-tick { animation:none; }
}
/* hero-countdown-timer — centered launch countdown with live D:H:M:S blocks + email capture */
.v-hero-countdown-timer .hct-inner { gap:24px; }
.v-hero-countdown-timer .hct-countdown { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.v-hero-countdown-timer .hct-block { background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair); border-radius:10px; padding:14px 18px; min-width:70px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.v-hero-countdown-timer .hct-num { font-family:var(--mono); font-size:28px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.v-hero-countdown-timer .hct-unit { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--dim); }
.v-hero-countdown-timer .hct-sep { font-family:var(--mono); font-size:24px; color:var(--dim); }
.v-hero-countdown-timer .hct-sub { margin:0; }
.v-hero-countdown-timer .hct-form { display:flex; width:100%; max-width:400px; border-radius:10px; overflow:hidden; border:var(--bw, 1px) solid var(--hair); }
.v-hero-countdown-timer .hct-email { flex:1; min-width:0; padding:12px 16px; background:var(--panel-2, var(--panel)); border:none; color:var(--ink); font-family:var(--font); font-size:13px; outline:none; }
.v-hero-countdown-timer .hct-email::placeholder { color:var(--dim); }
.v-hero-countdown-timer .hct-submit { padding:12px 18px; background:var(--accent); color:#fff; font-size:13px; font-weight:700; border:none; cursor:pointer; font-family:var(--font); white-space:nowrap; transition:opacity .18s ease; }
.v-hero-countdown-timer .hct-submit:hover { opacity:0.88; }
@container site (max-width: 560px) {
  .v-hero-countdown-timer .hct-countdown { gap:5px; }
  .v-hero-countdown-timer .hct-block { min-width:56px; padding:10px 12px; }
  .v-hero-countdown-timer .hct-num { font-size:22px; }
  .v-hero-countdown-timer .hct-form { flex-direction:column; border:none; gap:8px; }
  .v-hero-countdown-timer .hct-email { border:var(--bw, 1px) solid var(--hair); border-radius:10px; }
  .v-hero-countdown-timer .hct-submit { border-radius:10px; }
}
/* hero-creative-agency — ported from SB_04 drafts/hero-creative-agency. A bold typographic split
   headline (lead word / massive CREATE / italic tail) over a hairline rule; below it an agency bio +
   CTA on the left and a column of clickable work thumbnails on the right. Origin's placeholder <img>
   tiles become token-styled inline-SVG art (no remote images); clicking a thumb sets it active and
   updates a live "Featured:" readout (mount() wiring). Origin #hex/rgba mapped to theme tokens, baked
   fade-up/fade-in entrances dropped (anims.js owns those), hover motion rides transform/color only,
   no blur; container queries handle reflow. */
.v-hero-creative-agency .hca-headline { display:flex; flex-direction:column; gap:0;
  padding-bottom:clamp(20px, 3cqw, 40px); }
.v-hero-creative-agency .hca-row { display:flex; width:100%; }
.v-hero-creative-agency .hca-top { justify-content:flex-start; align-items:baseline; padding-bottom:4px; }
.v-hero-creative-agency .hca-we { font:300 clamp(1.5rem, 3.5cqw, 2.75rem)/1 var(--font);
  letter-spacing:-0.01em; color:var(--dim); }
.v-hero-creative-agency .hca-mid { justify-content:flex-start; align-items:baseline; }
.v-hero-creative-agency .hca-create { margin:0; width:100%;
  font:900 clamp(3.4rem, 15cqw, 10rem)/0.9 var(--font-head, var(--font));
  letter-spacing:-0.05em; color:var(--ink); text-transform:uppercase; text-wrap:balance; }
.v-hero-creative-agency .hca-bot { justify-content:flex-end; align-items:baseline; padding-top:6px; }
.v-hero-creative-agency .hca-future { font:300 italic clamp(1.6rem, 4cqw, 3.25rem)/1 var(--font);
  letter-spacing:-0.02em; color:var(--ink); }
.v-hero-creative-agency .hca-rule { border:none; border-top:var(--bw, 1px) solid var(--hair); width:100%; margin:0; }
.v-hero-creative-agency .hca-body { display:flex; flex-direction:column; gap:clamp(28px, 4cqw, 64px);
  padding-top:clamp(24px, 3cqw, 40px); align-items:flex-start; justify-content:space-between; }
.v-hero-creative-agency .hca-bio { display:flex; flex-direction:column; gap:18px; flex:1; max-width:48ch; }
.v-hero-creative-agency .hca-desc { margin:0; font:400 0.95rem/1.75 var(--font); color:var(--dim); }
.v-hero-creative-agency .hca-cta { display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font:600 0.85rem var(--font); letter-spacing:0.03em; color:var(--accent); text-decoration:none; cursor:pointer; }
.v-hero-creative-agency .hca-arrow { font-style:normal; display:inline-block;
  transition:transform 0.18s ease; }
.v-hero-creative-agency .hca-cta:hover .hca-arrow { transform:translateX(4px); }
.v-hero-creative-agency .hca-featured { margin:0; font:500 0.72rem var(--font); letter-spacing:0.05em;
  text-transform:uppercase; color:var(--faint); min-height:1.2em; }
.v-hero-creative-agency .hca-featured b { color:var(--ink); font-weight:600; }
.v-hero-creative-agency .hca-thumbs { display:flex; flex-direction:column; gap:8px; flex-shrink:0;
  width:100%; max-width:340px; }
.v-hero-creative-agency .hca-thumb { display:flex; flex-direction:column; gap:8px; width:100%;
  padding:0; border:none; background:none; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.v-hero-creative-agency .hca-art { display:block; width:100%; aspect-ratio:3 / 2; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * 0.8);
  transition:opacity 0.2s ease, transform 0.16s ease; }
.v-hero-creative-agency .hca-art svg { display:block; width:100%; height:100%; }
.v-hero-creative-agency .hca-art .b { fill:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-hero-creative-agency .hca-art .s { fill:none; stroke:color-mix(in srgb, var(--ink) 24%, transparent); stroke-width:2; }
.v-hero-creative-agency .hca-art .sa { fill:none; stroke:var(--accent); stroke-width:2.5; }
.v-hero-creative-agency .hca-art .f { fill:var(--accent); }
.v-hero-creative-agency .hca-thumb:hover .hca-art { opacity:0.82; transform:translateY(-2px); }
.v-hero-creative-agency .hca-thumb.is-active .hca-art { border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset; }
.v-hero-creative-agency .hca-thumb-label { font:500 0.7rem var(--font); letter-spacing:0.06em;
  text-transform:uppercase; color:var(--dim); transition:color 0.2s ease; }
.v-hero-creative-agency .hca-thumb:hover .hca-thumb-label,
.v-hero-creative-agency .hca-thumb.is-active .hca-thumb-label { color:var(--ink); }
.v-hero-creative-agency .hca-thumb:focus-visible .hca-art { outline:2px solid var(--accent); outline-offset:2px; }
@container site (min-width: 861px) {
  .v-hero-creative-agency .hca-body { flex-direction:row; }
  .v-hero-creative-agency .hca-thumbs { width:320px; }
}
@container site (max-width: 560px) {
  .v-hero-creative-agency .hca-thumbs { max-width:none; }
}
/* hero-dark-editorial — ported from SB_04 drafts/hero-dark-editorial (magazine masthead: giant serif
   statement left, standfirst + byline right, thin rules top and bottom). Rides theme tokens so it
   follows the active preset rather than the origin's hardcoded near-black; the accent gold maps to
   --accent, dim text to --dim/--faint, rules to --hair. The display face has no theme token, so it
   uses a system serif stack (origin's Cormorant Garamond was a remote Google font — banned here).
   Entrance motion belongs to the reveal system (anims.js); only the hover on button/link moves. */
.v-hero-dark-editorial { padding:clamp(64px, 9cqw, 104px) 0; }
.v-hero-dark-editorial .hde-in { max-width:1100px; margin:0 auto; width:100%; }
.v-hero-dark-editorial .hde-masthead { display:flex; align-items:center; gap:20px; margin-bottom:clamp(28px, 4cqw, 48px); }
.v-hero-dark-editorial .hde-vol { font:600 10px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap; }
.v-hero-dark-editorial .hde-rule { flex:1; height:1px; background:var(--hair); }
.v-hero-dark-editorial .hde-rule--b { display:block; height:1px; margin-top:clamp(28px, 4cqw, 48px); background:var(--hair); }
.v-hero-dark-editorial .hde-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6cqw, 80px); align-items:center; }
.v-hero-dark-editorial .hde-headline { font-family:Georgia, 'Times New Roman', 'Cormorant Garamond', serif;
  font-size:clamp(52px, 8cqw, 108px); font-weight:400; line-height:1.0; letter-spacing:-0.02em; color:var(--ink); }
.v-hero-dark-editorial .hde-em { font-style:italic; font-weight:400; color:var(--accent); }
.v-hero-dark-editorial .hde-kicker { display:block; font:700 10px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent); font-style:normal; margin-bottom:20px; padding-bottom:16px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-dark-editorial .hde-deck { font:400 16px/1.75 var(--font); color:var(--dim); margin:0 0 clamp(28px, 3.5cqw, 36px); }
.v-hero-dark-editorial .hde-cta-row { display:flex; align-items:center; gap:20px; margin-bottom:clamp(28px, 4cqw, 40px); flex-wrap:wrap; }
.v-hero-dark-editorial .hde-btn { display:inline-block; padding:11px 24px; border-radius:0; cursor:pointer;
  background:var(--accent); color:var(--bg); font:700 12px var(--font); letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none; transition:opacity .2s ease; }
.v-hero-dark-editorial .hde-btn:hover { opacity:.85; }
.v-hero-dark-editorial .hde-link { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:600 12px var(--font); letter-spacing:0.06em; text-transform:uppercase; color:var(--dim);
  text-decoration:none; transition:color .2s ease; }
.v-hero-dark-editorial .hde-link:hover { color:var(--ink); }
.v-hero-dark-editorial .hde-link svg { width:14px; height:14px; }
.v-hero-dark-editorial .hde-meta { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:24px; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-dark-editorial .hde-author { display:flex; align-items:center; gap:10px; }
.v-hero-dark-editorial .hde-av { width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:color-mix(in srgb, var(--accent) 20%, transparent); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color:var(--accent); font:700 11px var(--font); display:flex; align-items:center; justify-content:center; }
.v-hero-dark-editorial .hde-au-txt { display:flex; flex-direction:column; }
.v-hero-dark-editorial .hde-au-txt b { font:600 12px var(--font); color:var(--ink); }
.v-hero-dark-editorial .hde-au-txt i { font:400 11px var(--font); font-style:normal; color:var(--dim); }
.v-hero-dark-editorial .hde-read { font:400 11px var(--font); color:var(--dim); white-space:nowrap; }
@container site (max-width: 860px) {
  .v-hero-dark-editorial .hde-grid { grid-template-columns:1fr; }
}
/* hero-cta-countdown — ported from SB_04 drafts/hero-cta-countdown (centered launch
   countdown: eyebrow badge, headline, sub, a 4-segment D/H/M/S display, a real primary
   CTA and a privacy note). The countdown is DRIFT-FREE: mount() recomputes each field
   from an absolute target timestamp every second, so interval jitter never accumulates.
   Entrance motion belongs to the reveal system; only the digits change at rest. The
   origin's --hcc-* vars map onto theme tokens (surface->panel, border->hair, mono font,
   accent inherited by ws-badge/ws-btn atoms). */
.v-hero-cta-countdown .ws-sub { margin-inline:auto; max-width:60ch; }
.v-hero-cta-countdown .hcc-countdown { display:flex; align-items:flex-start; justify-content:center;
  gap:6px; margin:40px 0 6px; }
.v-hero-cta-countdown .hcc-unit { display:flex; flex-direction:column; align-items:center; gap:10px; }
.v-hero-cta-countdown .hcc-num { font:700 clamp(38px, 7cqw, 68px)/1 var(--mono, monospace);
  letter-spacing:-0.02em; color:var(--ink); background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); padding:14px 16px; min-width:1.7em; text-align:center;
  font-variant-numeric:tabular-nums; }
.v-hero-cta-countdown .hcc-lbl { font:700 10px var(--font); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--faint); }
.v-hero-cta-countdown .hcc-sep { align-self:flex-start; font:700 clamp(26px, 4cqw, 44px)/1 var(--mono, monospace);
  color:var(--dim); padding:14px 6px 0; }
.v-hero-cta-countdown .ws-ctarow { justify-content:center; margin-top:26px; }
.v-hero-cta-countdown .hcc-note { margin-top:16px; font:400 12px var(--font); color:var(--faint); }
@container site (max-width: 560px) {
  .v-hero-cta-countdown .hcc-countdown { gap:2px; }
  .v-hero-cta-countdown .hcc-num { min-width:1.5em; padding:10px 10px; }
  .v-hero-cta-countdown .hcc-sep { padding-inline:2px; }
}
/* v-hero-dark-gradient-text — SB_04 drafts/hero-dark-gradient-text. Ultra-minimal centered hero;
   the entire headline wears the house accent gradient (.ws-grad, accent-derived) in place of the
   origin's baked blue->purple->pink hex, so it rides the active preset. Origin --hdgt-* vars map to
   tokens: bg->--bg, text->--ink, dim->--dim, accent->--accent, border->--hair, font->--font-head.
   Entrance anims dropped (anims.js owns reveals); no background transition; container queries only. */
.v-hero-dark-gradient-text .hdgt-in { display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px, 2.4cqw, 24px); width:min(680px, 88cqw); }
.v-hero-dark-gradient-text .ws-kick { margin-bottom:0; }
.v-hero-dark-gradient-text .hdgt-head { font-size:clamp(46px, 9.4cqw, 100px); font-weight:800;
  letter-spacing:-0.045em; line-height:1.02; text-wrap:balance; }
.v-hero-dark-gradient-text .hdgt-head .ws-grad { -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.v-hero-dark-gradient-text .ws-sub { max-width:44ch; }
.v-hero-dark-gradient-text .ws-ctarow { margin-top:clamp(4px, 1cqw, 10px); }
@container site (max-width: 560px) {
  .v-hero-dark-gradient-text .hdgt-head { font-size:clamp(38px, 13cqw, 62px); letter-spacing:-0.035em; }
}
/* Hero / Dark Gradient — ported SB_04 drafts/hero-dark-gradient. Copy sits left over the base
   surface; a bold angled gradient panel (clip-path) fills the right. The gradient is built from
   --accent/--bg via color-mix so it rides the theme — no hardcoded hex, and per house rule the
   background is never transitioned. Headline/CTAs sit over --bg (not the panel), so they stay
   legible on both light and dark presets. Container queries only; the panel swings to a bottom
   band when the copy stacks. Entrance motion belongs to the site reveal system, so none here. */
.v-hero-dark-gradient .ws-in { z-index:1; }
.v-hero-dark-gradient .hdg-copy { max-width:580px; }
.v-hero-dark-gradient .ws-sub { max-width:52ch; }
.v-hero-dark-gradient .ws-herostats.start .ws-hstat b { color:var(--accent); }
.v-hero-dark-gradient .hdg-panel { position:absolute; inset:0; pointer-events:none;
  clip-path:polygon(55% 0%, 100% 0%, 100% 100%, 40% 100%);
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 24%, var(--bg)) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 14%, var(--bg)) 100%); }
.v-hero-dark-gradient .hdg-panel::after { content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size:40px 40px; }
@container site (max-width: 860px) {
  .v-hero-dark-gradient .hdg-panel { clip-path:polygon(0 70%, 100% 55%, 100% 100%, 0% 100%); }
  .v-hero-dark-gradient .hdg-copy { max-width:none; }
}
/* hero-dark-mode — copy + product mock with a REAL local light/dark toggle. Surfaces are derived
   from --bg via color-mix (forced near-black in dark, near-white in light) so the demo reads on any
   site theme; the toggle flips .is-light on the section. Only the knob transform + text color animate. */
.v-hero-dark-mode {
  --hdm-surface: color-mix(in srgb, var(--bg) 18%, #07070a);
  --hdm-panel: color-mix(in srgb, var(--bg) 16%, #101014);
  --hdm-elev: color-mix(in srgb, var(--bg) 14%, #17171d);
  --hdm-ink: color-mix(in srgb, #ffffff 92%, var(--accent));
  --hdm-dim: color-mix(in srgb, #ffffff 58%, transparent);
  --hdm-hair: color-mix(in srgb, #ffffff 12%, transparent);
  --hdm-soft: color-mix(in srgb, #ffffff 7%, transparent);
  background: var(--hdm-surface); color: var(--hdm-ink);
}
.v-hero-dark-mode.is-light {
  --hdm-surface: color-mix(in srgb, var(--bg) 18%, #ffffff);
  --hdm-panel: color-mix(in srgb, var(--bg) 12%, #f4f5f7);
  --hdm-elev: color-mix(in srgb, var(--bg) 8%, #ffffff);
  --hdm-ink: color-mix(in srgb, #0b0b10 90%, var(--accent));
  --hdm-dim: color-mix(in srgb, #0b0b10 45%, transparent);
  --hdm-hair: color-mix(in srgb, #0b0b10 12%, transparent);
  --hdm-soft: color-mix(in srgb, #0b0b10 6%, transparent);
}
.v-hero-dark-mode .hdm-in { align-items:center; }
.v-hero-dark-mode .ws-h1 { color:var(--hdm-ink); transition:color .22s ease; }
.v-hero-dark-mode .ws-sub { color:var(--hdm-dim); transition:color .22s ease; }
.v-hero-dark-mode .ws-kick { color:var(--accent); }
/* ghost CTA rides the local surface ink/hair so it stays legible when the toggle flips to light */
.v-hero-dark-mode .ws-btn.ghost { color:var(--hdm-ink); border-color:var(--hdm-hair); background:var(--hdm-soft); transition:color .22s ease; }
.v-hero-dark-mode .ws-btn.ghost:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
/* toggle */
.v-hero-dark-mode .hdm-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.v-hero-dark-mode .hdm-switch { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.v-hero-dark-mode .hdm-tk { display:flex; color:var(--hdm-dim); transition:color .22s ease; }
.v-hero-dark-mode .hdm-tk svg { width:15px; height:15px; }
.v-hero-dark-mode .hdm-tk-moon { color:var(--accent); }
.v-hero-dark-mode.is-light .hdm-tk-moon { color:var(--hdm-dim); }
.v-hero-dark-mode.is-light .hdm-tk-sun { color:var(--accent); }
.v-hero-dark-mode .hdm-toggle { position:relative; width:44px; height:24px; flex-shrink:0; border-radius:999px; border:1px solid var(--hdm-hair); background:var(--hdm-soft); cursor:pointer; padding:0; }
.v-hero-dark-mode .hdm-knob { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--accent); transition:transform .22s ease; }
.v-hero-dark-mode.is-light .hdm-knob { transform:translateX(20px); }
/* bullets */
.v-hero-dark-mode .hdm-bullets { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.v-hero-dark-mode .hdm-bullet { display:flex; align-items:flex-start; gap:10px; font:400 14px/1.5 var(--font); color:var(--hdm-dim); transition:color .22s ease; }
.v-hero-dark-mode .hdm-bdot { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:18px; height:18px; margin-top:1px; border-radius:50%; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.v-hero-dark-mode .hdm-bdot svg { width:11px; height:11px; }
/* mock */
.v-hero-dark-mode .hdm-mock-wrap { width:100%; max-width:560px; margin-inline:auto; }
.v-hero-dark-mode .hdm-mock { display:flex; height:340px; border-radius:12px; overflow:hidden; border:1px solid var(--hdm-hair); background:var(--hdm-panel); box-shadow:0 30px 60px color-mix(in srgb, #000 42%, transparent); }
.v-hero-dark-mode .hdm-mside { width:54px; flex-shrink:0; background:var(--hdm-elev); border-right:1px solid var(--hdm-hair); display:flex; flex-direction:column; align-items:center; padding:16px 0 12px; }
.v-hero-dark-mode .hdm-mlogo { width:22px; height:22px; border-radius:6px; background:var(--accent); margin-bottom:20px; }
.v-hero-dark-mode .hdm-mnav { display:flex; flex-direction:column; gap:6px; flex:1; width:100%; padding:0 8px; }
.v-hero-dark-mode .hdm-nav { height:32px; border-radius:6px; background:var(--hdm-soft); }
.v-hero-dark-mode .hdm-nav.on { background:color-mix(in srgb, var(--accent) 30%, transparent); }
.v-hero-dark-mode .hdm-mava { width:24px; height:24px; border-radius:50%; background:var(--hdm-hair); }
.v-hero-dark-mode .hdm-mmain { flex:1; display:flex; flex-direction:column; min-width:0; }
.v-hero-dark-mode .hdm-mbar { height:40px; flex-shrink:0; background:var(--hdm-elev); border-bottom:1px solid var(--hdm-hair); display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
.v-hero-dark-mode .hdm-tabs { display:flex; gap:6px; }
.v-hero-dark-mode .hdm-tab { width:56px; height:22px; border-radius:5px; background:var(--hdm-soft); }
.v-hero-dark-mode .hdm-tab.on { width:70px; background:color-mix(in srgb, var(--accent) 24%, transparent); }
.v-hero-dark-mode .hdm-acts { display:flex; gap:6px; }
.v-hero-dark-mode .hdm-act { width:22px; height:22px; border-radius:5px; background:var(--hdm-soft); }
.v-hero-dark-mode .hdm-marea { flex:1; padding:16px; min-height:0; }
.v-hero-dark-mode .hdm-slabel { display:block; width:80px; height:8px; border-radius:4px; background:var(--hdm-soft); margin-bottom:14px; }
.v-hero-dark-mode .hdm-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; height:calc(100% - 22px); }
.v-hero-dark-mode .hdm-cell { background:var(--hdm-elev); border:1px solid var(--hdm-hair); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.v-hero-dark-mode .hdm-cell-thumb { flex:1; min-height:0; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, var(--hdm-panel)), var(--hdm-panel)); }
.v-hero-dark-mode .hdm-cell-meta { padding:8px; display:flex; flex-direction:column; gap:4px; }
.v-hero-dark-mode .hdm-ln { height:6px; border-radius:3px; background:var(--hdm-soft); }
.v-hero-dark-mode .hdm-ln.w70 { width:70%; }
.v-hero-dark-mode .hdm-ln.w45 { width:45%; }
@container site (max-width: 860px) {
  .v-hero-dark-mode .hdm-mock-wrap { max-width:none; }
}
@container site (max-width: 560px) {
  .v-hero-dark-mode .hdm-mock { height:280px; }
}
/* ===== hero: device trio (SB_04 drafts/hero-device-trio) ===== */
.v-hero-device-trio { background: var(--bg); overflow: hidden; }
.v-hero-device-trio .ws-in.center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.v-hero-device-trio .ws-h1 { max-width: 640px; text-wrap: balance; }
.v-hero-device-trio .ws-sub { max-width: 520px; }
.v-hero-device-trio .ws-dtwrap { margin-top: 46px; display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; }
.v-hero-device-trio .ws-dtwrap .ws-kick { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-style: normal; }
.v-hero-device-trio .ws-dtrowset { display: flex; align-items: flex-end; justify-content: center; gap: 34px; flex-wrap: wrap; }
.v-hero-device-trio .ws-dtdev { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.v-hero-device-trio .ws-dtname { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.v-hero-device-trio .ws-dtframe { border: 1.5px solid var(--hair); background: var(--panel); overflow: hidden; }
.v-hero-device-trio .ws-dtdev i { display: block; }
/* screens: abstract app skeleton */
.v-hero-device-trio .ws-dtscreen { flex: 1; width: 100%; height: 100%; background: var(--panel-2); padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.v-hero-device-trio .ws-dtblock { border-radius: 4px; background: var(--hair); height: 34px; }
.v-hero-device-trio .ws-dtblock.w { height: 44px; }
.v-hero-device-trio .ws-dtblock.a { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.v-hero-device-trio .ws-dtrow { display: flex; gap: 6px; }
.v-hero-device-trio .ws-dtrow .ws-dtblock { flex: 1; }
.v-hero-device-trio .ws-dtline { height: 6px; border-radius: 3px; background: var(--hair); }
.v-hero-device-trio .ws-dtline.short { width: 60%; }
/* desktop */
.v-hero-device-trio .ws-dtdev.desktop .ws-dtframe { width: 320px; height: 226px; border-radius: 8px 8px 0 0; display: flex; flex-direction: column; }
.v-hero-device-trio .ws-dtbar { display: flex; align-items: center; gap: 5px; padding: 7px 11px; background: var(--panel); border-bottom: var(--bw, 1px) solid var(--hair); }
.v-hero-device-trio .ws-dtbar i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); flex-shrink: 0; }
.v-hero-device-trio .ws-dtbar span { flex: 1; height: 14px; border-radius: 3px; background: var(--panel-2); margin-left: 5px; }
.v-hero-device-trio .ws-dtstand { width: 80px; height: 20px; background: var(--panel-2); clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%); border-top: 1.5px solid var(--hair); }
.v-hero-device-trio .ws-dtfoot { width: 120px; height: 6px; background: var(--panel-2); border-radius: 3px; border: var(--bw, 1px) solid var(--hair); }
/* tablet */
.v-hero-device-trio .ws-dtdev.tablet .ws-dtframe { width: 160px; height: 220px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; padding: 12px 6px 10px; }
.v-hero-device-trio .ws-dtcam { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); flex-shrink: 0; margin-bottom: 8px; }
.v-hero-device-trio .ws-dtdev.tablet .ws-dtscreen { border-radius: 4px; }
.v-hero-device-trio .ws-dthome { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--hair); margin-top: 8px; flex-shrink: 0; }
/* phone */
.v-hero-device-trio .ws-dtdev.phone .ws-dtframe { width: 96px; height: 186px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; padding: 10px 5px 9px; }
.v-hero-device-trio .ws-dtnotch { width: 28px; height: 8px; border-radius: 4px; background: var(--hair); flex-shrink: 0; margin-bottom: 7px; }
.v-hero-device-trio .ws-dtdev.phone .ws-dtscreen { border-radius: 3px; padding: 6px; gap: 5px; }
.v-hero-device-trio .ws-dtdev.phone .ws-dtblock { height: 22px; }
.v-hero-device-trio .ws-dtdev.phone .ws-dtblock.w { height: 28px; }
.v-hero-device-trio .ws-dthome.pill { width: 28px; height: 4px; border-radius: 2px; background: var(--hair); border: none; margin-top: 7px; }
@container site (max-width: 860px) {
  .v-hero-device-trio .ws-dtrowset { gap: 24px; }
}
@container site (max-width: 560px) {
  .v-hero-device-trio .ws-dtwrap { margin-top: 32px; }
  .v-hero-device-trio .ws-dtdev.desktop .ws-dtframe { width: 260px; height: 190px; }
  .v-hero-device-trio .ws-dtrowset { gap: 20px; }
}
/* hero-dark-mono — everything-monospace centered terminal hero */
.v-hero-dark-mono { display:flex; align-items:center; min-height:clamp(420px, 62cqh, 720px); font-family:var(--mono, monospace); }
.v-hero-dark-mono .hdm-in { display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; max-width:640px; }
.v-hero-dark-mono .hdm-logo { font:800 14px/1 var(--mono, monospace); color:var(--accent); letter-spacing:0.15em; text-transform:lowercase; }
.v-hero-dark-mono .hdm-head { font-family:var(--mono, monospace); font-weight:800; letter-spacing:-0.03em; font-size:clamp(28px, 5.5cqw, 52px); margin:0; }
.v-hero-dark-mono .hdm-sub { font-family:var(--mono, monospace); font-size:14px; color:var(--dim); margin:0; max-width:52ch; }
.v-hero-dark-mono .hdm-cmd { position:relative; font:500 13px/1.4 var(--mono, monospace); background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:8px; padding:12px 20px; color:var(--ink); cursor:pointer; transition:border-color .2s, color .2s; }
.v-hero-dark-mono .hdm-cmd:hover { border-color:var(--accent); }
.v-hero-dark-mono .hdm-prompt { color:var(--accent); }
.v-hero-dark-mono .hdm-copied { position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--accent); opacity:0; transition:opacity .2s; pointer-events:none; }
.v-hero-dark-mono .hdm-cmd.is-copied .hdm-copied { opacity:1; }
.v-hero-dark-mono .hdm-version { font:400 11px/1 var(--mono, monospace); color:var(--faint, var(--dim)); }
@container site (max-width: 560px) {
  .v-hero-dark-mono .hdm-in { gap:16px; }
  .v-hero-dark-mono .hdm-cmd { max-width:100%; white-space:normal; word-break:break-word; }
}
/* hero-floating-cards (SB_04 drafts/hero-floating-cards) */
.v-hero-floating-cards { position:relative; padding:140px 0 130px; overflow:hidden; }
.v-hero-floating-cards .ws-fcinner { max-width:640px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; position:relative; z-index:1; }
.v-hero-floating-cards .ws-fccard { position:absolute; z-index:0; display:flex; align-items:center; gap:8px; padding:12px 18px; font-size:12px; font-weight:700; color:var(--ink); background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.v-hero-floating-cards .ws-fcicon { font-size:16px; line-height:1; }
@keyframes ws-fc1 { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-14px) rotate(1deg); } }
@keyframes ws-fc2 { 0%,100% { transform:translateY(0) rotate(1deg); } 50% { transform:translateY(-10px) rotate(-2deg); } }
@keyframes ws-fc3 { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-18px) rotate(1deg); } }
.v-hero-floating-cards .ws-fccard.c1 { top:18%; left:9%; animation:ws-fc1 5s ease-in-out infinite; }
.v-hero-floating-cards .ws-fccard.c2 { top:28%; right:7%; animation:ws-fc2 6s ease-in-out infinite; }
.v-hero-floating-cards .ws-fccard.c3 { bottom:16%; left:15%; animation:ws-fc3 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .v-hero-floating-cards .ws-fccard { animation:none; } }
@container site (max-width: 860px) {
  .v-hero-floating-cards { padding:110px 0 100px; }
  .v-hero-floating-cards .ws-fccard.c1 { left:4%; }
  .v-hero-floating-cards .ws-fccard.c2 { right:3%; }
  .v-hero-floating-cards .ws-fccard.c3 { left:8%; }
}
@container site (max-width: 560px) {
  .v-hero-floating-cards { padding:80px 0 46px; }
  .v-hero-floating-cards .ws-fccard { position:static; animation:none; display:inline-flex; margin:0 4px 10px; }
  .v-hero-floating-cards { text-align:center; }
}
/* ---- hero: fullscreen-text (SB_04 drafts/hero-fullscreen-text) ---- */
.v-hero-fullscreen-text{min-height:88vh;display:flex;align-items:center;padding:96px 0}
.v-hero-fullscreen-text .ws-in{width:100%}
.v-hero-fullscreen-text .ws-fstpoem{max-width:900px;margin:0}
.v-hero-fullscreen-text .ws-fstline{display:block;font-family:var(--font-head);color:var(--ink);line-height:1;letter-spacing:-.03em;font-size:clamp(3rem,9cqw,7.5rem)}
.v-hero-fullscreen-text .ws-fstline.hv{font-weight:800}
.v-hero-fullscreen-text .ws-fstline.lt{font-weight:300;font-style:italic;color:var(--dim)}
.v-hero-fullscreen-text .ws-fstline.ac{color:var(--accent)}
.v-hero-fullscreen-text .ws-fstdivider{max-width:900px;height:1px;background:var(--hair);margin-top:48px}
.v-hero-fullscreen-text .ws-fstfooter{max-width:900px;display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:40px}
.v-hero-fullscreen-text .ws-fstfooter .ws-sub{margin:0;max-width:480px;font-weight:300;line-height:1.6;color:var(--dim)}
.v-hero-fullscreen-text .ws-fstcta{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .2s ease}
.v-hero-fullscreen-text .ws-fstcta::after{content:'\2192';transition:transform .2s ease}
.v-hero-fullscreen-text .ws-fstcta:hover{color:var(--accent)}
.v-hero-fullscreen-text .ws-fstcta:hover::after{transform:translateX(4px)}
@container site (max-width: 860px){
  .v-hero-fullscreen-text{padding:64px 0}
  .v-hero-fullscreen-text .ws-fstfooter{flex-direction:column;align-items:flex-start;gap:24px}
}
@container site (max-width: 560px){
  .v-hero-fullscreen-text .ws-fstline{font-size:clamp(2.4rem,13cqw,4rem)}
  .v-hero-fullscreen-text .ws-fstdivider{margin-top:32px}
}

/* hero-developer-console — terminal-themed hero (SB_04 drafts/hero-developer-console) */
.v-hero-developer-console .ws-in.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.v-hero-developer-console .ws-kick{color:var(--accent)}
.v-hero-developer-console .ws-hdc-terminal{width:100%;max-width:620px;background:var(--panel);border:var(--bw, 1px) solid var(--hair);border-radius:10px;overflow:hidden;text-align:left;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.v-hero-developer-console .ws-hdc-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--panel-2);border-bottom:var(--bw, 1px) solid var(--hair)}
.v-hero-developer-console .ws-hdc-dot{width:10px;height:10px;border-radius:50%}
.v-hero-developer-console .ws-hdc-dot.r{background:#e05a5a}
.v-hero-developer-console .ws-hdc-dot.y{background:#c8a872}
.v-hero-developer-console .ws-hdc-dot.g{background:#5a9e7a}
.v-hero-developer-console .ws-hdc-title{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:auto}
.v-hero-developer-console .ws-hdc-body{padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.v-hero-developer-console .ws-hdc-line{font-family:var(--mono);font-size:12px;line-height:1.8;display:flex;gap:8px;align-items:baseline;transition:opacity .3s ease}
.v-hero-developer-console .ws-hdc-prompt{color:#5a9e7a;font-weight:500}
.v-hero-developer-console .ws-hdc-cmd{color:var(--ink)}
.v-hero-developer-console .ws-hdc-line--out{color:var(--dim);padding-left:16px}
.v-hero-developer-console .ws-hdc-line--ok{color:#5a9e7a;padding-left:16px}
.v-hero-developer-console .ws-hdc-cursor{color:var(--accent);padding-left:16px;font-size:14px;animation:hdc-blink 1s step-end infinite}
@keyframes hdc-blink{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.v-hero-developer-console .ws-hdc-cursor{animation:none}.v-hero-developer-console .ws-hdc-line{transition:none}}
.v-hero-developer-console .ws-ctarow.center{justify-content:center}
.v-hero-developer-console .ws-hdc-status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim)}
.v-hero-developer-console .ws-hdc-status-dot{width:7px;height:7px;border-radius:50%;background:#5a9e7a;box-shadow:0 0 5px rgba(90,158,122,.6)}
@container site (max-width: 560px){
  .v-hero-developer-console .ws-hdc-body{padding:14px 12px}
  .v-hero-developer-console .ws-hdc-line{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .v-hero-developer-console .ws-hdc-prompt{margin-right:6px}
}
/* hero-dark-split — SB_04 drafts/hero-dark-split. Editorial 55/45 split: copy left with a hairline
   divider, glowing mockup panel + stats strip right. --hds-* vars map to tokens: bg->--bg,
   surface->--panel/--panel-2, text->--ink, dim->--dim, border->--hair, accent->--accent. */
.v-hero-dark-split { padding:0; }
.v-hero-dark-split .ws-hdsgrid { display:grid; grid-template-columns:55fr 45fr; min-height:560px; }
.v-hero-dark-split .ws-hdsleft { padding:clamp(60px,9cqi,110px) clamp(28px,5cqi,88px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; position:relative; }
.v-hero-dark-split .ws-hdsleft::after { content:''; position:absolute; right:0; top:10%; bottom:10%;
  width:1px; background:var(--hair); }
.v-hero-dark-split .ws-kick.line { display:inline-flex; align-items:center; gap:8px; margin-bottom:24px; }
.v-hero-dark-split .ws-kick.line::before { content:''; display:block; width:20px; height:1px; background:var(--accent); }
.v-hero-dark-split .ws-h1 { font-size:clamp(38px,5.4cqi,74px); letter-spacing:-.035em; line-height:1.02; margin-bottom:22px; }
.v-hero-dark-split .ws-sub { max-width:480px; margin-bottom:36px; }
.v-hero-dark-split .ws-hdsright { background:var(--panel); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:60px 40px 100px; }
.v-hero-dark-split .ws-hdsright::before { content:''; position:absolute; top:50%; left:50%; width:400px; height:400px;
  transform:translate(-50%,-50%); background:radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%);
  pointer-events:none; }
.v-hero-dark-split .ws-hdsmock { position:relative; z-index:1; width:100%; max-width:380px; }
.v-hero-dark-split .ws-hdscard { background:var(--panel-2); border:var(--bw, 1px) solid var(--hair); border-radius:10px;
  padding:20px; margin-bottom:10px; }
.v-hero-dark-split .ws-hdscard:last-child { margin-bottom:0; opacity:.6; }
.v-hero-dark-split .ws-hdshead { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.v-hero-dark-split .ws-hdsdot { display:block; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.v-hero-dark-split .ws-hdstl { display:block; height:8px; border-radius:4px; flex:1;
  background:color-mix(in srgb, var(--ink) 14%, transparent); }
.v-hero-dark-split .ws-hdsrow { display:block; height:6px; border-radius:3px; margin-bottom:8px;
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-hero-dark-split .ws-hdsrow.short { width:65%; }
.v-hero-dark-split .ws-hdsrow.accent { background:color-mix(in srgb, var(--accent) 32%, transparent); }
.v-hero-dark-split .ws-hdsrow:last-child { margin-bottom:0; }
.v-hero-dark-split .ws-hdsstats { position:absolute; bottom:0; left:0; right:0; display:flex;
  border-top:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--bg) 45%, transparent); }
.v-hero-dark-split .ws-hdsstat { flex:1; padding:14px 20px; border-right:var(--bw, 1px) solid var(--hair);
  display:flex; flex-direction:column; gap:3px; }
.v-hero-dark-split .ws-hdsstat:last-child { border-right:none; }
.v-hero-dark-split .ws-hdsstat b { font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.v-hero-dark-split .ws-hdsstat i { font:400 10px var(--font); color:var(--dim); letter-spacing:.04em; font-style:normal; }
@container site (max-width: 860px) {
  .v-hero-dark-split .ws-hdsgrid { grid-template-columns:1fr; min-height:auto; }
  .v-hero-dark-split .ws-hdsleft::after { display:none; }
  .v-hero-dark-split .ws-hdsright { min-height:340px; }
}
@container site (max-width: 560px) {
  .v-hero-dark-split .ws-hdsright { padding:40px 20px 90px; }
  .v-hero-dark-split .ws-hdsstat { padding:12px 12px; }
}
/* hero-frosted-card — ported from SB_04 drafts/hero-frosted-card (centered glass card over
   blurred gradient orbs). backdrop-filter + blur() dropped per house rules — the frosted look
   is rebuilt with layered translucent color-mix fills + an inset highlight; orbs are soft
   radial gradients (no filter). Orb drift animation dropped (nothing animates at rest). */
.v-hero-frosted-card { position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(440px, 64cqh, 760px); }
.v-hero-frosted-card .hfc-orbs { position:absolute; inset:0; pointer-events:none; z-index:0; }
.v-hero-frosted-card .hfc-orb { position:absolute; display:block; border-radius:50%; }
.v-hero-frosted-card .hfc-orb.o1 { width:min(620px, 78cqw); aspect-ratio:1; top:-24%; left:-14%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%); }
.v-hero-frosted-card .hfc-orb.o2 { width:min(520px, 66cqw); aspect-ratio:1; bottom:-22%; right:-12%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%); }
.v-hero-frosted-card .hfc-orb.o3 { width:min(420px, 52cqw); aspect-ratio:1; top:42%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--ink) 10%, transparent), transparent 68%); opacity:.6; }
.v-hero-frosted-card .ws-in { position:relative; z-index:1; }
.v-hero-frosted-card .hfc-card { max-width:600px; width:100%; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(34px, 5cqw, 56px) clamp(26px, 4.5cqw, 48px);
  background:linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent), transparent 55%),
    color-mix(in srgb, var(--panel) 74%, transparent);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 20px);
  box-shadow:0 32px 80px -24px rgba(0,0,0,0.35), inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.v-hero-frosted-card .hfc-card .ws-ctarow { justify-content:center; }
@container site (max-width: 560px) {
  .v-hero-frosted-card .hfc-card { padding:32px 22px; }
}
/* hero-enterprise-trust — SLA copy beside a system-status dashboard */
.v-hero-enterprise-trust { padding:96px 0; }
.v-hero-enterprise-trust .ws-in.split { display:grid; grid-template-columns:1fr 440px; gap:64px; align-items:center; }
.v-hero-enterprise-trust .het-copy { display:flex; flex-direction:column; gap:22px; }
.v-hero-enterprise-trust .ws-sub { max-width:460px; }
.v-hero-enterprise-trust .het-guars { display:flex; flex-direction:column; gap:18px; }
.v-hero-enterprise-trust .het-guar { display:flex; align-items:flex-start; gap:14px; }
.v-hero-enterprise-trust .het-gicon { width:38px; height:38px; border-radius:8px; flex:0 0 auto;
  background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.v-hero-enterprise-trust .het-gtitle { font-size:.9375rem; font-weight:700; color:var(--ink); margin-bottom:3px; }
.v-hero-enterprise-trust .het-gdesc { font-size:.8125rem; color:var(--dim); line-height:1.5; }
.v-hero-enterprise-trust .het-visual { display:flex; justify-content:center; }
.v-hero-enterprise-trust .het-dash { width:100%; max-width:480px; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:12px; overflow:hidden; }
.v-hero-enterprise-trust .het-dhead { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:var(--bw, 1px) solid var(--hair); background:var(--panel-2); }
.v-hero-enterprise-trust .het-dtitle { font-size:.8125rem; font-weight:600; color:var(--ink); letter-spacing:.04em; text-transform:uppercase; }
.v-hero-enterprise-trust .het-dstatus { display:flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; color:#22c55e; }
.v-hero-enterprise-trust .het-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.5); animation:het-blink 2s ease-in-out infinite; }
@keyframes het-blink { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.v-hero-enterprise-trust .het-dbody { padding:20px; display:flex; flex-direction:column; gap:22px; }
.v-hero-enterprise-trust .het-uptime { display:flex; flex-direction:column; gap:10px; }
.v-hero-enterprise-trust .het-ulabel { display:flex; align-items:center; justify-content:space-between; font-size:.75rem; }
.v-hero-enterprise-trust .het-uname { color:var(--dim); font-weight:500; }
.v-hero-enterprise-trust .het-upct { color:#22c55e; font-weight:700; }
.v-hero-enterprise-trust .het-bars { display:flex; gap:3px; align-items:flex-end; height:48px; }
.v-hero-enterprise-trust .het-bar { flex:1; height:100%; background:#22c55e; border-radius:2px 2px 0 0; opacity:.75; transition:opacity .2s; }
.v-hero-enterprise-trust .het-bar:hover { opacity:1; }
.v-hero-enterprise-trust .het-bar.dip { height:80%; opacity:.6; }
.v-hero-enterprise-trust .het-bar.incident { height:62%; background:#eab308; opacity:.9; }
.v-hero-enterprise-trust .het-metrics { display:grid; grid-template-columns:repeat(3, 1fr); }
.v-hero-enterprise-trust .het-metric { display:flex; flex-direction:column; gap:4px; padding:10px 0; }
.v-hero-enterprise-trust .het-metric + .het-metric { padding-left:16px; margin-left:16px; border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-enterprise-trust .het-mval { font-size:1.1875rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.v-hero-enterprise-trust .het-mlabel { font-size:.6875rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.v-hero-enterprise-trust .het-svcs { border:var(--bw, 1px) solid var(--hair); border-radius:6px; overflow:hidden; }
.v-hero-enterprise-trust .het-svc { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; font-size:.8125rem; }
.v-hero-enterprise-trust .het-svc + .het-svc { border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-enterprise-trust .het-svc:hover .het-sname { color:var(--ink); }
.v-hero-enterprise-trust .het-sname { color:var(--dim); font-weight:500; transition:color .2s; }
.v-hero-enterprise-trust .het-badge { font-size:.6875rem; font-weight:600; padding:2px 8px; border-radius:10px; }
.v-hero-enterprise-trust .het-badge.ok { color:#22c55e; background:rgba(34,197,94,.15); }
.v-hero-enterprise-trust .het-badge.deg { color:#eab308; background:rgba(234,179,8,.12); }
.v-hero-enterprise-trust .het-dfoot { padding:12px 20px; border-top:var(--bw, 1px) solid var(--hair); display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.6875rem; color:var(--dim); flex-wrap:wrap; }
.v-hero-enterprise-trust .het-updated { color:var(--faint); }
@container site (max-width: 860px) {
  .v-hero-enterprise-trust { padding:72px 0; }
  .v-hero-enterprise-trust .ws-in.split { grid-template-columns:1fr; gap:44px; }
  .v-hero-enterprise-trust .het-visual { justify-content:flex-start; }
}
@container site (max-width: 560px) {
  .v-hero-enterprise-trust .het-metrics { grid-template-columns:1fr; }
  .v-hero-enterprise-trust .het-metric + .het-metric { padding-left:0; margin-left:0; border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
}
/* ===== hero: duotone cover (SB_04 drafts/hero-duotone) ===== */
.v-hero-duotone{position:relative;min-height:78vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;background:var(--bg);text-align:center}
.v-hero-duotone .ws-duoimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.1)}
.v-hero-duotone .ws-duoimg.ph{background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--accent) 45%,var(--bg)),transparent 60%),radial-gradient(100% 80% at 75% 75%,color-mix(in srgb,var(--accent) 25%,var(--bg)),transparent 55%),repeating-linear-gradient(115deg,color-mix(in srgb,var(--ink) 10%,transparent) 0 2px,transparent 2px 90px),var(--bg);filter:none}
.v-hero-duotone .ws-duoshadow{position:absolute;inset:0;z-index:1;background:color-mix(in srgb,var(--accent) 18%,#03040a);mix-blend-mode:multiply}
.v-hero-duotone .ws-duotint{position:absolute;inset:0;z-index:2;background:var(--accent);mix-blend-mode:screen;opacity:.32}
.v-hero-duotone .ws-duoveil{position:absolute;inset:0;z-index:3;background:rgba(5,6,10,.55)}
.v-hero-duotone .ws-duobody{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:18px;padding:96px 24px}
.v-hero-duotone .ws-kick{color:color-mix(in srgb,var(--accent) 70%,#fff);letter-spacing:.2em;text-transform:uppercase;font-style:normal;font-weight:700}
.v-hero-duotone .ws-h1{color:#f2f4f8;font-size:clamp(40px,7cqw,84px);line-height:1.02;letter-spacing:-.04em;max-width:16ch}
.v-hero-duotone .ws-h1 em{font-style:italic;font-weight:300}
.v-hero-duotone .ws-sub{color:rgba(240,242,248,.75);max-width:52ch}
.v-hero-duotone .ws-btn.ghost{color:#f2f4f8;border-color:rgba(255,255,255,.3)}
.v-hero-duotone .ws-btn.ghost:hover{border-color:rgba(255,255,255,.55)}
.v-hero-duotone .ws-duoscroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px}
.v-hero-duotone .ws-duoscroll span{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,242,248,.4)}
.v-hero-duotone .ws-duotrack{position:relative;display:block;width:1px;height:44px;background:rgba(255,255,255,.15);overflow:hidden}
.v-hero-duotone .ws-duotrack::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--accent);animation:ws-duo-drop 2s ease-in-out infinite}
@keyframes ws-duo-drop{0%{top:-100%;opacity:1}80%{top:100%;opacity:1}100%{top:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.v-hero-duotone .ws-duotrack::after{animation:none}}
@container site (max-width:860px){
  .v-hero-duotone .ws-duobody{padding:72px 20px;gap:14px}
}
@container site (max-width:560px){
  .v-hero-duotone{min-height:70vh}
  .v-hero-duotone .ws-duobody{padding:56px 16px}
  .v-hero-duotone .ws-duoscroll{bottom:16px}
}
/* ---- hero: hero-duo-cta (SB_04 drafts/hero-duo-cta) ---- */
.v-hero-duo-cta { padding: 96px 0; }
.v-hero-duo-cta .ws-in.center { max-width: 780px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.v-hero-duo-cta .ws-duocards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-top: 14px; }
.v-hero-duo-cta .ws-duocard { background: var(--panel); border: var(--bw, 1px) solid var(--hair); border-radius: 12px; padding: 28px; text-align: left; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s ease, transform .2s ease; }
.v-hero-duo-cta .ws-duocard:hover { border-color: var(--accent); transform: translateY(-2px); }
.v-hero-duo-cta .ws-duoicon { font-size: 28px; line-height: 1; }
.v-hero-duo-cta .ws-duotitle { font-size: 16px; font-weight: 700; color: var(--ink); font-family: var(--font-head); margin: 0; }
.v-hero-duo-cta .ws-duodesc { font-size: 13px; color: var(--dim); line-height: 1.65; flex: 1; margin: 0; }
.v-hero-duo-cta .ws-duocta { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; transition: opacity .2s ease; }
.v-hero-duo-cta .ws-duocta svg { width: 14px; height: 14px; flex: 0 0 auto; }
.v-hero-duo-cta .ws-duocta:hover { opacity: .8; }
.v-hero-duo-cta .ws-duocta.primary { padding: 10px 18px; background: var(--accent); color: var(--bg); border-radius: 7px; }
@container site (max-width: 560px) {
  .v-hero-duo-cta { padding: 64px 0; }
  .v-hero-duo-cta .ws-duocards { grid-template-columns: 1fr; }
}
/* ===== hero: glass card (SB_04 drafts/hero-glass) ===== */
.v-hero-glass { position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--accent) 14%, var(--bg)) 0%, var(--bg) 62%); }
.v-hero-glass .hgl-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.v-hero-glass .hgl-blob { position: absolute; border-radius: 50%; display: block; }
.v-hero-glass .hgl-blob.b1 { width: 560px; height: 560px; top: -140px; left: -120px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%); }
.v-hero-glass .hgl-blob.b2 { width: 480px; height: 480px; top: 40px; right: -100px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%); }
.v-hero-glass .hgl-blob.b3 { width: 420px; height: 420px; bottom: 120px; left: 30%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%); }
.v-hero-glass .hgl-inner { position: relative; z-index: 1; max-width: 840px; display: flex; flex-direction: column; align-items: center; }
.v-hero-glass .hgl-card { width: 100%; text-align: center; padding: 56px 48px 52px; border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  border: var(--bw, 1px) solid var(--hair);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 24px 60px -30px rgba(0,0,0,.45); }
.v-hero-glass .ws-kick { display: block; margin-bottom: 20px; color: var(--accent); }
.v-hero-glass .ws-h1 { margin-bottom: 18px; text-wrap: balance; }
.v-hero-glass .ws-sub { max-width: 520px; margin: 0 auto 36px; }
.v-hero-glass .ws-ctarow { justify-content: center; }
.v-hero-glass .hgl-stats { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin-top: 64px; border-top: var(--bw, 1px) solid var(--hair); }
.v-hero-glass .hgl-stat { display: flex; flex-direction: column; align-items: center; padding: 36px 16px; border-right: var(--bw, 1px) solid var(--hair); }
.v-hero-glass .hgl-stat:last-child { border-right: none; }
.v-hero-glass .hgl-stat b { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -.04em; line-height: 1; margin-bottom: 6px; }
.v-hero-glass .hgl-stat i { font-style: normal; font-size: .75rem; color: var(--dim); letter-spacing: .04em; }
@container site (max-width: 860px) {
  .v-hero-glass .hgl-stats { grid-template-columns: repeat(2, 1fr); }
  .v-hero-glass .hgl-stat:nth-child(2) { border-right: none; }
}
@container site (max-width: 560px) {
  .v-hero-glass .hgl-card { padding: 36px 24px 32px; }
  .v-hero-glass .hgl-stat { padding: 24px 12px; }
}
/* ── hero: data-driven (SB_04 drafts/hero-data-driven) ── */
.v-hero-data-driven { padding: 96px 0; }
.v-hero-data-driven .hdd-in { display: flex; align-items: center; gap: 0; }
.v-hero-data-driven .hdd-left { flex: 0 0 46%; max-width: 540px; padding-right: 44px; }
.v-hero-data-driven .hdd-divider { width: 1px; align-self: stretch; flex-shrink: 0; background: var(--hair); }
.v-hero-data-driven .hdd-right { flex: 1; min-width: 0; padding-left: 44px; }
.v-hero-data-driven .hdd-feats { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v-hero-data-driven .hdd-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--dim); line-height: 1.5; }
.v-hero-data-driven .hdd-tick { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.v-hero-data-driven .hdd-tick svg { width: 11px; height: 11px; }
.v-hero-data-driven .hdd-dash { background: var(--panel); border: var(--bw, 1px) solid var(--hair); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.v-hero-data-driven .hdd-dashhead { display: flex; align-items: center; justify-content: space-between; }
.v-hero-data-driven .hdd-dashtitle { font: 600 14px/1 var(--font-head); color: var(--ink); }
.v-hero-data-driven .hdd-badge { font: 700 10px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok, #22c55e); background: color-mix(in srgb, var(--ok, #22c55e) 12%, transparent); padding: 4px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; }
.v-hero-data-driven .hdd-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.v-hero-data-driven .hdd-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.v-hero-data-driven .hdd-chart { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.v-hero-data-driven .hdd-chartlabel { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.v-hero-data-driven .hdd-bartrack { display: flex; align-items: flex-end; gap: 5px; height: 80px; }
.v-hero-data-driven .hdd-bar { flex: 1; background: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 3px 3px 0 0; transition: opacity 0.2s; }
.v-hero-data-driven .hdd-bar:hover { opacity: 0.7; }
.v-hero-data-driven .hdd-bar.on { background: var(--accent); }
.v-hero-data-driven .hdd-baraxis { display: flex; gap: 5px; }
.v-hero-data-driven .hdd-baraxis span { flex: 1; font-size: 9px; color: var(--faint); text-align: center; letter-spacing: 0.02em; }
.v-hero-data-driven .hdd-linechart { height: 80px; border-bottom: var(--bw, 1px) solid var(--hair); color: var(--accent); }
.v-hero-data-driven .hdd-linesvg { width: 100%; height: 100%; display: block; }
.v-hero-data-driven .hdd-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--bw, 1px) solid var(--hair); padding-top: 14px; }
.v-hero-data-driven .hdd-stat { display: flex; flex-direction: column; gap: 4px; padding-right: 14px; }
.v-hero-data-driven .hdd-stat + .hdd-stat { padding-left: 14px; border-left: var(--bw, 1px) solid var(--hair); }
.v-hero-data-driven .hdd-stat b { font: 800 20px/1 var(--font-head); color: var(--ink); letter-spacing: -0.02em; }
.v-hero-data-driven .hdd-stat i { font-style: normal; font-size: 12px; color: var(--dim); }
@container site (max-width: 860px) {
  .v-hero-data-driven { padding: 64px 0; }
  .v-hero-data-driven .hdd-in { flex-direction: column; align-items: stretch; gap: 32px; }
  .v-hero-data-driven .hdd-left { flex: none; max-width: none; padding-right: 0; }
  .v-hero-data-driven .hdd-divider { display: none; }
  .v-hero-data-driven .hdd-right { padding-left: 0; }
}
@container site (max-width: 560px) {
  .v-hero-data-driven .hdd-charts { grid-template-columns: 1fr; }
  .v-hero-data-driven .hdd-dash { padding: 16px; }
}
/* hero-glassmorphism — ported from SB_04 drafts/hero-glassmorphism (full-bleed hero, drifting
   color blobs behind a centered frosted-glass card). blur()/backdrop-filter dropped per house
   rules: blobs are soft radial-gradients, the glass card is layered translucent color-mix fills
   with an inset highlight. Blob drift kept (ambient, transform-only); entrance left to anims.js. */
.v-hero-glassmorphism { position:relative; overflow:hidden; padding:110px 0 120px;
  background:var(--bg); }
.v-hero-glassmorphism .ws-gmblobs { position:absolute; inset:0; pointer-events:none; }
.v-hero-glassmorphism .ws-gmblob { position:absolute; display:block; border-radius:50%; }
.v-hero-glassmorphism .ws-gmblob.a { width:640px; height:640px; top:-180px; left:-160px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--accent) 14%, transparent) 45%, transparent 70%);
  animation:ws-gmdrift-a 12s ease-in-out infinite alternate; }
.v-hero-glassmorphism .ws-gmblob.b { width:540px; height:540px; bottom:-200px; right:-120px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent-2, var(--accent)) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent-2, var(--accent)) 10%, transparent) 45%, transparent 70%);
  animation:ws-gmdrift-b 14s ease-in-out infinite alternate; }
@keyframes ws-gmdrift-a { from { transform:translate(0,0) scale(1); } to { transform:translate(120px,80px) scale(1.15); } }
@keyframes ws-gmdrift-b { from { transform:translate(0,0) scale(1); } to { transform:translate(-100px,-60px) scale(1.1); } }
.v-hero-glassmorphism .ws-in.center { position:relative; z-index:1; display:flex; justify-content:center; }
.v-hero-glassmorphism .ws-gmcard { max-width:680px; width:100%; text-align:center;
  padding:60px 48px; border-radius:20px;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--ink) 9%, transparent) 0%,
    color-mix(in srgb, var(--ink) 5%, transparent) 55%,
    color-mix(in srgb, var(--accent) 6%, transparent) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent),
    0 24px 60px color-mix(in srgb, var(--bg) 55%, transparent); }
.v-hero-glassmorphism .ws-badge { display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); padding:4px 12px; border-radius:100px; margin-bottom:26px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.v-hero-glassmorphism .ws-gmdot { display:block; width:5px; height:5px; border-radius:50%;
  background:var(--accent); }
.v-hero-glassmorphism .ws-h1 { font-size:clamp(38px,6cqi,68px); font-weight:800;
  letter-spacing:-.04em; line-height:1.05; margin-bottom:18px; }
.v-hero-glassmorphism .ws-sub { font-size:clamp(15px,1.5cqi,17px); line-height:1.65;
  color:var(--dim); margin:0 auto 36px; max-width:540px; }
.v-hero-glassmorphism .ws-ctarow { justify-content:center; flex-wrap:wrap; }
@container site (max-width: 860px) {
  .v-hero-glassmorphism { padding:80px 0 90px; }
  .v-hero-glassmorphism .ws-gmblob.a { width:440px; height:440px; }
  .v-hero-glassmorphism .ws-gmblob.b { width:380px; height:380px; }
}
@container site (max-width: 560px) {
  .v-hero-glassmorphism .ws-gmcard { padding:40px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-glassmorphism .ws-gmblob { animation:none; }
}
/* ---- hero / hero-editorial (SB_04 · drafts/hero-editorial) — newspaper cover: masthead bar, serif cover story, sidebar list ---- */
.v-hero-editorial{ padding:0 0 8px; border-bottom:2px solid var(--ink); }
.v-hero-editorial .ws-edcbar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:var(--bw, 1px) solid var(--hair);
  font-size:11px; color:var(--dim); letter-spacing:.06em; }
.v-hero-editorial .ws-edcgrid{ display:grid; grid-template-columns:1fr 340px; }
.v-hero-editorial .ws-edcmain{ padding:48px 40px 48px 0; border-right:var(--bw, 1px) solid var(--hair); }
.v-hero-editorial .ws-edccat{ display:inline-flex; align-items:center; gap:8px; font-style:normal;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:20px; }
.v-hero-editorial .ws-edccat::before{ content:''; width:16px; height:2px; background:var(--accent); }
.v-hero-editorial .ws-edchead{ font-family:var(--font-head);
  font-size:clamp(42px,6.2cqw,76px); font-weight:900; line-height:.98; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 26px; max-width:14ch; }
.v-hero-editorial .ws-edchead em{ font-style:italic; color:var(--accent); }
.v-hero-editorial .ws-edcdeck{ max-width:560px; border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair);
  padding:20px 0; margin:0 0 30px; }
.v-hero-editorial .ws-edcmeta{ display:flex; align-items:center; gap:18px; font-size:12px; color:var(--dim); }
.v-hero-editorial .ws-edcmeta b{ width:1px; height:14px; background:var(--hair); }
.v-hero-editorial .ws-edcbtn{ display:inline-flex; align-items:center; padding:11px 22px; cursor:pointer;
  background:var(--ink); color:var(--bg); font-size:13px; font-weight:600; text-decoration:none;
  transition:color .18s ease, transform .18s ease; }
.v-hero-editorial .ws-edcbtn:hover{ background:var(--accent); transform:translateY(-1px); }
.v-hero-editorial .ws-edcside{ padding:48px 0 48px 36px; }
.v-hero-editorial .ws-edcslabel{ display:block; font-style:normal; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); padding-bottom:12px; margin-bottom:6px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-editorial .ws-edcitem{ padding:15px 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-editorial .ws-edcitem:last-child{ border-bottom:0; }
.v-hero-editorial .ws-edcitem i{ display:block; font-style:normal; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.v-hero-editorial .ws-edclink{ font-family:var(--font-head); font-size:16px; font-weight:700; line-height:1.3;
  color:var(--ink); text-decoration:none; cursor:pointer; transition:color .15s ease; }
.v-hero-editorial .ws-edclink:hover{ color:var(--accent); }
@container site (max-width: 860px){
  .v-hero-editorial .ws-edcgrid{ grid-template-columns:1fr; }
  .v-hero-editorial .ws-edcmain{ border-right:0; padding-right:0; }
  .v-hero-editorial .ws-edcside{ padding:28px 0; border-top:var(--bw, 1px) solid var(--hair); }
}
@container site (max-width: 560px){
  .v-hero-editorial .ws-edchead{ font-size:clamp(34px,10cqw,46px); }
  .v-hero-editorial .ws-edcmeta{ flex-wrap:wrap; row-gap:10px; }
}

/* ---- hero / hero-developer (SB_04 drafts/hero-developer) ---- */
.v-hero-developer{ padding:96px 24px 88px; }
.v-hero-developer .ws-in.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.v-hero-developer .ws-hcopy{ display:flex; flex-direction:column; gap:22px; padding-right:36px; border-right:var(--bw, 1px) solid var(--hair); }
.v-hero-developer .ws-kick{ color:var(--accent); font-weight:600; letter-spacing:.12em; }
.v-hero-developer .ws-sub{ line-height:1.7; }
.v-hero-developer .ws-devbadges{ display:flex; gap:8px; flex-wrap:wrap; }
.v-hero-developer .ws-devbadge{ display:inline-flex; align-items:center; padding:4px 12px;
  border-radius:100px; font-size:12px; font-weight:700; font-family:var(--mono);
  letter-spacing:.03em; background:var(--panel-2); border:var(--bw, 1px) solid var(--hair); }
.v-hero-developer .ws-devbadge.js{ color:#f0db4f; border-color:color-mix(in srgb, #f0db4f 22%, transparent); }
.v-hero-developer .ws-devbadge.py{ color:#6fa8dc; border-color:color-mix(in srgb, #3572a5 32%, transparent); }
.v-hero-developer .ws-devbadge.rb{ color:#e0746a; border-color:color-mix(in srgb, #cc342d 28%, transparent); }
.v-hero-developer .ws-devproof{ display:flex; flex-direction:column; gap:12px; }
.v-hero-developer .ws-devproof > i{ font-style:normal; font-size:13px; color:var(--dim); letter-spacing:.02em; }
.v-hero-developer .ws-devlogos{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.v-hero-developer .ws-devlogos span{ font-size:15px; font-weight:700; color:var(--faint);
  letter-spacing:-.01em; transition:color .2s ease; cursor:default; }
.v-hero-developer .ws-devlogos span:hover{ color:var(--dim); }
.v-hero-developer .ws-devterm{ width:100%; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:10px; overflow:hidden; }
.v-hero-developer .ws-devbar{ display:flex; align-items:center; gap:6px; background:var(--panel-2);
  padding:12px 16px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-developer .ws-devbar .d{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.v-hero-developer .ws-devbar .d.r{ background:#ff5f57; }
.v-hero-developer .ws-devbar .d.y{ background:#ffbd2e; }
.v-hero-developer .ws-devbar .d.g{ background:#28c840; }
.v-hero-developer .ws-devbar > i{ margin-left:8px; font-style:normal; font-size:12px;
  color:var(--dim); font-family:var(--mono); }
.v-hero-developer .ws-devcopy{ margin-left:auto; font-weight:600; font-size:11px; font-family:var(--mono);
  color:var(--dim); cursor:pointer; padding:2px 8px; border:var(--bw, 1px) solid var(--hair); border-radius:5px;
  transition:color .15s ease, transform .15s ease; user-select:none; }
.v-hero-developer .ws-devcopy:hover{ color:var(--ink); }
.v-hero-developer .ws-devcopy:active{ transform:scale(.95); }
.v-hero-developer .ws-devcode{ padding:20px 20px 24px; font-family:var(--mono); font-size:13px;
  line-height:1.75; overflow-x:auto; color:var(--ink); }
.v-hero-developer .ws-devline{ display:block; white-space:pre; }
.v-hero-developer .ws-devcode b{ font-weight:400; }
.v-hero-developer .ws-devcode .kw{ color:#60a5fa; }
.v-hero-developer .ws-devcode .st{ color:#4ade80; }
.v-hero-developer .ws-devcode .fn{ color:#c084fc; }
.v-hero-developer .ws-devcode .pr{ color:#94d8f8; }
.v-hero-developer .ws-devcode .vr{ color:var(--ink); }
.v-hero-developer .ws-devcode .cm{ color:var(--faint); font-style:italic; }
@container site (max-width: 860px){
  .v-hero-developer .ws-in.split{ grid-template-columns:1fr; gap:40px; }
  .v-hero-developer .ws-hcopy{ padding-right:0; border-right:0; border-bottom:var(--bw, 1px) solid var(--hair); padding-bottom:36px; }
}
@container site (max-width: 560px){
  .v-hero-developer{ padding:64px 16px 56px; }
  .v-hero-developer .ws-devcode{ font-size:12px; padding:16px 14px 20px; }
}

/* ===== hero: feature row (SB_04 drafts/hero-feature-row) ===== */
.v-hero-feature-row { background: var(--bg); }
.v-hero-feature-row .ws-in { display: flex; flex-direction: column; }
.v-hero-feature-row .hfr-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding-bottom: 56px; }
.v-hero-feature-row .ws-h1 { max-width: 18ch; text-wrap: balance; }
.v-hero-feature-row .ws-sub { max-width: 52ch; }
.v-hero-feature-row .hfr-rule { border: none; border-top: var(--bw, 1px) solid var(--hair); width: 100%; margin: 0; }
.v-hero-feature-row .hfr-features { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 40px; }
.v-hero-feature-row .hfr-feature { display: flex; flex-direction: column; gap: 10px; padding: 0 28px 0 0; border-right: var(--bw, 1px) solid var(--hair); }
.v-hero-feature-row .hfr-feature + .hfr-feature { padding-left: 28px; }
.v-hero-feature-row .hfr-feature:last-child { border-right: none; padding-right: 0; }
.v-hero-feature-row .hfr-icon { display: inline-flex; color: var(--accent); }
.v-hero-feature-row .hfr-icon svg { width: 22px; height: 22px; }
.v-hero-feature-row .hfr-ft { font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.v-hero-feature-row .hfr-fd { font-size: 0.83rem; line-height: 1.65; color: var(--dim); margin: 0; }
@container site (max-width: 860px) {
  .v-hero-feature-row .hfr-features { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .v-hero-feature-row .hfr-feature { padding: 0 24px 0 0; }
  .v-hero-feature-row .hfr-feature + .hfr-feature { padding-left: 0; }
  .v-hero-feature-row .hfr-feature:nth-child(even) { padding: 0 0 0 24px; border-right: none; }
  .v-hero-feature-row .hfr-feature:nth-child(-n+2) { padding-bottom: 36px; border-bottom: var(--bw, 1px) solid var(--hair); }
}
@container site (max-width: 560px) {
  .v-hero-feature-row .hfr-features { grid-template-columns: 1fr; row-gap: 0; }
  .v-hero-feature-row .hfr-feature { padding: 0 0 28px !important; border-right: none !important; border-bottom: var(--bw, 1px) solid var(--hair); margin-bottom: 28px; }
  .v-hero-feature-row .hfr-feature:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0 !important; }
}
/* hero-early-access — SB_04 drafts/hero-early-access. Centered beta-signup hero: lock badge,
   headline, inline email + submit, spots-left counter, feature pills. Origin --hea-* map to tokens:
   bg->--bg, text->--ink, dim->--dim, accent->--accent, border->--hair, form-bg->--panel-2, font->--font;
   the origin's gold "counter" hue rides --accent so brands cascade. Email form is REAL — validates,
   confirms via the aria-live note, and ticks the spots counter down. */
.v-hero-early-access .hea-in { display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; max-width:640px; }
.v-hero-early-access .hea-badge { margin-bottom:0; color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.v-hero-early-access .hea-badge svg { width:13px; height:13px; }
.v-hero-early-access .ws-h1 { margin:0; }
.v-hero-early-access .hea-sub { margin:0; max-width:480px; }
.v-hero-early-access .hea-form { display:flex; width:100%; max-width:440px; border-radius:calc(var(--radius, 12px) * .85); overflow:hidden; border:var(--bw, 1px) solid var(--hair); }
.v-hero-early-access .hea-form:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-early-access .hea-email { flex:1; min-width:0; padding:14px 18px; background:var(--panel-2, var(--panel)); border:none; color:var(--ink); font-family:var(--font); font-size:14px; outline:none; }
.v-hero-early-access .hea-email::placeholder { color:var(--dim); }
.v-hero-early-access .hea-email:disabled { opacity:0.6; }
.v-hero-early-access .hea-submit { padding:14px 20px; background:var(--accent); color:var(--accent-text, #fff); font-size:14px; font-weight:700; border:none; cursor:pointer; font-family:var(--font); white-space:nowrap; transition:opacity .18s ease; }
.v-hero-early-access .hea-submit:hover { opacity:0.88; }
.v-hero-early-access .hea-submit:disabled { opacity:0.55; cursor:default; }
.v-hero-early-access .hea-note { display:none; margin:-8px 0 0; font-size:12px; font-weight:600; color:#d97706; }
.v-hero-early-access .hea-note.show { display:block; }
.v-hero-early-access .hea-note.ok { color:#16a34a; }
.v-hero-early-access .hea-counter { font-size:12px; font-weight:600; color:var(--accent); }
.v-hero-early-access .hea-num { font-weight:800; font-variant-numeric:tabular-nums; }
.v-hero-early-access .hea-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.v-hero-early-access .hea-pill { font-size:11px; font-weight:600; padding:5px 12px; border-radius:20px; background:color-mix(in srgb, var(--ink) 4%, transparent); border:var(--bw, 1px) solid var(--hair); color:var(--dim); }
@container site (max-width: 560px) {
  .v-hero-early-access .hea-form { flex-direction:column; border:none; overflow:visible; border-radius:0; }
  .v-hero-early-access .hea-email { border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .85); }
  .v-hero-early-access .hea-submit { border-radius:calc(var(--radius, 12px) * .85); }
}
/* gradient orb — ported from SB_04 drafts/hero-gradient-orb (a centered statement floating over
   one big soft gradient orb). Origin --hgo-* vars map to theme tokens: bg->--bg, text->--ink,
   dim->--dim, accent + orb tints->--accent/--accent2, font->--font-head/--font, border->--hair.
   The origin's filter:blur(60px) orb becomes a blur-free radial wash — two offset color-mix blobs,
   the v-aurora / v-card idiom — so it stays theme-portable with no blur/backdrop-filter. The orb
   keeps a slow ambient drift (transform + opacity only, never the background; static under
   reduced-motion); baked entrance keyframes are dropped since anims.js owns entrances. The dead
   <a href="#"> CTA becomes a real btn(). Container queries only. */
.ws-hero.v-hero-gradient-orb { position:relative; overflow:hidden; isolation:isolate; }
.v-hero-gradient-orb .hgo-orb { position:absolute; left:50%; top:48%; z-index:0; pointer-events:none;
  width:min(560px, 120cqw); height:min(560px, 120cqw); border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 42% 40%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 62%),
    radial-gradient(circle at 66% 66%, color-mix(in srgb, var(--accent2, var(--accent)) 34%, transparent), transparent 60%);
  animation:hgoFloat 9s ease-in-out infinite; }
.v-hero-gradient-orb .ws-in { position:relative; z-index:1; }
@keyframes hgoFloat {
  0%, 100% { transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:.9; }
  50%      { transform:translate(-50%,-52%) scale(1.12) rotate(24deg); opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-gradient-orb .hgo-orb { animation:none; }
}
@container site (max-width: 560px) {
  .v-hero-gradient-orb .hgo-orb { width:min(300px, 84cqw); height:min(300px, 84cqw); top:44%; }
}
/* hero-grid-bg — ported from SB_04 drafts/hero-grid-bg. A centered statement floats over a
   blueprint grid (repeating-linear-gradients) that fades to nothing at the edges via a radial
   mask. Origin --hgb-* vars map to theme tokens: grid lines are a faint --ink tint (theme-aware,
   reads on light and dark), copy stays on --ink/--accent. Baked-in styles kept static — anims.js
   owns section entrances; only button hover motion survives. Container queries, not media. */
.v-hero-grid-bg { position:relative; isolation:isolate; display:flex; align-items:center;
  justify-content:center; min-height:clamp(460px, 66cqh, 700px); text-align:center; }
.v-hero-grid-bg .hgb-grid { position:absolute; inset:0; z-index:0; pointer-events:none; --hgb-cell:60px;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px var(--hgb-cell)),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px var(--hgb-cell));
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at center, #000, transparent);
  mask-image:radial-gradient(ellipse 60% 60% at center, #000, transparent); }
.v-hero-grid-bg .ws-in { position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:clamp(18px, 2.3cqw, 24px); }
.v-hero-grid-bg .ws-kick { margin:0; }
.v-hero-grid-bg .ws-h1 { margin:0; font-size:clamp(40px, 7cqw, 76px); max-width:15ch;
  letter-spacing:-0.04em; line-height:1.03; text-wrap:balance; }
.v-hero-grid-bg .ws-sub { margin:0; max-width:46ch; }
.v-hero-grid-bg .ws-ctarow { margin-top:6px; justify-content:center; }
@container site (max-width: 560px) {
  .v-hero-grid-bg { min-height:clamp(420px, 74cqh, 560px); }
  .v-hero-grid-bg .hgb-grid { --hgb-cell:44px; }
}
/* hero-gradient-mesh — SB_04 drafts/hero-gradient-mesh. Centered glass card over a soft, drifting
   multi-color gradient mesh. Origin --hgm2-* map to tokens: bg->--bg, text->--ink, dim->--dim,
   accent->--accent/--accent2, card->--panel + --hair, radius->--radius, font->--font. Blur is dropped
   per the perf rules: orbs are soft radial gradients (natural falloff, no filter) and the card is a
   translucent panel (no backdrop-filter). The card's entrance is left to anims.js; only the slow
   ambient orb drift runs at rest (transform-only, reduced-motion guarded, ticker-style). CTAs navigate
   via btn(). */
.v-hero-gradient-mesh { min-height:min(680px, 78cqh); display:flex; align-items:center; }
.v-hero-gradient-mesh .hgm-mesh { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.v-hero-gradient-mesh .hgm-orb { position:absolute; border-radius:50%; }
.v-hero-gradient-mesh .hgm-orb.o1 { width:min(600px, 62cqw); aspect-ratio:1; top:-14%; left:-8%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
  animation:hgmDrift1 13s ease-in-out infinite; }
.v-hero-gradient-mesh .hgm-orb.o2 { width:min(520px, 54cqw); aspect-ratio:1; bottom:-12%; right:-8%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent), transparent 70%);
  animation:hgmDrift2 11s ease-in-out infinite; }
.v-hero-gradient-mesh .hgm-orb.o3 { width:min(440px, 46cqw); aspect-ratio:1; top:50%; left:50%;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 72%);
  animation:hgmDrift3 15s ease-in-out infinite; }
@keyframes hgmDrift1 { 0%, 100% { transform:translate(0, 0); } 50% { transform:translate(6%, 5%); } }
@keyframes hgmDrift2 { 0%, 100% { transform:translate(0, 0); } 50% { transform:translate(-6%, -4%); } }
@keyframes hgmDrift3 { 0%, 100% { transform:translate(-50%, -50%) scale(1); } 50% { transform:translate(-50%, -50%) scale(1.18); } }
.v-hero-gradient-mesh .ws-in { position:relative; z-index:1; }
.v-hero-gradient-mesh .hgm-card { max-width:640px; margin:0 auto; padding:56px 48px; text-align:center;
  background:color-mix(in srgb, var(--panel) 76%, transparent);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); box-shadow:var(--elev, 0 0 #0000); }
.v-hero-gradient-mesh .hgm-badge { margin-bottom:24px; }
.v-hero-gradient-mesh .hgm-badge svg { width:13px; height:13px; }
.v-hero-gradient-mesh .ws-sub { margin-top:16px; margin-inline:auto; }
.v-hero-gradient-mesh .ws-ctarow { margin-top:30px; justify-content:center; }
.v-hero-gradient-mesh .hgm-proof { display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:34px; padding-top:26px; border-top:var(--bw, 1px) solid var(--hair); flex-wrap:wrap; }
.v-hero-gradient-mesh .hgm-avatars { display:flex; }
.v-hero-gradient-mesh .hgm-av { width:30px; height:30px; border-radius:50%; margin-left:-8px;
  display:inline-flex; align-items:center; justify-content:center; font:700 10px var(--font);
  color:var(--accent-text, #fff); border:2px solid var(--panel); background:var(--accent); }
.v-hero-gradient-mesh .hgm-av:first-child { margin-left:0; }
.v-hero-gradient-mesh .hgm-av:nth-child(2) { background:color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.v-hero-gradient-mesh .hgm-av:nth-child(3) { background:var(--accent2, color-mix(in srgb, var(--accent) 55%, var(--panel))); }
.v-hero-gradient-mesh .hgm-av:nth-child(4) { background:color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.v-hero-gradient-mesh .hgm-av:nth-child(5) { background:color-mix(in srgb, var(--accent) 72%, transparent); }
.v-hero-gradient-mesh .hgm-proof-t { font:500 12px var(--font); color:var(--dim); }
@container site (max-width: 560px) {
  .v-hero-gradient-mesh { min-height:0; }
  .v-hero-gradient-mesh .hgm-card { padding:38px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-gradient-mesh .hgm-orb { animation:none; }
}
/* hero-launch-announce — ported from SB_04 drafts/hero-launch-announce (centered
   product-launch bulletin: version badge, "what just shipped" highlight list, dual CTAs).
   Origin's --hla-* vars map to theme tokens; the centered stack reuses ws-badge / ws-h1 /
   ws-sub / ws-ctarow. Entrance motion belongs to the reveal system — only the per-row
   hover nudge runs at rest. Transitions ride transform/color only; no blur/backdrop. */
.v-hero-launch-announce .ws-badge svg { width:13px; height:13px; }
.v-hero-launch-announce .ws-h1 { max-width:18ch; margin-inline:auto; text-wrap:balance; }
.v-hero-launch-announce .ws-sub { margin-top:18px; }
.v-hero-launch-announce .hla-feats { list-style:none; margin:34px auto 4px; padding:0; width:fit-content;
  max-width:100%; display:flex; flex-direction:column; gap:10px; text-align:left; }
.v-hero-launch-announce .hla-feat { display:flex; align-items:center; gap:12px; padding:11px 18px;
  border-radius:calc(var(--radius, 12px) * .85); border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 3%, transparent); font:500 14px var(--font); color:var(--ink);
  transition:transform 150ms var(--ease-pop, ease-out), color 150ms linear; }
.v-hero-launch-announce .hla-feat:hover { transform:translateX(4px); color:var(--accent); }
.v-hero-launch-announce .hla-ficon { display:inline-flex; flex:none; width:30px; height:30px; align-items:center;
  justify-content:center; border-radius:8px; background:var(--accent-fill); color:var(--accent); }
.v-hero-launch-announce .hla-ficon svg { width:16px; height:16px; }
.v-hero-launch-announce .ws-ctarow { margin-top:32px; }
@container site (max-width: 560px) {
  .v-hero-launch-announce .hla-feats { width:100%; }
  .v-hero-launch-announce .hla-feat { font-size:13px; padding:10px 14px; }
}
/* hero-interactive-grid — ported from SB_04 drafts/hero-interactive-grid (copy beside a
   hover-reactive cell grid). Origin colours -> theme tokens; the origin's static :hover was
   upgraded into a real proximity glow (mount lights cells within a radius of the cursor and
   click-locks them). One ::after layer carries all four states via max(): a resting seed floor
   (--lit-floor set by .seed/.hot), :hover, .lit (clicked), and the JS proximity value --g;
   only opacity + border-color transition (never a background). Narrow-stacks via the global
   860px .ws-hero .ws-in.split rule; container queries only, no viewport media. */
.v-hero-interactive-grid .hig-gridwrap { position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:var(--radius, 14px); }
.v-hero-interactive-grid .hig-gridwrap::before { content:''; position:absolute; left:0; top:0; bottom:0; width:72px;
  z-index:2; pointer-events:none; background:linear-gradient(to right, var(--bg), transparent); }
.v-hero-interactive-grid .hig-grid { --hig-cols:8; --hig-cell:52px;
  display:grid; grid-template-columns:repeat(var(--hig-cols), var(--hig-cell)); }
.v-hero-interactive-grid .hig-cell { position:relative; width:var(--hig-cell); height:var(--hig-cell);
  border:var(--bw, 1px) solid var(--hair); background:transparent; cursor:pointer;
  transition:border-color .16s ease; }
.v-hero-interactive-grid .hig-cell::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--accent); opacity:max(calc(var(--g, 0) * 0.5), var(--lit-floor, 0)); transition:opacity .16s ease; }
.v-hero-interactive-grid .hig-cell.seed { --lit-floor:.20; border-color:color-mix(in srgb, var(--accent) 24%, var(--hair)); }
.v-hero-interactive-grid .hig-cell.hot { --lit-floor:.40; border-color:color-mix(in srgb, var(--accent) 44%, var(--hair)); }
.v-hero-interactive-grid .hig-cell:hover { --lit-floor:.58; border-color:color-mix(in srgb, var(--accent) 62%, transparent); }
.v-hero-interactive-grid .hig-cell.lit { --lit-floor:.85; border-color:var(--accent); }
.v-hero-interactive-grid .hig-meta { display:flex; align-items:center; gap:12px; margin-top:30px; }
.v-hero-interactive-grid .hig-mi { font:500 12.5px var(--font); color:var(--dim); }
.v-hero-interactive-grid .hig-div { width:1px; height:12px; background:var(--hair); flex:0 0 auto; }
@container site (max-width: 860px) {
  .v-hero-interactive-grid .hig-gridwrap { justify-content:flex-start; max-height:300px; margin-top:6px; }
  .v-hero-interactive-grid .hig-gridwrap::before { display:none; }
  .v-hero-interactive-grid .hig-gridwrap::after { content:''; position:absolute; left:0; right:0; bottom:0; height:56px;
    z-index:2; pointer-events:none; background:linear-gradient(to top, var(--bg), transparent); }
  .v-hero-interactive-grid .hig-grid { --hig-cols:6; --hig-cell:46px; }
}
@container site (max-width: 560px) {
  .v-hero-interactive-grid .hig-grid { --hig-cols:5; --hig-cell:44px; }
  .v-hero-interactive-grid .hig-meta { flex-wrap:wrap; gap:9px 12px; }
}
/* hero-investor-backed — ported from SB_04 drafts/hero-investor-backed (centered fundraising
   announcement: a funding badge over a big headline, twin CTAs and a divided wall of investor +
   press logos). Reuses ws-in.center + ws-badge/ws-h1/gradLast + ws-sub + ws-ctarow + btn; the
   origin's 9 --hib-* hex vars map to theme tokens (bg->--bg, text->--ink, dim->--dim/--faint,
   accent->--accent, border->--hair). Baked-in entrance fades are dropped (anims.js owns entrances);
   the announcement dot is a static accent mark and logo brightening is the only motion (hover). */
.v-hero-investor-backed .hib-wrap { max-width:760px; margin-inline:auto; }
.v-hero-investor-backed .ws-badge.hib-badge { gap:9px; padding:6px 15px; font-size:11.5px; }
.v-hero-investor-backed .hib-dot { width:7px; height:7px; border-radius:99px; flex-shrink:0;
  background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.v-hero-investor-backed .ws-h1 { max-width:15ch; margin-inline:auto; text-wrap:balance; letter-spacing:-0.03em; }
.v-hero-investor-backed .ws-sub { margin-top:20px; max-width:52ch; }
.v-hero-investor-backed .ws-ctarow { margin-top:30px; }
.v-hero-investor-backed .hib-logos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(18px, 3cqw, 40px); width:100%; max-width:600px; margin:clamp(40px, 5cqw, 60px) auto 0;
  padding-top:clamp(26px, 3.4cqw, 40px); border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-investor-backed .hib-logo { font:700 13px var(--font); letter-spacing:.02em; color:var(--faint);
  white-space:nowrap; opacity:.72; transition:color 160ms ease-out, opacity 160ms ease-out; }
.v-hero-investor-backed .hib-logo:hover { color:var(--dim); opacity:1; }
@container site (max-width: 560px) {
  .v-hero-investor-backed .hib-logos { gap:14px 22px; margin-top:36px; padding-top:26px; }
  .v-hero-investor-backed .hib-logo { font-size:12px; }
}
/* hero-interactive-demo — SB_04 drafts/hero-interactive-demo. Centered product-demo hero: headline +
   sub over a REAL tab-switcher panel (Dashboard / Deployments / Analytics), each tab a mock data screen
   (metric rows, a progress bar, a deploy log). Origin --hid-* map to tokens: bg->--bg, surface->--panel,
   panel-bg->--panel-2, text->--ink, dim->--dim, accent->--accent, border->--hair, font->--font, mono
   timestamps->--mono. Row/track tints are ink color-mixes so they read on light AND dark themes; the
   origin's green/red/amber status hues stay literal semantic colors. Tabs are an ARIA tablist wired in
   mount() — click + arrow/Home/End keys switch panels (the origin's static shell made live). */
.v-hero-interactive-demo .hid-in { max-width:640px; }
.v-hero-interactive-demo .hid-sub { max-width:480px; margin-bottom:32px; }
.v-hero-interactive-demo .hid-demo { width:100%; max-width:600px; margin:0 auto; text-align:left;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * 1.1); overflow:hidden; }
.v-hero-interactive-demo .hid-tabs { display:flex; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-interactive-demo .hid-tab { flex:1; padding:13px 12px; font:700 12px var(--font); letter-spacing:0.01em;
  background:transparent; border:0; border-right:var(--bw, 1px) solid var(--hair); color:var(--dim); cursor:pointer; transition:color .15s ease; }
.v-hero-interactive-demo .hid-tab:last-child { border-right:0; }
.v-hero-interactive-demo .hid-tab:hover { color:var(--ink); }
.v-hero-interactive-demo .hid-tab.on { color:var(--ink); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-hero-interactive-demo .hid-tab:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-hero-interactive-demo .hid-panels { padding:20px; }
.v-hero-interactive-demo .hid-panel { display:none; flex-direction:column; gap:10px; }
.v-hero-interactive-demo .hid-panel.on { display:flex; }
.v-hero-interactive-demo .hid-mrow,
.v-hero-interactive-demo .hid-bar,
.v-hero-interactive-demo .hid-deploy { padding:11px 14px; background:color-mix(in srgb, var(--ink) 3%, transparent);
  border-radius:calc(var(--radius, 12px) * .6); }
.v-hero-interactive-demo .hid-mrow { display:flex; justify-content:space-between; align-items:center; }
.v-hero-interactive-demo .hid-ml { font-size:12.5px; color:var(--dim); }
.v-hero-interactive-demo .hid-mv { font:800 18px var(--font-head, var(--font)); letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.v-hero-interactive-demo .hid-mv.warn { color:#d97706; }
.v-hero-interactive-demo .hid-bar { display:flex; align-items:center; gap:12px; }
.v-hero-interactive-demo .hid-bl { font-size:12.5px; color:var(--dim); flex-shrink:0; }
.v-hero-interactive-demo .hid-track { flex:1; height:5px; border-radius:3px; overflow:hidden; background:color-mix(in srgb, var(--ink) 10%, transparent); }
.v-hero-interactive-demo .hid-fill { display:block; height:100%; border-radius:3px; background:var(--accent); }
.v-hero-interactive-demo .hid-fill.ok { background:#16a34a; }
.v-hero-interactive-demo .hid-fill.bad { background:#dc2626; }
.v-hero-interactive-demo .hid-fill.warn { background:#d97706; }
.v-hero-interactive-demo .hid-fill.acc { background:var(--accent); }
.v-hero-interactive-demo .hid-bv { font:600 12px var(--mono); color:var(--dim); flex-shrink:0; font-variant-numeric:tabular-nums; }
.v-hero-interactive-demo .hid-deploy { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.v-hero-interactive-demo .hid-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--dim); }
.v-hero-interactive-demo .hid-dot.ok { background:#16a34a; }
.v-hero-interactive-demo .hid-dot.bad { background:#dc2626; }
.v-hero-interactive-demo .hid-dt { flex:1; min-width:0; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-hero-interactive-demo .hid-ts { flex-shrink:0; color:var(--faint, var(--dim)); font:500 11.5px var(--mono); font-variant-numeric:tabular-nums; }
@container site (max-width: 560px) {
  .v-hero-interactive-demo .hid-panels { padding:14px; }
  .v-hero-interactive-demo .hid-tab { padding:12px 6px; font-size:11px; }
}
/* hero-logos-marquee — ported from SB_04 drafts/hero-logos-marquee (centered pitch,
   then a two-row logo wall scrolling opposite ways — social proof in motion).
   CSS-only loop: each run holds its logos twice so translateX(-50%) is seamless.
   The marquee is the only at-rest motion (entrances belong to the reveal system);
   edge fades use a mask so they read on any theme surface (no gradient-over-bg trick). */
.ws-hero.v-hero-logos-marquee { padding:0; overflow:hidden; }
.v-hero-logos-marquee .ws-lmhero { max-width:760px; padding:clamp(56px, 9cqw, 104px) 24px clamp(40px, 6cqw, 68px); }
.v-hero-logos-marquee .ws-lmwall { border-top:var(--bw, 1px) solid var(--hair); padding:clamp(40px, 6cqw, 56px) 0 clamp(48px, 7cqw, 72px); }
.ws-lmhead { margin:0 0 clamp(26px, 4cqw, 40px); text-align:center;
  font:600 12px/1 var(--font); letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); }
.ws-lmtrack { position:relative; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ws-lmtrack + .ws-lmtrack { margin-top:16px; }
.ws-lmrun { display:inline-flex; align-items:center; width:max-content;
  animation:ws-lm-left 36s linear infinite; }
.ws-lmrun.b { animation-name:ws-lm-right; animation-duration:42s; }
.ws-lmtrack:hover .ws-lmrun { animation-play-state:paused; }
.ws-lmlogo { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  height:48px; padding:0 40px; white-space:nowrap; border-right:var(--bw, 1px) solid var(--hair);
  font:700 15px/1 var(--font-head, var(--font)); letter-spacing:0.04em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 30%, transparent); transition:color .2s; }
.ws-lmlogo:hover { color:color-mix(in srgb, var(--ink) 64%, transparent); }
@keyframes ws-lm-left  { from { transform:translateX(0); }    to { transform:translateX(-50%); } }
@keyframes ws-lm-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@container site (max-width: 560px) {
  .ws-lmlogo { height:40px; padding:0 24px; font-size:13px; }
  .ws-lmhead { margin-bottom:24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-lmrun { animation-play-state:paused; }
}
/* hero-launch-waitlist — pre-launch teaser card: rocket badge, live D:H:M:S countdown, working waitlist form, avatar-pile proof (SB_04 · drafts/hero-launch-waitlist) */
.ws-hero.v-hero-launch-waitlist { position:relative; isolation:isolate; overflow:hidden; }
.v-hero-launch-waitlist .hlw-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 42% at 20% 16%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 66%),
    radial-gradient(ellipse 46% 40% at 82% 90%, color-mix(in srgb, var(--accent2, var(--accent)) 9%, transparent), transparent 64%); }
.v-hero-launch-waitlist .hlw-wrap { position:relative; z-index:1; }
.v-hero-launch-waitlist .hlw-card { width:min(520px, 100%); margin:0 auto; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(14px, 2cqw, 20px);
  padding:clamp(32px, 4.4cqw, 48px) clamp(24px, 3.4cqw, 40px);
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:16px; }
.v-hero-launch-waitlist .hlw-badge { margin:0; }
.v-hero-launch-waitlist .hlw-rocket { font-size:.95em; line-height:1; }
.v-hero-launch-waitlist .hlw-h { max-width:16ch; letter-spacing:-0.03em; text-wrap:balance;
  font-size:clamp(28px, 4.6cqw, 46px); }
.v-hero-launch-waitlist .hlw-sub { max-width:42ch; }
/* countdown strip */
.v-hero-launch-waitlist .hlw-clock { display:flex; align-items:flex-start; justify-content:center; flex-wrap:nowrap;
  gap:clamp(4px, 1cqw, 10px); width:100%; box-sizing:border-box; padding:clamp(12px, 1.8cqw, 16px);
  background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair); border-radius:10px; }
.v-hero-launch-waitlist .hlw-unit { display:flex; flex-direction:column; align-items:center; gap:4px; }
.v-hero-launch-waitlist .hlw-num { min-width:2ch; text-align:center; font-variant-numeric:tabular-nums;
  font:800 clamp(22px, 3.4cqw, 30px)/1 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.03em; }
.v-hero-launch-waitlist .hlw-ulabel { font:700 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.v-hero-launch-waitlist .hlw-sep { align-self:flex-start; padding-top:2px; color:var(--faint);
  font:800 clamp(20px, 3cqw, 26px)/1 var(--font-head, var(--font)); }
.v-hero-launch-waitlist .hlw-clock.hlw-done .hlw-num { color:var(--accent); }
/* waitlist form */
.v-hero-launch-waitlist .hlw-form { display:flex; gap:8px; width:100%; }
.v-hero-launch-waitlist .hlw-input { flex:1; min-width:0; padding:11px 14px; border-radius:8px;
  background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair); color:var(--ink);
  font:400 13px var(--font); outline:none; }
.v-hero-launch-waitlist .hlw-input::placeholder { color:var(--faint); }
.v-hero-launch-waitlist .hlw-input:focus { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-launch-waitlist .hlw-input:disabled { opacity:.6; }
.v-hero-launch-waitlist .hlw-btn { flex:none; padding:11px 20px; border:none; cursor:pointer; white-space:nowrap;
  border-radius:8px; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:600 13px var(--font);
  transition:opacity 140ms linear, transform 140ms ease; }
.v-hero-launch-waitlist .hlw-btn:hover { opacity:.9; }
.v-hero-launch-waitlist .hlw-btn:active { transform:translateY(1px); opacity:.82; }
.v-hero-launch-waitlist .hlw-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-launch-waitlist .hlw-btn:disabled { cursor:default; opacity:1; }
.v-hero-launch-waitlist .hlw-form.hlw-sent .hlw-btn { opacity:1; }
.v-hero-launch-waitlist .hlw-note { min-height:1.1em; margin:0; font:500 12px var(--font); color:var(--dim); }
.v-hero-launch-waitlist .hlw-note.hlw-ok { color:var(--accent); }
.v-hero-launch-waitlist .hlw-note.hlw-err { color:#e5484d; }
/* social proof */
.v-hero-launch-waitlist .hlw-proof { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.v-hero-launch-waitlist .hlw-avatars { display:flex; }
.v-hero-launch-waitlist .hlw-av { width:26px; height:26px; border-radius:50%; margin-left:-6px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; font:700 9px var(--font);
  color:var(--accent); background:var(--accent-fill); border:2px solid var(--panel); }
.v-hero-launch-waitlist .hlw-avatars .hlw-av:first-child { margin-left:0; }
.v-hero-launch-waitlist .hlw-more { color:var(--dim); background:var(--panel-2, var(--panel)); }
.v-hero-launch-waitlist .hlw-proof-tx { font:400 12px var(--font); color:var(--dim); }
.v-hero-launch-waitlist .hlw-proof-tx b { color:var(--ink); font-weight:600; }
@container site (max-width: 560px) {
  .v-hero-launch-waitlist .hlw-form { flex-direction:column; }
  .v-hero-launch-waitlist .hlw-btn { width:100%; }
  .v-hero-launch-waitlist .hlw-clock { gap:2px; }
  .v-hero-launch-waitlist .hlw-num { font-size:clamp(20px, 7cqw, 26px); }
}
/* icon grid — ported from SB_04 drafts/hero-icon-grid (a centered opener over a faint, tiled field of
   product icons with a radial veil; a torch of accent-lit icons follows the cursor and drifts on its
   own when idle). The source's dingbat glyphs become the theme S_ICONS SVG set so the field follows
   currentColor and reads in both themes; the icon pool is data-driven (props.icons). Entrance motion
   belongs to the reveal system — only the cursor torch and button hovers move at rest. */
.v-hero-icon-grid { position:relative; display:flex; align-items:center;
  padding:clamp(76px, 9cqw, 120px) 0; min-height:clamp(460px, 56cqw, 600px); overflow:hidden; }
.v-hero-icon-grid .hig-field { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v-hero-icon-grid .hig-grid { position:absolute; inset:0; display:grid; align-content:center; justify-items:center;
  grid-template-columns:repeat(auto-fill, minmax(clamp(66px, 12cqw, 116px), 1fr));
  grid-auto-rows:clamp(66px, 12cqw, 116px); }
.v-hero-icon-grid .hig-cell { display:flex; align-items:center; justify-content:center; }
.v-hero-icon-grid .hig-cell svg { width:clamp(22px, 3.3cqw, 38px); height:auto;
  color:color-mix(in srgb, var(--ink) 9%, transparent); }
/* the lit torch: a brighter accent copy of the field, clipped to a soft circle at the cursor */
.v-hero-icon-grid .hig-lit { z-index:1;
  clip-path:circle(clamp(120px, 19cqw, 230px) at var(--mx, 50%) var(--my, 50%)); }
.v-hero-icon-grid .hig-lit .hig-cell svg { color:color-mix(in srgb, var(--accent) 52%, transparent); }
/* radial veil — the field fades into the page toward the frame edges so the copy stays legible */
.v-hero-icon-grid .hig-veil { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 64% 66% at 50% 50%, transparent 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 58%, var(--bg) 100%); }
.v-hero-icon-grid .ws-in { position:relative; z-index:3; }
.v-hero-icon-grid .ws-kick { margin-bottom:18px; }
.v-hero-icon-grid .ws-h1 { max-width:16ch; margin-inline:auto; text-wrap:balance; }
.v-hero-icon-grid .ws-sub { margin-inline:auto; max-width:52ch; }
.v-hero-icon-grid .hig-proof { margin:26px 0 0; font:500 12px var(--font); letter-spacing:.04em; color:var(--faint); }
@container site (max-width: 560px) {
  .v-hero-icon-grid { min-height:clamp(420px, 96cqw, 520px); padding:64px 0; }
  .v-hero-icon-grid .hig-grid { grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); grid-auto-rows:70px; }
}
/* hero-long-read — ported from SB_04 drafts/hero-long-read (editorial long-read opener: a narrow,
   left-aligned reading column with a serif-italic accent in the headline, a byline and a lead figure).
   Origin --hlr-* vars map to theme tokens: bg->--bg (inherited), text->--ink, secondary->--dim,
   caption->--faint, divider->--hair, accent->--accent. The serif accent is the variant's signature so
   it keeps a literal system-serif stack (no CDN font). Entrance motion belongs to anims.js — only
   hover/press motion lives here. The origin's static byline gains a REAL Save (persisted to
   localStorage) + Share (copy-link) row; missing lead image / avatar fall back to themed placeholders. */
.v-hero-long-read .hlr-col { display:flex; flex-direction:column; text-align:left; }
.v-hero-long-read .hlr-cat { margin-bottom:22px; }
.v-hero-long-read .hlr-head { font-size:clamp(30px, 5.4cqw, 54px); line-height:1.08; letter-spacing:-0.03em;
  text-wrap:balance; margin:0 0 22px; }
.v-hero-long-read .hlr-em { font-family:Georgia, 'Times New Roman', 'Noto Serif', serif; font-style:italic;
  font-weight:400; letter-spacing:-0.01em; color:var(--ink); }
.v-hero-long-read .hlr-dek { font-size:clamp(16px, 2cqw, 20px); line-height:1.6; color:var(--dim);
  max-width:60ch; margin:0 0 30px; }
/* byline — avatar · name/meta · actions */
.v-hero-long-read .hlr-byline { display:flex; align-items:center; gap:14px; margin:0 0 30px; }
.v-hero-long-read .hlr-avatar { width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden;
  background-size:cover; background-position:center; background-color:var(--panel); border:var(--bw, 1px) solid var(--hair);
  display:flex; align-items:center; justify-content:center; font:600 14px var(--font); color:var(--dim); letter-spacing:0.02em; }
.v-hero-long-read .hlr-avatar.ph { background-image:radial-gradient(120% 120% at 30% 20%,
  color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.v-hero-long-read .hlr-by-detail { display:flex; flex-direction:column; gap:3px; min-width:0; }
.v-hero-long-read .hlr-by-name { font:600 14px var(--font); color:var(--ink); letter-spacing:0.01em; }
.v-hero-long-read .hlr-by-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font:400 12px var(--font); color:var(--dim); }
.v-hero-long-read .hlr-dot { width:3px; height:3px; border-radius:50%; background:var(--faint); flex:none; }
/* actions — real Save / Share */
.v-hero-long-read .hlr-actions { display:flex; gap:8px; margin-left:auto; }
.v-hero-long-read .hlr-act { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--dim);
  font:600 12px var(--font); cursor:pointer;
  transition:color 140ms linear, transform 140ms var(--ease-pop, ease-out); }
.v-hero-long-read .hlr-act svg { width:14px; height:14px; }
.v-hero-long-read .hlr-act:hover { color:var(--ink); transform:translateY(-1px); }
.v-hero-long-read .hlr-act:active { transform:translateY(0); }
.v-hero-long-read .hlr-save.on { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.v-hero-long-read .hlr-save.on svg { fill:color-mix(in srgb, var(--accent) 22%, transparent); }
/* rule + figure */
.v-hero-long-read .hlr-rule { border:none; border-top:var(--bw, 1px) solid var(--hair); margin:0 0 30px; }
.v-hero-long-read .hlr-fig { margin:0; }
.v-hero-long-read .hlr-fig-img { width:100%; aspect-ratio:16 / 9; border-radius:var(--radius, 12px); overflow:hidden;
  background-color:var(--panel); background-size:cover; background-position:center; border:var(--bw, 1px) solid var(--hair);
  position:relative; }
.v-hero-long-read .hlr-fig-img.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(45deg,  color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%);
  background-size:56px 56px; background-position:0 0, 0 28px, 28px -28px, 28px 0; }
.v-hero-long-read .hlr-fig-img.ph::after { content:''; position:absolute; inset:0;
  background:radial-gradient(62% 58% at 50% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%); }
.v-hero-long-read .hlr-cap { display:block; margin-top:12px; font:400 12px/1.55 var(--font); color:var(--faint);
  letter-spacing:0.01em; }
/* wide reading container — let the lead figure break out beyond the text column */
@container site (min-width: 900px) {
  .v-hero-long-read .hlr-fig-img { margin-inline:-40px; width:calc(100% + 80px); }
}
/* narrow — actions drop below the byline, aligned under the text */
@container site (max-width: 560px) {
  .v-hero-long-read .hlr-byline { display:grid; grid-template-columns:auto minmax(0, 1fr);
    align-items:center; column-gap:14px; row-gap:12px; }
  .v-hero-long-read .hlr-actions { grid-column:1 / -1; margin-left:0; }
}
/* hero-looping-video — ported from SB_04 drafts/hero-looping-video (full-bleed hero over a placeholder
   "looping video" background). No remote <video>: the footage is a self-contained canvas bokeh loop
   (mount) reading --accent/--accent2 over a token-deepened stage, so it reads as always-on video without
   an asset. Origin --hlv-* vars map to theme tokens (bg/ink/dim/accent/hair); the flat dark overlay
   becomes a token vignette scrim for text contrast. Entrance motion is dropped (anims.js owns entrances);
   the ambient loop + the working scroll-down button keep their motion. Container query, not viewport
   media; no blur/backdrop-filter. */
.ws-hero.v-hero-looping-video { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(540px, 86cqh, 800px); display:flex; flex-direction:column; justify-content:center;
  background:color-mix(in srgb, var(--bg) 82%, black); }
.v-hero-looping-video .ws-fx { z-index:0; }
.v-hero-looping-video .hlv-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(color-mix(in srgb, var(--bg) 26%, transparent), color-mix(in srgb, var(--bg) 26%, transparent)),
    radial-gradient(120% 92% at 50% 44%, transparent 32%, color-mix(in srgb, var(--bg) 55%, transparent) 76%, color-mix(in srgb, var(--bg) 88%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 42%, transparent), transparent 32%, transparent 60%, color-mix(in srgb, var(--bg) 55%, transparent)); }
.v-hero-looping-video .ws-in { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:22px; }
.v-hero-looping-video .ws-badge { margin-bottom:0; }
.v-hero-looping-video .hlv-rec { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.v-hero-looping-video .ws-sub { margin-top:0; }
.v-hero-looping-video .ws-ctarow { margin-top:4px; }
.v-hero-looping-video .hlv-scroll { margin-top:18px; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:50%; cursor:pointer; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 5%, transparent); border:var(--bw, 1px) solid var(--hair);
  transition:transform .18s ease, color .18s ease, border-color .18s ease; }
.v-hero-looping-video .hlv-scroll svg { width:20px; height:20px; }
.v-hero-looping-video .hlv-scroll:hover { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-looping-video .hlv-scroll:active { transform:translateY(2px); }
@media (prefers-reduced-motion: reduce) {
  .v-hero-looping-video .hlv-scroll { transition:none; }
}
@container site (max-width: 560px) {
  .ws-hero.v-hero-looping-video { min-height:clamp(460px, 84cqh, 620px); }
  .v-hero-looping-video .ws-in { gap:18px; }
  .v-hero-looping-video .hlv-scroll { margin-top:12px; }
}
/* hero-local-service — ported from SB_04 drafts/hero-local-service (local-trade above-the-fold:
   copy + trust checks + a click-to-call number, beside a service photo with a floating review badge).
   Origin --hls2-* vars -> theme tokens; the white review card becomes a --panel chip and the accent
   circle's tick rides --accent-text; star gold stays a literal semantic hue. The dead phone + buttons
   become a real tel: link and host-navigable CTAs. Reuses ws-in.split (the global 860px rule stacks it)
   and ws-hpanel for the photo. Entrance motion is the reveal system's job — only hover moves here. */
.v-hero-local-service .ws-in.split { align-items:center; }
.v-hero-local-service .hls-copy { display:flex; flex-direction:column; justify-content:center; gap:22px; min-width:0; }
.v-hero-local-service .hls-copy .ws-kick { margin:0; }
.v-hero-local-service .ws-ctarow { margin-top:2px; }
.hls-trust { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.hls-trust-item { display:flex; align-items:center; gap:11px; font:500 14px var(--font); color:var(--ink); }
.hls-trust-ic { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:21px; height:21px; border-radius:50%; background:var(--accent); color:var(--accent-text, #04121a); }
.hls-trust-ic svg { width:12px; height:12px; }
.hls-phone { display:flex; flex-direction:column; gap:5px; }
.hls-phone-lb { font:600 10.5px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.hls-phone-num { align-self:flex-start; font:800 clamp(26px, 4.6cqw, 38px) var(--font-head, var(--font));
  letter-spacing:-0.02em; line-height:1; color:var(--ink); text-decoration:none;
  transition:color 140ms linear, transform 140ms linear; }
.hls-phone-num:hover, .hls-phone-num:focus-visible { color:var(--accent); transform:translateY(-1px); }
.hls-visual { position:relative; }
.v-hero-local-service .hls-img { aspect-ratio:4 / 5; min-height:0; max-height:clamp(420px, 62cqw, 560px); }
.hls-badge { position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:13px;
  padding:12px 15px; border-radius:calc(var(--radius, 12px) * .8); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); box-shadow:var(--elev, 0 14px 34px -14px rgba(0,0,0,.5)); }
.hls-badge-stars { font-size:15px; line-height:1; letter-spacing:1.5px; color:#f5b325; }
.hls-badge-info { display:flex; flex-direction:column; gap:2px; }
.hls-badge-info b { font:800 15px var(--font-head, var(--font)); color:var(--ink); line-height:1; letter-spacing:-0.01em; }
.hls-badge-info i { font:500 11.5px var(--font); font-style:normal; color:var(--faint); white-space:nowrap; }
@container site (max-width: 860px) {
  .v-hero-local-service .hls-img { aspect-ratio:16 / 10; max-height:none; }
}
/* hero-interactive-map — SB_04 drafts/hero-interactive-map. Copy left; a live edge-network world
   map right: SVG continents + dashed mesh links, pulsing city nodes that are REAL buttons
   (hover/focus/click to read latency), a caption that tracks the selected node, and the ghost
   "View network map" CTA cycles the nodes. Origin --him-* map to tokens: bg->--bg, heading->--ink,
   body->--dim, accent->--accent, divider/continent->--hair, panel->--panel, radius->--radius.
   Baked-in entrance fades dropped (anims.js owns those); ambient node pulse + hover motion kept and
   reduced-motion gated. Self-contained: no remote map tiles. Narrow-stacks via the global 860px rule. */
.v-hero-interactive-map .ws-in.split { align-items:center; }
.v-hero-interactive-map .him-map { position:relative; width:100%; aspect-ratio:5 / 3;
  background:radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 68%), var(--panel, transparent);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); overflow:hidden; }
.v-hero-interactive-map .him-svg { width:100%; height:100%; display:block; }
.v-hero-interactive-map .him-continent { fill:color-mix(in srgb, var(--ink) 7%, transparent); stroke:var(--hair); stroke-width:1; }
.v-hero-interactive-map .him-link { stroke:color-mix(in srgb, var(--accent) 24%, transparent); stroke-width:1; stroke-dasharray:3 6; }
.v-hero-interactive-map .him-dot { position:absolute; transform:translate(-50%,-50%); width:12px; height:12px; padding:0;
  border:none; border-radius:50%; background:var(--accent); cursor:pointer; z-index:2;
  transition:transform .18s ease; -webkit-tap-highlight-color:transparent; }
.v-hero-interactive-map .him-dot::after { content:""; position:absolute; inset:-8px; border-radius:50%; }
.v-hero-interactive-map .him-dot:hover,
.v-hero-interactive-map .him-dot:focus-visible,
.v-hero-interactive-map .him-dot.on { transform:translate(-50%,-50%) scale(1.35); }
.v-hero-interactive-map .him-dot:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent); }
.v-hero-interactive-map .him-ring { position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; border:1.5px solid var(--accent); opacity:0; transform:scale(1); pointer-events:none;
  animation:him-pulse 2.4s ease-out infinite; }
.v-hero-interactive-map .him-dot:nth-of-type(2) .him-ring { animation-delay:.4s; }
.v-hero-interactive-map .him-dot:nth-of-type(3) .him-ring { animation-delay:.8s; }
.v-hero-interactive-map .him-dot:nth-of-type(4) .him-ring { animation-delay:1.2s; }
.v-hero-interactive-map .him-dot:nth-of-type(5) .him-ring { animation-delay:1.6s; }
.v-hero-interactive-map .him-dot:nth-of-type(6) .him-ring { animation-delay:2s; }
.v-hero-interactive-map .him-tip { position:absolute; transform:translate(-50%, calc(-100% - 13px)); padding:5px 10px;
  border-radius:8px; background:var(--ink); color:var(--bg); font:600 12px/1 var(--font); white-space:nowrap;
  pointer-events:none; opacity:0; z-index:4; transition:opacity .16s ease; }
.v-hero-interactive-map .him-tip.show { opacity:1; }
.v-hero-interactive-map .him-cap { position:absolute; left:14px; right:14px; bottom:12px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; z-index:3; pointer-events:none; font:600 12px var(--font); }
.v-hero-interactive-map .him-caplive { display:inline-flex; align-items:center; gap:7px; color:var(--dim); }
.v-hero-interactive-map .him-caplive i { width:7px; height:7px; border-radius:50%; background:#16a34a; font-style:normal;
  animation:him-blink 2s ease-in-out infinite; }
.v-hero-interactive-map .him-capcity { color:var(--accent); font-weight:700; text-align:right; }
@keyframes him-pulse { 0% { opacity:.6; transform:scale(1); } 100% { opacity:0; transform:scale(2.9); } }
@keyframes him-blink { 0%, 100% { opacity:1; } 50% { opacity:.3; } }
@container site (max-width: 560px) {
  .v-hero-interactive-map .him-cap { font-size:11px; left:10px; right:10px; }
  .v-hero-interactive-map .him-caplive { gap:5px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-interactive-map .him-ring { animation:none; opacity:0; }
  .v-hero-interactive-map .him-caplive i { animation:none; }
}
/* hero-maintenance-page — ported from SB_04 drafts/hero-maintenance-page (calm centered downtime
   page: tool icon, status pill, "Under Maintenance" headline, reassurance line, an ETA that now
   TICKS as a live MM:SS countdown, a working notify-me email form (validates + aria-live confirms)
   and a status-page link). Origin --hmp-* vars + the baked gold headline/icon map to theme tokens
   (accent icon/link/pill-dot, --dim body, --panel-2 ETA chip); gradLast carries the accent onto
   the last headline word. Inter CDN dropped; no entrance anim (anims.js owns those) and no
   backdrop-filter; hover rides opacity/color only; container query handles the narrow reflow.
   The error hue is a fixed semantic red (the one allowed hardcode). */
.v-hero-maintenance-page .vmp-wrap { position:relative; display:flex; flex-direction:column; align-items:center; }
.v-hero-maintenance-page .vmp-glow { position:absolute; top:30%; left:50%; width:min(480px, 88%); aspect-ratio:1;
  transform:translate(-50%, -50%); pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 10%, transparent), transparent 66%); }
.v-hero-maintenance-page .vmp-wrap > *:not(.vmp-glow) { position:relative; z-index:1; }
.v-hero-maintenance-page .vmp-icon { display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:16px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--hair));
  margin-bottom:clamp(20px, 2.6cqw, 30px); }
.v-hero-maintenance-page .vmp-icon svg { width:28px; height:28px; }
.v-hero-maintenance-page .vmp-pill { display:inline-flex; align-items:center; gap:8px;
  font:600 12px var(--font); letter-spacing:.02em; color:var(--dim);
  padding:6px 13px; border-radius:999px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 3%, transparent); margin-bottom:clamp(16px, 2cqw, 22px); }
.v-hero-maintenance-page .vmp-dot { width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.v-hero-maintenance-page .vmp-h { max-width:16ch; letter-spacing:-0.03em; text-wrap:balance;
  font-size:clamp(34px, 6.2cqw, 52px); }
.v-hero-maintenance-page .vmp-sub { margin-top:clamp(14px, 1.8cqw, 18px); max-width:46ch; color:var(--dim); line-height:1.6; }
.v-hero-maintenance-page .vmp-eta { display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(22px, 3cqw, 30px); padding:10px 18px; border-radius:calc(var(--radius, 12px) * .9);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel-2, var(--panel)); }
.v-hero-maintenance-page .vmp-eta-label { font:600 11px var(--font); text-transform:uppercase; letter-spacing:.08em; color:var(--dim); }
.v-hero-maintenance-page .vmp-clock { display:inline-flex; align-items:baseline; gap:1px;
  font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.v-hero-maintenance-page .vmp-clock span { min-width:2ch; text-align:center; }
.v-hero-maintenance-page .vmp-clock i { color:var(--dim); font-style:normal; }
.v-hero-maintenance-page .vmp-eta.is-done .vmp-clock { color:var(--accent); }
.v-hero-maintenance-page .vmp-form { display:flex; width:min(420px, 100%); margin-top:clamp(22px, 3cqw, 30px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .8); overflow:hidden;
  transition:border-color 160ms linear; }
.v-hero-maintenance-page .vmp-form:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-maintenance-page .vmp-form.vmp-sent { border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.v-hero-maintenance-page .vmp-input { flex:1; min-width:0; padding:12px 16px; border:none; outline:none;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:400 14px var(--font); }
.v-hero-maintenance-page .vmp-input::placeholder { color:var(--faint); }
.v-hero-maintenance-page .vmp-submit { flex:none; padding:12px 20px; border:none; cursor:pointer; white-space:nowrap;
  background:var(--accent); color:var(--accent-text, #04121a); font:700 14px var(--font); transition:opacity 140ms linear; }
.v-hero-maintenance-page .vmp-submit:hover { opacity:.88; }
.v-hero-maintenance-page .vmp-submit:active { opacity:.8; }
.v-hero-maintenance-page .vmp-submit:focus-visible,
.v-hero-maintenance-page .vmp-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-maintenance-page .vmp-note { min-height:1.25em; margin-top:11px; font:500 12.5px var(--font); color:var(--dim); }
.v-hero-maintenance-page .vmp-note.vmp-ok { color:var(--accent); }
.v-hero-maintenance-page .vmp-note.vmp-err { color:#e5484d; }
.v-hero-maintenance-page .vmp-link { display:inline-flex; align-items:center; gap:6px; margin-top:clamp(16px, 2cqw, 22px);
  font:700 13px var(--font); color:var(--accent); text-decoration:none; cursor:pointer; transition:opacity 140ms linear; }
.v-hero-maintenance-page .vmp-link:hover { opacity:.8; }
.v-hero-maintenance-page .vmp-link svg { width:14px; height:14px; }
@container site (max-width: 560px) {
  .v-hero-maintenance-page .vmp-form { flex-direction:column; border:none; overflow:visible; gap:9px; }
  .v-hero-maintenance-page .vmp-input { border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .8);
    background:color-mix(in srgb, var(--ink) 5%, transparent); }
  .v-hero-maintenance-page .vmp-submit { border-radius:calc(var(--radius, 12px) * .8); }
}
/* v-hero-gradient-text — SB_04 drafts/hero-gradient-text. Centered launch hero: eyebrow, a two-line
   headline whose closing phrase wears the house accent gradient (.ws-grad — replaces the origin's baked
   blue/purple/pink hex so it rides the active preset), twin CTAs (the secondary "watch demo" opens a real,
   keyboard-accessible demo modal via mount) and a trust-badge row over a soft accent glow. Origin --hgt-*
   vars map to tokens: bg->--bg, heading->--ink, body->--dim, accent->--accent, border->--hair, font->--font.
   Baked fade-up entrances dropped (anims.js owns reveals); glow is static; only transform/opacity/color
   transition; container queries only; no blur/backdrop-filter. */
.v-hero-gradient-text { text-align:center; }
.v-hero-gradient-text .hgt-glow { position:absolute; top:-12%; left:50%; transform:translateX(-50%);
  width:min(900px, 130cqw); height:min(560px, 92cqw); pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 38%,
    color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent) 14%, transparent) 34%,
    color-mix(in srgb, var(--accent2, var(--accent)) 8%, transparent) 58%,
    transparent 78%); }
.v-hero-gradient-text .hgt-in { z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px, 2.2cqw, 22px); width:min(760px, 88cqw); }
.v-hero-gradient-text .ws-kick { margin-bottom:0; }
.v-hero-gradient-text .hgt-head { font-size:clamp(40px, 8cqw, 76px); letter-spacing:-0.03em;
  line-height:1.08; text-wrap:balance; }
.v-hero-gradient-text .hgt-grad { display:block; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.v-hero-gradient-text .ws-sub { max-width:46ch; }
.v-hero-gradient-text .ws-ctarow { margin-top:clamp(4px, 1cqw, 10px); }
.v-hero-gradient-text .hgt-demo { cursor:pointer; }
.v-hero-gradient-text .hgt-play { display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:color-mix(in srgb, var(--ink) 12%, transparent);
  color:var(--ink); flex-shrink:0; }
.v-hero-gradient-text .hgt-play svg { width:9px; height:9px; margin-left:1px; }
.v-hero-gradient-text .hgt-badges { display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:clamp(6px, 1.4cqw, 14px); }
.v-hero-gradient-text .hgt-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 3%, transparent); font:500 12px var(--font); color:var(--dim); }
.v-hero-gradient-text .hgt-bico { display:inline-flex; color:var(--accent); }
.v-hero-gradient-text .hgt-bico svg { width:14px; height:14px; }
@container site (max-width: 560px) {
  .v-hero-gradient-text .hgt-head { font-size:clamp(32px, 12cqw, 52px); letter-spacing:-0.025em; }
  .v-hero-gradient-text .hgt-badge { padding:6px 12px; font-size:11.5px; }
}
/* watch-demo modal — appended to the scroll stage by mount(), so its selectors are NOT scoped under
   .v-hero-gradient-text. Backdrop is a token-derived scrim (no blur); only transform/opacity/color animate. */
.hgt-modal { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:24px; background:color-mix(in srgb, var(--bg-deep, #05070c) 76%, transparent); }
.hgt-dialog { position:relative; width:min(660px, 94%); border-radius:calc(var(--radius, 12px) + 4px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); overflow:hidden;
  box-shadow:0 30px 80px color-mix(in srgb, #000 52%, transparent); }
.hgt-x { position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink);
  font:400 20px/1 var(--font); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform 140ms ease-out, color 140ms linear; }
.hgt-x:hover { transform:scale(1.06); color:var(--accent); }
.hgt-screen { position:relative; aspect-ratio:16 / 9; display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--accent) 24%, var(--panel)) 0%,
    var(--panel-2, var(--panel)) 62%); }
.hgt-bigplay { display:flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 90%, transparent); color:var(--accent-text, #04121a);
  transition:transform 160ms ease-out, opacity 160ms linear; }
.hgt-bigplay svg { width:26px; height:26px; margin-left:3px; }
.hgt-screen:hover .hgt-bigplay { transform:scale(1.07); }
.hgt-modal.is-playing .hgt-bigplay { opacity:0; transform:scale(.6); }
.hgt-scan { position:absolute; inset:0; opacity:0; transition:opacity 160ms linear;
  background:repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--ink) 6%, transparent) 3px 4px); }
.hgt-modal.is-playing .hgt-scan { opacity:1; }
.hgt-bar { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:var(--bw, 1px) solid var(--hair); background:var(--panel); }
.hgt-toggle { width:34px; height:34px; flex-shrink:0; border-radius:50%; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform 140ms ease-out; }
.hgt-toggle:hover { transform:scale(1.06); }
.hgt-toggle svg { width:14px; height:14px; }
.hgt-track { flex:1; height:5px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 14%, transparent); }
.hgt-track i { display:block; height:100%; width:22%; border-radius:99px; background:var(--accent);
  transition:width .25s linear; }
.hgt-modal.is-playing .hgt-track i { width:64%; }
.hgt-time { flex-shrink:0; font:500 11px var(--mono); color:var(--dim); }
/* hero-magazine-cover — ported from SB_04 drafts/hero-magazine-cover (a full-bleed magazine-cover opener:
   a masthead of publication + issue, a giant display headline, and a bottom strip of ruled story teasers
   over a cover photo). Reuses ws-in for the content measure and ws-h1 + gradLast for the headline. Origin
   --hmc-* vars map to theme tokens: bg->--bg, text->--ink, secondary->--dim/--faint, accent->--accent,
   divider->--hair, font->--font-head/--font. The origin's baked black left+bottom overlay is rebuilt
   theme-portably — the scrim deepens toward --bg (never a baked hex) so light text reads over a dark cover
   AND dark text reads in a light theme; no blur/backdrop-filter. The origin's fixed 'Inter' display face
   becomes the --font-head token. Full-viewport 100svh becomes a container-relative min-height. Baked
   entrance/reveal is dropped (anims.js owns entrances); only teaser hover moves (color + translate,
   never a transitioned background). The origin's dead teaser <div>s are made REAL — each is a focusable
   anchor that can carry a data-page link. Container queries only: teasers 3-col -> stacked at 560. */
.ws-hero.v-hero-magazine-cover { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(560px, 88cqh, 900px); display:flex; flex-direction:column; background:var(--bg); }
.v-hero-magazine-cover .hmc-photo { position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center top; background-repeat:no-repeat; }
.v-hero-magazine-cover .hmc-photo.ph {
  background-image:radial-gradient(ellipse 62% 82% at 72% 30%, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg) 72%); }
.v-hero-magazine-cover .hmc-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 26%,
      color-mix(in srgb, var(--bg) 32%, transparent) 54%, transparent 80%),
    linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 15%, transparent 44%); }
.v-hero-magazine-cover .hmc-in { position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  padding-top:clamp(28px, 4cqw, 54px); padding-bottom:clamp(24px, 3.4cqw, 46px); }
.v-hero-magazine-cover .hmc-masthead { display:flex; align-items:baseline; flex-wrap:wrap; gap:clamp(12px, 1.6cqw, 22px); }
.v-hero-magazine-cover .hmc-pub { font:800 clamp(12px, 1.4cqw, 15px) var(--font-head, var(--font));
  letter-spacing:0.24em; text-transform:uppercase; color:var(--accent); }
.v-hero-magazine-cover .hmc-issue { font:500 clamp(10px, 1.1cqw, 12px) var(--mono);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.v-hero-magazine-cover .hmc-headwrap { margin-top:auto; padding:clamp(40px, 6cqw, 84px) 0 0; }
.v-hero-magazine-cover .hmc-headline { max-width:15ch; line-height:1.0; letter-spacing:-0.035em;
  text-wrap:balance; font-size:clamp(2.4rem, 6.2cqw, 5.2rem); color:var(--ink); }
.v-hero-magazine-cover .hmc-teasers { display:grid; grid-template-columns:repeat(3, 1fr);
  margin-top:clamp(26px, 3.4cqw, 44px); border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-magazine-cover .hmc-teaser { display:flex; flex-direction:column; gap:8px;
  padding:clamp(14px, 1.8cqw, 22px) clamp(16px, 2cqw, 28px); text-decoration:none; cursor:pointer; }
.v-hero-magazine-cover .hmc-teaser:first-child { padding-left:0; }
.v-hero-magazine-cover .hmc-teaser + .hmc-teaser { border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-magazine-cover .hmc-tlabel { font:700 clamp(9px, 1cqw, 11px) var(--mono); letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent); }
.v-hero-magazine-cover .hmc-thead { font:500 clamp(13px, 1.4cqw, 15px)/1.4 var(--font); color:var(--ink);
  transition:color 140ms linear, transform 140ms var(--ease-pop, ease-out); }
.v-hero-magazine-cover a.hmc-teaser:hover .hmc-thead { color:var(--accent); transform:translateX(3px); }
.v-hero-magazine-cover a.hmc-teaser:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
@container site (max-width: 860px) {
  .v-hero-magazine-cover .hmc-headline { max-width:20ch; }
}
@container site (max-width: 560px) {
  .v-hero-magazine-cover .hmc-teasers { grid-template-columns:1fr; }
  .v-hero-magazine-cover .hmc-teaser { padding-left:0; padding-right:0; }
  .v-hero-magazine-cover .hmc-teaser:first-child { padding-top:0; }
  .v-hero-magazine-cover .hmc-teaser + .hmc-teaser { border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
  .v-hero-magazine-cover .hmc-headline { max-width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-magazine-cover .hmc-thead { transition:none; }
}
/* manifesto — ported from SB_04 drafts/hero-manifesto (stacked credo: solid / accent / outlined
   lines, then a short belief + CTA over a hairline). Origin baked no entrance motion and the site
   reveal system owns section entrances, so nothing animates at rest. The headline is data-real
   (sentence-split, each line styled by cadence); the outline uses -webkit-text-stroke tinted from
   --ink so it reads on light and dark themes alike. */
.v-hero-manifesto { padding:112px 0 100px; }
.v-hero-manifesto .ws-kick { margin-bottom:22px; }
.v-hero-manifesto .v-man-head { margin:0; font:900 clamp(44px, 11cqw, 128px)/1.02 var(--font-head, var(--font));
  letter-spacing:-0.05em; }
.v-hero-manifesto .v-man-line { display:block; }
.v-hero-manifesto .v-man-line.accent { color:var(--accent); }
.v-hero-manifesto .v-man-line.stroke { color:transparent;
  -webkit-text-stroke:2px color-mix(in srgb, var(--ink) 68%, transparent);
  text-stroke:2px color-mix(in srgb, var(--ink) 68%, transparent); }
.v-hero-manifesto .v-man-foot { display:flex; align-items:center; gap:clamp(24px, 4cqw, 48px);
  margin-top:clamp(44px, 6cqw, 68px); padding-top:38px; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-manifesto .v-man-credo { margin:0; max-width:46ch; }
.v-hero-manifesto .v-man-foot .ws-btn { flex-shrink:0; }
@container site (max-width:560px) {
  .v-hero-manifesto { padding:88px 0 76px; }
  .v-hero-manifesto .v-man-head { letter-spacing:-0.035em; }
  .v-hero-manifesto .v-man-foot { flex-direction:column; align-items:flex-start; gap:24px; }
}
/* v-hero-minimal-cta — SB_04/drafts/hero-minimal-cta · ultra-minimal centered CTA fold: giant typographic headline, one primary button, maximum whitespace */
.ws-hero.v-hero-minimal-cta { padding:clamp(96px, 16cqw, 168px) 0; }
.v-hero-minimal-cta .hmin { width:min(680px, 88cqw); display:flex; flex-direction:column; align-items:center; }
.v-hero-minimal-cta .hmin-badge { margin-bottom:clamp(22px, 3cqw, 34px); text-transform:uppercase; letter-spacing:.08em; }
.v-hero-minimal-cta .hmin-arw { display:inline-flex; }
.v-hero-minimal-cta .hmin-arw svg { width:12px; height:12px; }
.v-hero-minimal-cta .hmin-h1 { margin:0; font-weight:900; line-height:1.0; letter-spacing:-0.05em; font-size:clamp(48px, 11cqw, 104px); }
.v-hero-minimal-cta .hmin-sub { margin-top:clamp(18px, 2.4cqw, 26px); max-width:34ch; font-size:clamp(15px, 1.9cqw, 19px); }
.v-hero-minimal-cta .hmin-cta { margin-top:clamp(30px, 4cqw, 42px); }
.v-hero-minimal-cta .hmin-cta .ws-btn { padding:15px 34px; font-size:15px; border-radius:calc(var(--radius, 12px) * .85); }
@container site (max-width:560px) {
  .ws-hero.v-hero-minimal-cta { padding:clamp(60px, 18cqw, 92px) 0; }
  .v-hero-minimal-cta .hmin-h1 { font-size:clamp(40px, 15cqw, 62px); }
  .v-hero-minimal-cta .hmin-cta .ws-btn { padding:14px 28px; }
}
/* minimal light — ported from SB_04 drafts/hero-minimal-light (airy center-stacked hero:
   announcement pill, large headline, dark-solid CTA pair, trust-logo strip). Theme-tokened so it
   rides the site palette instead of the origin's baked light hex; the baked entrance (hml-rise) is
   dropped since anims.js owns section entrances, and only hover/interaction motion remains. */
.v-hero-minimal-light .ws-in.center { display:flex; flex-direction:column; align-items:center; }
.v-hero-minimal-light .ws-h1 { max-width:16ch; letter-spacing:-0.03em; }
.v-hero-minimal-light .ws-sub { max-width:52ch; }
/* announcement pill — a subtle elevated chip with a solid-accent tag */
.v-hero-minimal-light .hml-pill { display:inline-flex; align-items:center; gap:9px; margin-bottom:30px;
  padding:5px 14px 5px 6px; border-radius:99px; border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  color:var(--dim); font:500 12px var(--font); cursor:pointer;
  transition:transform 140ms var(--ease-pop, ease-out), color 140ms linear; }
.v-hero-minimal-light .hml-pill:hover { transform:translateY(-1px); color:var(--ink); }
.v-hero-minimal-light .hml-pill-tag { padding:2px 8px; border-radius:99px; background:var(--accent);
  color:var(--accent-text, #fff); font:700 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.v-hero-minimal-light .hml-pill-go { display:flex; color:var(--accent); }
.v-hero-minimal-light .hml-pill-go svg { width:13px; height:13px; }
/* dark-solid primary button — the origin's signature; theme-tokened so it inverts with the palette */
.v-hero-minimal-light .ws-ctarow { margin-top:32px; }
.v-hero-minimal-light .ws-btn.primary { background:var(--ink); background-image:none; color:var(--bg); }
.v-hero-minimal-light .ws-btn.ghost { background:var(--panel); }
/* trust strip — data-driven wordmarks */
.v-hero-minimal-light .hml-trust { margin-top:52px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.v-hero-minimal-light .hml-trust-label { font:500 11px var(--font); color:var(--faint); letter-spacing:.02em; }
.v-hero-minimal-light .hml-trust-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 26px; }
.v-hero-minimal-light .hml-logo { font:700 13px var(--font-head, var(--font)); letter-spacing:-0.01em;
  color:color-mix(in srgb, var(--ink) 42%, transparent); transition:color 140ms linear; }
.v-hero-minimal-light .hml-logo:hover { color:var(--ink); }
@container site (max-width:560px) {
  .v-hero-minimal-light .ws-h1 { max-width:18ch; }
  .v-hero-minimal-light .ws-ctarow { width:100%; }
  .v-hero-minimal-light .hml-trust { margin-top:40px; }
  .v-hero-minimal-light .hml-trust-row { gap:10px 18px; }
}
/* Minimal Dark — an airy, monochrome statement fold: accent eyebrow, plain headline,
   a squared outline CTA, and a closing hairline. Reads dark on the default theme,
   adapts to any theme via tokens. (SB_04 · drafts/hero-minimal-dark) */
.v-hero-minimal-dark { padding:clamp(96px, 18cqw, 176px) 0; }
.v-hero-minimal-dark .ws-in { max-width:min(720px, 88cqw); }
.v-hero-minimal-dark .ws-kick {
  font:500 11px/1 var(--font); letter-spacing:0.18em; color:var(--accent);
  margin-bottom:clamp(26px, 4cqw, 40px); }
.v-hero-minimal-dark .ws-h1 {
  font-weight:600; letter-spacing:-0.03em; line-height:1.05; max-width:15ch; text-wrap:balance; }
.v-hero-minimal-dark .ws-sub { margin-top:22px; max-width:46ch; }
.v-hero-minimal-dark .ws-ctarow { margin-top:clamp(30px, 5cqw, 46px); }
.v-hero-minimal-dark .ws-btn.ghost {
  border-radius:0; padding:14px 30px; font-weight:500; letter-spacing:0.01em;
  background:transparent; border-color:color-mix(in srgb, var(--ink) 16%, transparent); }
.v-hero-minimal-dark .ws-btn.ghost:hover {
  border-color:color-mix(in srgb, var(--ink) 42%, transparent); color:var(--ink); }
.v-hero-minimal-dark .mnd-rule {
  margin:clamp(46px, 8cqw, 72px) 0 0; border:0; border-top:var(--bw, 1px) solid var(--hair); width:100%; }
@container site (max-width:560px) {
  .v-hero-minimal-dark { padding:clamp(64px, 20cqw, 96px) 0; }
  .v-hero-minimal-dark .ws-h1 { max-width:none; }
  .v-hero-minimal-dark .ws-btn.ghost { width:100%; justify-content:center; }
}
/* hero-newsletter-inline — ported from SB_04 drafts/hero-newsletter-inline: a centered newsletter
   opener (eyebrow, headline, subtext) with a REAL inline pill email field. The mount validates the
   address, flips the pill to an accent "you are in" confirmation, and shows an inline error note on a
   bad address — nothing is posted anywhere. An avatar social-proof pile sits below. Origin --hni-*
   vars -> theme tokens (bg/input-bg->--panel-2, text->--ink, dim->--dim/--faint, border->--hair,
   accent->--accent, radius/font->--radius/--font). Baked entrance dropped (anims.js owns it); only
   focus/hover + the submit reveal move. Pill collapses to a stacked field set by container query. */
.v-hero-newsletter-inline .ws-in.narrow { width:min(600px, 88cqw); }
.v-hero-newsletter-inline .ws-sub { margin-top:16px; }
.v-hero-newsletter-inline .hni-form { display:flex; gap:0; width:min(440px, 100%); margin:30px auto 0;
  background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair); border-radius:99px; overflow:hidden;
  transition:box-shadow 160ms ease-out; }
.v-hero-newsletter-inline .hni-form:focus-within { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.v-hero-newsletter-inline .hni-input { flex:1; min-width:0; background:transparent; border:none; outline:none;
  padding:13px 20px; font:400 14px var(--font); color:var(--ink); }
.v-hero-newsletter-inline .hni-input::placeholder { color:var(--faint); }
.v-hero-newsletter-inline .hni-submit { flex-shrink:0; margin:4px; border-radius:99px; }
.v-hero-newsletter-inline .hni-confirm { display:flex; align-items:center; justify-content:center; gap:9px;
  width:min(440px, 100%); margin:30px auto 0; padding:12px 20px; border-radius:99px;
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color:var(--accent); font:600 13.5px var(--font); }
.v-hero-newsletter-inline .hni-confirm i { display:flex; }
.v-hero-newsletter-inline .hni-confirm svg { width:16px; height:16px; }
.v-hero-newsletter-inline .hni-note { margin:14px 0 0; text-align:center; font:400 12.5px var(--font); color:var(--faint); }
.v-hero-newsletter-inline .hni-note.bad { color:#e07a4f; font-weight:600; }
.v-hero-newsletter-inline .hni-form[hidden], .v-hero-newsletter-inline .hni-confirm[hidden],
.v-hero-newsletter-inline .hni-note[hidden] { display:none; }
.v-hero-newsletter-inline .hni-proof { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:26px; }
.v-hero-newsletter-inline .hni-avatars { display:flex; }
.v-hero-newsletter-inline .hni-av { width:28px; height:28px; margin-right:-8px; border-radius:50%;
  border:2px solid var(--bg); display:flex; align-items:center; justify-content:center;
  font:800 8.5px var(--font); color:var(--ink);
  background:color-mix(in srgb, var(--accent) calc(74% - var(--ai, 0) * 13%), var(--panel-2)); }
.v-hero-newsletter-inline .hni-proof-label { font:500 13px var(--font); color:var(--dim); }
@container site (max-width: 560px) {
  .v-hero-newsletter-inline .hni-form { flex-direction:column; gap:10px; background:transparent; border:none;
    border-radius:14px; overflow:visible; }
  .v-hero-newsletter-inline .hni-form:focus-within { box-shadow:none; border:none; }
  .v-hero-newsletter-inline .hni-input { background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair);
    border-radius:12px; text-align:center; }
  .v-hero-newsletter-inline .hni-input:focus { border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
  .v-hero-newsletter-inline .hni-submit { margin:0; width:100%; justify-content:center; border-radius:12px; }
}
/* Mission Statement — SB_04 drafts/hero-mission-statement. Centered two-tone editorial
   belief statement (plain text + accent italic head-font phrases) over a one-line note
   and an overlapping team avatar row. Origin's 8 --hms-* vars mapped to theme tokens;
   Cormorant serif italic -> --font-head italic (serif fallback); avatar rainbow -> a
   monochrome accent-mix stack; baked entrance dropped (anims.js owns entrances). */
.ws-hero.v-hero-mission-statement .hms { display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(22px, 3cqw, 34px); max-width:860px; }
.ws-hero.v-hero-mission-statement .hms-statement { margin:0; font:700 clamp(30px, 5.4cqw, 60px)/1.2 var(--font-head, var(--font)); letter-spacing:-0.03em; color:var(--ink); text-wrap:balance; }
.ws-hero.v-hero-mission-statement .hms-statement em { font-family:var(--font-head, Georgia, 'Times New Roman', serif); font-style:italic; font-weight:600; color:var(--accent); }
.ws-hero.v-hero-mission-statement .hms-sub { max-width:46ch; }
.ws-hero.v-hero-mission-statement .hms-team { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; }
.ws-hero.v-hero-mission-statement .hms-avatars { display:flex; }
.ws-hero.v-hero-mission-statement .hms-av { width:34px; height:34px; margin-left:-9px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 10.5px/1 var(--font); letter-spacing:0.02em; color:var(--ink); border:2px solid var(--bg); background:color-mix(in srgb, var(--accent) 34%, var(--panel-2)); }
.ws-hero.v-hero-mission-statement .hms-av:first-child { margin-left:0; }
.ws-hero.v-hero-mission-statement .hms-av.a1 { background:color-mix(in srgb, var(--accent) 20%, var(--panel-2)); }
.ws-hero.v-hero-mission-statement .hms-av.a2 { background:color-mix(in srgb, var(--accent) 48%, var(--panel-2)); }
.ws-hero.v-hero-mission-statement .hms-av.a3 { background:color-mix(in srgb, var(--accent) 62%, var(--panel-2)); }
.ws-hero.v-hero-mission-statement .hms-av.count { background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--dim); font-size:9.5px; font-weight:700; }
.ws-hero.v-hero-mission-statement .hms-team-text { font:500 12px var(--font); color:var(--dim); }
@container site (max-width:560px) {
  .ws-hero.v-hero-mission-statement .hms { gap:clamp(18px, 5cqw, 26px); }
  .ws-hero.v-hero-mission-statement .hms-sub { max-width:34ch; }
}
/* hero-neon-accent — ported from SB_04 drafts/hero-neon-accent (centered minimal fold:
   accent eyebrow, headline whose closing word wears a glowing neon-underline accent, sub,
   one CTA). The origin's 8 --hna-* vars fold onto theme tokens; its box-shadow "neon" glow
   is rebuilt from --accent via color-mix and kept STATIC (no transition, no blur/backdrop-
   filter). Reuses the base ws-kick / ws-h1 / ws-sub / ws-ctarow chrome; only the glowing
   accent word is bespoke. Glow + underline sized in em so they track the clamped headline.
   Even 22px centered rhythm echoes the origin's tight minimal stack. */
.v-hero-neon-accent .ws-in.center { display:flex; flex-direction:column; align-items:center; gap:22px; }
.v-hero-neon-accent .ws-in.center .ws-kick { margin:0; }
.v-hero-neon-accent .ws-in.center .ws-sub { margin:0; }
.v-hero-neon-accent .ws-in.center .ws-ctarow { margin:8px 0 0; }
.v-hero-neon-accent .hna-headline { max-width:16ch; letter-spacing:-0.035em; }
.v-hero-neon-accent .hna-neon { position:relative; display:inline-block; color:var(--accent); }
.v-hero-neon-accent .hna-neon::after { content:''; position:absolute; left:0; right:0; bottom:0.04em; height:0.05em;
  border-radius:2px; background:var(--accent);
  box-shadow:0 0 0.18em color-mix(in srgb, var(--accent) 48%, transparent),
             0 0 0.42em color-mix(in srgb, var(--accent) 30%, transparent); }
@container site (max-width: 560px) {
  .v-hero-neon-accent .ws-in.center { gap:18px; }
  .v-hero-neon-accent .hna-headline { max-width:100%; }
}
/* open graph — SB_04 drafts/hero-open-graph. A framed "OG image" share-preview card:
   copy-link chrome bar, logo wordmark, headline + sub, and a metric-pill band.
   Origin --hog-* vars map to theme tokens; baked-in look kept, entrances left to anims.js;
   only transform/opacity/color transitions; container queries, no blur. */
.v-hero-open-graph .ws-kick { margin-bottom:26px; }
.og-card { width:min(720px, 100%); margin:0 auto; aspect-ratio:16 / 9; display:flex; flex-direction:column;
  text-align:left; border:var(--bw, 1px) solid var(--hair); border-radius:16px; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad, none); box-shadow:var(--elev, 0 0 #0000); }
.og-chrome { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 14px;
  border-bottom:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--bg) 55%, transparent); }
.og-glb { display:inline-flex; flex:none; width:15px; height:15px; color:var(--faint); }
.og-glb svg { width:15px; height:15px; }
.og-url { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:500 11.5px var(--mono); color:var(--dim); letter-spacing:.02em; }
.og-copy { flex:none; margin-left:auto; display:inline-flex; align-items:center; padding:5px 12px;
  border:var(--bw, 1px) solid var(--hair); border-radius:99px; background:none; cursor:pointer;
  font:600 10px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--faint);
  transition:color .16s ease, border-color .16s ease; }
.og-copy:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 40%, transparent); }
.og-copy.ok { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.og-copy.ok .og-clabel::before { content:'\2713\00a0'; }
.og-inner { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:14px; padding:clamp(24px, 4.2cqw, 42px); }
.og-logo { font:800 clamp(16px, 2.1cqw, 22px) var(--font-head, var(--font)); color:var(--accent); letter-spacing:-0.03em; }
.og-card .ws-h1.og-h { font-size:clamp(23px, 4.4cqw, 40px); letter-spacing:-0.03em; line-height:1.08; }
.og-card .ws-sub.og-sub { margin:0; max-width:50ch; }
.og-band { display:flex; align-items:center; flex-wrap:wrap; gap:9px 22px;
  padding:14px clamp(24px, 4.2cqw, 42px); border-top:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 4%, transparent); }
.og-pill { font:500 12px var(--font); color:var(--dim); }
.og-pill b { color:var(--ink); font-weight:700; }
.v-hero-open-graph .ws-ctarow { justify-content:center; margin-top:30px; }
@container site (max-width: 560px) {
  .og-card { aspect-ratio:auto; }
  .og-inner { padding:24px 20px; gap:12px; }
  .og-band { padding:13px 20px; gap:8px 16px; }
}
/* mobile-app — centered pitch + tap-to-focus phone trio + feature strip */
.v-hero-mobile-app .ws-in.center { display:flex; flex-direction:column; align-items:center; }
.v-hero-mobile-app .ws-h1 { max-width:17ch; letter-spacing:-0.03em; }
.v-hero-mobile-app .ws-sub { max-width:52ch; }
.v-hero-mobile-app .ws-hma-stage { width:100%; margin-top:clamp(38px, 5cqw, 62px); padding-top:clamp(14px, 2cqw, 30px); }
.v-hero-mobile-app .ws-hma-phones { display:flex; align-items:flex-end; justify-content:center; }
.v-hero-mobile-app .ws-hma-phone { --pw:186px; -webkit-appearance:none; appearance:none; border:0; margin:0; padding:0; background:none; color:inherit; cursor:pointer; position:relative; flex:0 0 auto; width:var(--pw); font-size:calc(var(--pw) * 0.058); transform-origin:bottom center; transition:transform .34s cubic-bezier(.2,.7,.2,1), opacity .3s ease; outline:none; }
.v-hero-mobile-app .ws-hma-phone.is-center { z-index:2; opacity:1; transform:translateX(0) rotate(0deg) scale(1.08); }
.v-hero-mobile-app .ws-hma-phone.is-left { z-index:1; opacity:.6; transform:translateX(26%) rotate(-7deg) scale(.9); }
.v-hero-mobile-app .ws-hma-phone.is-right { z-index:1; opacity:.6; transform:translateX(-26%) rotate(7deg) scale(.9); }
.v-hero-mobile-app .ws-hma-phone:not(.is-center):hover { opacity:.85; }
.v-hero-mobile-app .ws-hma-phone:focus-visible .ws-hma-shell { box-shadow:0 0 0 2px var(--accent), 0 2em 4em -1em rgba(0,0,0,.45); }
.v-hero-mobile-app .ws-hma-shell { display:block; position:relative; width:100%; aspect-ratio:10 / 20.4; border-radius:2.6em; border:0.2em solid var(--hair); background:var(--panel); overflow:hidden; box-shadow:0 2em 4em -1em rgba(0,0,0,.45); }
.v-hero-mobile-app .ws-hma-phone.is-center .ws-hma-shell { border-color:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-hero-mobile-app .ws-hma-notch { position:absolute; top:0.7em; left:50%; transform:translateX(-50%); width:34%; height:1em; background:var(--bg); border-radius:0 0 0.8em 0.8em; z-index:3; }
.v-hero-mobile-app .ws-hma-screen { position:absolute; inset:2.2em 0.25em 0.25em; border-radius:1.9em 1.9em 2.3em 2.3em; background:linear-gradient(180deg, var(--panel-2), var(--panel)); display:flex; flex-direction:column; padding:0 1em 1em; overflow:hidden; }
.v-hero-mobile-app .ws-hma-status { display:flex; align-items:center; justify-content:space-between; padding:0.7em 0.35em 0.55em; }
.v-hero-mobile-app .ws-hma-status i { font:600 0.92em/1 var(--font); color:var(--ink); font-style:normal; }
.v-hero-mobile-app .ws-hma-status em { width:2.4em; height:0.68em; border-radius:0.4em; background:color-mix(in srgb, var(--ink) 24%, transparent); }
.v-hero-mobile-app .ws-hma-appbar { display:flex; flex-direction:column; gap:0.18em; padding:0.15em 0.35em 0.75em; }
.v-hero-mobile-app .ws-hma-appbar b { font:800 1.55em/1 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; }
.v-hero-mobile-app .ws-hma-appbar i { font:600 0.78em/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); font-style:normal; }
.v-hero-mobile-app .ws-hma-card { border-radius:1.3em; padding:1em; background:color-mix(in srgb, var(--accent) 13%, var(--panel-2)); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); display:flex; flex-direction:column; gap:0.85em; }
.v-hero-mobile-app .ws-hma-metric { display:flex; align-items:baseline; gap:0.55em; }
.v-hero-mobile-app .ws-hma-metric b { font:800 2.5em/0.9 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.03em; }
.v-hero-mobile-app .ws-hma-metric i { font:500 0.85em/1.2 var(--font); color:var(--dim); font-style:normal; }
.v-hero-mobile-app .ws-hma-bars { display:flex; align-items:flex-end; gap:0.42em; height:3.3em; }
.v-hero-mobile-app .ws-hma-bars u { flex:1; height:var(--h, 50%); border-radius:0.35em 0.35em 0.18em 0.18em; background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--panel))); }
.v-hero-mobile-app .ws-hma-rows { display:flex; flex-direction:column; gap:0.6em; margin-top:0.95em; }
.v-hero-mobile-app .ws-hma-r { display:flex; align-items:center; gap:0.75em; }
.v-hero-mobile-app .ws-hma-r i { width:1.7em; height:1.7em; flex:0 0 auto; border-radius:0.62em; background:color-mix(in srgb, var(--ink) 11%, transparent); }
.v-hero-mobile-app .ws-hma-r b { font:600 0.95em/1 var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-hero-mobile-app .ws-hma-feats { list-style:none; margin:clamp(34px, 4.6cqw, 54px) 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:0; max-width:820px; }
.v-hero-mobile-app .ws-hma-feat { display:flex; align-items:center; gap:9px; padding:10px 22px; font:500 13px var(--font); color:var(--dim); white-space:nowrap; border-right:var(--bw, 1px) solid var(--hair); }
.v-hero-mobile-app .ws-hma-feat:last-child { border-right:0; }
.v-hero-mobile-app .ws-hma-ficon { display:flex; color:var(--accent); }
.v-hero-mobile-app .ws-hma-ficon svg { width:16px; height:16px; }
@container site (max-width: 860px) {
  .v-hero-mobile-app .ws-hma-phone { --pw:152px; }
}
@container site (max-width: 560px) {
  .v-hero-mobile-app .ws-hma-phone { --pw:122px; }
  .v-hero-mobile-app .ws-hma-phone.is-left { transform:translateX(32%) rotate(-8deg) scale(.86); }
  .v-hero-mobile-app .ws-hma-phone.is-right { transform:translateX(-32%) rotate(8deg) scale(.86); }
  .v-hero-mobile-app .ws-hma-feat { padding:8px 14px; font-size:12px; }
}
/* noise-grain — ported from SB_04 drafts/hero-noise-grain (dark centered statement under a
   film-grain wash). Theme-tokened so it rides the site palette instead of the origin's baked
   dark hex. The baked entrance (hng-rise) is dropped since anims.js owns section entrances; the
   grain shimmer is ambient identity motion, driven by transform (not background-position) so it
   stays GPU-cheap and honours reduced-motion. Grain is a self-contained feTurbulence data-URI,
   no external image. */
.ws-hero.v-hero-noise-grain { position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg); padding-block:clamp(76px, 12cqw, 136px); }
.v-hero-noise-grain::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 48% at 50% 42%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 64%),
    radial-gradient(ellipse 120% 60% at 50% 108%, color-mix(in srgb, var(--ink) 10%, transparent), transparent 60%); }
.v-hero-noise-grain .ws-grain { position:absolute; inset:-50%; width:200%; height:200%; z-index:1;
  pointer-events:none; opacity:.72; mix-blend-mode:overlay; background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='hng-n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23hng-n)'/%3E%3C/svg%3E");
  animation:ws-hng-grain 0.5s steps(4) infinite; }
@keyframes ws-hng-grain {
  0%, 100% { transform:translate3d(0, 0, 0); }
  25% { transform:translate3d(-4%, 3%, 0); }
  50% { transform:translate3d(3%, -4%, 0); }
  75% { transform:translate3d(-2%, 2%, 0); }
}
.v-hero-noise-grain .ws-ngin { position:relative; z-index:2; max-width:720px; }
.v-hero-noise-grain .ws-badge svg { width:13px; height:13px; }
@media (prefers-reduced-motion: reduce) {
  .v-hero-noise-grain .ws-grain { animation:none; }
}
@container site (max-width: 560px) {
  .ws-hero.v-hero-noise-grain { padding-block:clamp(56px, 16cqw, 88px); }
}
/* hero-meridian — ported from SB_04 drafts/hero-meridian (time-of-day adaptive hero: sky
   gradient, accent, orb colour/position and star density interpolate across a 24h keyframe set
   driven by the visitor's clock; a glass panel scrubs or plays the whole day). The sky/orb/star
   hues are the component's signature palette (aesthetic time-of-day colours — the semantic-hue
   exception) set live on --vm-* by mount(); the stage is permanently a dark sky, so chrome ink and
   hairlines are fixed light (no theme token expresses "on-dark"). backdrop-filter dropped per house
   rules (solid glass instead); entrance motion belongs to anims.js so only ambient star-twinkle and
   hover run at rest, and nothing transitions a background — mount() drives every palette shift. */
.v-hero-meridian {
  --vm-ink:#f4f5fb; --vm-line:color-mix(in srgb, #f4f5fb 16%, transparent);
  --vm-panel:color-mix(in srgb, #f4f5fb 9%, transparent);
  --vm-sky-top:#04050d; --vm-sky-bot:#0c1024; --vm-accent:#8b93ff; --vm-orb:#e9edff;
  --vm-glow:rgba(180,190,255,.30); --vm-horizon:rgba(70,80,160,.25); --vm-star:.95;
  --vm-orb-x:12%; --vm-orb-y:30%; --vm-scrub:0%;
  color:var(--vm-ink); }
.ws-hero.v-hero-meridian { padding:0; min-height:clamp(520px, 82cqh, 720px);
  display:flex; align-items:center; background:var(--vm-sky-top); }
.v-hero-meridian .vm-sky { position:absolute; inset:0; z-index:0;
  background:linear-gradient(to bottom, var(--vm-sky-top) 0%, var(--vm-sky-bot) 100%); }
.v-hero-meridian .vm-horizon { position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(to top, var(--vm-horizon), transparent); }
.v-hero-meridian .vm-stars { position:absolute; inset:0 0 25% 0; opacity:var(--vm-star); }
.v-hero-meridian .vm-star { position:absolute; border-radius:50%; background:var(--vm-ink);
  animation:vm-twinkle var(--tw, 4s) ease-in-out infinite; animation-delay:var(--td, 0s); }
@keyframes vm-twinkle { 0%, 100% { opacity:.15; } 50% { opacity:.95; } }
.v-hero-meridian .vm-orb { position:absolute; z-index:0; left:var(--vm-orb-x); bottom:var(--vm-orb-y);
  width:clamp(64px, 8cqw, 108px); aspect-ratio:1; margin-left:calc(clamp(64px, 8cqw, 108px) / -2);
  border-radius:50%; background:var(--vm-orb);
  box-shadow:0 0 60px 18px var(--vm-glow), 0 0 160px 60px var(--vm-glow); }
.v-hero-meridian .vm-orb.is-moon { box-shadow:inset -14px 8px 0 rgba(10,12,30,.18), 0 0 50px 14px var(--vm-glow); }
.v-hero-meridian .vm-scrim { position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(4,5,13,.72) 0%, rgba(4,5,13,.35) 52%, rgba(4,5,13,0) 100%); }
.v-hero-meridian .vm-in { position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(2rem, 5cqw, 5rem); align-items:end; }
.v-hero-meridian .vm-eyebrow { color:var(--vm-accent); margin-bottom:18px; }
.v-hero-meridian .vm-h1 { color:var(--vm-ink); text-wrap:balance; }
.v-hero-meridian .vm-h1 .ws-grad { background:none; color:var(--vm-accent); -webkit-text-fill-color:var(--vm-accent); }
.v-hero-meridian .vm-sub { color:color-mix(in srgb, var(--vm-ink) 72%, transparent); margin-top:16px; max-width:34em; }
.v-hero-meridian .ws-ctarow { margin-top:26px; }
.v-hero-meridian .ws-btn.ghost { border-color:var(--vm-line); color:var(--vm-ink); background:transparent; }
.v-hero-meridian .ws-btn.ghost:hover { border-color:var(--vm-accent); color:var(--vm-accent); }
.v-hero-meridian .vm-clock { align-self:end; background:var(--vm-panel); border:1px solid var(--vm-line);
  border-radius:16px; padding:clamp(1.1rem, 2cqw, 1.6rem); }
.v-hero-meridian .vm-clock-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.v-hero-meridian .vm-time { font:700 clamp(1.7rem, 2.6cqw, 2.2rem)/1 var(--font-head, var(--font));
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--vm-ink); }
.v-hero-meridian .vm-phase { font:600 .78rem/1 var(--font); letter-spacing:.16em; text-transform:uppercase;
  color:var(--vm-accent); white-space:nowrap; }
.v-hero-meridian .vm-scrub-label { display:block; }
.v-hero-meridian .vm-scrub-label span { display:block; margin-bottom:.55rem;
  font:400 .78rem var(--font); color:color-mix(in srgb, var(--vm-ink) 68%, transparent); }
.v-hero-meridian .vm-scrub { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px;
  cursor:pointer; display:block;
  background:linear-gradient(to right, var(--vm-accent) 0%, var(--vm-accent) var(--vm-scrub), var(--vm-line) var(--vm-scrub)); }
.v-hero-meridian .vm-scrub::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px;
  border-radius:50%; background:var(--vm-ink); border:2px solid var(--vm-accent); box-shadow:0 0 12px var(--vm-glow); cursor:grab; }
.v-hero-meridian .vm-scrub::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--vm-ink);
  border:2px solid var(--vm-accent); box-shadow:0 0 12px var(--vm-glow); cursor:grab; }
.v-hero-meridian .vm-clock-actions { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:1rem; }
.v-hero-meridian .vm-play, .v-hero-meridian .vm-live { display:inline-flex; align-items:center; gap:.5em;
  background:transparent; border:1px solid var(--vm-line); color:color-mix(in srgb, var(--vm-ink) 68%, transparent);
  border-radius:999px; font:600 .78rem/1 var(--font); letter-spacing:.06em; padding:.6em 1.2em; cursor:pointer;
  transition:color .2s ease, border-color .2s ease; }
.v-hero-meridian .vm-play:hover, .v-hero-meridian .vm-live:hover { color:var(--vm-ink); border-color:var(--vm-ink); }
.v-hero-meridian .vm-live[aria-pressed="true"] { color:var(--vm-accent); border-color:var(--vm-accent); }
.v-hero-meridian .vm-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.v-hero-meridian .vm-live[aria-pressed="true"] .vm-dot { animation:vm-pulse 2s ease-in-out infinite; }
@keyframes vm-pulse { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
.v-hero-meridian .vm-play:focus-visible, .v-hero-meridian .vm-live:focus-visible,
.v-hero-meridian .vm-scrub:focus-visible { outline:2px solid var(--vm-accent); outline-offset:3px; }
@container site (max-width: 860px) {
  .v-hero-meridian .vm-in { grid-template-columns:minmax(0, 1fr); align-items:start; }
  .v-hero-meridian .vm-clock { max-width:440px; }
}
@container site (max-width: 560px) {
  .ws-hero.v-hero-meridian { min-height:0; padding:96px 0 72px; }
  .v-hero-meridian .vm-clock { max-width:none; }
  .v-hero-meridian .vm-clock-row { flex-wrap:wrap; row-gap:.2rem; }
  .v-hero-meridian .ws-ctarow .ws-btn { flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-meridian .vm-star { animation:none; opacity:.6; }
  .v-hero-meridian .vm-live[aria-pressed="true"] .vm-dot { animation:none; }
}
/* v-hero-parallax-layers — centered message over depth layers (dotted grid + floating stat cards);
   real parallax driven from mount(): pointer + scroll translate each [data-d] layer. SB_04 · drafts/hero-parallax-layers */
.ws-hero.v-hero-parallax-layers { padding:0; }
.v-hero-parallax-layers .hpl-stage { position:relative; min-height:clamp(468px, 72cqh, 640px); display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; }
.v-hero-parallax-layers .hpl-stage::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, var(--accent-fill, rgba(124,196,255,0.12)), transparent 62%); }
.v-hero-parallax-layers .hpl-lyr { position:absolute; will-change:transform; pointer-events:none; }
.v-hero-parallax-layers .hpl-grid { inset:-11%; z-index:0;
  background-image:radial-gradient(var(--hair) 1px, transparent 1px); background-size:34px 34px; opacity:.6;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 30%, transparent 76%);
  mask-image:radial-gradient(circle at 50% 42%, #000 30%, transparent 76%); }
.v-hero-parallax-layers .hpl-cards { inset:0; z-index:1; }
.v-hero-parallax-layers .hpl-card { position:absolute; will-change:transform; }
.v-hero-parallax-layers .hpl-cardin { display:flex; flex-direction:column; gap:3px; padding:13px 18px;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); box-shadow:var(--elev); }
.v-hero-parallax-layers .hpl-cardin b { font-family:var(--font-head, var(--font)); font-size:22px; font-weight:800;
  letter-spacing:-.02em; line-height:1.15; color:var(--ink); }
.v-hero-parallax-layers .hpl-cardin i { font-style:normal; font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--dim); }
.v-hero-parallax-layers .hpl-card.p1 { top:14%; left:5%; }
.v-hero-parallax-layers .hpl-card.p1 .hpl-cardin { transform:rotate(-3deg); }
.v-hero-parallax-layers .hpl-card.p2 { top:21%; right:6%; }
.v-hero-parallax-layers .hpl-card.p2 .hpl-cardin { transform:rotate(2.5deg); }
.v-hero-parallax-layers .hpl-card.p3 { bottom:15%; left:11%; }
.v-hero-parallax-layers .hpl-card.p3 .hpl-cardin { transform:rotate(-1.5deg); }
.v-hero-parallax-layers .hpl-inner { position:relative; z-index:2; padding:40px 24px; }
@container site (max-width:860px) {
  .v-hero-parallax-layers .hpl-card.p1 { top:8%; left:3%; }
  .v-hero-parallax-layers .hpl-card.p2 { top:9%; right:3%; }
  .v-hero-parallax-layers .hpl-card.p3 { bottom:9%; left:5%; }
}
@container site (max-width:560px) {
  .v-hero-parallax-layers .hpl-stage { min-height:clamp(440px, 84cqh, 560px); }
  .v-hero-parallax-layers .hpl-cardin { padding:9px 12px; }
  .v-hero-parallax-layers .hpl-cardin b { font-size:16px; }
  .v-hero-parallax-layers .hpl-card.p1 { top:4%; left:2%; }
  .v-hero-parallax-layers .hpl-card.p2 { top:5%; right:2%; }
  .v-hero-parallax-layers .hpl-card.p3 { bottom:5%; left:4%; }
  .v-hero-parallax-layers .hpl-inner { padding:30px 16px; }
}
/* hero-noise-texture — ported from SB_04 drafts/hero-noise-texture (editorial dark fold:
   emphasis-serif headline, twin CTAs, a hairline rule, and a divided proof-stat row, all
   under a fine film-grain overlay). The grain is an inline feTurbulence data-URI so it ships
   with the CSS (no external asset) and reads on either theme via mix-blend overlay. Theme
   tokens drive color; section entrances belong to the reveal system (anims.js) so only the
   CTA hover moves at rest. */
.v-hero-noise-texture { position:relative; overflow:hidden; }
.v-hero-noise-texture .hnt-grain { position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0.75; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px; }
.v-hero-noise-texture .ws-in { z-index:1; }
.v-hero-noise-texture .hnt-wrap { max-width:680px; }
.v-hero-noise-texture .hnt-em { font-family:Georgia, "Times New Roman", var(--font-head, serif);
  font-style:italic; font-weight:400; letter-spacing:-0.01em; }
.v-hero-noise-texture .ws-sub { margin-top:20px; }
.v-hero-noise-texture .ws-ctarow { margin-top:30px; }
.v-hero-noise-texture .hnt-rule { height:1px; background:var(--hair); margin:52px 0 0; }
.v-hero-noise-texture .hnt-stats { margin-top:44px; }
@container site (max-width:560px) {
  .v-hero-noise-texture .hnt-stats { flex-direction:column; gap:26px; align-items:flex-start; }
  .v-hero-noise-texture .hnt-stats .ws-hstat { padding:0; align-items:flex-start; text-align:left; }
  .v-hero-noise-texture .hnt-stats .ws-hstat + .ws-hstat { border-left:none; }
}
/* Newsletter signup (drafts/hero-newsletter-signup) — editorial two-column: recent-issues list
   and reader count on the left, a real validating signup card + a wall of reader quotes on the right. */
.v-hero-newsletter-signup .ws-in.hns-cols { display:grid; grid-template-columns:1.15fr 0.85fr; gap:0; }
.v-hero-newsletter-signup .hns-left { padding-right:clamp(30px, 4cqw, 56px); border-right:var(--bw, 1px) solid var(--hair); }
.v-hero-newsletter-signup .hns-right { padding-left:clamp(30px, 4cqw, 56px); display:flex; flex-direction:column; gap:28px; }
.v-hero-newsletter-signup .hns-kick { margin-bottom:16px; }
.v-hero-newsletter-signup .hns-left .ws-sub { margin-top:18px; max-width:46ch; }
.v-hero-newsletter-signup .hns-sublabel { margin:34px 0 0; font:600 10px var(--mono); letter-spacing:2px;
  text-transform:uppercase; color:var(--faint); }
.v-hero-newsletter-signup .hns-issues { list-style:none; margin:12px 0 0; padding:0; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-newsletter-signup .hns-issue { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-newsletter-signup .hns-issue-link { flex:1; text-decoration:none; color:var(--ink);
  font:500 14.5px/1.4 var(--font); transition:color 140ms linear; }
.v-hero-newsletter-signup .hns-issue-link:hover { color:var(--accent); }
.v-hero-newsletter-signup .hns-issue-date { flex:none; font:400 12.5px var(--font); color:var(--faint); white-space:nowrap; }
.v-hero-newsletter-signup .hns-count { margin:22px 0 0; font:400 14px/1.5 var(--font); color:var(--dim); }
.v-hero-newsletter-signup .hns-count b { color:var(--ink); font-weight:700; }
/* signup card */
.v-hero-newsletter-signup .hns-card { background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); padding:clamp(22px, 2.6cqw, 30px); }
.v-hero-newsletter-signup .hns-form-head[hidden] { display:none; }
.v-hero-newsletter-signup .hns-form-title { margin:0; font:700 1.15rem/1.25 var(--font-head, var(--font));
  letter-spacing:-0.01em; color:var(--ink); }
.v-hero-newsletter-signup .hns-form-sub { margin:8px 0 0; font:400 13.5px/1.55 var(--font); color:var(--dim); }
.v-hero-newsletter-signup .hns-form { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.v-hero-newsletter-signup .hns-input { width:100%; min-width:0; appearance:none; -webkit-appearance:none;
  padding:12px 15px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5);
  background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink);
  font:400 14px var(--font); outline:none; transition:border-color 140ms linear, color 140ms linear; }
.v-hero-newsletter-signup .hns-input::placeholder { color:var(--faint); }
.v-hero-newsletter-signup .hns-input:focus { border-color:color-mix(in srgb, var(--accent) 60%, var(--hair)); }
.v-hero-newsletter-signup .hns-input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-newsletter-signup .hns-input.is-bad { border-color:#e5484d; }
.v-hero-newsletter-signup .hns-submit { width:100%; appearance:none; -webkit-appearance:none; cursor:pointer;
  border:0; padding:12px 16px; border-radius:calc(var(--radius, 12px) * .5);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, var(--bg)); font:600 14px var(--font); letter-spacing:.01em;
  transition:opacity 140ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-hero-newsletter-signup .hns-submit:hover { opacity:.9; }
.v-hero-newsletter-signup .hns-submit:active { transform:translateY(1px); }
.v-hero-newsletter-signup .hns-submit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-newsletter-signup .hns-freq { margin:4px 0 0; text-align:center; font:400 12px/1.5 var(--font); color:var(--faint); }
/* submitted state */
.v-hero-newsletter-signup .hns-done { display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(6px, 1cqw, 14px) 0; }
.v-hero-newsletter-signup .hns-done[hidden] { display:none; }
.v-hero-newsletter-signup .hns-donemark { position:relative; flex:none; width:44px; height:44px; border-radius:50%;
  margin-bottom:16px; background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.v-hero-newsletter-signup .hns-donemark::after { content:''; position:absolute; top:50%; left:50%; width:14px; height:7px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translate(-52%, -70%) rotate(-45deg); }
.v-hero-newsletter-signup .hns-donemsg { max-width:32ch; }
.v-hero-newsletter-signup .hns-again { margin-top:18px; appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:9px 18px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5);
  background:none; color:var(--ink); font:600 13px var(--font);
  transition:color 140ms linear, border-color 140ms linear; }
.v-hero-newsletter-signup .hns-again:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-newsletter-signup .hns-again:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* reader quotes */
.v-hero-newsletter-signup .hns-quotes { display:flex; flex-direction:column; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-newsletter-signup .hns-quote { display:flex; align-items:flex-start; gap:12px; padding:15px 0;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-newsletter-signup .hns-avatar { flex:none; width:34px; height:34px; border-radius:50%; display:grid;
  place-items:center; font:700 13px var(--font-head, var(--font)); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.v-hero-newsletter-signup .hns-quote-body { flex:1; min-width:0; }
.v-hero-newsletter-signup .hns-quote-text { margin:0; font:400 13.5px/1.5 var(--font); color:var(--dim); }
.v-hero-newsletter-signup .hns-quote-name { margin:5px 0 0; font:600 12.5px var(--font); color:var(--ink); }
.v-hero-newsletter-signup .hns-quote-name span { color:var(--faint); font-weight:400; }
@container site (max-width: 860px) {
  .v-hero-newsletter-signup .ws-in.hns-cols { grid-template-columns:1fr; gap:40px; }
  .v-hero-newsletter-signup .hns-left { padding-right:0; border-right:0; }
  .v-hero-newsletter-signup .hns-right { padding-left:0; }
}
@container site (max-width: 560px) {
  .v-hero-newsletter-signup .hns-card { padding:0; background:none; border:0; }
  .v-hero-newsletter-signup .hns-freq { text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-newsletter-signup .hns-input, .v-hero-newsletter-signup .hns-submit,
  .v-hero-newsletter-signup .hns-again, .v-hero-newsletter-signup .hns-issue-link { transition:none; }
}
/* hero-mixdown — ported from SB_04 drafts/hero-mixdown. Full-bleed "mixing console" hero: four live
   faders (GLOW/ECHO/GRAIN/HEAT) are real range inputs that mix the fold's atmosphere in real time —
   glow drives the bloom orb, echo prints tape-delay trails onto the headline, grain rides a noise film,
   heat warms the scene. Fully accent-tokenised (origin ember -> --accent); no blur/backdrop-filter;
   entrances left to anims.js; idle motion (orb drift / grain / VU / LED) stops at reduced-motion. */
.v-hero-mixdown { --hm-mx-glow:.62; --hm-mx-echo:.35; --hm-mx-grain:.4; --hm-mx-heat:.5; --hm-fader-h:8.75rem;
  display:flex; align-items:center; justify-content:center; min-height:600px; isolation:isolate;
  background:radial-gradient(130% 90% at 50% 118%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%), var(--bg); }
/* stage — mixed atmosphere layers */
.v-hero-mixdown .hmx-stage { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v-hero-mixdown .hmx-tint { position:absolute; inset:0; mix-blend-mode:soft-light; opacity:calc(var(--hm-mx-heat) * .95);
  background:radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 60%),
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 30%, var(--panel)), transparent 46%, color-mix(in srgb, var(--accent) 55%, var(--panel))); }
.v-hero-mixdown .hmx-orb { position:absolute; left:50%; top:36%; width:min(52rem, 130cqw); aspect-ratio:1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 44%, transparent 72%);
  transform:translate(-50%, -55%) scale(calc(.72 + var(--hm-mx-glow) * .5)); opacity:calc(.12 + var(--hm-mx-glow) * .88);
  animation:hmx-drift 16s ease-in-out infinite alternate; }
@keyframes hmx-drift { to { transform:translate(-46%, -50%) scale(calc(.72 + var(--hm-mx-glow) * .5)); } }
.v-hero-mixdown .hmx-grain { position:absolute; inset:-22%; mix-blend-mode:overlay; opacity:calc(var(--hm-mx-grain) * .55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; animation:hmx-grain 1.2s steps(3) infinite; }
@keyframes hmx-grain { 0%{transform:translate3d(0,0,0);} 33%{transform:translate3d(-38px,22px,0);} 66%{transform:translate3d(24px,-30px,0);} 100%{transform:translate3d(0,0,0);} }
/* copy */
.v-hero-mixdown .hmx-inner { position:relative; z-index:1; }
.v-hero-mixdown .hmx-eyebrow { display:inline-flex; align-items:center; gap:.7em; margin:0 0 18px;
  font:600 10px var(--mono); letter-spacing:3px; text-transform:uppercase; color:var(--dim); }
.v-hero-mixdown .hmx-dot { width:.5em; height:.5em; flex:none; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); animation:hmx-blink 2.4s ease-in-out infinite; }
@keyframes hmx-blink { 0%,100%{opacity:1;} 50%{opacity:.28;} }
.v-hero-mixdown .hmx-title { max-width:12em; margin-inline:auto; text-wrap:balance;
  text-shadow:calc(var(--hm-mx-echo)*.16em) calc(var(--hm-mx-echo)*-.03em) calc(var(--hm-mx-echo)*.012em) color-mix(in srgb, var(--accent) 52%, transparent),
    calc(var(--hm-mx-echo)*.34em) calc(var(--hm-mx-echo)*-.07em) calc(var(--hm-mx-echo)*.024em) color-mix(in srgb, var(--accent) 30%, transparent),
    calc(var(--hm-mx-echo)*.54em) calc(var(--hm-mx-echo)*-.12em) calc(var(--hm-mx-echo)*.036em) color-mix(in srgb, var(--accent) 14%, transparent); }
.v-hero-mixdown .hmx-em { font-family:Georgia, 'Times New Roman', 'Noto Serif', serif; font-style:italic; font-weight:500; color:var(--accent); letter-spacing:0; }
.v-hero-mixdown .hmx-sub { margin:14px auto 0; max-width:38em; }
.v-hero-mixdown .ws-ctarow { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px; }
/* console */
.v-hero-mixdown .hmx-console { position:relative; margin:clamp(1.8rem, 4cqw, 3rem) auto 0; max-width:46rem;
  padding:clamp(1rem, 2.6cqw, 1.5rem) clamp(.9rem, 3cqw, 1.6rem); border-radius:14px;
  background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:var(--bw, 1px) solid var(--hair);
  box-shadow:0 20px 55px rgba(0,0,0,.45), inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent); }
.v-hero-mixdown .hmx-rack { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:clamp(.55rem, 1.8cqw, 1rem); }
.v-hero-mixdown .hmx-ch { --lvl:.5; display:flex; flex-direction:column; align-items:center; gap:.55rem; width:4.1rem;
  padding:.7rem .4rem .65rem; border-radius:10px; background:color-mix(in srgb, var(--ink) 2%, transparent); border:1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.v-hero-mixdown .hmx-io { display:flex; align-items:center; gap:.5rem; }
.v-hero-mixdown .hmx-vu { position:relative; width:.48rem; height:var(--hm-fader-h); overflow:hidden; border-radius:3px; background:color-mix(in srgb, var(--ink) 10%, transparent); }
.v-hero-mixdown .hmx-vu i { position:absolute; left:0; right:0; bottom:0; height:calc(var(--lvl) * 100%); transform-origin:bottom;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 26%, color-mix(in srgb, var(--accent) 45%, var(--panel)));
  animation:hmx-vu 1.15s ease-in-out infinite; }
.v-hero-mixdown .hmx-ch:nth-child(2) .hmx-vu i { animation-delay:-.42s; }
.v-hero-mixdown .hmx-ch:nth-child(3) .hmx-vu i { animation-delay:-.8s; }
.v-hero-mixdown .hmx-ch:nth-child(4) .hmx-vu i { animation-delay:-.23s; }
@keyframes hmx-vu { 0%,100%{transform:scaleY(.93);} 30%{transform:scaleY(1);} 55%{transform:scaleY(.85);} 80%{transform:scaleY(.99);} }
.v-hero-mixdown .hmx-fader { position:relative; width:2.5rem; height:var(--hm-fader-h); }
.v-hero-mixdown .hmx-fader input { -webkit-appearance:none; appearance:none; position:absolute; top:50%; left:50%; width:var(--hm-fader-h); height:2.5rem;
  margin:0; background:transparent; transform:translate(-50%,-50%) rotate(-90deg); cursor:grab; }
.v-hero-mixdown .hmx-fader input:active { cursor:grabbing; }
.v-hero-mixdown .hmx-fader input::-webkit-slider-runnable-track { height:.44rem; border-radius:999px; box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
  background:linear-gradient(90deg, var(--accent) 0 calc(var(--lvl)*100%), color-mix(in srgb, var(--ink) 10%, transparent) 0); }
.v-hero-mixdown .hmx-fader input::-moz-range-track { height:.44rem; border-radius:999px; box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
  background:linear-gradient(90deg, var(--accent) 0 calc(var(--lvl)*100%), color-mix(in srgb, var(--ink) 10%, transparent) 0); }
.v-hero-mixdown .hmx-fader input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:1.05rem; height:2.1rem; margin-top:-.83rem;
  border-radius:4px; border:1px solid color-mix(in srgb, var(--ink) 16%, transparent); box-shadow:0 2px 8px rgba(0,0,0,.6);
  background:linear-gradient(90deg, var(--panel-3, var(--panel-2)) 0 43%, var(--accent) 43% 57%, var(--panel-3, var(--panel-2)) 57%); }
.v-hero-mixdown .hmx-fader input::-moz-range-thumb { width:1.05rem; height:2.1rem; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.6);
  border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background:linear-gradient(90deg, var(--panel-3, var(--panel-2)) 0 43%, var(--accent) 43% 57%, var(--panel-3, var(--panel-2)) 57%); }
.v-hero-mixdown .hmx-val { font:400 .68rem var(--mono); color:var(--dim); }
.v-hero-mixdown .hmx-name { font:500 .58rem var(--mono); letter-spacing:.2em; color:var(--ink); }
/* master strip */
.v-hero-mixdown .hmx-master { display:flex; flex-direction:column; justify-content:space-between; gap:.6rem; min-width:11rem;
  padding:.75rem .85rem; text-align:left; border-radius:10px; background:color-mix(in srgb, var(--ink) 2%, transparent); border:1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.v-hero-mixdown .hmx-live { display:flex; align-items:center; gap:.7em; font:500 .6rem var(--mono); letter-spacing:.26em; color:var(--ink); }
.v-hero-mixdown .hmx-read { font:400 .64rem var(--mono); letter-spacing:.1em; line-height:1.8; color:var(--dim); }
.v-hero-mixdown .hmx-hint { margin:0; font:italic 400 .72rem/1.55 Georgia, 'Times New Roman', serif; color:var(--dim); }
.v-hero-mixdown .hmx-reset { align-self:flex-start; padding:.55em 1em; border-radius:6px; cursor:pointer; background:transparent;
  border:var(--bw, 1px) solid var(--hair); color:var(--ink); font:500 .6rem var(--mono); letter-spacing:.22em;
  transition:color 160ms linear, transform 160ms var(--ease-pop, ease-out); }
.v-hero-mixdown .hmx-reset:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); transform:translateY(-1px); }
.v-hero-mixdown .hmx-reset:active { transform:translateY(0); }
.v-hero-mixdown .hmx-fader input:focus-visible, .v-hero-mixdown .hmx-reset:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@container site (max-width: 560px) {
  .v-hero-mixdown .hmx-master { min-width:100%; }
  .v-hero-mixdown .hmx-reset { align-self:stretch; text-align:center; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-mixdown .hmx-orb, .v-hero-mixdown .hmx-grain, .v-hero-mixdown .hmx-vu i, .v-hero-mixdown .hmx-dot { animation:none; }
  .v-hero-mixdown .hmx-reset { transition:none; }
}
/* open-source — centered launch fold: install command · repo stats · contributor stack */
.v-hero-open-source .osh-in { display:flex; flex-direction:column; align-items:center; gap:24px; width:min(680px, 88cqw); }
.v-hero-open-source .osh-kick { margin:0; }
.v-hero-open-source .ws-h1 { max-width:16ch; }
.v-hero-open-source .osh-in .ws-sub { max-width:54ch; }
/* install command bar */
.v-hero-open-source .osh-install { display:inline-flex; align-items:center; gap:12px; width:min(480px, 100%); max-width:100%;
  padding:9px 10px 9px 16px; border-radius:10px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 60%, var(--bg)); font:500 13px var(--mono); }
.v-hero-open-source .osh-dollar { color:var(--accent); font-weight:700; flex:none; }
.v-hero-open-source .osh-cmd { flex:1; min-width:0; text-align:left; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-hero-open-source .osh-copy { flex:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  appearance:none; -webkit-appearance:none; border:var(--bw, 1px) solid var(--hair); border-radius:7px;
  background:var(--panel-2); color:var(--dim); padding:6px 10px; font:600 11px var(--font);
  transition:color .16s linear, border-color .16s linear; }
.v-hero-open-source .osh-copy:hover { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-hero-open-source .osh-copy:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-open-source .osh-copy.is-done { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.v-hero-open-source .osh-copy svg { width:13px; height:13px; flex:none; }
/* repo stats row */
.v-hero-open-source .osh-stats { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 18px;
  font:500 13.5px var(--font); color:var(--dim); }
.v-hero-open-source .osh-stat { display:inline-flex; align-items:center; gap:7px; }
.v-hero-open-source .osh-stat svg { width:15px; height:15px; color:var(--accent); flex:none; }
.v-hero-open-source .osh-stat b { color:var(--ink); font-weight:700; }
.v-hero-open-source .osh-div { width:1px; height:14px; background:var(--hair); flex:none; }
/* CTAs */
.v-hero-open-source .osh-ctarow { margin-top:2px; }
.v-hero-open-source .osh-gh svg { width:16px; height:16px; }
/* contributor stack */
.v-hero-open-source .osh-contrib { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:11px 14px;
  margin-top:6px; padding-top:22px; border-top:var(--bw, 1px) solid var(--hair); width:min(480px, 100%); }
.v-hero-open-source .osh-contrib-lbl, .v-hero-open-source .osh-contrib-count { font:500 12.5px var(--font); color:var(--dim); }
.v-hero-open-source .osh-contrib-count strong { color:var(--ink); font-weight:700; }
.v-hero-open-source .osh-avatars { display:inline-flex; }
.v-hero-open-source .osh-av { width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font:700 10.5px var(--font); color:var(--ink); letter-spacing:.02em;
  background:color-mix(in srgb, var(--accent) calc(16% + var(--i) * 7%), var(--panel-2));
  border:2px solid var(--bg); margin-left:-9px; }
.v-hero-open-source .osh-av:first-child { margin-left:0; }
@container site (max-width: 560px) {
  .v-hero-open-source .osh-copy-tx { display:none; }
  .v-hero-open-source .osh-stats { gap:9px 12px; font-size:12.5px; }
  .v-hero-open-source .osh-contrib { flex-direction:column; gap:12px; }
}
/* particles — ported from SB_04 hero-particles (dark centered fold over a drifting particle
   field). The origin's CSS box-shadow particle layers become a token-lit canvas field
   (fitCanvas + whenVisible: rAF paused off-screen, cursor-parted, a still field under
   reduced-motion). Tokens throughout; base gradient + veil keep the headline legible;
   transitions ride transform/opacity/color only, no backdrop-filter. */
.ws-hero.v-hero-particles { position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(460px, 84cqh, 780px); padding-block:clamp(80px, 12cqh, 128px); overflow:hidden;
  isolation:isolate; background-color:var(--bg); text-align:center; }
.v-hero-particles .hpar-base { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(80% 70% at 82% 6%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, black), color-mix(in srgb, var(--bg) 98%, black)); }
.v-hero-particles .hpar-fx { z-index:1; }
.v-hero-particles .hpar-veil { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(130% 120% at 50% 46%, transparent 42%, color-mix(in srgb, var(--bg) 60%, black) 100%); }
.v-hero-particles .hpar-in { position:relative; z-index:3; }
.v-hero-particles .ws-h1 { max-width:15ch; margin-inline:auto; text-wrap:balance;
  font-size:clamp(40px, 8cqw, 78px); letter-spacing:-0.035em; line-height:1.05; }
.v-hero-particles .ws-sub { max-width:44ch; margin-top:clamp(16px, 2cqw, 22px); margin-inline:auto; color:var(--dim); }
.v-hero-particles .ws-ctarow { margin-top:clamp(26px, 3cqw, 34px); justify-content:center; }
.v-hero-particles .hpar-trust { justify-content:center; flex-wrap:wrap; gap:8px 20px;
  margin-top:clamp(24px, 3cqw, 32px); }
@container site (max-width: 560px) {
  .ws-hero.v-hero-particles { min-height:clamp(420px, 76cqh, 620px); padding-block:clamp(64px, 12cqh, 96px); }
  .v-hero-particles .ws-sub, .v-hero-particles .ws-h1 { max-width:100%; }
  .v-hero-particles .hpar-trust { gap:6px 14px; } }
/* partnership — ported from SB_04 drafts/hero-partnership (copy + selectable partner-tier
   ladder beside a partner logo wall + headline stat). Origin entrance fade-ups are dropped
   (anims.js owns entrances); the tier list is upgraded from a static shell to a real
   roving-tabindex radiogroup. The gold/silver/bronze medal hues have no theme-token
   equivalent, so they live as scoped decorative custom properties (the ok/warn/bad-hue
   exception) — everything else is token-driven. */
.v-hero-partnership { --hpt-gold:#e0a63a; --hpt-silver:#9aa4b2; --hpt-bronze:#c08457; }
.v-hero-partnership .ws-in.split.hpt-main { grid-template-columns:1.08fr 0.92fr; gap:clamp(32px, 4.5cqw, 64px); align-items:stretch; }
.v-hero-partnership .hpt-copy { display:flex; flex-direction:column; justify-content:center; }
.v-hero-partnership .hpt-tiers { display:flex; flex-direction:column; margin-top:30px; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-partnership .hpt-tier { appearance:none; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:var(--bw, 1px) solid var(--hair); border-left:2px solid transparent;
  padding:16px 16px 16px 14px; display:flex; flex-direction:column; gap:8px; color:inherit; font:inherit;
  transition:color .18s ease, border-color .18s ease, opacity .18s ease; }
.v-hero-partnership .hpt-tier.on { border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.v-hero-partnership .hpt-tier:not(.on) { opacity:.82; }
.v-hero-partnership .hpt-tier:hover { opacity:1; }
.v-hero-partnership .hpt-tier:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-hero-partnership .hpt-tier-head { display:flex; align-items:center; gap:12px; }
.v-hero-partnership .hpt-badge { font:700 10px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  padding:3px 9px; border-radius:5px; color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, transparent); }
.v-hero-partnership .hpt-badge--gold { color:var(--hpt-gold); background:color-mix(in srgb, var(--hpt-gold) 16%, transparent); }
.v-hero-partnership .hpt-badge--silver { color:var(--hpt-silver); background:color-mix(in srgb, var(--hpt-silver) 18%, transparent); }
.v-hero-partnership .hpt-badge--bronze { color:var(--hpt-bronze); background:color-mix(in srgb, var(--hpt-bronze) 18%, transparent); }
.v-hero-partnership .hpt-tier-name { font:600 14.5px var(--font); color:var(--ink); }
.v-hero-partnership .hpt-tier-desc { font:400 13px/1.6 var(--font); color:var(--dim); max-width:52ch; }
.v-hero-partnership .hpt-cta { margin-top:28px; align-self:flex-start; cursor:pointer; }
.v-hero-partnership .hpt-status { margin:14px 0 0; min-height:1.25em; font:500 12.5px var(--font); color:var(--faint); }
.v-hero-partnership .hpt-status.ok { color:var(--accent); }
.v-hero-partnership .hpt-side { display:flex; flex-direction:column; gap:28px; justify-content:center;
  padding-left:clamp(28px, 3.5cqw, 48px); border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-partnership .hpt-logos { display:grid; grid-template-columns:repeat(3, 1fr); overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); background:var(--panel); }
.v-hero-partnership .hpt-logo { display:flex; align-items:center; justify-content:center; padding:26px 14px;
  border-right:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-partnership .hpt-logo:nth-child(3n) { border-right:0; }
.v-hero-partnership .hpt-logo:nth-child(n+4) { border-bottom:0; }
.v-hero-partnership .hpt-logo-t { font:600 13px var(--font); letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); opacity:.6; transition:color .18s ease, opacity .18s ease; }
.v-hero-partnership .hpt-logo:hover .hpt-logo-t { opacity:1; color:var(--dim); }
.v-hero-partnership .hpt-stat { display:flex; align-items:baseline; gap:12px; }
.v-hero-partnership .hpt-stat-n { font:800 clamp(30px, 4cqw, 44px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.03em; }
.v-hero-partnership .hpt-stat-l { font:500 13px var(--font); color:var(--dim); }
@container site (max-width: 860px) {
  .v-hero-partnership .ws-in.split.hpt-main { grid-template-columns:1fr; gap:40px; }
  .v-hero-partnership .hpt-side { padding-left:0; padding-top:34px; border-left:0; border-top:var(--bw, 1px) solid var(--hair); } }
@container site (max-width: 560px) {
  .v-hero-partnership .hpt-logos { grid-template-columns:repeat(2, 1fr); }
  .v-hero-partnership .hpt-logo:nth-child(3n) { border-right:var(--bw, 1px) solid var(--hair); }
  .v-hero-partnership .hpt-logo:nth-child(2n) { border-right:0; }
  .v-hero-partnership .hpt-logo:nth-child(n+4) { border-bottom:var(--bw, 1px) solid var(--hair); }
  .v-hero-partnership .hpt-logo:nth-child(n+5) { border-bottom:0; } }
/* hero-product-grid — ported from SB_04 drafts/hero-product-grid. E-commerce product grid: centered copy,
   a category-chip radiogroup that filters a data-driven product grid, and per-card Add-to-cart toggles that
   feed a live cart tally. Origin's fixed dark palette, its Google-Fonts Inter and its external product photos
   are dropped: colour rides tokens (--bg/--ink/--dim/--faint/--accent/--hair/--panel), type rides
   --font/--font-head/--mono, and thumbnails are token-tinted CSS placeholders (per-card highlight offset via
   --i, no image URLs). Motion is hover/interaction only (transform/opacity/color); no blur, no baked entrance. */
.v-hero-product-grid { position:relative; isolation:isolate; }
.v-hero-product-grid .hpg-in { display:flex; flex-direction:column; align-items:center; gap:clamp(24px, 3.4cqw, 42px); }
.v-hero-product-grid .hpg-head { max-width:620px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.v-hero-product-grid .hpg-head > * { margin:0; }
.v-hero-product-grid .hpg-head .ws-sub { max-width:46ch; }
/* live cart readout — top-right indicator of the items added, updated by mount() */
.v-hero-product-grid .hpg-cart { position:absolute; z-index:2; top:clamp(2px, 1.2cqw, 18px); right:clamp(2px, 1.2cqw, 18px);
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:var(--panel);
  border:var(--bw, 1px) solid var(--hair); border-radius:999px; color:var(--dim);
  transition:color .16s linear, border-color .16s linear, transform .18s ease; }
.v-hero-product-grid .hpg-cart svg { width:17px; height:17px; flex:none; }
.v-hero-product-grid .hpg-cart-n { min-width:1.1ch; text-align:center; font:600 12.5px var(--mono); color:var(--dim); }
.v-hero-product-grid .hpg-cart.has { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.v-hero-product-grid .hpg-cart.has .hpg-cart-n { color:var(--accent); }
.v-hero-product-grid .hpg-cart.bump { transform:scale(1.09); }
/* category chips — a roving-tabindex radiogroup */
.v-hero-product-grid .hpg-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:840px; }
.v-hero-product-grid .hpg-chip { appearance:none; -webkit-appearance:none; cursor:pointer; white-space:nowrap;
  border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:8px 16px; background:transparent;
  font:500 clamp(12.5px, 1.4cqw, 13.5px) var(--font); color:var(--dim);
  transition:color .16s linear, border-color .16s linear; }
.v-hero-product-grid .hpg-chip:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-hero-product-grid .hpg-chip[aria-checked="true"] { color:var(--accent); font-weight:600;
  border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.v-hero-product-grid .hpg-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* product grid + cards */
.v-hero-product-grid .hpg-grid { width:100%; text-align:left; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(190px, 22cqw, 240px), 1fr));
  gap:clamp(16px, 2cqw, 24px); }
.v-hero-product-grid .hpg-card { display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  transition:border-color .16s linear, transform .16s ease; }
.v-hero-product-grid .hpg-card[hidden] { display:none; }
.v-hero-product-grid .hpg-card:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); transform:translateY(-2px); }
.v-hero-product-grid .hpg-thumb { position:relative; width:100%; aspect-ratio:4 / 5; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-product-grid .hpg-thumb.ph { background-image:radial-gradient(120% 120% at calc(22% + var(--i, 0) * 8%) 16%,
  color-mix(in srgb, var(--accent) 20%, var(--panel)), var(--panel) 70%); }
.v-hero-product-grid .hpg-thumb.ph::after { content:''; position:absolute; inset:0;
  background:linear-gradient(125deg, transparent 44%, color-mix(in srgb, var(--accent) 10%, transparent)); }
.v-hero-product-grid .hpg-cbody { flex:1; display:flex; flex-direction:column; gap:6px; padding:clamp(12px, 1.5cqw, 16px); }
.v-hero-product-grid .hpg-ccat { font:700 10px var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); }
.v-hero-product-grid .hpg-cname { margin:0; font:600 clamp(14px, 1.6cqw, 15.5px)/1.3 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; text-wrap:balance; }
.v-hero-product-grid .hpg-cmeta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px; }
.v-hero-product-grid .hpg-cprice { font:600 clamp(13px, 1.5cqw, 14px) var(--font); color:var(--dim); letter-spacing:0.01em; }
.v-hero-product-grid .hpg-add { appearance:none; -webkit-appearance:none; cursor:pointer; white-space:nowrap;
  border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:6px 13px; background:transparent;
  font:600 clamp(11.5px, 1.3cqw, 12.5px) var(--font); color:var(--accent);
  transition:color .16s linear, border-color .16s linear; }
.v-hero-product-grid .hpg-add:hover { border-color:var(--accent); }
.v-hero-product-grid .hpg-add:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-product-grid .hpg-add.is-added { color:var(--accent); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); }
.v-hero-product-grid .hpg-add.is-added .hpg-addtxt::before { content:'\2713\00a0'; }
/* empty state + live count */
.v-hero-product-grid .hpg-empty { margin:0; width:100%; padding:clamp(22px, 4cqw, 40px); text-align:center;
  font:500 14px var(--font); color:var(--dim); border:var(--bw, 1px) dashed var(--hair); border-radius:var(--radius, 12px); }
.v-hero-product-grid .hpg-empty[hidden] { display:none; }
.v-hero-product-grid .hpg-status { min-height:1.3em; margin:0; font:500 12px var(--font); color:var(--faint); }
@container site (max-width: 860px) {
  .v-hero-product-grid .hpg-grid { grid-template-columns:repeat(3, 1fr); }
}
@container site (max-width: 560px) {
  .v-hero-product-grid .hpg-grid { grid-template-columns:repeat(2, 1fr); }
  .v-hero-product-grid .hpg-cart { position:static; display:flex; width:fit-content; margin:0 0 4px auto; }
}
/* hero-product-showcase — ported from SB_04 drafts/hero-product-showcase (SaaS product
   showcase: copy + a checked feature list + CTAs beside a tilted app-window screenshot).
   The origin's single static <img> becomes a REAL, swappable showcase: a roving-tabindex
   tablist of view thumbs swaps the CSS-drawn product screen inside the window. Entrance
   motion belongs to anims.js; only hover/interaction motion (transform/opacity) lives here. */
.v-hero-product-showcase .ws-in.split { align-items:center; gap:clamp(32px, 5cqw, 72px); }
.v-hero-product-showcase .hps-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-hero-product-showcase .hps-feats { list-style:none; margin:22px 0 4px; padding:0; display:flex; flex-direction:column; gap:13px; }
.v-hero-product-showcase .hps-feat { display:flex; align-items:flex-start; gap:11px; font:500 14px/1.5 var(--font); color:var(--dim); }
.v-hero-product-showcase .hps-check { flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, transparent); }
.v-hero-product-showcase .hps-check svg { width:12px; height:12px; }
.v-hero-product-showcase .ws-ctarow { margin-top:26px; }
/* stage — the tilted product window + its thumb strip */
.v-hero-product-showcase .hps-stage { min-width:0; display:flex; flex-direction:column; gap:16px; }
.v-hero-product-showcase .hps-window { border:var(--bw, 1px) solid var(--hair); border-radius:12px; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad, none);
  box-shadow:var(--elev, 0 30px 70px -34px rgba(0,0,0,.5));
  transform:perspective(1200px) rotateY(-5deg) rotateX(2.5deg); transform-origin:center;
  transition:transform .45s ease; }
.v-hero-product-showcase .hps-stage:hover .hps-window,
.v-hero-product-showcase .hps-stage:focus-within .hps-window { transform:perspective(1200px) rotateY(-1.5deg) rotateX(1deg); }
.v-hero-product-showcase .hps-wtop { display:flex; align-items:center; gap:6px; padding:10px 13px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-product-showcase .hps-wtop i { width:9px; height:9px; border-radius:99px; background:color-mix(in srgb, var(--ink) 15%, transparent); }
.v-hero-product-showcase .hps-url { margin-left:10px; padding:2px 11px; border-radius:6px;
  background:color-mix(in srgb, var(--bg) 70%, transparent); font:500 10px var(--mono); color:var(--faint); }
.v-hero-product-showcase .hps-wbody { position:relative; aspect-ratio:16 / 10; }
.v-hero-product-showcase .hps-view { position:absolute; inset:0; padding:16px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.v-hero-product-showcase .hps-view.is-on { opacity:1; pointer-events:auto; }
.v-hero-product-showcase .hps-ui { width:100%; height:100%; display:flex; gap:12px; }
/* board view */
.v-hero-product-showcase .hps-bcol { flex:1; display:flex; flex-direction:column; gap:9px; padding:10px;
  border-radius:10px; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-hero-product-showcase .hps-bh { height:8px; width:60%; border-radius:5px; background:color-mix(in srgb, var(--ink) 16%, transparent); }
.v-hero-product-showcase .hps-bcard { min-height:34px; border-radius:8px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-hero-product-showcase .hps-bcard.a { background:var(--accent-fill); }
/* chart view */
.v-hero-product-showcase .hps-ui--chart { flex-direction:column; gap:14px; }
.v-hero-product-showcase .hps-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.v-hero-product-showcase .hps-tile { padding:10px; border-radius:9px; display:flex; flex-direction:column; gap:7px;
  background:color-mix(in srgb, var(--ink) 5%, transparent); }
.v-hero-product-showcase .hps-tile b { height:15px; width:62%; border-radius:5px; background:var(--accent-fill); }
.v-hero-product-showcase .hps-tile u { height:7px; width:88%; border-radius:4px; background:color-mix(in srgb, var(--ink) 12%, transparent); }
.v-hero-product-showcase .hps-bars { flex:1; display:flex; align-items:flex-end; gap:8px; padding:12px;
  border-radius:10px; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-hero-product-showcase .hps-bars i { flex:1; height:var(--h, 50%); border-radius:5px 5px 0 0;
  background:linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 32%, transparent)); }
/* docs view */
.v-hero-product-showcase .hps-drail { flex:0 0 30%; display:flex; flex-direction:column; gap:9px; padding:10px;
  border-radius:10px; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-hero-product-showcase .hps-drail span { height:9px; border-radius:5px; background:color-mix(in srgb, var(--ink) 10%, transparent); }
.v-hero-product-showcase .hps-drail span:first-child { background:var(--accent-fill); width:70%; }
.v-hero-product-showcase .hps-dpage { flex:1; display:flex; flex-direction:column; gap:11px; padding:14px;
  border-radius:10px; background:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-hero-product-showcase .hps-dtitle { height:15px; width:55%; border-radius:5px; background:color-mix(in srgb, var(--ink) 20%, transparent); }
.v-hero-product-showcase .hps-dline { height:8px; border-radius:5px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.v-hero-product-showcase .hps-dline.short { width:60%; }
/* thumb strip — the real, swappable showcase control */
.v-hero-product-showcase .hps-thumbs { display:flex; gap:10px; flex-wrap:wrap; }
.v-hero-product-showcase .hps-thumb { flex:1 1 0; min-width:96px; display:flex; align-items:center; gap:9px; padding:9px 11px;
  border-radius:10px; cursor:pointer; text-align:left; border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  font:600 12px var(--font); color:var(--dim); transition:color .18s ease, border-color .18s ease, opacity .18s ease; }
.v-hero-product-showcase .hps-thumb:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 32%, transparent); }
.v-hero-product-showcase .hps-thumb[aria-selected="true"] { color:var(--ink); border-color:var(--accent); }
.v-hero-product-showcase .hps-thumb:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-product-showcase .hps-mini { flex:0 0 auto; width:26px; height:20px; border-radius:5px; position:relative; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-hero-product-showcase .hps-mini::before { content:''; position:absolute; inset:3px; }
.v-hero-product-showcase .hps-mini--board::before {
  background:linear-gradient(var(--accent-fill), var(--accent-fill)) left/28% 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 0 0) center/28% 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 0 0) right/28% 100% no-repeat; }
.v-hero-product-showcase .hps-mini--chart::before {
  background:linear-gradient(var(--accent) 0 0) 8% bottom/17% 50% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 0 0) 38% bottom/17% 82% no-repeat,
    linear-gradient(var(--accent) 0 0) 68% bottom/17% 40% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 0 0) 98% bottom/17% 66% no-repeat; }
.v-hero-product-showcase .hps-mini--docs::before {
  background:repeating-linear-gradient(color-mix(in srgb, var(--ink) 20%, transparent) 0 2px, transparent 2px 5px); }
@container site (max-width: 860px) {
  .v-hero-product-showcase .ws-in.split { grid-template-columns:1fr; }
  .v-hero-product-showcase .hps-window,
  .v-hero-product-showcase .hps-stage:hover .hps-window,
  .v-hero-product-showcase .hps-stage:focus-within .hps-window { transform:none; }
}
@container site (max-width: 560px) {
  .v-hero-product-showcase .hps-thumb { flex-basis:100%; }
}
/* product screenshot — centered pitch over a live dashboard mock; sidebar tabs switch the panel */
.v-hero-product-screenshot { position:relative; overflow:hidden; text-align:center; }
.v-hero-product-screenshot .hps-glow { position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(820px, 92%); height:360px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at top, var(--accent-fill), transparent 68%); opacity:.7; }
.v-hero-product-screenshot .hps-copy { position:relative; z-index:1; max-width:720px; }
.v-hero-product-screenshot .hps-badge { display:inline-flex; align-items:center; gap:8px; }
.v-hero-product-screenshot .hps-bdot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

/* stage + floating status pills */
.v-hero-product-screenshot .hps-stage { position:relative; z-index:1; max-width:1040px; margin:44px auto 0;
  padding:30px 20px 0; box-sizing:border-box; }
.v-hero-product-screenshot .hps-pills { position:absolute; inset:0; pointer-events:none; z-index:3; }
.v-hero-product-screenshot .hps-pill { position:absolute; display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:100px; background:var(--panel); background-image:var(--surface-grad, none);
  border:var(--bw, 1px) solid var(--hair); font:600 12px var(--font); color:var(--ink); white-space:nowrap;
  box-shadow:0 8px 24px color-mix(in srgb, var(--bg) 55%, transparent);
  animation:hps-float 5s ease-in-out infinite; }
.v-hero-product-screenshot .hps-pill.p-tl { top:-2px; left:-2px; }
.v-hero-product-screenshot .hps-pill.p-tr { top:70px; right:-2px; animation-delay:1.3s; }
.v-hero-product-screenshot .hps-pill.p-bl { bottom:52px; left:-2px; animation-delay:2.6s; }
.v-hero-product-screenshot .hps-pdot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.v-hero-product-screenshot .hps-pdot.k-ok { background:var(--ok, #4ade80); }
.v-hero-product-screenshot .hps-pdot.k-warn { background:var(--warn, #f5b342); }
.v-hero-product-screenshot .hps-pdot.k-accent { background:var(--accent); }
@keyframes hps-float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* the mock window */
.v-hero-product-screenshot .hps-mock { position:relative; max-width:980px; margin:0 auto;
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:16px 16px 0 0; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad, none);
  box-shadow:0 -20px 70px color-mix(in srgb, var(--accent) 8%, transparent); }
.v-hero-product-screenshot .hps-chrome { display:flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  border-bottom:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--bg) 35%, transparent); }
.v-hero-product-screenshot .hps-chrome i { width:9px; height:9px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--ink) 16%, transparent); }
.v-hero-product-screenshot .hps-chrome i:nth-child(1) { background:color-mix(in srgb, var(--bad, #e5533c) 55%, transparent); }
.v-hero-product-screenshot .hps-chrome i:nth-child(2) { background:color-mix(in srgb, var(--warn, #e0a63c) 55%, transparent); }
.v-hero-product-screenshot .hps-chrome i:nth-child(3) { background:color-mix(in srgb, var(--ok, #4ade80) 55%, transparent); }
.v-hero-product-screenshot .hps-chrome span { margin-left:10px; padding:3px 12px; border-radius:7px;
  background:color-mix(in srgb, var(--bg) 60%, transparent); font:500 10.5px var(--mono); color:var(--faint); }
.v-hero-product-screenshot .hps-app { display:grid; grid-template-columns:210px 1fr; min-height:330px; text-align:left; }

/* sidebar tablist */
.v-hero-product-screenshot .hps-side { display:flex; flex-direction:column; gap:5px; padding:14px 12px;
  border-right:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 2%, transparent); }
.v-hero-product-screenshot .hps-navi { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; border-radius:9px; border:1px solid transparent; background:transparent; cursor:pointer;
  font:600 13px var(--font); color:var(--dim); transition:color .18s ease; }
.v-hero-product-screenshot .hps-navi:hover { color:var(--ink); }
.v-hero-product-screenshot .hps-navdot { width:16px; height:16px; border-radius:5px; flex:none;
  background:color-mix(in srgb, var(--ink) 9%, transparent); transition:transform .18s ease; }
.v-hero-product-screenshot .hps-navi.on { color:var(--ink); background:var(--accent-fill);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.v-hero-product-screenshot .hps-navi.on .hps-navdot { background:var(--accent); }
.v-hero-product-screenshot .hps-navi:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* main panel + stat cards */
.v-hero-product-screenshot .hps-panels { position:relative; padding:20px; flex:1; }
.v-hero-product-screenshot .hps-vhead { font:700 15px var(--font-head, var(--font)); color:var(--ink); margin-bottom:16px; }
.v-hero-product-screenshot .hps-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.v-hero-product-screenshot .hps-card { display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:11px;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 3%, transparent); }
.v-hero-product-screenshot .hps-ctop { font:500 11px var(--font); font-style:normal; color:var(--faint); }
.v-hero-product-screenshot .hps-cval { font:800 24px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; }
.v-hero-product-screenshot .hps-cbar { height:6px; border-radius:4px; margin-top:2px;
  background:color-mix(in srgb, var(--accent) 30%, transparent); }
.v-hero-product-screenshot .hps-card.k-ok .hps-cbar { background:color-mix(in srgb, var(--ok, #4ade80) 42%, transparent); }
.v-hero-product-screenshot .hps-card.k-warn .hps-cbar { background:color-mix(in srgb, var(--warn, #f5b342) 42%, transparent); }
.v-hero-product-screenshot .hps-card.k-accent .hps-cbar { background:color-mix(in srgb, var(--accent) 46%, transparent); }

/* the mock dissolves into the page */
.v-hero-product-screenshot .hps-fade { position:absolute; left:0; right:0; bottom:0; height:74px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg)); }

@container site (max-width: 860px) {
  .v-hero-product-screenshot .hps-pill { display:none; }
  .v-hero-product-screenshot .hps-fade { display:none; }
  .v-hero-product-screenshot .hps-mock { border-bottom:var(--bw, 1px) solid var(--hair); border-radius:16px; }
  .v-hero-product-screenshot .hps-app { grid-template-columns:158px 1fr; min-height:0; }
  .v-hero-product-screenshot .hps-cards { grid-template-columns:1fr 1fr; }
}
@container site (max-width: 560px) {
  .v-hero-product-screenshot .hps-stage { padding:0 12px; }
  .v-hero-product-screenshot .hps-app { grid-template-columns:1fr; }
  .v-hero-product-screenshot .hps-side { flex-flow:row wrap; gap:6px; padding:10px;
    border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
  .v-hero-product-screenshot .hps-navi { flex:0 0 auto; width:auto; }
  .v-hero-product-screenshot .hps-navdot { display:none; }
  .v-hero-product-screenshot .hps-vhead { font-size:14px; }
}
/* hero-product-mockup — ported from SB_04 drafts/hero-product-mockup (centered product
   launch: eyebrow + headline + sub over a CSS-drawn browser window with a sidebar nav +
   KPI cards + chart). The origin's dead sidebar becomes a REAL roving-tabindex tablist that
   swaps the KPI cards, bar chart and URL path; bars grow in via whenVisible; all tokenized. */
.v-hero-product-mockup .ws-h1 { max-width:18ch; margin-inline:auto; text-wrap:balance; letter-spacing:-0.03em; }
.v-hero-product-mockup .ws-sub { max-width:52ch; }
.v-hero-product-mockup .hpm-browser { width:100%; max-width:860px; margin:clamp(30px, 4cqw, 44px) auto 0; text-align:left;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .9); background:var(--panel); overflow:hidden;
  box-shadow:0 24px 56px -34px rgba(0, 0, 0, .5); }
/* browser chrome */
.v-hero-product-mockup .hpm-chrome { display:flex; align-items:center; gap:14px; padding:11px 16px;
  background:var(--panel-2, var(--panel)); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-product-mockup .hpm-dots { display:flex; gap:7px; flex-shrink:0; }
.v-hero-product-mockup .hpm-dots i { width:11px; height:11px; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 16%, transparent); }
.v-hero-product-mockup .hpm-url { display:flex; align-items:center; gap:6px; min-width:0; flex:1; max-width:340px;
  padding:5px 12px; border-radius:6px; background:color-mix(in srgb, var(--ink) 5%, transparent);
  font:500 11.5px var(--mono, var(--font)); color:var(--dim); white-space:nowrap; overflow:hidden; }
.v-hero-product-mockup .hpm-lock { display:inline-flex; flex-shrink:0; width:12px; height:12px; color:var(--faint); }
.v-hero-product-mockup .hpm-lock svg { width:12px; height:12px; }
.v-hero-product-mockup .hpm-host { font-weight:600; color:var(--dim); overflow:hidden; text-overflow:ellipsis; }
.v-hero-product-mockup .hpm-slash { color:var(--faint); }
.v-hero-product-mockup .hpm-path { color:var(--accent); overflow:hidden; text-overflow:ellipsis; }
/* screen shell */
.v-hero-product-mockup .hpm-screen { display:flex; min-height:clamp(240px, 34cqw, 300px); }
/* sidebar tablist (the make-it-real upgrade) */
.v-hero-product-mockup .hpm-side { display:flex; flex-direction:column; gap:3px; width:168px; flex-shrink:0; padding:14px 10px;
  background:var(--panel-2, var(--panel)); border-right:var(--bw, 1px) solid var(--hair); overflow:auto; }
.v-hero-product-mockup .hpm-navitem { appearance:none; display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 11px; border:1px solid transparent; border-radius:7px; cursor:pointer; background:transparent;
  font:600 12.5px var(--font); color:var(--dim); letter-spacing:.01em; transition:color .15s linear; }
.v-hero-product-mockup .hpm-navitem:hover { color:var(--ink); }
.v-hero-product-mockup .hpm-navico { width:14px; height:14px; border-radius:4px; flex-shrink:0;
  background:color-mix(in srgb, var(--ink) 15%, transparent); }
.v-hero-product-mockup .hpm-navtx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-hero-product-mockup .hpm-navitem[aria-selected="true"] { color:var(--accent); background:var(--accent-fill);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.v-hero-product-mockup .hpm-navitem[aria-selected="true"] .hpm-navico { background:color-mix(in srgb, var(--accent) 62%, transparent); }
.v-hero-product-mockup .hpm-navitem:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* main panel */
.v-hero-product-mockup .hpm-main { flex:1; min-width:0; padding:16px; display:flex; flex-direction:column; gap:14px; }
.v-hero-product-mockup .hpm-main:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px; }
.v-hero-product-mockup .hpm-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.v-hero-product-mockup .hpm-stat { display:flex; flex-direction:column; gap:4px; padding:12px 14px; min-width:0;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5);
  background:color-mix(in srgb, var(--ink) 2%, transparent); }
.v-hero-product-mockup .hpm-stat.is-empty { visibility:hidden; }
.v-hero-product-mockup .hpm-sv { font:800 clamp(17px, 2cqw, 22px) var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-hero-product-mockup .hpm-sl { font:500 10.5px var(--font); font-style:normal; letter-spacing:.04em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* bar chart — value drives scaleY (transform-only), peak bar rides full accent */
.v-hero-product-mockup .hpm-chart { position:relative; flex:1; min-height:88px; }
.v-hero-product-mockup .hpm-grid { position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:space-between; pointer-events:none; }
.v-hero-product-mockup .hpm-grid span { width:100%; height:1px; background:var(--hair); opacity:.7; }
.v-hero-product-mockup .hpm-bars { position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; gap:5px; }
.v-hero-product-mockup .hpm-bar { flex:1; min-width:0; height:100%; transform-origin:bottom; transform:scaleY(var(--v, 0));
  border-radius:3px 3px 0 0; background:color-mix(in srgb, var(--accent) 26%, transparent);
  transition:transform .55s cubic-bezier(.22, 1, .36, 1); }
.v-hero-product-mockup .hpm-bar.is-peak { background:var(--accent); }
.v-hero-product-mockup .hpm-bar:hover { background:color-mix(in srgb, var(--accent) 46%, transparent); }
.v-hero-product-mockup .hpm-bar.is-peak:hover { background:var(--accent); }
/* sr-only aria-live readout */
.v-hero-product-mockup .hpm-live { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@container site (max-width: 860px) {
  .v-hero-product-mockup .hpm-side { width:150px; }
  .v-hero-product-mockup .hpm-screen { min-height:clamp(230px, 40cqw, 280px); }
}
@container site (max-width: 560px) {
  .v-hero-product-mockup .hpm-screen { flex-direction:column; }
  .v-hero-product-mockup .hpm-side { flex-direction:row; width:auto; gap:6px; overflow-x:auto; padding:10px;
    border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
  .v-hero-product-mockup .hpm-navitem { flex-shrink:0; width:auto; }
  .v-hero-product-mockup .hpm-stats { gap:7px; }
  .v-hero-product-mockup .hpm-stat { padding:10px; }
  .v-hero-product-mockup .hpm-url { max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-product-mockup .hpm-bar { transition:none; }
}
/* simple-centered — ported from SB_04 drafts/hero-simple-centered (ultra-minimal centered opener:
   big headline, one-line sub, single CTA, quiet trust proof). Origin --hsc2-* vars map to tokens:
   bg->--bg, text->--ink, dim->--dim/--faint, accent->--accent, border->--hair, font->--font. Sized by
   clamp cqh (not 100vh) so it breathes inside the builder frame; the baked-in fade is dropped
   (anims.js owns entrances) and only the CTA keeps its hover. */
.ws-hero.v-hero-simple-centered { display:flex; align-items:center;
  min-height:clamp(400px, 66cqh, 720px); padding-block:clamp(56px, 9cqh, 120px); }
.v-hero-simple-centered .hsc-in { display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px, 2.6cqw, 28px); width:min(640px, 88cqw); }
.v-hero-simple-centered .ws-h1 { max-width:16ch; line-height:1.04; letter-spacing:-0.04em; text-wrap:balance; }
.v-hero-simple-centered .ws-sub { margin:0; max-width:46ch; }
.v-hero-simple-centered .ws-ctarow { margin-top:clamp(4px, 1cqw, 10px); }
.v-hero-simple-centered .hsc-proof { margin:0; font:500 12px var(--font); color:var(--faint); letter-spacing:.2px; }
@container site (max-width: 560px) {
  .ws-hero.v-hero-simple-centered { min-height:clamp(340px, 58cqh, 540px); padding-block:clamp(48px, 12cqh, 96px); }
  .v-hero-simple-centered .hsc-in { gap:20px; }
}
/* hero-reseller — ported from SB_04 drafts/hero-reseller (white-label reseller split:
   a benefit ledger + CTA beside a branded admin mock). Origin --hrs2-* map to tokens:
   bg->--bg, text->--ink, secondary->--dim/--faint, accent->--accent, divider->--hair,
   font->--font; mock palette (mk-bg/sidebar/chrome/border/sub) -> --panel/--panel-2/--hair/--faint.
   The origin's STATIC sidebar + chart become REAL: the sidebar is a roving-tabindex tablist
   that swaps the KPI cards, panel title and a token bar chart (mount()); a hidden aria-live
   narrates the switch. Baked fade-up entrance dropped (anims.js owns entrances) — only the
   bar scaleY + hover/selection colors transition, never a background. Traffic-light up/down
   are the only literal hues (semantic). Two columns narrow-stack via the global 860px
   .ws-hero .ws-in.split rule; at 560px the sidebar becomes a horizontal scroll strip so the
   section switcher stays usable on mobile. Container queries only, no viewport media. */
.v-hero-reseller .ws-in.split.rsl-in { grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr); align-items:center; gap:clamp(40px, 5cqw, 72px); }
.v-hero-reseller .rsl-copy { display:flex; flex-direction:column; gap:20px; min-width:0; }
.v-hero-reseller .rsl-copy .ws-kick { margin:0; }
.v-hero-reseller .rsl-copy .ws-sub { margin:0; }
.v-hero-reseller .rsl-benefits { list-style:none; margin:4px 0 0; padding:0; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-reseller .rsl-benefit { display:flex; align-items:flex-start; gap:14px; padding:15px 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-reseller .rsl-bico { flex:none; width:20px; height:20px; margin-top:1px; color:var(--accent); }
.v-hero-reseller .rsl-bico svg { width:100%; height:100%; display:block; }
.v-hero-reseller .rsl-bbody { display:flex; flex-direction:column; gap:3px; min-width:0; }
.v-hero-reseller .rsl-bt { font:600 14px var(--font); color:var(--ink); }
.v-hero-reseller .rsl-bd { font:400 13px/1.55 var(--font); color:var(--dim); }
.v-hero-reseller .rsl-copy .ws-ctarow { margin-top:6px; }
/* branded admin mock */
.v-hero-reseller .rsl-stage { position:relative; width:100%; min-width:0;
  --rsl-up:#22c55e; --rsl-down:#ef4444; --rsl-soft:color-mix(in srgb, var(--accent) 14%, transparent); }
.v-hero-reseller .rsl-mock { overflow:hidden; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); box-shadow:var(--elev, 0 30px 60px -30px rgba(0,0,0,0.5)); }
.v-hero-reseller .rsl-chrome { display:flex; align-items:center; gap:12px; height:40px; padding:0 14px;
  background:var(--panel-2); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-reseller .rsl-dots { display:inline-flex; gap:6px; flex:none; }
.v-hero-reseller .rsl-dots i { width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--ink) 18%, transparent); }
.v-hero-reseller .rsl-url { flex:1; min-width:0; text-align:center; font:500 11px var(--mono); color:var(--faint);
  background:color-mix(in srgb, var(--ink) 5%, transparent); border-radius:5px; padding:4px 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-hero-reseller .rsl-body { display:flex; min-height:300px; }
.v-hero-reseller .rsl-side { width:152px; flex:none; border-right:var(--bw, 1px) solid var(--hair);
  padding:14px 10px; display:flex; flex-direction:column; gap:10px; }
.v-hero-reseller .rsl-brand { display:flex; align-items:center; gap:8px; padding:0 6px 4px;
  font:700 12px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-hero-reseller .rsl-brand-mark { width:16px; height:16px; border-radius:5px; background:var(--accent); flex:none; }
.v-hero-reseller .rsl-navlist { display:flex; flex-direction:column; gap:2px; }
.v-hero-reseller .rsl-nav { appearance:none; -webkit-appearance:none; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; gap:9px; text-align:left; width:100%;
  font:500 12px var(--font); color:var(--faint); padding:8px 10px; border-radius:7px; white-space:nowrap;
  transition:color .16s linear; }
.v-hero-reseller .rsl-nico { width:13px; height:13px; flex:none; border-radius:3px; background:currentColor; opacity:.5; }
.v-hero-reseller .rsl-nav:hover { color:var(--dim); }
.v-hero-reseller .rsl-nav.is-active { color:var(--accent); background:var(--rsl-soft); }
.v-hero-reseller .rsl-nav.is-active .rsl-nico { opacity:1; }
.v-hero-reseller .rsl-nav:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.v-hero-reseller .rsl-main { flex:1; min-width:0; padding:18px; display:flex; flex-direction:column; gap:16px; }
.v-hero-reseller .rsl-mhead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.v-hero-reseller .rsl-mtitle { font:700 13px var(--font-head, var(--font)); color:var(--ink); }
.v-hero-reseller .rsl-avatar { width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--rsl-soft); border:1px solid var(--accent); }
.v-hero-reseller .rsl-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.v-hero-reseller .rsl-stat { background:var(--panel-2); border:var(--bw, 1px) solid var(--hair); border-radius:9px;
  padding:11px 12px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.v-hero-reseller .rsl-stat-l { font:600 9px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-hero-reseller .rsl-stat-v { font:800 clamp(16px, 2.2cqw, 22px) var(--font-head, var(--font));
  color:var(--accent); letter-spacing:-0.02em; line-height:1; }
.v-hero-reseller .rsl-stat-d { font:700 10px var(--font); }
.v-hero-reseller .rsl-stat-d.up { color:var(--rsl-up); }
.v-hero-reseller .rsl-stat-d.down { color:var(--rsl-down); }
.v-hero-reseller .rsl-chart { background:var(--panel-2); border:var(--bw, 1px) solid var(--hair); border-radius:9px;
  padding:14px; flex:1; display:flex; flex-direction:column; gap:12px; }
.v-hero-reseller .rsl-ctitle { font:600 9.5px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
.v-hero-reseller .rsl-plot { flex:1; min-height:110px; display:flex; align-items:flex-end; gap:clamp(3px, 0.7cqw, 8px); }
.v-hero-reseller .rsl-col { flex:1 1 0; height:100%; display:flex; align-items:flex-end; min-width:0; }
.v-hero-reseller .rsl-fill { width:100%; height:100%; transform-origin:bottom; transform:scaleY(0.4);
  border-radius:3px 3px 0 0; background:color-mix(in srgb, var(--accent) 30%, transparent);
  transition:transform .5s cubic-bezier(.22, .61, .36, 1); }
.v-hero-reseller .rsl-col.is-peak .rsl-fill { background:var(--accent); }
@media (prefers-reduced-motion: reduce) { .v-hero-reseller .rsl-fill { transition:none; } }
.v-hero-reseller .rsl-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@container site (max-width: 860px) {
  .v-hero-reseller .rsl-body { min-height:0; }
  .v-hero-reseller .rsl-plot { flex:none; height:130px; }
}
@container site (max-width: 560px) {
  .v-hero-reseller .rsl-body { flex-direction:column; }
  .v-hero-reseller .rsl-side { width:auto; flex-direction:row; align-items:center; gap:6px;
    overflow-x:auto; scrollbar-width:none; border-right:0; border-bottom:var(--bw, 1px) solid var(--hair); padding:8px 10px; }
  .v-hero-reseller .rsl-side::-webkit-scrollbar { display:none; }
  .v-hero-reseller .rsl-brand { display:none; }
  .v-hero-reseller .rsl-navlist { flex-direction:row; gap:4px; }
  .v-hero-reseller .rsl-nav { flex:none; padding:6px 11px; }
  .v-hero-reseller .rsl-main { padding:14px; }
  .v-hero-reseller .rsl-stats { grid-template-columns:1fr 1fr; }
}
/* photo essay — ported from SB_04 drafts/hero-photo-essay (full-bleed photojournalism opener: fullscreen
   landscape image, bottom-anchored editorial byline, read-time + scroll cue). The origin's single static
   <img> becomes a REAL photo essay: a crossfading gradient-placeholder stage (no external images) driven by
   a roving-tabindex filmstrip that swaps the lead frame and updates a live caption. Origin --hpe-* vars map
   to tokens: bg->--bg, text->--ink, secondary->--dim/--faint, accent->--accent, divider->--hair,
   font->--font/--font-head/--mono. Scenes crossfade via opacity ONLY (never background), no blur; scene
   colour is decorative placeholder imagery grounded into var(--bg) so the scrim blends. Container queries
   stack the body + inline the aside (860) and drop the scroll cue (560); idle scroll pulse honours reduced-motion. */
.ws-hero.v-hero-photo-essay { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(560px, 92vh, 900px); display:flex; flex-direction:column; justify-content:flex-end;
  gap:clamp(1.3rem, 2.6cqw, 2.2rem); padding-bottom:clamp(1.5rem, 3cqw, 2.6rem); background:var(--bg); }
/* crossfading photo stage (gradient placeholders, no external imagery) */
.v-hero-photo-essay .hpe-stage { position:absolute; inset:0; z-index:0; }
.v-hero-photo-essay .hpe-shot { position:absolute; inset:0; opacity:0; background:var(--sc, var(--bg)); transition:opacity .7s ease; }
.v-hero-photo-essay .hpe-shot.on { opacity:1; }
.v-hero-photo-essay .hpe-grain { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.09;
  mix-blend-mode:overlay; background-repeat:repeat; background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='hpen'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hpen)'/%3E%3C/svg%3E"); }
/* scene palettes — decorative photo stand-ins, each grounds to var(--bg) */
.v-hero-photo-essay .s0 { --sc:radial-gradient(88% 66% at 74% 12%, hsl(40 92% 62% / .58), transparent 48%), radial-gradient(120% 96% at 22% 26%, hsl(20 78% 44% / .40), transparent 62%), linear-gradient(178deg, hsl(30 44% 28%), color-mix(in srgb, hsl(22 40% 18%) 55%, var(--bg)) 48%, var(--bg)); }
.v-hero-photo-essay .s1 { --sc:radial-gradient(90% 70% at 30% 14%, hsl(205 78% 60% / .52), transparent 50%), radial-gradient(120% 96% at 78% 30%, hsl(224 44% 40% / .40), transparent 64%), linear-gradient(178deg, hsl(212 40% 32%), color-mix(in srgb, hsl(216 38% 20%) 55%, var(--bg)) 48%, var(--bg)); }
.v-hero-photo-essay .s2 { --sc:radial-gradient(96% 60% at 50% 16%, hsl(178 66% 58% / .50), transparent 52%), radial-gradient(120% 96% at 20% 70%, hsl(196 60% 46% / .34), transparent 60%), linear-gradient(178deg, hsl(186 38% 30%), color-mix(in srgb, hsl(190 40% 18%) 55%, var(--bg)) 50%, var(--bg)); }
.v-hero-photo-essay .s3 { --sc:radial-gradient(84% 64% at 68% 12%, hsl(330 66% 58% / .48), transparent 48%), radial-gradient(110% 92% at 26% 28%, hsl(276 56% 52% / .44), transparent 60%), linear-gradient(178deg, hsl(286 36% 30%), color-mix(in srgb, hsl(280 34% 18%) 55%, var(--bg)) 50%, var(--bg)); }
.v-hero-photo-essay .s4 { --sc:radial-gradient(92% 64% at 40% 14%, hsl(140 56% 52% / .46), transparent 52%), radial-gradient(120% 96% at 80% 40%, hsl(96 46% 40% / .36), transparent 62%), linear-gradient(178deg, hsl(138 34% 26%), color-mix(in srgb, hsl(130 34% 16%) 55%, var(--bg)) 50%, var(--bg)); }
.v-hero-photo-essay .s5 { --sc:radial-gradient(70% 70% at 32% 10%, hsl(152 82% 56% / .50), transparent 46%), radial-gradient(80% 80% at 72% 20%, hsl(300 66% 58% / .40), transparent 52%), linear-gradient(178deg, hsl(210 44% 20%), color-mix(in srgb, hsl(230 40% 14%) 60%, var(--bg)) 52%, var(--bg)); }
/* bottom-anchored legibility scrim (origin --hpe-overlay) */
.v-hero-photo-essay .hpe-scrim { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, var(--bg) 1%, color-mix(in srgb, var(--bg) 82%, transparent) 24%, color-mix(in srgb, var(--bg) 42%, transparent) 52%, transparent 78%),
    linear-gradient(96deg, color-mix(in srgb, var(--bg) 42%, transparent), transparent 46%); }
/* editorial body */
.v-hero-photo-essay .hpe-body { position:relative; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(1.4rem, 4cqw, 3.6rem); }
.v-hero-photo-essay .hpe-main { display:flex; flex-direction:column; gap:clamp(.6rem, 1.2cqw, 1rem); min-width:0; }
.v-hero-photo-essay .hpe-issue { margin:0; }
.v-hero-photo-essay .hpe-head { line-height:1.02; letter-spacing:-0.03em; text-wrap:balance; max-width:18ch; }
.v-hero-photo-essay .hpe-dek { color:color-mix(in srgb, var(--ink) 82%, transparent); max-width:52ch; text-wrap:pretty; }
.v-hero-photo-essay .hpe-by { display:flex; align-items:center; gap:.7rem; margin-top:.35rem; }
.v-hero-photo-essay .hpe-ava { width:2.35rem; height:2.35rem; border-radius:50%; flex:none; display:grid; place-items:center;
  font:700 .72rem/1 var(--font); letter-spacing:.03em; color:var(--accent-text, var(--bg)); background:var(--accent);
  border:1px solid color-mix(in srgb, var(--ink) 24%, transparent); }
.v-hero-photo-essay .hpe-by-meta { display:flex; flex-direction:column; gap:.14rem; min-width:0; }
.v-hero-photo-essay .hpe-by-name { font:600 .82rem/1.2 var(--font); color:var(--ink); }
.v-hero-photo-essay .hpe-by-role { font:400 .68rem/1.2 var(--font); font-style:normal; letter-spacing:.02em; color:var(--dim); }
/* aside: read time + scroll cue */
.v-hero-photo-essay .hpe-aside { position:relative; z-index:3; flex:none; align-self:stretch; display:flex; flex-direction:column;
  align-items:flex-end; justify-content:flex-end; gap:1.4rem; border-left:var(--bw, 1px) solid var(--hair); padding-left:clamp(1.1rem, 2.4cqw, 2.2rem); }
.v-hero-photo-essay .hpe-read { display:flex; flex-direction:column; align-items:flex-end; gap:.1rem; }
.v-hero-photo-essay .hpe-read-val { font:700 1.5rem/1 var(--font-head, var(--font)); letter-spacing:-0.02em; color:var(--ink); }
.v-hero-photo-essay .hpe-read-lab { font:500 .6rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-style:normal; }
.v-hero-photo-essay .hpe-scroll { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.v-hero-photo-essay .hpe-scroll-line { width:1px; height:2.1rem; background:linear-gradient(180deg, var(--faint), transparent);
  transform-origin:top center; animation:hpeScroll 2.4s ease-in-out infinite; }
.v-hero-photo-essay .hpe-scroll-text { font:500 .58rem/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--faint); }
@keyframes hpeScroll { 0%, 100% { transform:scaleY(.4); opacity:.5; } 50% { transform:scaleY(1); opacity:1; } }
/* filmstrip gallery (the real photo essay) */
.v-hero-photo-essay .hpe-gallery { position:relative; z-index:3; display:flex; flex-direction:column; gap:.7rem; }
.v-hero-photo-essay .hpe-cap { display:flex; align-items:baseline; gap:.7rem; margin:0; min-height:1.1rem; }
.v-hero-photo-essay .hpe-cap-num { flex:none; font:600 .64rem/1 var(--mono); letter-spacing:.1em; color:var(--accent); }
.v-hero-photo-essay .hpe-cap-text { font:400 .84rem/1.4 var(--font); color:var(--dim); }
.v-hero-photo-essay .hpe-strip { display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:thin; scrollbar-color:var(--hair) transparent; }
.v-hero-photo-essay .hpe-strip::-webkit-scrollbar { height:6px; }
.v-hero-photo-essay .hpe-strip::-webkit-scrollbar-thumb { background:var(--hair); border-radius:99px; }
.v-hero-photo-essay .hpe-thumb { flex:0 0 auto; position:relative; width:clamp(4.6rem, 9cqw, 6.4rem); padding:0; border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * .55); background:var(--panel); color:inherit; cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; text-align:left; transition:transform 160ms ease, border-color 160ms ease; }
.v-hero-photo-essay .hpe-thumb-sc { display:block; height:clamp(2.3rem, 4.6cqw, 3.2rem); background:var(--sc, var(--panel-2)); }
.v-hero-photo-essay .hpe-thumb-n { position:absolute; top:.28rem; left:.4rem; font:600 .58rem/1 var(--mono); color:var(--ink); text-shadow:0 1px 4px rgba(0,0,0,.65); }
.v-hero-photo-essay .hpe-thumb-l { padding:.32rem .45rem; font:500 .64rem/1.1 var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-hero-photo-essay .hpe-thumb:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.v-hero-photo-essay .hpe-thumb:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-photo-essay .hpe-thumb.on { border-color:var(--accent); }
.v-hero-photo-essay .hpe-thumb.on .hpe-thumb-l { color:var(--ink); }
@container site (max-width: 860px) {
  .ws-hero.v-hero-photo-essay { min-height:clamp(520px, 82vh, 780px); }
  .v-hero-photo-essay .hpe-body { flex-direction:column; align-items:flex-start; gap:1.3rem; }
  .v-hero-photo-essay .hpe-aside { flex-direction:row; align-items:center; justify-content:space-between; width:100%; align-self:auto;
    border-left:0; border-top:var(--bw, 1px) solid var(--hair); padding-left:0; padding-top:1rem; }
  .v-hero-photo-essay .hpe-read { flex-direction:row; align-items:baseline; gap:.4rem; }
}
@container site (max-width: 560px) {
  .v-hero-photo-essay .hpe-scroll { display:none; }
  .v-hero-photo-essay .hpe-head { max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-photo-essay .hpe-shot { transition:none; }
  .v-hero-photo-essay .hpe-thumb { transition:none; }
  .v-hero-photo-essay .hpe-scroll-line { animation:none; }
}
/* portfolio grid — ported from SB_04 drafts/hero-portfolio-grid (studio "selected work"
   opener: headline + category chips over a masonry-ish project grid). The origin's static
   filter chips become a real roving-tabindex radiogroup that live-filters the tiles; the grid
   packs holes with grid-auto-flow:dense, and each tile is a full-bleed keyboard-focusable
   project link. Entrance motion belongs to the site reveal system — only hover/focus motion
   runs here, on transform/opacity/color (never on a background). Container queries, not media. */
.v-hero-portfolio-grid .hpog-wrap { display:flex; flex-direction:column; gap:clamp(30px, 4cqw, 48px); }
.v-hero-portfolio-grid .hpog-head { display:flex; flex-direction:row; align-items:flex-end;
  justify-content:space-between; gap:clamp(20px, 3cqw, 40px); flex-wrap:wrap; }
.v-hero-portfolio-grid .hpog-meta { display:flex; flex-direction:column; gap:12px; min-width:0; max-width:62ch; }
.v-hero-portfolio-grid .hpog-meta .ws-kick { margin:0 0 2px; }
.v-hero-portfolio-grid .hpog-meta .ws-h1 { margin:0; }
.v-hero-portfolio-grid .hpog-meta .ws-sub { margin:4px 0 0; }
/* filter chips — a real radiogroup (roving tabindex, aria-checked) */
.v-hero-portfolio-grid .hpog-filters { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.v-hero-portfolio-grid .hpog-filter { appearance:none; cursor:pointer; border:var(--bw, 1px) solid var(--hair);
  background:transparent; color:var(--dim); font:500 12.5px var(--font); letter-spacing:0.02em;
  padding:8px 16px; border-radius:999px; transition:color .16s linear, border-color .16s linear; }
.v-hero-portfolio-grid .hpog-filter:hover { color:var(--ink);
  border-color:color-mix(in srgb, var(--ink) 26%, var(--hair)); }
.v-hero-portfolio-grid .hpog-filter:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-portfolio-grid .hpog-filter[aria-checked="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
/* project grid — masonry via spanning tiles; dense flow repacks when a filter hides cards */
.v-hero-portfolio-grid .hpog-grid { display:grid; grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:clamp(190px, 21cqw, 280px); grid-auto-flow:dense; gap:clamp(10px, 1.2cqw, 14px); }
.v-hero-portfolio-grid .hpog-tile { position:relative; overflow:hidden; min-width:0; isolation:isolate;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); background:var(--panel); }
.v-hero-portfolio-grid .hpog-tile[hidden] { display:none; }
.v-hero-portfolio-grid .hpog-tile.is-tall { grid-row:span 2; }
.v-hero-portfolio-grid .hpog-tile.is-wide { grid-column:span 2; }
/* gradient placeholder thumbnails — five deterministic token-tinted looks, no external images */
.v-hero-portfolio-grid .hpog-thumb { position:absolute; inset:0; z-index:0; background:var(--panel-2);
  transform:scale(1); transition:transform .5s ease; }
.v-hero-portfolio-grid .hpog-tile:hover .hpog-thumb { transform:scale(1.05); }
.v-hero-portfolio-grid .hpog-thumb.ph-a { background-image:radial-gradient(120% 120% at 26% 20%,
  color-mix(in srgb, var(--accent) 30%, var(--panel)), var(--panel) 74%); }
.v-hero-portfolio-grid .hpog-thumb.ph-b { background-image:linear-gradient(145deg,
  color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel-2) 80%); }
.v-hero-portfolio-grid .hpog-thumb.ph-c { background-image:radial-gradient(90% 100% at 78% 82%,
  color-mix(in srgb, var(--accent) 26%, var(--panel-2)), var(--panel) 70%); }
.v-hero-portfolio-grid .hpog-thumb.ph-d { background-image:conic-gradient(from 210deg at 32% 30%,
  color-mix(in srgb, var(--accent) 24%, var(--panel)), var(--panel-2) 62%, var(--panel)); }
.v-hero-portfolio-grid .hpog-thumb.ph-e { background-image:linear-gradient(35deg, var(--panel-2),
  color-mix(in srgb, var(--accent) 20%, var(--panel)) 84%); }
/* legibility veil — fixed gradient, no transition (rule: never transition a background) */
.v-hero-portfolio-grid .hpog-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb, var(--bg) 88%, transparent) 2%,
    color-mix(in srgb, var(--bg) 42%, transparent) 36%, transparent 70%); }
.v-hero-portfolio-grid .hpog-info { position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:clamp(14px, 1.6cqw, 20px); pointer-events:none; }
.v-hero-portfolio-grid .hpog-client { font:600 10px var(--mono); letter-spacing:1.6px;
  text-transform:uppercase; color:var(--dim); }
.v-hero-portfolio-grid .hpog-title { margin:0; font:600 clamp(15px, 1.7cqw, 19px)/1.2 var(--font-head, var(--font));
  letter-spacing:-0.01em; color:var(--ink); transition:color .16s linear; }
.v-hero-portfolio-grid .hpog-tile:hover .hpog-title,
.v-hero-portfolio-grid .hpog-tile:focus-within .hpog-title { color:var(--accent); }
.v-hero-portfolio-grid .hpog-year { margin-top:2px; font:500 11px var(--font); color:var(--faint); }
.v-hero-portfolio-grid .hpog-cta { display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font:600 12px var(--font); letter-spacing:0.02em; color:var(--accent);
  opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease; }
.v-hero-portfolio-grid .hpog-cta svg { width:14px; height:14px; }
.v-hero-portfolio-grid .hpog-tile:hover .hpog-cta,
.v-hero-portfolio-grid .hpog-tile:focus-within .hpog-cta { opacity:1; transform:translateY(0); }
/* full-tile action — a stretched, keyboard-focusable link over the whole card */
.v-hero-portfolio-grid .hpog-open { position:absolute; inset:0; z-index:3; cursor:pointer;
  appearance:none; border:0; padding:0; background:transparent; }
.v-hero-portfolio-grid .hpog-open:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:var(--radius, 14px); }
.v-hero-portfolio-grid .hpog-status { margin:0; min-height:1.2em; font:500 12px var(--font); color:var(--faint); }
@container site (max-width: 860px) {
  .v-hero-portfolio-grid .hpog-head { flex-direction:column; align-items:flex-start; gap:22px; }
  .v-hero-portfolio-grid .hpog-grid { grid-template-columns:repeat(2, 1fr); }
}
@container site (max-width: 560px) {
  .v-hero-portfolio-grid .hpog-grid { grid-template-columns:1fr; grid-auto-rows:200px; }
  .v-hero-portfolio-grid .hpog-tile.is-tall { grid-row:auto; min-height:230px; }
  .v-hero-portfolio-grid .hpog-tile.is-wide { grid-column:auto; }
  .v-hero-portfolio-grid .hpog-cta { opacity:1; transform:none; }
}
/* hero-security — ported from SB_04 drafts/hero-security (enterprise-security split:
   token-icon feature list + CTAs left, a shield "monitor" right). Origin hexes map to
   tokens (blue -> --accent, green -> semantic --ok, surfaces -> --panel/--hair); the
   emoji feature bullets become S_ICONS marks. The dead "Threat monitoring active" chip
   becomes a REAL live monitor: mount() ticks a requests-verified counter up via
   whenVisible. Pulsing rings + blinking dot are kept as ambient loops (transform/opacity
   only, no background transitions, no blur). Container queries stack the stage below the
   copy behind a rule; reduced-motion freezes the pulse and shows a static count. */
.v-hero-security .hsec-in { display:grid; grid-template-columns:1fr minmax(288px, 384px); align-items:center; }
.v-hero-security .hsec-copy { display:flex; flex-direction:column; gap:24px; padding-right:60px; max-width:60ch; }
.v-hero-security .hsec-copy .ws-sub { max-width:48ch; }
.v-hero-security .hsec-copy .ws-ctarow { margin-top:6px; }
/* feature list */
.v-hero-security .hsec-feats { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:15px; }
.v-hero-security .hsec-feat { display:flex; align-items:flex-start; gap:13px; }
.v-hero-security .hsec-fi { flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
  color:var(--accent); background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.v-hero-security .hsec-fi svg { width:17px; height:17px; }
.v-hero-security .hsec-ft { display:flex; flex-direction:column; gap:3px; }
.v-hero-security .hsec-ft b { font:600 14px/1.3 var(--font); color:var(--ink); }
.v-hero-security .hsec-ft i { font:400 13px/1.5 var(--font); font-style:normal; color:var(--dim); }
/* shield "monitor" stage */
.v-hero-security .hsec-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  align-self:stretch; padding-left:56px; border-left:var(--bw, 1px) solid var(--hair); }
.v-hero-security .hsec-shieldwrap { position:relative; width:250px; height:250px; display:grid; place-items:center; }
.v-hero-security .hsec-ring { position:absolute; border-radius:50%; border:1.5px solid var(--ok, #22c55e);
  opacity:0; animation:hsec-pulse 2.8s ease-out infinite; }
.v-hero-security .hsec-ring.r1 { width:150px; height:150px; animation-delay:0s; }
.v-hero-security .hsec-ring.r2 { width:200px; height:200px; animation-delay:.9s; }
.v-hero-security .hsec-ring.r3 { width:250px; height:250px; animation-delay:1.8s; }
@keyframes hsec-pulse { 0% { opacity:.6; transform:scale(.82); } 100% { opacity:0; transform:scale(1.04); } }
.v-hero-security .hsec-shield { position:relative; z-index:2; width:126px; height:146px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 55%, var(--hair));
  clip-path:polygon(50% 0%, 100% 18%, 100% 60%, 50% 100%, 0% 60%, 0% 18%);
  transition:transform .25s ease; }
.v-hero-security .hsec-shield::before { content:''; position:absolute; inset:2px; z-index:1;
  clip-path:polygon(50% 0%, 100% 18%, 100% 60%, 50% 100%, 0% 60%, 0% 18%);
  background:linear-gradient(165deg, color-mix(in srgb, var(--accent) 26%, var(--panel)), color-mix(in srgb, var(--accent) 7%, var(--panel))); }
.v-hero-security .hsec-shieldwrap:hover .hsec-shield { transform:translateY(-2px) scale(1.03); }
.v-hero-security .hsec-lock { position:relative; z-index:2; display:grid; color:var(--accent); }
.v-hero-security .hsec-lock svg { width:44px; height:44px; }
/* live readout */
.v-hero-security .hsec-monitor { display:flex; flex-direction:column; align-items:center; gap:12px; }
.v-hero-security .hsec-status { display:inline-flex; align-items:center; gap:8px; padding:6px 15px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--panel) 80%, transparent);
  font:600 12px var(--font); color:var(--ok, #22c55e); white-space:nowrap; }
.v-hero-security .hsec-dot { width:7px; height:7px; border-radius:50%; background:var(--ok, #22c55e);
  box-shadow:0 0 7px color-mix(in srgb, var(--ok, #22c55e) 60%, transparent); animation:hsec-blink 1.8s ease-in-out infinite; }
@keyframes hsec-blink { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
.v-hero-security .hsec-count { display:flex; flex-direction:column; align-items:center; gap:2px; }
.v-hero-security .hsec-count b { font:700 22px/1 var(--mono, var(--font)); color:var(--ink); letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.v-hero-security .hsec-count i { font:500 10px var(--mono, var(--font)); font-style:normal; letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
@container site (max-width: 860px) {
  .v-hero-security .hsec-in { grid-template-columns:1fr; gap:40px; }
  .v-hero-security .hsec-copy { padding-right:0; max-width:none; }
  .v-hero-security .hsec-stage { padding-left:0; border-left:0; border-top:var(--bw, 1px) solid var(--hair); padding-top:40px; }
}
@container site (max-width: 560px) {
  .v-hero-security .hsec-shieldwrap { width:212px; height:212px; }
  .v-hero-security .hsec-ring.r3 { width:212px; height:212px; }
  .v-hero-security .hsec-ring.r2 { width:172px; height:172px; }
  .v-hero-security .hsec-ring.r1 { width:132px; height:132px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-security .hsec-ring { animation:none; opacity:.22; }
  .v-hero-security .hsec-dot { animation:none; }
  .v-hero-security .hsec-shield { transition:none; }
}
/* hero-referral — ported from SB_04 drafts/hero-referral (refer-a-friend opener: reward headline, a 3-step
   how-it-works rail with connectors, a REAL one-click copy referral-link field, a live earnings stat strip,
   then the CTA). Centered single column via a flex hrf-wrap; reuses ws-kick / ws-h1+ws-grad / ws-sub for the
   copy, ws-herostats/ws-hstat for the stat strip and ws-btn for the CTA. Origin --hrf-* vars map to theme
   tokens: accent (label, icons, gradient reward word, copy button), ink headings, dim body, panel field,
   hair borders/dividers; the origin's green "copied" flash is dropped for the house accent-confirm + label
   swap. The copy button is wired live in mount() (clipboard + execCommand fallback + aria-live). Only
   opacity/color transition — entrance motion is left to the reveal system. Stacks at 560px. */
.ws-hero.v-hero-referral { padding:clamp(72px, 10cqw, 116px) 0; }
.v-hero-referral .hrf-wrap { width:min(680px, 90cqw); display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:clamp(22px, 3.2cqw, 34px); }
.v-hero-referral .ws-kick { margin-bottom:0; }
.v-hero-referral .ws-h1 { max-width:16ch; line-height:1.05; }
.v-hero-referral .ws-sub { max-width:48ch; }
/* how-it-works rail */
.v-hero-referral .hrf-steps { width:100%; display:flex; align-items:flex-start; justify-content:center; }
.v-hero-referral .hrf-step { flex:1 1 0; max-width:190px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.v-hero-referral .hrf-ico { width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  flex-shrink:0; color:var(--accent); background:var(--accent-fill); }
.v-hero-referral .hrf-ico.on { background:color-mix(in srgb, var(--accent) 20%, transparent); }
.v-hero-referral .hrf-ico svg { width:24px; height:24px; }
.v-hero-referral .hrf-stitle { font:600 15px var(--font); color:var(--ink); }
.v-hero-referral .hrf-sdesc { max-width:17ch; font:400 13px/1.5 var(--font); color:var(--dim); }
.v-hero-referral .hrf-conn { flex:0 0 auto; align-self:flex-start; width:52px; height:2px; margin-top:27px;
  background-image:repeating-linear-gradient(to right,
    color-mix(in srgb, var(--ink) 22%, transparent) 0 5px, transparent 5px 10px); }
/* referral-link field */
.v-hero-referral .hrf-linkbox { width:100%; display:flex; flex-direction:column; gap:8px; text-align:left; }
.v-hero-referral .hrf-linklabel { font:500 13px var(--font); color:var(--ink); }
.v-hero-referral .hrf-linkrow { display:flex; border:var(--bw, 1px) solid var(--hair); overflow:hidden; background:var(--panel);
  border-radius:calc(var(--radius, 12px) * .55); }
.v-hero-referral .hrf-linkrow:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-referral .hrf-linkinput { flex:1; min-width:0; border:none; outline:none; background:transparent;
  color:var(--dim); font:400 13.5px var(--mono); padding:12px 14px; text-overflow:ellipsis; }
.v-hero-referral .hrf-copy { flex-shrink:0; display:inline-flex; align-items:center; gap:7px; border:none;
  cursor:pointer; padding:0 16px; background:var(--accent); color:var(--accent-text, #04121a);
  font:600 13px var(--font); transition:opacity 140ms linear; }
.v-hero-referral .hrf-copy:hover { opacity:.88; }
.v-hero-referral .hrf-copy:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-referral .hrf-copy svg { width:15px; height:15px; }
.v-hero-referral .hrf-live { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* stat strip + CTA (rely on the wrap gap, not base margins) */
.v-hero-referral .hrf-stats { width:100%; margin-top:0; }
.v-hero-referral .ws-ctarow { margin-top:0; justify-content:center; }
@container site (max-width: 560px) {
  .v-hero-referral .hrf-steps { flex-direction:column; align-items:center; }
  .v-hero-referral .hrf-step { max-width:none; }
  .v-hero-referral .hrf-conn { width:2px; height:26px; margin:4px 0; align-self:center;
    background-image:repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 22%, transparent) 0 5px, transparent 5px 10px); }
  .v-hero-referral .hrf-stats .ws-hstat { padding:0 clamp(10px, 4cqw, 26px); }
}
/* Hero / Radial Glow — ported SB_04 drafts/hero-radial-glow. A centered message (badge, headline,
   dual CTAs, proof stats) floats over one breathing glow orb. The origin's baked rgba(90,122,222)
   glow is rebuilt from --accent via color-mix so it rides the active preset — no hardcoded hex. The
   pulse is ambient (opacity + scale only, like the ticker marquee) and reduced-motion gated; entrance
   choreography is delegated to the reveal system via ws-chor, not baked here. mount() adds a real
   pointer parallax — the glow drifts toward the cursor by translating (transform only, never the
   background). Container queries only. */
.v-hero-radial-glow { position:relative; overflow:hidden; isolation:isolate; text-align:center;
  min-height:clamp(460px, 76cqh, 760px); display:grid; place-items:center;
  padding:clamp(64px, 10cqw, 104px) 24px; }
.v-hero-radial-glow .ws-in { z-index:1; }
.v-hero-radial-glow .ws-h1 { max-width:15ch; margin-inline:auto; }
.v-hero-radial-glow .hrg-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  transform:translate3d(calc(var(--gx, 0) * 1px), calc(var(--gy, 0) * 1px), 0);
  transition:transform 480ms cubic-bezier(.22,.61,.36,1); }
.v-hero-radial-glow .hrg-orb { position:absolute; left:50%; top:46%; transform:translate(-50%, -50%);
  width:min(760px, 122cqw); height:min(520px, 88cqw);
  background:radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent) 9%, transparent) 40%, transparent 70%);
  animation:hrgPulse 5s ease-in-out infinite; }
@keyframes hrgPulse {
  0%, 100% { opacity:.6; transform:translate(-50%, -50%) scale(1); }
  50% { opacity:1; transform:translate(-50%, -50%) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-radial-glow .hrg-glow { transition:none; }
  .v-hero-radial-glow .hrg-orb { animation:none; opacity:.82; }
}
@container site (max-width: 560px) {
  .v-hero-radial-glow { min-height:clamp(380px, 62cqh, 520px); padding:clamp(56px, 12cqw, 72px) 20px; }
  .v-hero-radial-glow .hrg-orb { width:min(560px, 150cqw); height:min(420px, 116cqw); }
}
/* Hero / Screenshot Showcase — ported from SB_04 drafts/hero-screenshot.
   Centered launch copy over a breakout CSS product-shot (no images); the
   feature strip is a live roving-tabindex tablist that drives the screenshot
   (URL slug + rail highlight + panel title/desc). Origin --hst2-* vars map to
   theme tokens; baked entrance anims dropped (anims.js owns entrances);
   transitions ride colour only. Responsive by container query. */
.v-hero-screenshot .v-hss-top { width:min(680px, 88cqw); margin:0 auto; }

/* breakout screenshot — a CSS browser window, no image */
.v-hss-shotwrap { width:min(1040px, 92cqw); margin:clamp(38px, 5cqw, 60px) auto 0; }
.v-hss-win { border:var(--bw, 1px) solid var(--hair); border-radius:14px; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad, none);
  box-shadow:0 -2px 60px color-mix(in srgb, var(--accent) 12%, transparent),
             0 24px 60px -30px color-mix(in srgb, var(--ink) 40%, transparent); }
.v-hss-bar { display:flex; align-items:center; gap:6px; padding:10px 14px;
  border-bottom:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--bg) 45%, var(--panel)); }
.v-hss-dot { width:9px; height:9px; border-radius:99px; flex:none;
  background:color-mix(in srgb, var(--ink) 14%, transparent); }
.v-hss-url { width:min(340px, 55%); margin:0 auto; text-align:center; padding:3px 12px;
  border-radius:7px; background:color-mix(in srgb, var(--bg) 70%, transparent);
  font:500 10.5px var(--mono); color:var(--faint); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.v-hss-url b { color:var(--accent); font-weight:600; }
.v-hss-screen { display:grid; grid-template-columns:58px 1fr; min-height:340px;
  background:color-mix(in srgb, var(--bg) 32%, var(--panel)); }
.v-hss-rail { display:flex; flex-direction:column; gap:10px; padding:14px 0; align-items:center;
  border-right:var(--bw, 1px) solid var(--hair); }
.v-hss-rico { display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--dim); transition:color 160ms linear; }
.v-hss-rico svg { width:16px; height:16px; }
.v-hss-rico.on { background:var(--accent-fill); color:var(--accent); }
.v-hss-main { padding:20px 22px; display:flex; flex-direction:column; gap:13px; min-width:0; }
.v-hss-mhead { display:flex; flex-direction:column; gap:5px; }
.v-hss-mtitle { font:600 15px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-hss-mdesc { font:400 12.5px/1.5 var(--font); color:var(--dim); }
.v-hss-mhero { min-height:74px; border-radius:11px;
  background:linear-gradient(120deg, var(--accent-fill), color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent)); }
.v-hss-mrow { display:grid; grid-template-columns:repeat(3, 1fr); gap:11px; }
.v-hss-mrow i { min-height:52px; border-radius:9px; background:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-hss-mline { height:9px; border-radius:5px; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.v-hss-mline.sh { width:56%; }

/* feature strip — a real tablist; 1px hairline dividers via the gap technique */
.v-hss-features { width:min(1080px, 92cqw); margin:clamp(34px, 4.4cqw, 52px) auto 0;
  display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr)); gap:1px;
  background:var(--hair); border-top:var(--bw, 1px) solid var(--hair); }
.v-hss-feat { display:flex; flex-direction:column; gap:7px; padding:20px 18px; text-align:left;
  background:var(--bg); border:0; cursor:pointer; font:inherit; color:inherit;
  box-shadow:inset 0 0 0 0 var(--accent); }
.v-hss-feat.on { box-shadow:inset 0 2px 0 0 var(--accent); }
.v-hss-ft { font:600 13px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em;
  transition:color 160ms linear; }
.v-hss-fd { font:400 12px/1.55 var(--font); color:var(--dim); }
.v-hss-feat:hover .v-hss-ft, .v-hss-feat.on .v-hss-ft { color:var(--accent); }
.v-hss-feat:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }

@container site (max-width: 860px) {
  .v-hss-features { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .v-hss-screen { min-height:300px; }
}
@container site (max-width: 560px) {
  .v-hss-shotwrap, .v-hss-features { width:92cqw; }
  .v-hss-features { grid-template-columns:1fr; }
  .v-hss-screen { grid-template-columns:46px 1fr; min-height:0; }
  .v-hss-main { padding:16px; }
  .v-hss-mrow { gap:8px; }
}
/* hero-split-color — SB_04 drafts/hero-split-color. Two-tone full-bleed split: copy on the base
   half, an accent-washed panel half holding an image + proof stats. Origin --hsc3-* vars map to
   tokens (left-bg->--bg, right-bg->an --accent wash, heading->--ink, body->--dim, accent->--accent,
   split line->--hair); the colored half derives from --accent via color-mix so it follows the theme
   instead of the origin's baked brand blue. Entrance motion belongs to anims.js; only btn/link hover
   is kept. Responsive by container query, not viewport. */
.v-hero-split-color { padding:0; }
.v-hero-split-color .hsc-grid { display:grid; grid-template-columns:1fr 1fr; min-height:600px; }
.v-hero-split-color .hsc-left, .v-hero-split-color .hsc-right {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px, 6.5cqw, 92px) clamp(26px, 4.6cqw, 76px); }
.v-hero-split-color .hsc-left { background:var(--bg); border-right:var(--bw, 1px) solid var(--hair); }
.v-hero-split-color .hsc-right { background:color-mix(in oklab, var(--accent) 18%, var(--bg));
  gap:clamp(24px, 3cqw, 38px); }
.v-hero-split-color .hsc-left .ws-kick { margin-bottom:20px; }
.v-hero-split-color .hsc-left .ws-h1 { letter-spacing:-0.03em; }
.v-hero-split-color .hsc-left .ws-sub { margin-top:20px; max-width:42ch; }
.v-hero-split-color .hsc-panel { min-height:0; aspect-ratio:4 / 3; }
.v-hero-split-color .hsc-stats { margin-top:0; }
.v-hero-split-color .hsc-stats .ws-hstat { padding:0 clamp(16px, 2.4cqw, 30px); text-align:left; }
@container site (max-width: 860px) {
  .v-hero-split-color .hsc-grid { grid-template-columns:1fr; min-height:0; }
  .v-hero-split-color .hsc-left { border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
}
@container site (max-width: 560px) {
  .v-hero-split-color .hsc-stats { flex-direction:column; align-items:flex-start; gap:0; }
  .v-hero-split-color .hsc-stats .ws-hstat { padding:16px 0; width:100%; align-items:flex-start; text-align:left; }
  .v-hero-split-color .hsc-stats .ws-hstat + .ws-hstat { border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
}
/* Hero / Split Code — SB_04 drafts/hero-split-code. Split dev opener: badge + accent-word headline +
   CTAs + proof-stat strip beside a syntax-lit code editor whose FILE TABS are a real roving-tabindex
   tablist (Arrow/Home/End, aria-selected) that switch the shown snippet, plus a working copy-to-clipboard
   button (aria-live confirm). The editor is a fixed dark surface (theme-independent dev-tool convention)
   with LITERAL syntax tints faithful to the source draft and scrolls-x in its own box; everything else
   reads theme tokens. Baked entrance anims dropped (anims.js owns entrances). Split narrow-stacks via the
   global 860px rule (.ws-hero .ws-in.split); container queries only. */
.v-hero-split-code .ws-in.split { grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(36px, 6cqw, 72px); }
.v-hero-split-code .ws-hcopy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; }
.v-hero-split-code .scd-badge { align-self:flex-start; font-family:var(--mono); font-weight:600;
  font-size:11px; letter-spacing:0.04em; text-transform:none; }
.v-hero-split-code .ws-sub { margin-top:16px; max-width:46ch; }
.v-hero-split-code .scd-stats { margin-top:36px; }

/* code window — fixed dark editor surface (dev-tool convention) */
.v-hero-split-code .scd-win { position:relative; min-width:0; align-self:center; width:100%;
  border-radius:var(--radius, 12px); overflow:hidden; background:#0d0d12;
  border:1px solid rgba(255,255,255,0.1); box-shadow:0 24px 55px -32px rgba(0,0,0,0.7); }
.v-hero-split-code .scd-bar { display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.08); }
.v-hero-split-code .scd-dot { width:11px; height:11px; border-radius:50%; flex:none; }
.v-hero-split-code .scd-dot.r { background:#ff5f56; }
.v-hero-split-code .scd-dot.y { background:#ffbd2e; }
.v-hero-split-code .scd-dot.g { background:#27c93f; }
.v-hero-split-code .scd-copy { margin-left:auto; padding:4px 12px; border-radius:7px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#cdd3de;
  font:600 10px var(--mono, ui-monospace, monospace); letter-spacing:0.8px; text-transform:uppercase;
  transition:color 140ms linear, border-color 140ms linear; }
.v-hero-split-code .scd-copy:hover { color:#fff; border-color:rgba(255,255,255,0.3); }
.v-hero-split-code .scd-copy:focus-visible { outline:2px solid #7aaeff; outline-offset:2px; }
.v-hero-split-code .scd-copy.ok { color:#27c93f; border-color:color-mix(in srgb, #27c93f 55%, transparent); }

/* file tabs — real roving-tabindex tablist */
.v-hero-split-code .scd-tabs { display:flex; gap:2px; padding:0 8px; overflow-x:auto; scrollbar-width:none;
  background:rgba(255,255,255,0.015); border-bottom:1px solid rgba(255,255,255,0.07); }
.v-hero-split-code .scd-tabs::-webkit-scrollbar { display:none; }
.v-hero-split-code .scd-tab { flex:none; cursor:pointer; padding:9px 14px; border:none; background:transparent;
  color:#8b91a0; font:500 12px var(--mono, ui-monospace, monospace); border-bottom:2px solid transparent;
  transition:color 140ms linear, border-color 140ms linear; }
.v-hero-split-code .scd-tab:hover { color:#cdd3de; }
.v-hero-split-code .scd-tab.on { color:#e6e8ee; border-bottom-color:#7aaeff; }
.v-hero-split-code .scd-tab:focus-visible { outline:2px solid #7aaeff; outline-offset:-2px; }

/* code body — scrolls-x in its own box */
.v-hero-split-code .scd-body { padding:22px 24px; overflow-x:auto; }
.v-hero-split-code .scd-code { display:none; margin:0; white-space:pre; color:#e6e8ee;
  font:400 13px/1.8 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.v-hero-split-code .scd-code.on { display:block; }
.v-hero-split-code .scd-code code { font:inherit; color:inherit; }
/* syntax tints — literal, semantic (not brand), faithful to the source draft --hsc-* palette */
.v-hero-split-code .scd-c-kw  { color:#7aaeff; }
.v-hero-split-code .scd-c-str { color:#7dbc9a; }
.v-hero-split-code .scd-c-cmt { color:#5b5b7a; font-style:italic; }
.v-hero-split-code .scd-c-fn  { color:#c8a2e0; }
.v-hero-split-code .scd-c-num { color:#e0b06a; }
.v-hero-split-code .scd-c-op  { color:#8a8898; }
.v-hero-split-code .scd-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@container site (max-width: 860px) {
  .v-hero-split-code .scd-stats { margin-top:28px; }
}
@container site (max-width: 560px) {
  .v-hero-split-code .scd-body { padding:18px 16px; }
  .v-hero-split-code .scd-code { font-size:11.5px; }
}
/* hero-side-nav — ported from SB_04 drafts/hero-side-nav (app-workspace fold: a vertical
   icon rail on the left, big copy + floating stat card on the right). The origin's 9 --hsn-*
   vars map to theme tokens (bg->--bg, surface->--panel/--panel-2, text->--ink, dim->--dim,
   accent->--accent, border->--hair, fonts->--font/--font-head). The origin's DEAD icon rail
   (buttons that did nothing, one hardcoded active) becomes a REAL vertical roving-tabindex
   tablist that swaps the eyebrow/headline/subtext/stat per section. No baked entrances (anims.js
   owns those); transitions ride color/border/transform only, never background; the accent chips
   are color-mix tints so they read in light and dark. Container queries fold the rail to a top
   strip on narrow widths. */
.ws-hero.v-hero-side-nav { padding:0; overflow:hidden; background:var(--bg); }
.v-hero-side-nav .hsn-in { display:flex; align-items:stretch; width:100%; max-width:100%;
  min-height:clamp(480px, 78cqh, 720px); position:relative; }
/* left rail */
.v-hero-side-nav .hsn-rail { flex:none; width:clamp(62px, 7cqw, 78px); display:flex; flex-direction:column;
  align-items:center; gap:5px; padding:18px 0; background:var(--panel); border-right:var(--bw, 1px) solid var(--hair); }
.v-hero-side-nav .hsn-logo { flex:none; width:34px; height:34px; margin-bottom:14px; border-radius:9px;
  display:grid; place-items:center; font:900 15px var(--font-head, var(--font)); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 18%, var(--panel-2)); }
.v-hero-side-nav .hsn-tabs { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; width:100%; }
.v-hero-side-nav .hsn-tab { flex:none; width:42px; height:42px; padding:0; border-radius:10px;
  border:1px solid transparent; background:transparent; color:var(--dim); cursor:pointer; display:grid;
  place-items:center; appearance:none; -webkit-appearance:none;
  transition:color .16s linear, border-color .16s linear, transform .14s ease; }
.v-hero-side-nav .hsn-ico { display:grid; place-items:center; width:20px; height:20px; }
.v-hero-side-nav .hsn-tab svg { width:20px; height:20px; display:block; }
.v-hero-side-nav .hsn-tab:hover { color:var(--ink); border-color:var(--hair); }
.v-hero-side-nav .hsn-tab:active { transform:translateY(1px); }
.v-hero-side-nav .hsn-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-side-nav .hsn-tab.is-active { color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 32%, transparent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); }
.v-hero-side-nav .hsn-user { flex:none; margin-top:6px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font:800 10px var(--font); letter-spacing:.03em; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 18%, var(--panel-2)); }
/* right content */
.v-hero-side-nav .hsn-content { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px, 7cqw, 96px) clamp(28px, 6cqw, 84px); position:relative; }
.v-hero-side-nav .hsn-kick { margin:0 0 16px; }
.v-hero-side-nav .hsn-title { margin:0; max-width:min(640px, 100%); text-wrap:balance; }
.v-hero-side-nav .hsn-sub { margin:18px 0 0; max-width:min(520px, 100%); }
.v-hero-side-nav .hsn-actions { margin-top:clamp(24px, 3cqw, 34px); }
.v-hero-side-nav .hsn-stat { align-self:flex-start; margin-top:clamp(30px, 4cqw, 48px); display:inline-flex;
  flex-direction:column; gap:5px; padding:16px 20px; border-radius:12px; border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); box-shadow:0 10px 30px -18px color-mix(in srgb, var(--ink) 40%, transparent); }
.v-hero-side-nav .hsn-stat-l { font:600 11px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.v-hero-side-nav .hsn-stat-v { font:900 clamp(26px, 3.4cqw, 32px) var(--font-head, var(--font)); letter-spacing:-0.02em; color:var(--ink); line-height:1; }
.v-hero-side-nav .hsn-stat-d { font:700 12px var(--font); }
.v-hero-side-nav .hsn-stat-d.up { color:var(--ok, #4caf76); }
.v-hero-side-nav .hsn-stat-d.down { color:var(--bad, #e5533c); }
/* aria-live status — visually hidden, still announced */
.v-hero-side-nav .hsn-status { 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; }
/* content swap — interaction motion only (never fires on entrance) */
@keyframes hsnSwap { from { opacity:.5; transform:translateY(7px); } to { opacity:1; transform:none; } }
.v-hero-side-nav .hsn-content.hsn-swap { animation:hsnSwap .22s ease-out; }
@container site (max-width: 860px) {
  .v-hero-side-nav .hsn-in { min-height:clamp(440px, 70cqh, 640px); }
  .v-hero-side-nav .hsn-content { padding:clamp(36px, 7cqw, 64px) clamp(24px, 6cqw, 48px); }
}
@container site (max-width: 560px) {
  .v-hero-side-nav .hsn-in { flex-direction:column; min-height:0; }
  .v-hero-side-nav .hsn-rail { flex-direction:row; width:100%; padding:10px 12px; gap:6px;
    border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
  .v-hero-side-nav .hsn-logo { margin:0 6px 0 0; }
  .v-hero-side-nav .hsn-tabs { flex-direction:row; flex:1; gap:4px; width:auto; justify-content:flex-start; }
  .v-hero-side-nav .hsn-user { margin:0 0 0 auto; }
  .v-hero-side-nav .hsn-content { justify-content:flex-start; padding:clamp(34px, 9cqw, 52px) 22px clamp(40px, 10cqw, 56px); }
  .v-hero-side-nav .hsn-stat { align-self:stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-side-nav .hsn-content.hsn-swap { animation:none; }
  .v-hero-side-nav .hsn-tab { transition:none; }
}
/* hero-split-form — ported from SB_04 drafts/hero-split-form: a 50/50 split with lead copy,
   benefit ticks and a social-proof line beside a genuinely live trial form (name/email/company
   validate on submit, confirm inline, the submit re-arms on edit). Origin --hsf-* vars -> theme
   tokens (bg->--bg, surface->--panel-2, heading->--ink, body->--dim/--faint, accent/focus->--accent,
   border->--hair); the inputs reuse the shared .ws-bkinput family so they theme (no native blue) and
   gain an --accent focus ring here. The baked fade-up entrance keyframes are dropped (anims.js owns
   entrances) — only hover/focus and the submit state move, and transitions ride color/border-color/
   transform/opacity only (never a background). Split narrow-stacks via the global 860px rule
   (.ws-hero .ws-in.split); the error hue reuses the coming-soon #e5484d semantic red. */
.v-hero-split-form .ws-in.split { align-items:stretch; }
.v-hero-split-form .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-hero-split-form .hsf-benefits { list-style:none; display:flex; flex-direction:column; gap:12px; margin:28px 0 0; padding:0; }
.v-hero-split-form .hsf-benefit { display:flex; align-items:flex-start; gap:11px; font:400 14px/1.5 var(--font); color:var(--dim); }
.v-hero-split-form .hsf-check { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:20px; height:20px; margin-top:1px; border-radius:50%; background:var(--accent-fill); color:var(--accent); }
.v-hero-split-form .hsf-check svg { width:11px; height:11px; }
.v-hero-split-form .hsf-proof { margin:26px 0 0; font:600 13px var(--font); letter-spacing:.01em; color:var(--faint); }
.v-hero-split-form .hsf-panel { display:flex; align-items:center; justify-content:center;
  padding:clamp(24px, 3cqw, 40px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  background:var(--panel-2); background-image:var(--surface-grad, none);
  box-shadow:var(--inset-hi,0 0 #0000), var(--elev,0 0 #0000); }
.v-hero-split-form .hsf-form { width:100%; max-width:26rem; display:flex; flex-direction:column; gap:14px; }
.v-hero-split-form .hsf-formtitle { font:700 clamp(20px, 2.2cqw, 24px) var(--font-head, var(--font));
  letter-spacing:-0.02em; line-height:1.2; color:var(--ink); }
.v-hero-split-form .hsf-formsub { margin-top:-8px; font:400 13.5px/1.5 var(--font); color:var(--dim); }
.v-hero-split-form .hsf-field { gap:6px; }
.v-hero-split-form .hsf-field > span { text-transform:none; letter-spacing:.2px; font:600 11px var(--mono); color:var(--faint); }
.v-hero-split-form input.ws-bkinput[type="text"], .v-hero-split-form input.ws-bkinput[type="email"] { cursor:text; }
.v-hero-split-form .ws-bkinput:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.v-hero-split-form .hsf-submit { width:100%; justify-content:center; margin-top:4px; border:none; transition:opacity 140ms linear, transform 140ms linear; }
.v-hero-split-form .hsf-submit:disabled { opacity:.6; cursor:default; }
.v-hero-split-form .hsf-note { margin:2px 0 0; font:500 13px/1.5 var(--font); }
.v-hero-split-form .hsf-note:empty { display:none; }
.v-hero-split-form .hsf-note.err { color:#e5484d; }
.v-hero-split-form .hsf-note.ok { color:var(--accent); padding:11px 13px;
  border-radius:calc(var(--radius, 12px) * .7); background:var(--accent-fill); }
.v-hero-split-form .hsf-privacy { margin:2px 0 0; text-align:center; font:400 12px/1.5 var(--font); color:var(--faint); }
.v-hero-split-form .hsf-link { color:var(--dim); text-decoration:underline; text-underline-offset:2px; transition:color 140ms linear; }
.v-hero-split-form .hsf-link:hover { color:var(--ink); }
@container site (max-width: 860px) {
  .v-hero-split-form .hsf-form { max-width:none; }
}
/* hero-split-list — copy + CTAs left, numbered feature list right, split by a hairline divider.
   Ported from SB_04 drafts/hero-split-list. Reuses the shared .ws-in.split grid, which narrow-stacks
   via the global 860px rule; entrance motion dropped (anims.js owns entrances), item hover is transform/color only. */
.v-hero-split-list .ws-in.split { grid-template-columns:1.08fr minmax(0, 0.92fr); align-items:stretch; gap:clamp(32px, 5cqw, 72px); }
.v-hero-split-list .ws-hcopy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-hero-split-list .ws-hsl-list { list-style:none; margin:0; padding:0 0 0 clamp(28px, 4cqw, 64px);
  border-left:var(--bw, 1px) solid var(--hair); display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-hero-split-list .ws-hsl-item { display:flex; align-items:flex-start; gap:20px; padding:20px 0;
  border-top:var(--bw, 1px) solid var(--hair); transition:transform .18s ease; }
.v-hero-split-list .ws-hsl-item:last-child { border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-split-list .ws-hsl-num { flex:none; min-width:26px; padding-top:2px; font:700 11px var(--mono);
  letter-spacing:1px; color:color-mix(in srgb, var(--accent) 58%, transparent); transition:color .18s ease; }
.v-hero-split-list .ws-hsl-body { display:flex; flex-direction:column; gap:5px; min-width:0; }
.v-hero-split-list .ws-hsl-t { margin:0; font:600 14px var(--font); color:var(--ink); letter-spacing:-0.01em; }
.v-hero-split-list .ws-hsl-d { margin:0; font:400 13px/1.6 var(--font); color:var(--dim); }
.v-hero-split-list .ws-hsl-item:hover { transform:translateX(4px); }
.v-hero-split-list .ws-hsl-item:hover .ws-hsl-num { color:var(--accent); }
@container site (max-width: 860px) {
  .v-hero-split-list .ws-hsl-list { border-left:0; padding-left:0; }
}
@container site (max-width: 560px) {
  .v-hero-split-list .ws-hsl-item { gap:14px; padding:16px 0; }
}
/* Hero / Split Quote — SB_04 drafts/hero-split-quote. Split opener: left column carries an eyebrow,
   accent-word headline, subtitle, dual CTAs and a check-marked trust row; a hairline divider separates
   a dominant right column holding an oversized quote mark, a large testimonial, and the customer's
   monogram/photo with name/role/company. Origin --hsq-* vars map to theme tokens (bg->--bg,
   heading->--ink, body->--dim/--faint, divider->--hair, accent->--accent); the oversized quote mark
   rides an --accent wash. Portrait is a themed monogram avatar by default with an optional img/avatar
   prop (ws-avatar pattern). Baked entrance anims dropped (anims.js owns entrances) — only btn/link
   hover moves. The divider flips vertical->horizontal and the columns stack via the global 860px
   rule (.ws-hero .ws-in.split) plus this block's own container query; container queries only. */
.v-hero-split-quote .ws-in.split { grid-template-columns:1.12fr 0.88fr; gap:0; align-items:stretch; }
.v-hero-split-quote .ws-hcopy { display:flex; flex-direction:column; justify-content:center;
  padding-right:clamp(28px, 4.4cqw, 64px); }
.v-hero-split-quote .ws-sub { margin-top:18px; max-width:44ch; }
.v-hero-split-quote .hsq-trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin:28px 0 0; padding:0; list-style:none; }
.v-hero-split-quote .hsq-trust li { display:inline-flex; align-items:center; gap:7px;
  font:500 12px var(--font); color:var(--faint); }
.v-hero-split-quote .hsq-trust svg { width:13px; height:13px; color:var(--accent); flex:none; }
.v-hero-split-quote .hsq-quote { display:flex; flex-direction:column; justify-content:center; margin:0;
  border-left:var(--bw, 1px) solid var(--hair); padding-left:clamp(28px, 4.4cqw, 64px); }
.v-hero-split-quote .hsq-mark { display:block; margin-bottom:4px; user-select:none; pointer-events:none;
  font:400 clamp(84px, 12cqw, 148px)/0.72 Georgia, "Times New Roman", serif;
  color:color-mix(in srgb, var(--accent) 22%, transparent); }
.v-hero-split-quote .hsq-qtext { margin:0 0 32px; letter-spacing:-0.015em; color:var(--ink);
  font:500 clamp(20px, 2.6cqw, 30px)/1.4 var(--font-head, var(--font)); }
.v-hero-split-quote .hsq-cust { display:flex; align-items:center; gap:14px; }
.v-hero-split-quote .hsq-portrait { width:52px; height:52px; border-radius:50%; flex:none; overflow:hidden;
  display:grid; place-items:center; background:var(--accent-fill); background-size:cover; background-position:center;
  color:var(--accent); font:700 16px var(--font); }
.v-hero-split-quote .hsq-cinfo { display:flex; flex-direction:column; gap:2px; min-width:0; }
.v-hero-split-quote .hsq-name { font:600 14px var(--font); color:var(--ink); }
.v-hero-split-quote .hsq-role { font:400 12.5px var(--font); color:var(--dim); font-style:normal; }
.v-hero-split-quote .hsq-logo { margin-top:2px; font:700 10px var(--mono); letter-spacing:2px;
  text-transform:uppercase; color:var(--accent); opacity:.72; }
@container site (max-width: 860px) {
  .v-hero-split-quote .ws-hcopy { padding-right:0; }
  .v-hero-split-quote .hsq-quote { border-left:none; border-top:var(--bw, 1px) solid var(--hair);
    padding-left:0; padding-top:clamp(30px, 6cqw, 44px); }
}
@container site (max-width: 560px) {
  .v-hero-split-quote .hsq-trust { flex-direction:column; gap:9px; }
}
/* ── hero · v-hero-split-form-dark (SB_04 · drafts/hero-split-form-dark) — benefits + avatar proof
   beside a raised dark sign-up card. The origin's 9 --hsfd-* hexes fold onto theme tokens: bg->--bg,
   surface->a --panel/--bg-deep mix (the card reads as a deep dark inset), input-bg->a --bg-deep/--panel-2
   mix (inputs sit darker than the card), text->--ink, secondary->--dim/--faint, border->--hair,
   accent->--accent. Avatar chips are accent tints (no fixed hues) so they cascade with the brand. Origin
   form was dead (onsubmit=return false) — the port validates for real and carries a confirmation state.
   Baked entrance dropped (anims.js owns it); only focus/hover/press motion on transform/opacity/color.
   Narrow-stacks via the global 860px .ws-hero .ws-in.split rule; the card flattens to bare fields at 560px. ── */
.v-hero-split-form-dark { position:relative; isolation:isolate; }
.v-hero-split-form-dark .hsfd-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 52% at 84% 28%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 52% 56% at 8% 86%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 58%); }
.v-hero-split-form-dark .ws-in.split { position:relative; z-index:1;
  grid-template-columns:1.1fr minmax(0, 0.86fr); gap:clamp(36px, 5cqw, 72px); align-items:center; }
/* left copy */
.v-hero-split-form-dark .hsfd-copy { display:flex; flex-direction:column; align-items:flex-start; }
.v-hero-split-form-dark .hsfd-eyebrow { display:inline-block; margin-bottom:20px;
  font:700 11px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  padding:6px 14px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background:color-mix(in srgb, var(--accent) 9%, transparent); }
.v-hero-split-form-dark .ws-h1 { letter-spacing:-0.03em; }
.v-hero-split-form-dark .hsfd-benefits { list-style:none; margin:clamp(22px, 2.8cqw, 32px) 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px; }
.v-hero-split-form-dark .hsfd-benefit { display:flex; align-items:center; gap:11px; margin:0;
  font:400 15px/1.45 var(--font); color:var(--dim); }
.v-hero-split-form-dark .hsfd-tick { position:relative; flex:none; width:20px; height:20px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.v-hero-split-form-dark .hsfd-tick::after { content:''; position:absolute; top:50%; left:50%;
  width:6px; height:3.5px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:translate(-55%, -70%) rotate(-45deg); }
/* social proof */
.v-hero-split-form-dark .hsfd-proof { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:clamp(28px, 3.4cqw, 40px); }
.v-hero-split-form-dark .hsfd-avatars { display:flex; }
.v-hero-split-form-dark .hsfd-av { width:30px; height:30px; border-radius:50%; margin-right:-9px;
  display:grid; place-items:center; font:800 9px var(--font); color:var(--ink);
  border:2px solid var(--bg); background:var(--panel-3); }
.v-hero-split-form-dark .hsfd-av[data-i="0"] { background:color-mix(in srgb, var(--accent) 66%, var(--panel-2)); z-index:4; }
.v-hero-split-form-dark .hsfd-av[data-i="1"] { background:color-mix(in srgb, var(--accent) 46%, var(--panel-2)); z-index:3; }
.v-hero-split-form-dark .hsfd-av[data-i="2"] { background:color-mix(in srgb, var(--accent) 30%, var(--panel-2)); z-index:2; }
.v-hero-split-form-dark .hsfd-av[data-i="3"] { background:color-mix(in srgb, var(--accent) 18%, var(--panel-2)); z-index:1; }
.v-hero-split-form-dark .hsfd-proof-label { padding-left:12px; font:400 13px/1.4 var(--font); color:var(--faint); }
/* the dark card */
.v-hero-split-form-dark .hsfd-right { width:100%; }
.v-hero-split-form-dark .hsfd-card { position:relative;
  background:color-mix(in srgb, var(--panel) 88%, var(--bg-deep));
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  padding:clamp(24px, 2.6cqw, 34px); box-shadow:var(--elev, 0 0 #0000); }
.v-hero-split-form-dark .hsfd-form-title { font:700 16px/1.3 var(--font-head, var(--font));
  letter-spacing:-0.01em; color:var(--ink); margin-bottom:22px; }
.v-hero-split-form-dark .hsfd-form { display:flex; flex-direction:column; gap:15px; }
.v-hero-split-form-dark .hsfd-field { display:flex; flex-direction:column; gap:6px; }
.v-hero-split-form-dark .hsfd-label { font:500 12.5px var(--font); color:var(--dim); }
.v-hero-split-form-dark .hsfd-input { width:100%; min-width:0; appearance:none; -webkit-appearance:none;
  padding:11px 14px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55);
  background:color-mix(in srgb, var(--bg-deep) 55%, var(--panel-2)); color:var(--ink);
  font:400 14px var(--font); outline:none; transition:border-color 140ms linear, color 140ms linear; }
.v-hero-split-form-dark select.hsfd-input { cursor:pointer; padding-right:38px;
  background-image:linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.v-hero-split-form-dark .hsfd-input::placeholder { color:var(--faint); }
.v-hero-split-form-dark .hsfd-input:focus { border-color:color-mix(in srgb, var(--accent) 60%, var(--hair)); }
.v-hero-split-form-dark .hsfd-input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-split-form-dark .hsfd-input.is-bad { border-color:#e5484d; }
.v-hero-split-form-dark .hsfd-ferr:empty { display:none; }
.v-hero-split-form-dark .hsfd-ferr { font:500 12px/1.4 var(--font); color:#e5484d; }
.v-hero-split-form-dark .hsfd-submit { margin-top:5px; width:100%; appearance:none; -webkit-appearance:none;
  cursor:pointer; border:0; padding:13px 16px; border-radius:calc(var(--radius, 12px) * .55);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, var(--bg)); font:700 14px var(--font); letter-spacing:.01em;
  transition:opacity 140ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-hero-split-form-dark .hsfd-submit:hover { opacity:.9; }
.v-hero-split-form-dark .hsfd-submit:active { transform:translateY(1px); }
.v-hero-split-form-dark .hsfd-submit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-split-form-dark .hsfd-privacy { margin:2px 0 0; text-align:center; font:400 11.5px/1.5 var(--font); color:var(--faint); }
.v-hero-split-form-dark .hsfd-privacy a { color:var(--dim); text-underline-offset:2px; transition:color 140ms linear; }
.v-hero-split-form-dark .hsfd-privacy a:hover { color:var(--accent); }
/* confirmation state */
.v-hero-split-form-dark .hsfd-done { display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(10px, 1.4cqw, 22px) 0; }
.v-hero-split-form-dark .hsfd-done[hidden] { display:none; }
.v-hero-split-form-dark .hsfd-donemark { position:relative; flex:none; width:46px; height:46px; border-radius:50%;
  margin-bottom:18px; background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.v-hero-split-form-dark .hsfd-donemark::after { content:''; position:absolute; top:50%; left:50%;
  width:15px; height:8px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translate(-52%, -70%) rotate(-45deg); }
.v-hero-split-form-dark .hsfd-donetitle { margin:0; font:700 1.25rem/1.25 var(--font-head, var(--font));
  letter-spacing:-0.02em; color:var(--ink); }
.v-hero-split-form-dark .hsfd-donemsg { margin:8px 0 0; max-width:32ch; font:400 13.5px/1.55 var(--font); color:var(--dim); }
.v-hero-split-form-dark .hsfd-again { margin-top:20px; appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:9px 18px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55);
  background:none; color:var(--ink); font:600 13px var(--font);
  transition:color 140ms linear, border-color 140ms linear; }
.v-hero-split-form-dark .hsfd-again:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-hero-split-form-dark .hsfd-again:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@container site (max-width: 560px) {
  .v-hero-split-form-dark .hsfd-card { background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
  .v-hero-split-form-dark .hsfd-privacy { text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-split-form-dark .hsfd-input, .v-hero-split-form-dark .hsfd-submit,
  .v-hero-split-form-dark .hsfd-again, .v-hero-split-form-dark .hsfd-privacy a { transition:none; }
}
/* hero-split-headline — ported from SB_04 drafts/hero-split-headline (a 60/40 fold: a big
   multi-line headline with a highlighted key phrase + eyebrow + dual CTAs on the left, a bordered
   stat card with a gradient top-bar + 4-row number list on the right). The origin's 9 --hsh-*
   vars map to theme tokens: bg->--bg, card/surface->--panel-2, text->--ink, dim->--dim,
   accent->--accent, border->--hair, radius/font->--radius/--font. The key phrase keeps the
   origin's gradient text-fill (via --accent-grad) and gains a real ruled underline (the origin
   named the class 'underline' but only tinted the glyphs) so it reads as the described underline
   accent and stays wrap-safe. No baked entrance (anims.js owns those); the only motion is the CTA
   hover the shared .ws-btn already carries. Split narrow-stacks via a container query (the global
   860px rule can't beat this variant's grid, so it is re-declared). */
.ws-hero.v-hero-split-headline .ws-in.split.hsh-in { grid-template-columns:3fr 2fr; align-items:center; gap:clamp(40px, 5cqw, 60px); }
.v-hero-split-headline .ws-hcopy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; }
.v-hero-split-headline .hsh-title { letter-spacing:-0.03em; text-wrap:balance; }
.v-hero-split-headline .hsh-hl { background:var(--accent-grad, linear-gradient(90deg, var(--accent), var(--accent2, var(--accent))));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-decoration-line:underline; text-decoration-color:color-mix(in srgb, var(--accent) 60%, transparent);
  text-decoration-thickness:3px; text-underline-offset:0.13em; }
/* stat card — bordered elevated surface, gradient top-bar, ruled number rows */
.v-hero-split-headline .hsh-card { min-width:0; position:relative; overflow:hidden;
  background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  box-shadow:var(--elev, 0 20px 45px -30px color-mix(in srgb, var(--ink) 45%, transparent)); }
.v-hero-split-headline .hsh-bar { height:3px; background:var(--accent-grad, linear-gradient(90deg, var(--accent), var(--accent2, var(--accent)))); }
.v-hero-split-headline .hsh-stats { padding:8px 0; }
.v-hero-split-headline .hsh-stat { padding:clamp(14px, 1.8cqw, 18px) clamp(18px, 2.4cqw, 26px); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-split-headline .hsh-stat:last-child { border-bottom:none; }
.v-hero-split-headline .hsh-stat b { display:block; margin-bottom:3px; letter-spacing:-0.03em; color:var(--ink);
  font:800 clamp(24px, 3.2cqw, 30px) var(--font-head, var(--font)); }
.v-hero-split-headline .hsh-stat i { font:500 12.5px var(--font); color:var(--dim); font-style:normal; }
@container site (max-width: 860px) {
  .ws-hero.v-hero-split-headline .ws-in.split.hsh-in { grid-template-columns:1fr; gap:clamp(30px, 5cqw, 40px); }
}
@container site (max-width: 560px) {
  .v-hero-split-headline .hsh-stat { padding:14px 18px; }
}
/* ===== Hero / Split Pricing (v-hero-split-pricing) — ported SB_04 drafts/hero-split-pricing.
   Copy on the left, one highlighted plan card on the right. Origin --hsp-* vars map to theme
   tokens (surface/card -> --panel-2/--panel, border -> --hair, accent -> --accent); the card's
   gradient top rail rides --accent -> --accent2. The Monthly/Annual segmented control is real
   (mount() swaps the amount + period). Baked entrance transitions dropped (anims.js owns
   entrances); only hover/toggle motion, on transform/opacity/color. Split narrow-stacks via the
   global 860px rule (.ws-hero .ws-in.split); container queries only. */
.v-hero-split-pricing .ws-in.split { grid-template-columns:1.05fr 0.92fr; align-items:center; gap:clamp(40px, 5cqw, 68px); }
.v-hero-split-pricing .hsp-trust { display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font:500 12.5px var(--font); color:var(--faint); }
.v-hero-split-pricing .hsp-trust svg { width:14px; height:14px; color:var(--accent); flex:none; }
.v-hero-split-pricing .hsp-card { justify-self:end; width:100%; max-width:400px; position:relative;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) + 4px); overflow:hidden;
  background:var(--panel-2, var(--panel)); box-shadow:var(--elev, 0 0 #0000); }
.v-hero-split-pricing .hsp-top { position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2, var(--accent))); }
.v-hero-split-pricing .hsp-body { padding:clamp(24px, 3cqw, 32px) clamp(22px, 2.6cqw, 28px); }
.v-hero-split-pricing .hsp-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.v-hero-split-pricing .hsp-plan { font:700 13px var(--font); letter-spacing:.02em; color:var(--accent); }
.v-hero-split-pricing .hsp-seg { display:inline-flex; padding:3px; gap:2px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-hero-split-pricing .hsp-segbtn { display:inline-flex; align-items:center; gap:5px; border:0; cursor:pointer;
  padding:5px 11px; border-radius:99px; font:600 11px var(--font); color:var(--dim);
  background:transparent; transition:color .18s ease; }
.v-hero-split-pricing .hsp-segbtn:hover { color:var(--ink); }
.v-hero-split-pricing .hsp-segbtn.on { color:var(--accent-text, var(--bg)); background:var(--accent); }
.v-hero-split-pricing .hsp-save { font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.02em; opacity:.85; }
.v-hero-split-pricing .hsp-price { display:flex; align-items:baseline; gap:3px; margin-bottom:22px; color:var(--ink); }
.v-hero-split-pricing .hsp-cur { font:700 22px var(--font-head, var(--font)); align-self:flex-start; margin-top:6px; color:var(--dim); }
.v-hero-split-pricing .hsp-amount { font:800 clamp(40px, 5cqw, 52px)/1 var(--font-head, var(--font)); letter-spacing:-0.03em; }
.v-hero-split-pricing .hsp-per { font:500 14px var(--font); color:var(--dim); margin-left:4px; }
.v-hero-split-pricing .hsp-bump { animation:hsp-bump .28s ease; }
@keyframes hsp-bump { 0% { transform:translateY(3px); opacity:.55; } 100% { transform:none; opacity:1; } }
.v-hero-split-pricing .hsp-feats { list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.v-hero-split-pricing .hsp-feats li { display:flex; align-items:flex-start; gap:9px; font:400 13px/1.45 var(--font); color:var(--dim); }
.v-hero-split-pricing .hsp-feats svg { width:15px; height:15px; color:var(--accent); flex:none; margin-top:1px; }
.v-hero-split-pricing .hsp-cta .ws-btn { display:flex; width:100%; justify-content:center; }
@container site (max-width: 860px) {
  .v-hero-split-pricing .hsp-card { justify-self:center; max-width:420px; }
}
@container site (max-width: 560px) {
  .v-hero-split-pricing .hsp-card { max-width:none; justify-self:stretch; }
  .v-hero-split-pricing .hsp-head { flex-wrap:wrap; }
}
/* split-image-cta — ported from SB_04 drafts/hero-split-image-cta (copy + full-height gradient visual
   with an overlapping-avatar social-proof row and a floating stat card). Reuses ws-in.split / ws-hcopy /
   ws-hpanel(.ph); narrow-stacks on the global 860px .ws-hero .ws-in.split rule. Origin backdrop-blur on
   the stat card is dropped (no blur/backdrop-filter) for a solid token panel, raw hex avatars become
   accent/panel color-mix tints, and entrance motion is the reveal system's job — only hover motion lives here. */
.v-hero-split-image-cta .ws-hcopy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.v-hero-split-image-cta .hsic-demo { gap:8px; }
.v-hero-split-image-cta .hsic-tri { display:inline-flex; align-items:center; }
.v-hero-split-image-cta .hsic-tri svg { width:12px; height:12px; display:block; }
/* social proof — overlapping avatar stack that fans out on hover, plus a count line */
.v-hero-split-image-cta .hsic-proof { display:flex; align-items:center; gap:14px; margin-top:36px; }
.v-hero-split-image-cta .hsic-avs { display:inline-flex; }
.v-hero-split-image-cta .hsic-av { width:30px; height:30px; margin-right:-9px; border-radius:50%;
  display:inline-grid; place-items:center; font:700 11px var(--font); color:var(--ink);
  border:2px solid var(--bg); background:color-mix(in srgb, var(--accent) 22%, var(--panel-2, var(--panel)));
  transition:transform .2s ease; }
.v-hero-split-image-cta .hsic-av:nth-child(2) { background:color-mix(in srgb, var(--accent2, var(--accent)) 26%, var(--panel-2, var(--panel))); }
.v-hero-split-image-cta .hsic-av:nth-child(3) { background:color-mix(in srgb, var(--accent) 15%, var(--panel-2, var(--panel))); }
.v-hero-split-image-cta .hsic-av:nth-child(4) { background:color-mix(in srgb, var(--accent2, var(--accent)) 20%, var(--panel-2, var(--panel))); }
.v-hero-split-image-cta .hsic-av:nth-child(5) { background:color-mix(in srgb, var(--accent) 30%, var(--panel-2, var(--panel))); }
.v-hero-split-image-cta .hsic-proof:hover .hsic-av { transform:translateX(calc(var(--ai) * 3px)); }
.v-hero-split-image-cta .hsic-ptext { font:400 13px/1.4 var(--font); color:var(--dim); }
/* right visual panel + floating stat card (bottom-left, like the origin) */
.v-hero-split-image-cta .hsic-panel { display:flex; align-items:flex-end; justify-content:flex-start;
  padding:clamp(20px, 3cqw, 40px); min-height:clamp(340px, 40cqw, 460px); }
.v-hero-split-image-cta .hsic-panel.ph::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 46px); }
.v-hero-split-image-cta .hsic-stat { position:relative; z-index:2; display:flex; flex-direction:column; gap:3px;
  padding:16px 22px; border-radius:calc(var(--radius, 14px) * .78); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel-2, var(--panel)); box-shadow:0 14px 34px -20px rgba(0,0,0,.5); }
.v-hero-split-image-cta .hsic-statval { font:800 clamp(24px, 3cqw, 32px) var(--font-head, var(--font));
  color:var(--accent); letter-spacing:-0.02em; line-height:1; }
.v-hero-split-image-cta .hsic-statlabel { font:700 14px var(--font); color:var(--ink); }
.v-hero-split-image-cta .hsic-statsub { font:400 11px var(--font); color:var(--faint); }
@container site (max-width: 560px) {
  .v-hero-split-image-cta .hsic-proof { flex-wrap:wrap; gap:10px 14px; }
  .v-hero-split-image-cta .hsic-panel { min-height:240px; }
}
/* hero-split-media — ported from SB_04 drafts/hero-split-media (50/50 copy beside a framed
   image/video panel). The dead placeholder is made real: the panel is a click-to-play surface,
   and the equalizer + scrub run ONLY while .playing (interaction motion — entrances belong to
   anims.js). Token-driven placeholder, no remote media. */
.v-hero-split-media .ws-in.split { grid-template-columns:1fr 1fr; align-items:center; }
.v-hero-split-media .ws-hcopy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-hero-split-media .hsm-trust { display:flex; align-items:center; gap:12px; margin-top:26px; }
.v-hero-split-media .hsm-trust b { font:500 12.5px var(--font); color:var(--faint); }
.v-hero-split-media .hsm-faces { display:inline-flex; }
.v-hero-split-media .hsm-faces i { width:26px; height:26px; border-radius:99px; margin-left:-8px;
  display:grid; place-items:center; font:700 10.5px var(--font); font-style:normal;
  color:var(--accent-text, #04121a); background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  border:2px solid var(--bg); }
.v-hero-split-media .hsm-faces i:first-child { margin-left:0; }
/* media panel — a framed placeholder standing in for image/video (no remote URLs) */
.v-hero-split-media .hsm-media { position:relative; width:100%; aspect-ratio:4 / 3; border-radius:var(--radius, 14px);
  border:var(--bw, 1px) solid var(--hair); background-color:var(--panel); background-size:cover; background-position:center;
  overflow:hidden; display:grid; place-items:center; }
.v-hero-split-media .hsm-media.ph {
  background-image:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--ink) 4%, transparent)); }
.v-hero-split-media .hsm-glow { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 54% at 50% 44%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%); }
/* play/pause — pressing it really toggles playback state on the panel */
.v-hero-split-media .hsm-play { position:relative; z-index:2; width:64px; height:64px; border-radius:99px; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background:color-mix(in srgb, var(--panel) 84%, transparent);
  box-shadow:0 10px 34px color-mix(in srgb, #000 30%, transparent);
  transition:transform 160ms var(--ease-pop, ease-out), color 160ms linear; }
.v-hero-split-media .hsm-play:hover { transform:scale(1.06); color:var(--accent); }
.v-hero-split-media .hsm-play:active { transform:scale(0.97); }
.v-hero-split-media .hsm-play svg { width:24px; height:24px; fill:currentColor; }
.v-hero-split-media .hsm-i-play { margin-left:2px; }
.v-hero-split-media .hsm-i-pause { display:none; }
.v-hero-split-media .hsm-media.playing .hsm-i-play { display:none; }
.v-hero-split-media .hsm-media.playing .hsm-i-pause { display:block; }
/* equalizer + scrub — dormant at rest; only run once the surface is playing */
.v-hero-split-media .hsm-eq { position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; align-items:flex-end; justify-content:center; gap:5px; height:48px; padding-bottom:15px;
  opacity:0; transition:opacity 200ms linear; }
.v-hero-split-media .hsm-eq i { width:5px; height:12px; border-radius:3px; background:var(--accent);
  transform:scaleY(0.3); transform-origin:bottom; }
.v-hero-split-media .hsm-media.playing .hsm-eq { opacity:0.92; }
.v-hero-split-media .hsm-media.playing .hsm-eq i { animation:hsmEq 900ms ease-in-out infinite; }
.v-hero-split-media .hsm-media.playing .hsm-eq i:nth-child(2) { animation-delay:-.6s; }
.v-hero-split-media .hsm-media.playing .hsm-eq i:nth-child(3) { animation-delay:-.3s; }
.v-hero-split-media .hsm-media.playing .hsm-eq i:nth-child(4) { animation-delay:-.15s; }
.v-hero-split-media .hsm-media.playing .hsm-eq i:nth-child(5) { animation-delay:-.45s; }
.v-hero-split-media .hsm-scrub { position:absolute; left:0; right:0; bottom:0; z-index:2; height:3px;
  background:color-mix(in srgb, var(--ink) 12%, transparent); opacity:0; transition:opacity 200ms linear; }
.v-hero-split-media .hsm-scrub b { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:var(--accent); }
.v-hero-split-media .hsm-media.playing .hsm-scrub { opacity:1; }
.v-hero-split-media .hsm-media.playing .hsm-scrub b { animation:hsmScrub 8s linear infinite; }
@keyframes hsmEq { 0%, 100% { transform:scaleY(0.3); } 50% { transform:scaleY(1); } }
@keyframes hsmScrub { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .v-hero-split-media .hsm-media.playing .hsm-eq i,
  .v-hero-split-media .hsm-media.playing .hsm-scrub b { animation:none; }
}
@container site (max-width: 560px) {
  .v-hero-split-media .hsm-play { width:54px; height:54px; }
}
/* split testimonial — ported from SB_04 drafts/hero-split-testimonial (copy + CTAs + metric strip beside a
   large testimonial card: rated quote, monogram author, client-logo row). Extra quotes switch on dots (mount()).
   Entrance motion dropped — anims.js owns section entrances; only hover/switch move. Tokens throughout; the
   star gold is a semantic hue (matches the app-download / course stars). Narrow-stacks via the global 860px rule. */
.v-hero-split-testimonial .ws-hcopy { display:flex; flex-direction:column; }
.v-hero-split-testimonial .ws-badge svg { width:13px; height:13px; }
.v-hero-split-testimonial .hst-metrics { margin-top:40px; gap:0; flex-wrap:wrap; }
.v-hero-split-testimonial .hst-metrics .ws-hstat { padding:0 clamp(16px, 2.2cqw, 26px); }
.v-hero-split-testimonial .hst-metrics .ws-hstat b { font-size:clamp(20px, 2.6cqw, 26px); }
/* card */
.v-hero-split-testimonial .hst-card { position:relative; padding:clamp(24px, 3cqw, 34px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) + 2px);
  background:color-mix(in srgb, var(--panel) 82%, var(--bg)); box-shadow:var(--elev, 0 0 #0000); }
.v-hero-split-testimonial .hst-slides { display:grid; }
.v-hero-split-testimonial .hst-slide { grid-area:1 / 1; display:flex; flex-direction:column; margin:0;
  opacity:0; visibility:hidden; transition:opacity 240ms ease-out; }
.v-hero-split-testimonial .hst-slide.on { opacity:1; visibility:visible; }
.v-hero-split-testimonial .hst-stars { color:#f5b325; font-size:15px; line-height:1; letter-spacing:3px; margin-bottom:18px; }
.v-hero-split-testimonial .hst-quote { margin:0 0 24px; padding-left:16px; border-left:2px solid var(--accent);
  font:500 clamp(15px, 1.9cqw, 18px)/1.6 var(--font); color:var(--ink); font-style:italic; }
.v-hero-split-testimonial .hst-author { display:flex; align-items:center; gap:12px; }
.v-hero-split-testimonial .hst-avatar { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #04121a);
  font:700 14px var(--font); letter-spacing:.02em; }
.v-hero-split-testimonial .hst-who { display:flex; flex-direction:column; gap:2px; }
.v-hero-split-testimonial .hst-who b { font:600 14px var(--font); color:var(--ink); }
.v-hero-split-testimonial .hst-who i { font:400 12.5px var(--font); color:var(--dim); font-style:normal; }
.v-hero-split-testimonial .hst-dots { display:flex; gap:8px; margin-top:22px; }
.v-hero-split-testimonial .hst-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb, var(--ink) 22%, transparent); transition:transform 140ms var(--ease-pop, ease-out), opacity 140ms linear; }
.v-hero-split-testimonial .hst-dot:hover { transform:scale(1.25); }
.v-hero-split-testimonial .hst-dot.on { background:var(--accent); }
.v-hero-split-testimonial .hst-logos { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  margin-top:24px; padding-top:22px; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-split-testimonial .hst-logo { font:700 12px var(--font); letter-spacing:.04em;
  color:color-mix(in srgb, var(--ink) 34%, transparent); }
@container site (max-width: 560px) {
  .v-hero-split-testimonial .hst-metrics { flex-direction:column; align-items:flex-start; gap:16px; margin-top:32px; }
  .v-hero-split-testimonial .hst-metrics .ws-hstat { padding:0; }
  .v-hero-split-testimonial .hst-metrics .ws-hstat + .ws-hstat { border-left:0; }
}
/* hero-split-mockup — ported from SB_04 drafts/hero-split-mockup (split fold: eyebrow, headline,
   accent feature-ticks and a dual CTA on the left; a tilted product-UI mockup on the right floating
   over a soft accent glow). The origin's baked entrance fades are dropped (anims.js owns entrances)
   and its blur(48px) glow becomes a soft radial gradient — no blur/backdrop-filter. The tilt is
   transform-only and eases flat on hover. The vertical rule rides a border on the copy column and
   drops when the split narrow-stacks at 860px. Reuses the ws-hcopy + browserMock atoms; colours map
   to theme tokens. */
.v-hero-split-mockup .ws-in.split { align-items:stretch; }
.v-hero-split-mockup .ws-hcopy { display:flex; flex-direction:column; justify-content:center; min-width:0;
  padding-right:clamp(30px, 4cqw, 56px); border-right:var(--bw, 1px) solid var(--hair); }
.v-hero-split-mockup .hsm-feats { list-style:none; margin:24px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px; }
.v-hero-split-mockup .hsm-feat { display:flex; align-items:center; gap:11px;
  font:400 13.5px var(--font); color:var(--dim); }
.v-hero-split-mockup .hsm-dot { flex-shrink:0; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-fill); }
.v-hero-split-mockup .ws-ctarow { margin-top:30px; }
.v-hero-split-mockup .hsm-shot { position:relative; isolation:isolate; display:flex;
  align-items:center; justify-content:center; padding:clamp(14px, 3cqw, 34px); }
.v-hero-split-mockup .hsm-glow { position:absolute; inset:0; z-index:0; border-radius:50%;
  background:radial-gradient(58% 54% at 50% 46%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%);
  pointer-events:none; }
.v-hero-split-mockup .hsm-shot .ws-browser { position:relative; z-index:1; width:100%;
  transform:perspective(1200px) rotateY(-4deg) rotate(-1.4deg);
  transition:transform 320ms var(--ease-pop, ease-out); }
.v-hero-split-mockup .hsm-shot:hover .ws-browser { transform:perspective(1200px) rotateY(0deg) rotate(0deg); }
@container site (max-width: 860px) {
  .v-hero-split-mockup .ws-hcopy { padding-right:0; border-right:0; }
}
/* hero-spotlight — ported from SB_04 drafts/hero-spotlight: centered launch copy under a
   cursor-tracking radial spotlight beam (position driven in mount), badge, dual CTAs, feature row. */
.v-hero-spotlight { display:flex; align-items:center; justify-content:center;
  min-height:clamp(520px, 82cqh, 760px); }
.v-hero-spotlight .ws-spotbeam { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58cqw 52cqw at var(--spot-x, 50%) var(--spot-y, 6%),
    color-mix(in srgb, var(--accent) 24%, transparent) 0%,
    color-mix(in srgb, var(--accent) 7%, transparent) 34%,
    transparent 66%); }
.v-hero-spotlight .ws-in { position:relative; z-index:1; width:min(720px, 88cqw); }
.v-hero-spotlight .ws-spotfeats { list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 26px; }
.v-hero-spotlight .ws-spotfeat { display:inline-flex; align-items:center; gap:8px;
  font:500 13px var(--font); color:var(--dim); transition:color 160ms ease-out; }
.v-hero-spotlight .ws-spotfeat:hover { color:var(--ink); }
.v-hero-spotlight .ws-spotfeat svg { width:15px; height:15px; color:var(--accent); flex:none; }
@container site (max-width: 860px) {
  .v-hero-spotlight { min-height:clamp(480px, 76cqh, 680px); }
}
@container site (max-width: 560px) {
  .v-hero-spotlight { min-height:clamp(420px, 72cqh, 600px); padding:72px 0; }
  .v-hero-spotlight .ws-spotfeats { gap:10px 18px; }
  .v-hero-spotlight .ws-spotfeat { font-size:12px; }
}
/* hero-split-video — ported from SB_04 drafts/hero-split-video (split video-platform opener:
   copy + inline video stats + twin CTAs beside a framed player mock). The origin's dead player
   is made REAL: play/pause simulates timed playback (whenVisible-gated rAF), the progress bar is a
   seekable slider (pointer + arrow/Home/End), and CC / mute / fullscreen toggle. Theme tokens
   throughout; blur/backdrop-filter and entrance motion dropped (anims.js owns entrances). */
.v-hero-split-video .ws-in.split.hsv-in { grid-template-columns:1.12fr minmax(0, 0.92fr); align-items:center; gap:clamp(32px, 4.6cqw, 68px); }
.v-hero-split-video .hsv-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-hero-split-video .hsv-copy .ws-kick { text-transform:uppercase; }
.v-hero-split-video .hsv-copy .ws-h1 { max-width:15ch; letter-spacing:-0.02em; text-wrap:balance; }
.v-hero-split-video .hsv-copy .ws-sub { max-width:52ch; }
.v-hero-split-video .hsv-stats { display:flex; flex-wrap:wrap; gap:14px clamp(20px, 2.6cqw, 30px); margin-top:clamp(22px, 2.8cqw, 32px); }
.v-hero-split-video .hsv-stat { display:inline-flex; align-items:center; gap:8px; font:400 13px var(--font); color:var(--dim); }
.v-hero-split-video .hsv-stat b { font-weight:600; color:var(--ink); }
.v-hero-split-video .hsv-stat-ico { display:inline-flex; width:16px; height:16px; flex:none; color:var(--accent); }
.v-hero-split-video .hsv-stat-ico svg { width:16px; height:16px; }
.v-hero-split-video .ws-ctarow { margin-top:clamp(26px, 3cqw, 34px); align-items:center; }
.v-hero-split-video .hsv-watch { appearance:none; -webkit-appearance:none; cursor:pointer; gap:8px; }
.v-hero-split-video .hsv-watch-ico { display:inline-flex; }
.v-hero-split-video .hsv-watch-ico svg { width:14px; height:14px; }
/* player mock */
.v-hero-split-video .hsv-playwrap { display:flex; align-items:center; justify-content:center; min-width:0; }
.v-hero-split-video .hsv-player { width:100%; max-width:560px; border:1px solid color-mix(in srgb, var(--accent) 28%, var(--hair));
  border-radius:14px; overflow:hidden; background:var(--panel);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 24px 58px color-mix(in srgb, var(--accent) 10%, transparent); }
.v-hero-split-video .hsv-stage { position:relative; width:100%; aspect-ratio:16 / 9;
  background-color:var(--panel-2, var(--panel)); background-size:cover; background-position:center; overflow:hidden; }
.v-hero-split-video .hsv-stage.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%);
  background-size:60px 60px; background-position:0 0, 0 30px, 30px -30px, 30px 0; }
.v-hero-split-video .hsv-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%, color-mix(in srgb, var(--bg) 16%, transparent), color-mix(in srgb, var(--bg) 52%, transparent));
  transition:opacity 200ms ease; }
.v-hero-split-video .hsv-stage.is-playing .hsv-scrim { opacity:0.4; }
.v-hero-split-video .hsv-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%, -50%);
  width:clamp(56px, 11cqw, 72px); height:clamp(56px, 11cqw, 72px); border-radius:50%; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; appearance:none; -webkit-appearance:none;
  background:var(--accent); color:var(--accent-text, var(--bg));
  box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent);
  transition:transform 160ms var(--ease-pop, ease-out), opacity 200ms ease; }
.v-hero-split-video .hsv-play:hover { transform:translate(-50%, -50%) scale(1.07); }
.v-hero-split-video .hsv-play:active { transform:translate(-50%, -50%) scale(1); }
.v-hero-split-video .hsv-play:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.v-hero-split-video .hsv-play-ico { display:inline-flex; margin-left:3px; }
.v-hero-split-video .hsv-pause-ico { display:none; }
.v-hero-split-video .hsv-play-ico svg, .v-hero-split-video .hsv-pause-ico svg { width:24px; height:24px; }
.v-hero-split-video .hsv-stage.is-playing .hsv-play-ico { display:none; }
.v-hero-split-video .hsv-stage.is-playing .hsv-pause-ico { display:inline-flex; margin-left:0; }
.v-hero-split-video .hsv-stage.is-playing .hsv-play { opacity:0; }
.v-hero-split-video .hsv-stage.is-playing:hover .hsv-play,
.v-hero-split-video .hsv-stage.is-playing .hsv-play:focus-visible { opacity:1; }
.v-hero-split-video .hsv-caption { position:absolute; z-index:2; left:50%; bottom:12px; transform:translateX(-50%);
  max-width:82%; margin:0; padding:4px 11px; border-radius:6px; text-align:center;
  background:color-mix(in srgb, var(--bg) 72%, transparent); color:var(--ink); font:500 12px/1.4 var(--font);
  opacity:0; transition:opacity 180ms ease; pointer-events:none; }
.v-hero-split-video .hsv-stage.cc-on .hsv-caption { opacity:1; }
.v-hero-split-video .hsv-controls { background:var(--panel-2, var(--panel)); border-top:var(--bw, 1px) solid var(--hair);
  padding:13px 16px 12px; display:flex; flex-direction:column; gap:10px; }
.v-hero-split-video .hsv-progress { position:relative; width:100%; height:16px; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.v-hero-split-video .hsv-progress::before { content:''; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:4px; border-radius:2px; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.v-hero-split-video .hsv-fill { position:relative; height:4px; border-radius:2px; background:var(--accent); width:38%; min-width:4px; }
.v-hero-split-video .hsv-thumb { position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:11px; height:11px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.v-hero-split-video .hsv-progress:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.v-hero-split-video .hsv-crow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.v-hero-split-video .hsv-time { font:500 12px var(--mono, var(--font)); color:var(--dim); letter-spacing:0.3px; white-space:nowrap; }
.v-hero-split-video .hsv-time b { font-weight:600; color:var(--ink); }
.v-hero-split-video .hsv-cicons { display:inline-flex; align-items:center; gap:4px; }
.v-hero-split-video .hsv-cbtn { appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--faint); display:inline-flex; align-items:center; justify-content:center; width:28px; height:24px;
  border-radius:5px; padding:0; font:700 9.5px var(--font); letter-spacing:0.06em; transition:color 160ms ease; }
.v-hero-split-video .hsv-cbtn:hover { color:var(--ink); }
.v-hero-split-video .hsv-cbtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-hero-split-video .hsv-cbtn[aria-pressed="true"] { color:var(--accent); }
.v-hero-split-video .hsv-cbtn svg { width:15px; height:15px; }
.v-hero-split-video .hsv-vol-on { display:inline-flex; }
.v-hero-split-video .hsv-vol-off { display:none; }
.v-hero-split-video .hsv-vol.is-muted .hsv-vol-on { display:none; }
.v-hero-split-video .hsv-vol.is-muted .hsv-vol-off { display:inline-flex; }
@container site (max-width: 860px) {
  .v-hero-split-video .ws-in.split.hsv-in { grid-template-columns:1fr; gap:clamp(28px, 6cqw, 42px); }
  .v-hero-split-video .hsv-copy .ws-h1 { max-width:none; }
  .v-hero-split-video .hsv-player { margin:0 auto; }
}
@container site (max-width: 560px) {
  .v-hero-split-video .ws-ctarow { flex-direction:column; align-items:stretch; }
  .v-hero-split-video .ws-ctarow .ws-btn { width:100%; justify-content:center; }
  .v-hero-split-video .hsv-stats { gap:12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-split-video .hsv-play, .v-hero-split-video .hsv-scrim, .v-hero-split-video .hsv-caption { transition:none; }
}
/* hero-split-stats — SB_04 drafts/hero-split-stats. Split opener: eyebrow, accent-word headline, twin
   CTAs and a client testimonial on the copy half, beside a bordered grid of proof stats that count up on
   first scroll into view (mount() + whenVisible; honours prefers-reduced-motion, and final values are
   rendered server-side so no-JS and the count-up's rest state both read correctly). Origin --hss-* vars
   map to tokens (bg->--bg, heading->--ink, body->--dim/--faint, accent->--accent, divider->--hair,
   Inter->--font). Grid dividers are 1px gaps over a --hair backing, so the card stays crisp at any stat
   count. Baked entrance/fade anims dropped (anims.js owns entrances); only btn + stat-hover colour motion
   kept, and only transform/opacity/colour ever transition. Split narrow-stacks via the global 860px rule
   (.ws-hero .ws-in.split); the grid drops to one column at 560px. Container queries only, no viewport media. */
.v-hero-split-stats .ws-in.split { grid-template-columns:1.05fr minmax(0, 0.95fr);
  align-items:center; gap:clamp(36px, 5cqw, 72px); }
.v-hero-split-stats .ws-hcopy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.v-hero-split-stats .ws-h1 { letter-spacing:-0.02em; }
.v-hero-split-stats .ws-sub { margin-top:18px; max-width:46ch; }
/* testimonial */
.v-hero-split-stats .hss-quote { display:flex; align-items:flex-start; gap:14px;
  margin:clamp(28px, 3.4cqw, 40px) 0 0; padding-top:clamp(20px, 2.4cqw, 26px); border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-split-stats .hss-avatar { width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden;
  display:inline-grid; place-items:center; letter-spacing:0.02em;
  background-color:color-mix(in srgb, var(--accent) 18%, var(--panel)); background-size:cover; background-position:center;
  color:var(--ink); font:700 14px var(--font-head, var(--font)); }
.v-hero-split-stats .hss-qbody { display:flex; flex-direction:column; gap:7px; min-width:0; }
.v-hero-split-stats .hss-qtext { margin:0; font:italic 400 13.5px/1.6 var(--font); color:var(--dim); max-width:44ch; }
.v-hero-split-stats .hss-qname { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.v-hero-split-stats .hss-qname b { font:600 12.5px var(--font); color:var(--ink); }
.v-hero-split-stats .hss-qname i { font:500 12px var(--font); color:var(--faint); font-style:normal; }
/* bordered stats grid — 1px gaps over a --hair backing keep dividers crisp at any stat count */
.v-hero-split-stats .hss-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); overflow:hidden; }
.v-hero-split-stats .hss-stat { display:flex; flex-direction:column; gap:9px; background:var(--bg);
  padding:clamp(22px, 2.8cqw, 34px) clamp(18px, 2.4cqw, 30px); }
.v-hero-split-stats .hss-stat b { font:800 clamp(26px, 3.6cqw, 40px) var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums;
  transition:color 160ms linear; }
.v-hero-split-stats .hss-stat i { font:500 12.5px var(--font); color:var(--faint); font-style:normal; line-height:1.4; }
.v-hero-split-stats .hss-stat:hover b { color:var(--accent); }
@container site (max-width: 560px) {
  .v-hero-split-stats .hss-grid { grid-template-columns:1fr; }
}
/* hero-status-hero — ported from SB_04 drafts/hero-status-hero (a status-page opener:
   pulsing status indicator + aggregate headline, an uptime line, a per-service list, a
   live "last checked" clock and a status-page link). The origin's single hardcoded green
   dot + "All Systems Operational" is made REAL: the aggregate dot, headline text and hue
   are DERIVED from the per-service states (take -> items), and the "last checked N ago"
   clock ticks live in mount() and re-polls every 30s. Origin --hsh2-* map to tokens
   (--ink text / --dim + --faint secondary / --accent link / --hair borders / --panel rows
   / --mono metrics); the ONLY raw hues are the sanctioned semantic status tokens
   --ok/--warn/--bad for operational/degraded/down. The ambient sonar pulse is kept as
   live-status motion (opacity/transform only — no background transitions, no blur);
   entrance is left to anims.js and reduced-motion freezes the pulse. Container queries
   tighten and stack the foot at 560px. */
.ws-hero.v-hero-status-hero { padding:clamp(72px, 10cqw, 116px) 0; }
.v-hero-status-hero .ws-in { display:flex; flex-direction:column; align-items:center; gap:18px; width:min(560px, 90cqw); }
.v-hero-status-hero .ws-kick { margin-bottom:2px; color:var(--faint); }
.v-hero-status-hero.agg-ok { --hue:var(--ok, #3fb27f); }
.v-hero-status-hero.agg-warn { --hue:var(--warn, #f5b342); }
.v-hero-status-hero.agg-down { --hue:var(--bad, #e5533c); }
/* aggregate indicator — a dot inside an expanding sonar ring */
.v-hero-status-hero .hsh-indicator { position:relative; width:52px; height:52px; display:grid; place-items:center; }
.v-hero-status-hero .hsh-dot { position:relative; z-index:2; width:16px; height:16px; border-radius:50%;
  background:var(--hue); box-shadow:0 0 14px color-mix(in srgb, var(--hue) 60%, transparent); }
.v-hero-status-hero .hsh-ring { position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  background:color-mix(in srgb, var(--hue) 50%, transparent); animation:hsh-pulse 2.4s ease-out infinite; }
@keyframes hsh-pulse { 0% { opacity:.5; transform:scale(1); } 100% { opacity:0; transform:scale(3.1); } }
.v-hero-status-hero .hsh-headline { color:var(--hue); font-size:clamp(28px, 5.4cqw, 46px); letter-spacing:-0.03em; }
.v-hero-status-hero .hsh-uptime { text-align:center; color:var(--dim); }
.v-hero-status-hero .hsh-uptime strong { color:var(--ink); font-weight:700; }
/* per-service list */
.v-hero-status-hero .hsh-svcs { list-style:none; margin:6px 0 0; padding:0; width:100%; display:flex; flex-direction:column;
  border:var(--bw, 1px) solid var(--hair); border-radius:12px; overflow:hidden;
  background:color-mix(in srgb, var(--panel) 55%, transparent); }
.v-hero-status-hero .hsh-svc { display:flex; align-items:center; gap:12px; padding:13px 16px; }
.v-hero-status-hero .hsh-svc + .hsh-svc { border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-status-hero .hsh-svc-dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--srow);
  box-shadow:0 0 8px color-mix(in srgb, var(--srow) 55%, transparent); }
.v-hero-status-hero .hsh-svc-name { flex:1; text-align:left; font:500 14px var(--font); color:var(--ink); }
.v-hero-status-hero .hsh-svc-state { font:600 12px var(--mono, var(--font)); letter-spacing:.02em; color:var(--srow);
  font-variant-numeric:tabular-nums; }
.v-hero-status-hero .k-ok { --srow:var(--ok, #3fb27f); }
.v-hero-status-hero .k-warn { --srow:var(--warn, #f5b342); }
.v-hero-status-hero .k-down { --srow:var(--bad, #e5533c); }
/* foot: live clock + status-page link */
.v-hero-status-hero .hsh-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  margin-top:4px; padding-top:16px; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-status-hero .hsh-checked { font:400 12px var(--mono, var(--font)); color:var(--faint); font-variant-numeric:tabular-nums; }
.v-hero-status-hero .hsh-link { margin:0; }
@container site (max-width: 560px) {
  .v-hero-status-hero .hsh-foot { flex-direction:column; align-items:center; gap:12px; text-align:center; }
  .v-hero-status-hero .hsh-svc { padding:12px 13px; }
  .v-hero-status-hero .hsh-svc-state { font-size:11px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-status-hero .hsh-ring { animation:none; opacity:.35; transform:scale(1.7); }
}
/* hero-terminal — SB_04 drafts/hero-terminal — full terminal window that live-types a deploy command then streams status lines */
.v-hero-terminal .ws-in.center { display:flex; flex-direction:column; align-items:center; gap:38px; }
.v-hero-terminal .ht-copy { text-align:center; max-width:640px; }
.v-hero-terminal .ht-copy .ws-sub { margin-top:14px; }
.v-hero-terminal .ht-win { width:min(640px, 100%); background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) - 2px); overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,0.28); }
.v-hero-terminal .ht-chrome { display:flex; align-items:center; padding:10px 15px;
  background:color-mix(in srgb, var(--ink) 5%, var(--panel)); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-terminal .ht-dot { width:11px; height:11px; border-radius:50%; margin-right:7px;
  background:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-hero-terminal .ht-dot.r { background:#ff5f57; }
.v-hero-terminal .ht-dot.y { background:#febc2e; }
.v-hero-terminal .ht-dot.g { background:#28c840; }
.v-hero-terminal .ht-title { margin-left:6px; font:500 11.5px var(--mono); color:var(--faint); }
.v-hero-terminal .ht-body { padding:20px 22px; display:flex; flex-direction:column; gap:7px; min-height:206px; text-align:left; }
.v-hero-terminal .ht-line { display:flex; align-items:center; font:500 13px var(--mono); line-height:1.5; color:var(--ink); }
.v-hero-terminal .ht-line.out { opacity:0; transform:translateY(2px); }
.v-hero-terminal .ht-line.out.on { opacity:1; transform:none; transition:opacity .28s ease, transform .28s ease; }
.v-hero-terminal .ht-line.tail { opacity:0; margin-top:2px; }
.v-hero-terminal .ht-line.tail.on { opacity:1; transition:opacity .2s ease; }
.v-hero-terminal .ht-line.info { margin-top:5px; }
.v-hero-terminal .ht-prompt { color:var(--accent); font-weight:600; margin-right:8px; }
.v-hero-terminal .ht-cmd { color:var(--ink); white-space:pre; }
.v-hero-terminal .ht-ok { display:inline-flex; color:var(--ok, #45a97f); margin-right:8px; }
.v-hero-terminal .ht-ok svg { width:13px; height:13px; }
.v-hero-terminal .ht-label { color:var(--faint); margin-right:7px; }
.v-hero-terminal .ht-url { color:var(--accent); }
.v-hero-terminal .ht-caret { display:inline-block; width:8px; height:1.05em; margin-left:2px; vertical-align:-2px;
  background:var(--accent); opacity:0; }
.v-hero-terminal .ht-caret.on { animation:htBlink 1s step-end infinite; }
.v-hero-terminal .ht-line.tail.on .ht-caret { opacity:1; animation:htBlink 1s step-end infinite; }
@keyframes htBlink { 0%, 100% { opacity:1; } 50% { opacity:0; } }
@container site (max-width: 560px) {
  .v-hero-terminal .ws-in.center { gap:26px; }
  .v-hero-terminal .ht-body { padding:16px 15px; min-height:0; }
  .v-hero-terminal .ht-line { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-terminal .ht-caret, .v-hero-terminal .ht-line.tail.on .ht-caret { animation:none; }
  .v-hero-terminal .ht-line.out.on { transition:none; }
}
/* hero-testimonial — ported from SB_04 drafts/hero-testimonial (centered stack: a large customer
   quote with a monogram author floating under a decorative quote-mark, a hairline divider, then the
   headline, subheading and dual CTAs, capped by a client-logo trust row). Origin entrance fades
   dropped (anims.js owns entrances); the accent-tinted mark, avatar and dots ride tokens; the remote
   author photo becomes a monogram (no remote images); extra quotes fade-switch on dots (mount).
   Narrow-stacks via container query — logo dividers drop and the mark shrinks. */
.v-hero-testimonial .htm-in { width:min(760px, 88cqw); display:flex; flex-direction:column; align-items:center; gap:clamp(34px, 5cqw, 56px); }
.v-hero-testimonial .htm-quotes { position:relative; width:100%; padding-top:22px; }
.v-hero-testimonial .htm-mark { position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font:400 8rem/1 Georgia, 'Times New Roman', serif; letter-spacing:-0.05em; pointer-events:none;
  user-select:none; color:color-mix(in srgb, var(--accent) 22%, transparent); }
.v-hero-testimonial .htm-slides { display:grid; position:relative; z-index:1; }
.v-hero-testimonial .htm-slide { grid-area:1 / 1; margin:0; display:flex; flex-direction:column;
  align-items:center; opacity:0; visibility:hidden; transition:opacity 240ms ease-out; }
.v-hero-testimonial .htm-slide.on { opacity:1; visibility:visible; }
.v-hero-testimonial .htm-quote { margin:0 0 26px; font:500 clamp(18px, 2.5cqw, 24px)/1.6 var(--font);
  color:var(--ink); }
.v-hero-testimonial .htm-author { display:flex; align-items:center; justify-content:center; gap:14px; }
.v-hero-testimonial .htm-avatar { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #04121a);
  font:700 14px var(--font); letter-spacing:.02em; }
.v-hero-testimonial .htm-who { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
.v-hero-testimonial .htm-who b { font:600 14px var(--font); color:var(--ink); }
.v-hero-testimonial .htm-who i { font:400 13px var(--font); color:var(--dim); font-style:normal; }
.v-hero-testimonial .htm-dots { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.v-hero-testimonial .htm-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb, var(--ink) 22%, transparent);
  transition:transform 140ms var(--ease-pop, ease-out), opacity 140ms linear; }
.v-hero-testimonial .htm-dot:hover { transform:scale(1.25); }
.v-hero-testimonial .htm-dot.on { background:var(--accent); }
.v-hero-testimonial .htm-headline { width:100%; display:flex; flex-direction:column; align-items:center;
  padding-top:clamp(28px, 4cqw, 44px); border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-testimonial .htm-headline .ws-h1 { margin:0 0 16px; }
.v-hero-testimonial .htm-headline .ws-sub { max-width:46ch; margin:0; }
.v-hero-testimonial .htm-trust { width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; }
.v-hero-testimonial .htm-trust-label { font:500 12px var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.v-hero-testimonial .htm-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0; }
.v-hero-testimonial .htm-logo { font:700 15px var(--font); letter-spacing:.04em; padding:4px 24px; cursor:default;
  color:color-mix(in srgb, var(--ink) 34%, transparent); transition:color 160ms ease; }
.v-hero-testimonial .htm-logo:hover { color:color-mix(in srgb, var(--ink) 62%, transparent); }
.v-hero-testimonial .htm-logo-div { display:block; width:1px; height:16px; flex:none; background:var(--hair); }
@container site (max-width: 560px) {
  .v-hero-testimonial .htm-mark { font-size:6rem; top:-6px; }
  .v-hero-testimonial .htm-logos { gap:6px 18px; }
  .v-hero-testimonial .htm-logo { padding:2px 0; }
  .v-hero-testimonial .htm-logo-div { display:none; }
}
/* hero-text-reveal — SB_04 drafts/hero-text-reveal — headline reveals word-by-word on scroll-in (mount adds .is-revealed); index-staggered, transform/opacity only, reduced-motion safe */
.v-hero-text-reveal .htr-word{ display:inline-block; }
.v-hero-text-reveal .htr-accent{ color:var(--accent); }
.v-hero-text-reveal .htr-rv{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; transition-delay:calc(var(--i, 0) * 0.08s); }
.v-hero-text-reveal.is-revealed .htr-rv{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .v-hero-text-reveal .htr-rv{ opacity:1; transform:none; transition:none; }
}
/* hero · v-hero-testimonial-quote (SB_04 · drafts/hero-testimonial-quote) — a single dominant customer
   testimonial centered on the fold: star rating, oversized decorative quote mark, big serif-italic
   pull-quote, monogram author row. The origin's 9 --htq-* vars fold onto tokens (bg->--bg, text->--ink,
   dim->--dim, accent->--accent, border->--hair, radius unused here, font->--font). No serif token exists,
   so the pull-quote + quote mark keep a literal Georgia serif stack (mirrors the .hsq-mark precedent) to
   preserve the editorial soul. Star gold stays literal (#f5b325 — the ported-testimonial idiom's
   signature). Monogram avatar is an accent fill, no remote image; an avatar/img prop can override it.
   Stars are data-driven off a rating prop (dead thing made real). No baked entrance (anims.js owns it),
   nothing transitions at rest. Narrow column via the ws-in.narrow atom; a 560px rule eases the type down. */
.v-hero-testimonial-quote .htq-fig { margin:0; display:flex; flex-direction:column; align-items:center;
  gap:clamp(15px, 2.2cqw, 22px); }
.v-hero-testimonial-quote .htq-stars { color:#f5b325; font-size:16px; line-height:1; letter-spacing:4px; }
.v-hero-testimonial-quote .htq-star-off { color:color-mix(in srgb, var(--ink) 20%, transparent); }
.v-hero-testimonial-quote .htq-mark { display:block; margin:0 0 -18px; user-select:none; pointer-events:none;
  font:400 clamp(78px, 11cqw, 132px)/0.62 Georgia, "Times New Roman", serif;
  color:color-mix(in srgb, var(--accent) 18%, transparent); }
.v-hero-testimonial-quote .htq-quote { margin:0; max-width:600px; letter-spacing:-0.005em;
  font:italic 500 clamp(22px, 3.4cqw, 32px)/1.5 Georgia, "Times New Roman", serif;
  color:color-mix(in srgb, var(--ink) 82%, var(--dim)); }
.v-hero-testimonial-quote .htq-author { display:flex; align-items:center; gap:13px; margin-top:8px; }
.v-hero-testimonial-quote .htq-avatar { flex:none; width:50px; height:50px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  background-size:cover; background-position:center; color:var(--accent-text, #04121a);
  font:700 16px var(--font); letter-spacing:.02em; }
.v-hero-testimonial-quote .htq-who { display:flex; flex-direction:column; gap:2px; text-align:left; min-width:0; }
.v-hero-testimonial-quote .htq-name { font:700 14.5px var(--font); color:var(--ink); }
.v-hero-testimonial-quote .htq-role { font:400 12.5px var(--font); font-style:normal; color:var(--dim); }
@container site (max-width: 560px) {
  .v-hero-testimonial-quote .htq-quote { font-size:clamp(19px, 6cqw, 25px); }
  .v-hero-testimonial-quote .htq-mark { margin-bottom:-14px; }
}
/* hero-testimonial-grid — ported from SB_04 drafts/hero-testimonial-grid (a customer-stories
   opener: a centered pitch + CTAs above a full-width wall of testimonial cards divided by
   hairline rules, one card accented as "featured"). Origin --htg-* map to tokens (--ink
   headings / --dim body / --faint sub-meta / --accent eyebrow+featured / --hair rules /
   --panel cells). The seamless ruled grid is rebuilt with the 1px-gap-over-a---hair-backing
   technique so dividers stay crisp at any card count. Two things are made REAL: stars render
   it.stars filled out of 5 (default 5) instead of five hardcoded glyphs, and avatars are
   monogram initials (no remote images). Grid is @container-driven: 3-up, 2-up at 860, 1-up at
   560. Entrance is left to anims.js; only color/transform ride transitions. */
.ws-hero.v-hero-testimonial-grid { padding:clamp(80px, 10cqw, 116px) 0 clamp(64px, 8cqw, 96px); }
.v-hero-testimonial-grid .tg-wrap { display:flex; flex-direction:column; gap:clamp(36px, 4.6cqw, 60px); }
.v-hero-testimonial-grid .tg-head { max-width:720px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px; }
.v-hero-testimonial-grid .tg-head .ws-sub { margin-inline:auto; }
.v-hero-testimonial-grid .tg-head .ws-ctarow { margin-top:8px; }
/* the wall — 1px gaps over a --hair backing keep dividers crisp at any card count */
.v-hero-testimonial-grid .tg-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--hair); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); overflow:hidden; }
.v-hero-testimonial-grid .tg-card { display:flex; flex-direction:column; gap:14px; text-align:left;
  background:var(--panel); padding:clamp(24px, 2.6cqw, 32px) clamp(22px, 2.3cqw, 30px); }
.v-hero-testimonial-grid .tg-card:hover { background:var(--panel-2); }
.v-hero-testimonial-grid .tg-card.feat { background:color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow:inset 3px 0 0 var(--accent); }
.v-hero-testimonial-grid .tg-card.feat:hover { background:color-mix(in srgb, var(--accent) 13%, var(--panel)); }
/* stars — filled count is data-driven (it.stars of 5) */
.v-hero-testimonial-grid .tg-stars { display:flex; gap:3px; font-size:13px; line-height:1; }
.v-hero-testimonial-grid .tg-star { color:var(--hair); }
.v-hero-testimonial-grid .tg-star.on { color:var(--warn, #f5b342); }
.v-hero-testimonial-grid .tg-quote { margin:0; flex:1; color:var(--dim);
  font:400 clamp(14px, 1.55cqw, 15.5px)/1.62 var(--font); }
.v-hero-testimonial-grid .tg-author { display:flex; align-items:center; gap:11px; margin:0; }
.v-hero-testimonial-grid .tg-avatar { flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font:700 12px var(--font); letter-spacing:.02em;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent);
  transition:transform 160ms ease, color 160ms linear; }
.v-hero-testimonial-grid .tg-card:hover .tg-avatar { transform:scale(1.06); }
.v-hero-testimonial-grid .tg-meta { display:flex; flex-direction:column; gap:1px; min-width:0; }
.v-hero-testimonial-grid .tg-name { font:600 13px var(--font); color:var(--ink); }
.v-hero-testimonial-grid .tg-role { font:400 12px var(--font); color:var(--faint); }
@container site (max-width: 860px) {
  .v-hero-testimonial-grid .tg-grid { grid-template-columns:1fr 1fr; }
}
@container site (max-width: 560px) {
  .v-hero-testimonial-grid .tg-grid { grid-template-columns:1fr; }
}
/* hero-typographic — ported from SB_04 drafts/hero-typographic (bold type-driven opener:
   a giant display headline stacked one word per line, cycling filled / outlined-stroke /
   accent-gradient treatments, over a minimal sub + twin CTAs with faint accent rings and
   dots behind). Origin --hty-* vars mapped to tokens, the display rides --font-head, stroke
   and accent hues drawn from --accent, baked fade-in dropped (anims.js owns entrances), only
   transform/opacity/color transition, container queries scale the type down on narrow so the
   huge words never overflow. .ws-hero.v-hero-typographic (2 classes) so the narrow-container
   .ws-hero padding can't win. */
.ws-hero.v-hero-typographic { position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(72px, 10cqw, 120px) 0; }
.v-hero-typographic .hty-in { position:relative; z-index:1; }
.v-hero-typographic .ws-kick { margin-bottom:22px; }
.v-hero-typographic .hty-head { margin:0 0 clamp(28px, 4cqw, 40px);
  font:900 clamp(50px, 12cqw, 128px)/0.92 var(--font-head, var(--font)); letter-spacing:-0.045em; }
.v-hero-typographic .hty-line { display:block; width:fit-content; max-width:100%; }
.v-hero-typographic .hty-line.fill { color:var(--ink); }
.v-hero-typographic .hty-line.stroke { color:transparent; letter-spacing:-0.035em;
  -webkit-text-stroke:clamp(1.5px, 0.3cqw, 3px) color-mix(in srgb, var(--accent) 62%, transparent); }
.v-hero-typographic .hty-line.accent { color:transparent;
  background:var(--accent-grad, linear-gradient(120deg, var(--accent), var(--accent2, var(--accent))));
  -webkit-background-clip:text; background-clip:text; }
.v-hero-typographic .hty-bottom { display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(20px, 3cqw, 34px); }
.v-hero-typographic .hty-sub { max-width:38ch; }
.v-hero-typographic .hty-actions { margin-top:0; }
.v-hero-typographic .hty-deco { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v-hero-typographic .hty-ring { position:absolute; border-radius:50%; border:1px solid transparent; }
.v-hero-typographic .hty-ring.r1 { width:500px; height:500px; top:-100px; right:-100px;
  border-color:color-mix(in srgb, var(--accent) 14%, transparent); }
.v-hero-typographic .hty-ring.r2 { width:300px; height:300px; bottom:40px; right:200px;
  border-color:color-mix(in srgb, var(--accent) 8%, transparent); }
.v-hero-typographic .hty-dot { position:absolute; border-radius:50%; background:var(--accent); }
.v-hero-typographic .hty-dot.d1 { width:6px; height:6px; top:120px; right:320px; opacity:0.5; }
.v-hero-typographic .hty-dot.d2 { width:10px; height:10px; bottom:160px; right:100px; opacity:0.3; }
@container site (max-width: 860px) {
  .v-hero-typographic .hty-head { font-size:clamp(46px, 14cqw, 96px); }
}
@container site (max-width: 560px) {
  .ws-hero.v-hero-typographic { padding:64px 0 60px; }
  .v-hero-typographic .hty-head { font-size:clamp(40px, 16cqw, 74px); letter-spacing:-0.035em; }
  .v-hero-typographic .hty-bottom { flex-direction:column; align-items:flex-start; gap:22px; }
  .v-hero-typographic .hty-sub { max-width:none; }
  .v-hero-typographic .hty-ring.r1 { width:320px; height:320px; top:-80px; right:-80px; }
  .v-hero-typographic .hty-ring.r2 { display:none; }
}
/* hero-ticker-scroll — ported from SB_04 drafts/hero-ticker-scroll (split copy + a vertical
   bordered stat stack sitting above a full-bleed accent marquee of live metrics). Origin --hts-*
   vars -> theme tokens; the dark-on-accent ticker text maps to --accent-text so it themes both
   ways. CSS-only infinite scroll: the track holds the strip twice so translateX(-50%) loops
   seamlessly; hover pauses it and reduced-motion stops it. Baked entrance fades dropped (anims.js
   owns entrances) — only the marquee runs at rest. Split narrow-stacks via the global 860px rule
   (.ws-hero .ws-in.split); the stat stack turns horizontal there to stay short. */
.ws-hero.v-hero-ticker-scroll { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.v-hero-ticker-scroll .ws-tswrap { padding:clamp(64px, 10cqw, 104px) 0 clamp(44px, 7cqw, 84px); align-items:stretch; }
.v-hero-ticker-scroll .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-hero-ticker-scroll .ws-tsstats { display:flex; flex-direction:column; justify-content:center;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); overflow:hidden; background:var(--panel); }
.v-hero-ticker-scroll .ws-tsstats .ws-hstat { padding:clamp(18px, 3cqw, 30px) clamp(22px, 3.5cqw, 40px); gap:6px; }
.v-hero-ticker-scroll .ws-tsstats .ws-hstat + .ws-hstat { border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-ticker-scroll .ws-tsstats .ws-hstat b { font-size:clamp(26px, 3.6cqw, 42px); }
.v-hero-ticker-scroll .ws-tsticker { width:100%; background:var(--accent); overflow:hidden; white-space:nowrap; flex-shrink:0; }
.v-hero-ticker-scroll .ws-tstrack { display:inline-flex; align-items:center; padding:13px 0;
  animation:ws-ts-scroll 28s linear infinite; will-change:transform; }
.v-hero-ticker-scroll .ws-tsitem { flex-shrink:0; padding:0 24px; color:var(--accent-text, #04121a);
  font:700 13px var(--font); letter-spacing:0.12em; text-transform:uppercase; }
.v-hero-ticker-scroll .ws-tssep { flex-shrink:0; color:var(--accent-text, #04121a); opacity:.5; }
.v-hero-ticker-scroll .ws-tsticker:hover .ws-tstrack { animation-play-state:paused; }
@keyframes ws-ts-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@container site (max-width: 860px) {
  .v-hero-ticker-scroll .ws-tsstats { flex-direction:row; }
  .v-hero-ticker-scroll .ws-tsstats .ws-hstat { flex:1; min-width:0; padding:clamp(14px, 4cqw, 24px) clamp(12px, 3cqw, 22px); }
  .v-hero-ticker-scroll .ws-tsstats .ws-hstat + .ws-hstat { border-top:none; border-left:var(--bw, 1px) solid var(--hair); }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-ticker-scroll .ws-tstrack { animation-play-state:paused; }
}
/* hero-typed-subtitle — SB_04 drafts/hero-typed-subtitle: centered hero, fixed headline over a
   JS type/erase/rotate subtitle with a blinking caret. Tokens throughout; the caret blink is the
   one at-rest animation (opacity only) and is stilled under prefers-reduced-motion. */
.v-hero-typed-subtitle .ws-in { display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(18px, 2.6cqw, 26px); }
.v-hero-typed-subtitle .ws-h1 { margin:0; letter-spacing:-0.03em; }
.v-hero-typed-subtitle .ws-ctarow { margin-top:0; }
.hts-typed-wrap { display:flex; align-items:center; justify-content:center; gap:1px;
  min-height:1.4em; font:600 clamp(18px, 2.5cqw, 28px)/1.3 var(--font-head, var(--font));
  color:var(--accent); }
.hts-typed { white-space:pre; }
.hts-caret { display:inline-block; width:2px; height:1.05em; margin-left:3px; border-radius:1px;
  background:var(--accent); vertical-align:-0.14em; animation:htsCaretBlink 0.9s step-end infinite; }
@keyframes htsCaretBlink { 0%, 100% { opacity:1; } 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .hts-caret { animation:none; } }
.hts-trust { margin:0; font:400 12px var(--font); color:var(--faint); }
/* value prop — ported from SB_04 drafts/hero-value-prop: a lead stat + gradient headline + CTA
   beside a vertical stack of icon feature cards. Origin --hvp-* vars -> theme tokens; the emoji
   icons become S_ICONS stroke glyphs in themed accent tiles; the origin's bare feature rows gain a
   subtle hover-lift card. Baked entrance motion dropped (anims.js owns entrances) — only the card
   hover is kept, transform-only. Narrow-stacks via the global 860px .ws-hero .ws-in.split rule;
   the 560px query tightens the cards. Container queries only, no viewport media. */
.v-hero-value-prop .ws-in.split { align-items:center; gap:clamp(40px, 5.5cqw, 72px); }
.v-hero-value-prop .ws-hcopy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-hero-value-prop .ws-h1 { font-size:clamp(28px, 4.4cqw, 48px); line-height:1.1; letter-spacing:-0.03em; }
.v-hero-value-prop .hvp-lead { font:800 clamp(34px, 5cqw, 56px)/1 var(--font-head, var(--font));
  letter-spacing:-0.04em; color:var(--accent); margin-bottom:14px; }
.v-hero-value-prop .hvp-feats { display:flex; flex-direction:column; gap:14px; }
.v-hero-value-prop .hvp-feature { display:flex; gap:16px; align-items:flex-start; padding:16px;
  border-radius:var(--radius, 14px); border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 55%, transparent);
  transition:transform 160ms var(--ease-pop, ease-out); }
.v-hero-value-prop .hvp-feature:hover { transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--hair)); }
.v-hero-value-prop .hvp-ico { display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:calc(var(--radius, 14px) * .7);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background:var(--accent-fill); color:var(--accent); }
.v-hero-value-prop .hvp-ico svg { width:20px; height:20px; }
.v-hero-value-prop .hvp-ftext { min-width:0; }
.v-hero-value-prop .hvp-ft { font:700 15px var(--font-head, var(--font)); color:var(--ink); margin-bottom:5px; }
.v-hero-value-prop .hvp-fd { margin:0; font:400 13px/1.6 var(--font); color:var(--dim); max-width:46ch; }
@container site (max-width: 560px) {
  .v-hero-value-prop .hvp-feature { padding:14px; gap:14px; }
  .v-hero-value-prop .hvp-ico { width:40px; height:40px; }
}
/* hero-video-bg — SB_04 drafts/hero-video-bg — cinematic "video background" opener. The origin faked
   video with a mesh gradient animated via background-position; house rules forbid animating the
   background, so the moving light is a canvas light-field (mount) drawn OVER a static token poster,
   and a static token scrim guarantees headline/CTA legibility. No blur/backdrop-filter. */
.ws-hero.v-hero-video-bg { position:relative; overflow:hidden; padding:0;
  min-height:clamp(520px, 86cqh, 840px); display:flex; align-items:center; justify-content:center; }
.v-hero-video-bg .vhb-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 62% at 22% 26%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%),
    radial-gradient(58% 70% at 82% 72%, color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent), transparent 70%),
    radial-gradient(82% 60% at 56% 4%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 64%),
    linear-gradient(158deg, var(--panel) 0%, var(--bg) 58%, var(--bg-deep, var(--bg)) 100%); }
.v-hero-video-bg .ws-fx { z-index:1; }
.v-hero-video-bg .vhb-scrim { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(76% 60% at 50% 52%, color-mix(in srgb, var(--bg-deep, var(--bg)) 30%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-deep, var(--bg)) 42%, transparent) 0%, transparent 24%, transparent 58%, color-mix(in srgb, var(--bg-deep, var(--bg)) 68%, transparent) 100%); }
.v-hero-video-bg .ws-in { z-index:3; padding:clamp(30px, 5cqw, 60px) 24px; }
.v-hero-video-bg .ws-h1 { max-width:15ch; margin-inline:auto; text-wrap:balance; }
.v-hero-video-bg .ws-sub { max-width:52ch; margin-top:20px; }
/* ghost CTA reads on the busy backdrop — brighter token border + faint fill (still tokenized) */
.v-hero-video-bg .ws-btn.ghost { border-color:color-mix(in srgb, var(--ink) 28%, transparent);
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
/* a small live-dot in the eyebrow sells the "video" feel — a ring that scales out (transform+opacity only) */
.v-hero-video-bg .vhb-dot { position:relative; width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex:0 0 auto; }
.v-hero-video-bg .vhb-dot::after { content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid var(--accent); opacity:.7; animation:vhb-ping 2.4s ease-out infinite; }
@keyframes vhb-ping { 0% { transform:scale(.55); opacity:.7; } 70%, 100% { transform:scale(2.1); opacity:0; } }
@container site (max-width: 560px) {
  .ws-hero.v-hero-video-bg { min-height:clamp(460px, 80cqh, 680px); }
  .v-hero-video-bg .ws-h1 { max-width:18ch; }
}
@media (prefers-reduced-motion: reduce) { .v-hero-video-bg .vhb-dot::after { animation:none; } }
/* ── hero · v-hero-terminal-dark (SB_04 · drafts/hero-terminal-dark) — a full terminal-window hero on a
   deep-dark card. The origin's 8 --htd-* hexes fold onto tokens: bg->--bg; the card is a color-mix of
   --panel toward --bg-deep (the "dark" treatment, no hardcoded card hex — mirrors hero-split-form-dark);
   ascii/prompt/ok lines->--accent, typed command echo->--ink, boot lines->--dim/--faint, border->--hair,
   everything mono->--mono. Scanlines are translucent-black bands behind the text (a decorative shadow, like
   this file's box-shadows). Origin was a static shell; the port types its boot lines out and runs a live
   prompt. Cursor blink + line reveal ride opacity only — no background/blur transitions, reduced-motion
   drops both. Narrow via @container: font + padding shrink, ascii scrolls, body keeps its own scroll. ── */
.v-hero-terminal-dark .ws-in { display:flex; flex-direction:column; align-items:center; gap:22px; }
.v-hero-terminal-dark .htd-win { position:relative; isolation:isolate; width:100%; max-width:640px;
  border:var(--bw, 1px) solid var(--hair); border-radius:12px; overflow:hidden; text-align:left;
  background:color-mix(in srgb, var(--panel) 80%, var(--bg-deep, var(--bg)));
  box-shadow:0 24px 60px rgba(0,0,0,.34); }
.v-hero-terminal-dark .htd-bar { position:relative; z-index:2; display:flex; align-items:center; gap:8px;
  padding:11px 14px; background:var(--panel-2); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-terminal-dark .htd-dot { width:11px; height:11px; border-radius:50%;
  background:color-mix(in srgb, var(--faint) 55%, transparent); }
.v-hero-terminal-dark .htd-dot.r { background:#e05a5a; }
.v-hero-terminal-dark .htd-dot.y { background:#c8a872; }
.v-hero-terminal-dark .htd-dot.g { background:var(--accent); }
.v-hero-terminal-dark .htd-title { margin-left:8px; font:500 12px/1 var(--mono); color:var(--dim); letter-spacing:.02em; }
.v-hero-terminal-dark .htd-scan { position:absolute; inset:40px 0 0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, #000 22%, transparent) 2px 3px); }
.v-hero-terminal-dark .htd-body { position:relative; z-index:2; padding:20px 20px 16px; max-height:340px;
  overflow:auto; display:flex; flex-direction:column; gap:6px; font:400 13px/1.7 var(--mono);
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--faint) 40%, transparent) transparent; }
.v-hero-terminal-dark .htd-body::-webkit-scrollbar { width:9px; height:9px; }
.v-hero-terminal-dark .htd-body::-webkit-scrollbar-thumb {
  background:color-mix(in srgb, var(--faint) 34%, transparent); border-radius:6px;
  border:2px solid transparent; background-clip:padding-box; }
.v-hero-terminal-dark .htd-ascii { margin:0 0 6px; font:700 13px/1.28 var(--mono); color:var(--accent);
  white-space:pre; overflow-x:auto; }
.v-hero-terminal-dark .htd-log { display:flex; flex-direction:column; gap:3px; }
.v-hero-terminal-dark .htd-line { white-space:pre-wrap; word-break:break-word; animation:htd-in .18s ease both; }
.v-hero-terminal-dark .htd-dimline { color:var(--dim); }
.v-hero-terminal-dark .htd-faintline { color:var(--faint); }
.v-hero-terminal-dark .htd-okline { color:var(--accent); }
.v-hero-terminal-dark .htd-badline { color:#e0806a; }
.v-hero-terminal-dark .htd-echo { color:var(--ink); }
.v-hero-terminal-dark .htd-prompt { display:flex; align-items:center; gap:8px; margin-top:2px;
  font:400 13px/1.7 var(--mono); color:var(--ink); }
.v-hero-terminal-dark .htd-ps { flex:none; color:var(--accent); font-weight:700; }
.v-hero-terminal-dark .htd-in { flex:0 0 auto; max-width:100%; border:0; outline:0; margin:0; padding:0;
  background:transparent; color:var(--ink); font:inherit; caret-color:var(--accent); }
.v-hero-terminal-dark .htd-in:disabled { color:var(--faint); }
.v-hero-terminal-dark .htd-cursor { flex:none; width:8px; height:1.05em; margin-left:-4px;
  background:var(--accent); animation:htd-cblink 1s step-end infinite; }
.v-hero-terminal-dark .htd-prompt.is-focus .htd-cursor { display:none; }
@keyframes htd-cblink { 0%, 100% { opacity:1; } 50% { opacity:0; } }
@keyframes htd-in { from { opacity:0; } to { opacity:1; } }
.v-hero-terminal-dark .htd-tryline { margin:0; text-align:center; font:400 12.5px/1.5 var(--mono); color:var(--faint); }
.v-hero-terminal-dark .htd-chip { padding:2px 7px; border-radius:6px; font:600 12px var(--mono); color:var(--ink);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
@container site (max-width: 560px) {
  .v-hero-terminal-dark .htd-body { font-size:12px; padding:16px 14px; max-height:300px; }
  .v-hero-terminal-dark .htd-prompt { font-size:12px; }
  .v-hero-terminal-dark .htd-ascii { font-size:11px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-terminal-dark .htd-cursor { animation:none; }
  .v-hero-terminal-dark .htd-line { animation:none; }
}
/* tideline — ported from SB_04 drafts/hero-tideline (metric hero: a data waterline floods the headline).
   Signature move kept intact: a pixel-registered duplicate of the headline is clipped at the tide level
   and painted in the accent, with an animated SVG wave surface riding the exact clip line. The wave drift
   is the identity (like the ticker's marquee it is the only thing moving at rest; reduced-motion stills it).
   The waterline itself is driven from mount() via a rAF tween writing --tl-level — no clip/background
   transitions — so the rise reads with the site's reveal. Origin --tl-* vars fold onto theme tokens
   (submerged tint, waves and glow all ride --accent); the origin's backdrop-blur panel becomes a solid
   token panel (no blur). */
.v-hero-tideline { --tl-level:0; overflow:hidden; }
.v-hero-tideline::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 66%); }
.v-hero-tideline .ws-in { position:relative; z-index:2; }
.v-hero-tideline .tl-depth { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; }
.v-hero-tideline .tl-depth span { position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent); }
/* the tideline headline — two registered layers, an ink base + an accent duplicate clipped at the tide */
.v-hero-tideline .tl-headline { position:relative; margin:6px 0 20px; max-width:15ch; }
.v-hero-tideline .tl-line--base { position:relative; z-index:0; color:var(--ink); text-wrap:balance; }
.v-hero-tideline .tl-line--sub { position:absolute; inset:0; z-index:1; color:var(--accent); text-wrap:balance;
  text-shadow:0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
  -webkit-clip-path:inset(calc((100 - var(--tl-level)) * 1%) 0 0 0);
  clip-path:inset(calc((100 - var(--tl-level)) * 1%) 0 0 0); }
/* the moving surface sits exactly on the waterline */
.v-hero-tideline .tl-surface { position:absolute; left:-2%; right:-2%; z-index:2; pointer-events:none;
  top:calc((100 - var(--tl-level)) * 1%); height:24px; margin-top:-12px; }
.v-hero-tideline .tl-surface svg { display:block; width:200%; height:100%; }
.v-hero-tideline .tl-wave { animation:tl-drift linear infinite; }
.v-hero-tideline .tl-wave--1 { fill:color-mix(in srgb, var(--accent) 50%, transparent); animation-duration:9s; }
.v-hero-tideline .tl-wave--2 { fill:color-mix(in srgb, var(--accent) 28%, transparent); animation-duration:13s; animation-direction:reverse; }
@keyframes tl-drift { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.v-hero-tideline .ws-sub { max-width:44ch; }
/* tide control panel — solid token panel (origin blur dropped) */
.v-hero-tideline .tl-panel { display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(16px, 3cqw, 34px); max-width:640px; margin-top:clamp(30px, 5cqw, 48px);
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 16px);
  padding:clamp(16px, 2.4cqw, 22px) clamp(18px, 3cqw, 28px); }
.v-hero-tideline .tl-readout { display:grid; }
.v-hero-tideline .tl-pct { font:800 clamp(34px, 4cqw, 48px)/1 var(--font-head, var(--font));
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--accent); }
.v-hero-tideline .tl-month { margin-top:6px; font:500 12.5px var(--font); letter-spacing:.4px; color:var(--dim); }
.v-hero-tideline .tl-control { display:grid; gap:8px; min-width:0; }
.v-hero-tideline .tl-control-label { font:600 10.5px var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); }
.v-hero-tideline .tl-scrub { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; margin:6px 0; cursor:pointer;
  background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--tl-fill, 100%), var(--hair) var(--tl-fill, 100%)); }
.v-hero-tideline .tl-scrub::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--ink); border:3px solid var(--accent); box-shadow:0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); cursor:grab; }
.v-hero-tideline .tl-scrub::-moz-range-thumb { width:16px; height:16px; border-radius:50%;
  background:var(--ink); border:3px solid var(--accent); box-shadow:0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); cursor:grab; }
.v-hero-tideline .tl-scrub:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.v-hero-tideline .tl-scale { display:flex; justify-content:space-between; margin-top:2px; font:500 10px var(--mono); letter-spacing:.6px; color:var(--faint); }
@container site (max-width: 560px) {
  .v-hero-tideline .tl-headline { max-width:none; }
  .v-hero-tideline .tl-panel { grid-template-columns:minmax(0,1fr); gap:16px; }
  .v-hero-tideline .tl-readout { grid-auto-flow:column; align-items:baseline; justify-content:start; gap:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-tideline .tl-wave { animation:none; }
}
/* hero-sticky-cta — ported from SB_04 drafts/hero-sticky-cta (a full-height centered opener
   plus a sticky bottom conversion bar that slides up once the hero CTA scrolls out of view via
   IntersectionObserver). The origin's 9 --hsc-* vars map to tokens: --ink text, --dim secondary,
   --accent eyebrow + buttons, --panel bar, --hair borders, --font. Raw check glyphs become house
   S_ICONS.check pills. The origin's position:fixed + backdrop-blur bar is rebuilt the ZenOS way:
   a position:sticky / height:0 dock (the same trick the mobile menu uses so it pins to the site
   container without position:fixed) holds an absolutely-anchored bar — solid --panel, no blur,
   transform/opacity motion only. The reveal is real in mount(); when nothing can scroll
   (single-section preview) the bar is presented so the interaction reads. 560px stacks + tightens. */
.ws-hero.v-hero-sticky-cta { position:relative; min-height:100cqh; display:flex; flex-direction:column;
  padding:clamp(64px, 9cqw, 112px) 0 0; box-sizing:border-box; }
.v-hero-sticky-cta > .ws-in.center { margin:auto; display:flex; flex-direction:column; align-items:center;
  padding-bottom:clamp(40px, 6cqw, 72px); }
.v-hero-sticky-cta .ws-kick { margin-bottom:18px; }
.v-hero-sticky-cta .ws-h1 { max-width:15ch; text-wrap:balance; }
.v-hero-sticky-cta .ws-sub { margin-top:18px; max-width:52ch; }
.v-hero-sticky-cta .hsc-cta { margin-top:30px; }
/* check-mark feature pills */
.v-hero-sticky-cta .hsc-pills { list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; }
.v-hero-sticky-cta .hsc-pill { display:inline-flex; align-items:center; gap:7px;
  font:500 13px var(--font); color:var(--dim); }
.v-hero-sticky-cta .hsc-pill svg { width:15px; height:15px; color:var(--accent); flex:none; stroke-width:2.4; }
/* sticky conversion bar — a sticky / height:0 dock pins to the site container's bottom without
   position:fixed; the bar is absolutely anchored to it and slides up on reveal (.on) */
.v-hero-sticky-cta .hsc-dock { position:sticky; bottom:0; height:0; z-index:30; }
.v-hero-sticky-cta .hsc-bar { position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:13px clamp(16px, 3cqw, 28px);
  background:var(--panel); background-image:var(--surface-grad, none); border-top:var(--bw, 1px) solid var(--hair);
  transform:translateY(110%); opacity:0; pointer-events:none;
  transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), opacity 200ms linear; }
.v-hero-sticky-cta .hsc-dock.on .hsc-bar { transform:translateY(0); opacity:1; pointer-events:auto; }
.v-hero-sticky-cta .hsc-bar-text { font:600 14px var(--font); color:var(--ink); }
@container site (max-width: 560px) {
  .ws-hero.v-hero-sticky-cta { padding-top:clamp(48px, 12cqw, 72px); }
  .v-hero-sticky-cta > .ws-in.center { padding-bottom:clamp(28px, 8cqw, 48px); }
  .v-hero-sticky-cta .hsc-bar { flex-direction:column; gap:10px; padding:14px 18px; text-align:center; }
  .v-hero-sticky-cta .hsc-pills { gap:8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-sticky-cta .hsc-bar { transition:none; }
}
/* hero-timeline — ported from SB_04 drafts/hero-timeline (a milestone timeline: eyebrow + headline over a
   connected track of past / current / future nodes, the completed run filled up to the current node). Origin
   --htl-* vars map to theme tokens. Dead -> real: milestones are data-driven (take items) and the fill is
   derived PER NODE (seg-on) from the current index, not a magic width, so it stays exact at any node count.
   The current node's pulse is the one at-rest motion (transform/opacity only, reduced-motion-guarded), like the
   ticker marquee. Collapses to a vertical rail via the site container query. */
.v-hero-timeline .ws-htlhead { max-width:640px; }
.v-hero-timeline .ws-htlwrap { margin-top:clamp(48px, 7cqw, 80px); }
.v-hero-timeline .ws-htltimeline { position:relative; display:flex; align-items:flex-start; }
.v-hero-timeline .ws-htlnode { position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 10px; }
.v-hero-timeline .ws-htlnode::before { content:''; position:absolute; top:42px; left:50%; width:100%; height:2px;
  background:var(--hair); z-index:0; }
.v-hero-timeline .ws-htlnode.seg-on::before { background:var(--accent); }
.v-hero-timeline .ws-htlnode:last-child::before { display:none; }
.v-hero-timeline .ws-htldate { height:18px; margin-bottom:16px;
  font:600 12px/18px var(--font); letter-spacing:0.06em; color:var(--dim); }
.v-hero-timeline .ws-htlnode.is-current .ws-htldate { color:var(--accent); }
.v-hero-timeline .ws-htldot { position:relative; z-index:1; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--hair); }
.v-hero-timeline .ws-htlnode.is-past .ws-htldot { background:var(--ink); }
.v-hero-timeline .ws-htlnode.is-current .ws-htldot { background:var(--accent); box-shadow:0 0 0 4px var(--accent-fill); }
.v-hero-timeline .ws-htlnode.is-future .ws-htldot { background:var(--bg);
  border:2px solid color-mix(in srgb, var(--ink) 24%, transparent); }
.v-hero-timeline .ws-htlnode.is-current .ws-htldot::after { content:''; position:absolute; inset:0;
  border-radius:50%; border:2px solid var(--accent); opacity:0; animation:htlPulse 2.2s ease-out infinite; }
.v-hero-timeline .ws-htlbody { margin-top:22px; padding:0 4px; }
.v-hero-timeline .ws-htltitle { margin:0 0 8px; font:600 clamp(14px, 1.7cqw, 16px)/1.3 var(--font-head, var(--font)); color:var(--ink); }
.v-hero-timeline .ws-htlnode.is-future .ws-htltitle { color:var(--dim); }
.v-hero-timeline .ws-htldesc { margin:0; font:400 13px/1.6 var(--font); color:var(--dim); }
.v-hero-timeline .ws-htlnode.is-future .ws-htldesc { color:var(--faint); }
@keyframes htlPulse { 0% { transform:scale(1); opacity:.6; } 100% { transform:scale(2.4); opacity:0; } }
@container site (max-width: 640px) {
  .v-hero-timeline .ws-htltimeline { flex-direction:column; align-items:stretch; }
  .v-hero-timeline .ws-htlnode { flex:none; display:grid; grid-template-columns:18px 1fr; column-gap:18px;
    align-items:start; text-align:left; padding:0 0 32px; }
  .v-hero-timeline .ws-htlnode:last-child { padding-bottom:0; }
  .v-hero-timeline .ws-htlnode::before { top:9px; left:8px; width:2px; height:100%; }
  .v-hero-timeline .ws-htldot { grid-column:1; grid-row:1; }
  .v-hero-timeline .ws-htldate { grid-column:2; grid-row:1; height:18px; margin:0; }
  .v-hero-timeline .ws-htlbody { grid-column:2; grid-row:2; margin-top:8px; padding:0; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-timeline .ws-htlnode.is-current .ws-htldot::after { animation:none; }
}
/* hero-text-ticker — ported from SB_04 drafts/hero-text-ticker (split hero: copy with an inline
   cycling headline word beside a vertical marquee of category chips). The vertical marquee is the
   component's identity: a CSS-only continuous translateY loop, list doubled with spacing carried on
   the items (not flex gap) so translateY(-50%) wraps seamlessly. The headline word-cycle is driven
   by mount() (transform snaps, any word count). Entrance motion belongs to the site's reveal system.
   Edge fades use a mask so they stay background-agnostic — no blur. */
.v-hero-text-ticker .ws-in.split { align-items:center; grid-template-columns:1.1fr .9fr; }
.v-hero-text-ticker .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-hero-text-ticker .htt-slot { display:inline-block; height:1.4em; overflow:hidden; vertical-align:bottom; }
.v-hero-text-ticker .htt-slot-track { display:flex; flex-direction:column; will-change:transform; }
.v-hero-text-ticker .htt-slot-word { display:grid; align-items:center; justify-items:start; height:1.4em; line-height:1; color:var(--accent); }
.v-hero-text-ticker .htt-rail { position:relative; height:400px; overflow:hidden;
  -webkit-mask:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.v-hero-text-ticker .htt-tick-track { display:flex; flex-direction:column; will-change:transform;
  animation:htt-rail-scroll 20s linear infinite; }
@keyframes htt-rail-scroll { from { transform:translateY(0); } to { transform:translateY(-50%); } }
.v-hero-text-ticker .htt-tick-item { display:flex; align-items:center; gap:14px; margin-bottom:14px;
  padding:15px 20px; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  font:500 15px var(--font); color:var(--ink); white-space:nowrap; }
.v-hero-text-ticker .htt-tick-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--accent); opacity:.6; }
@media (prefers-reduced-motion: reduce) {
  .v-hero-text-ticker .htt-tick-track { animation:none; }
}
@container site (max-width: 860px) {
  .v-hero-text-ticker .ws-in.split { grid-template-columns:1fr; }
  .v-hero-text-ticker .htt-rail { height:220px; }
}
/* hero-typewriter — SB_04 drafts/hero-typewriter — centered hero; the headline
   tail types / holds / erases / rotates through phrases (mount) behind a
   border-right caret. Static dot-grid field. The line is kept to one row on
   desktop (min-height reserve on narrow) so the sub + CTAs never reflow-jump. */
.v-hero-typewriter { text-align:center; }
.v-hero-typewriter::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 64% at 50% 40%, #000 45%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 64% at 50% 40%, #000 45%, transparent 100%);
}
.v-hero-typewriter .ws-in { position:relative; z-index:1; }
.v-hero-typewriter .tw-head {
  white-space:nowrap; line-height:1.08; min-height:1.08em;
  font-size:clamp(28px, 5cqw, 54px); letter-spacing:-0.02em;
}
.v-hero-typewriter .tw-typed {
  font-family:var(--mono); font-weight:700; color:var(--accent);
  letter-spacing:-0.01em; white-space:nowrap;
  border-right:0.08em solid var(--accent); padding-right:0.02em; margin-left:0.03em;
}
.v-hero-typewriter .tw-typed.blink { animation:twBlink 0.85s step-end infinite; }
@keyframes twBlink { 0%, 100% { border-right-color:var(--accent); } 50% { border-right-color:transparent; } }
.v-hero-typewriter .ws-sub { margin-top:20px; }
@media (prefers-reduced-motion: reduce) {
  .v-hero-typewriter .tw-typed { animation:none; }
}
@container site (max-width: 640px) {
  .v-hero-typewriter .tw-head { white-space:normal; min-height:calc(3 * 1.12em); }
  .v-hero-typewriter .tw-typed { white-space:normal; overflow-wrap:anywhere; }
}
/* hero-viewfinder — SB_04 drafts/hero-viewfinder — camera-viewfinder frame around the headline:
   corner brackets, rule-of-thirds grid, a live mono HUD (REC timecode + f-stop/focal/ISO) and a REAL
   focusable AF reticle (pointer/arrow keys rack focus + drive the readouts, click/Enter captures a frame).
   The origin's baked scene-blur + entrance are dropped: no blur filters, anims.js owns entrances. Only the
   REC blink (CSS) and a subtle reticle drift (mount, transform) run at rest, both off under reduced-motion.
   Chrome + reticle are token-driven; the framing sits over the theme --bg with a soft photographic vignette. */
.v-hero-viewfinder { --vf-inset:clamp(16px, 3.4cqw, 34px); --vf-pad:clamp(30px, 5.6cqw, 52px);
  --vf-rec:var(--bad, #ff4d3d);
  position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:clamp(540px, 76cqh, 800px); padding-block:clamp(64px, 11cqh, 108px);
  background:radial-gradient(125% 130% at 50% 42%, transparent 52%, rgba(0,0,0,.24) 100%); }
.v-hero-viewfinder .ws-in { position:relative; z-index:2; width:min(600px, 84cqw);
  margin-left:max(24px, calc((100cqw - 1080px) / 2)); margin-right:0; }
.v-hero-viewfinder .ws-h1 { font-size:clamp(34px, 7cqw, 72px); line-height:1.0; }
.v-hero-viewfinder .ws-sub { max-width:44ch; }
/* inert mono overlay */
.v-hero-viewfinder .vf-frame { position:absolute; inset:0; z-index:1; pointer-events:none;
  font:600 clamp(9px, 1.5cqw, 11px)/1 var(--mono, var(--font)); letter-spacing:.15em;
  text-transform:uppercase; color:var(--dim); }
.v-hero-viewfinder .vf-mono { font-variant-numeric:tabular-nums; }
.v-hero-viewfinder .vf-faint { color:var(--faint); }
/* rule-of-thirds grid + safe-area border */
.v-hero-viewfinder .vf-grid { position:absolute; inset:var(--vf-inset); border:var(--bw, 1px) solid var(--hair);
  background-image:linear-gradient(var(--hair), var(--hair)), linear-gradient(var(--hair), var(--hair)),
    linear-gradient(var(--hair), var(--hair)), linear-gradient(var(--hair), var(--hair));
  background-size:1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position:33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%; background-repeat:no-repeat; }
/* corner brackets */
.v-hero-viewfinder .vf-corner { position:absolute; width:18px; height:18px; border:0 solid var(--ink); opacity:.8; }
.v-hero-viewfinder .vf-corner.tl { top:var(--vf-inset); left:var(--vf-inset); border-top-width:2px; border-left-width:2px; }
.v-hero-viewfinder .vf-corner.tr { top:var(--vf-inset); right:var(--vf-inset); border-top-width:2px; border-right-width:2px; }
.v-hero-viewfinder .vf-corner.bl { bottom:var(--vf-inset); left:var(--vf-inset); border-bottom-width:2px; border-left-width:2px; }
.v-hero-viewfinder .vf-corner.br { bottom:var(--vf-inset); right:var(--vf-inset); border-bottom-width:2px; border-right-width:2px; }
/* HUD readout clusters */
.v-hero-viewfinder .vf-hud { position:absolute; display:flex; align-items:center; gap:12px; white-space:nowrap; }
.v-hero-viewfinder .vf-hud.tl { top:var(--vf-pad); left:var(--vf-pad); }
.v-hero-viewfinder .vf-hud.tr { top:var(--vf-pad); right:var(--vf-pad); }
.v-hero-viewfinder .vf-hud.bl { bottom:var(--vf-pad); left:var(--vf-pad); }
.v-hero-viewfinder .vf-hud.br { bottom:var(--vf-pad); right:var(--vf-pad); }
.v-hero-viewfinder .vf-hud b { font-weight:600; color:var(--ink); }
.v-hero-viewfinder .vf-rec { width:8px; height:8px; border-radius:50%; background:var(--vf-rec);
  box-shadow:0 0 8px color-mix(in srgb, var(--vf-rec) 65%, transparent); animation:vfBlink 1.6s steps(1, end) infinite; }
.v-hero-viewfinder .vf-batt { position:relative; width:22px; height:11px; border:1px solid var(--faint); border-radius:2px; }
.v-hero-viewfinder .vf-batt::before { content:''; position:absolute; inset:2px; right:38%; background:var(--dim); }
.v-hero-viewfinder .vf-batt::after { content:''; position:absolute; top:3px; bottom:3px; right:-3px; width:2px; background:var(--faint); border-radius:0 1px 1px 0; }
/* the reticle — a real focus button */
.v-hero-viewfinder .vf-reticle { position:absolute; left:50%; top:50%; z-index:3;
  width:clamp(74px, 11cqw, 104px); padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--accent); transform:translate(-50%, -50%); }
.v-hero-viewfinder .vf-reticle svg { display:block; width:100%; height:auto; overflow:visible;
  transition:transform 160ms ease-out; }
.v-hero-viewfinder .vf-reticle:hover svg { transform:scale(1.06); }
.v-hero-viewfinder .vf-bk { stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.v-hero-viewfinder .vf-cx { stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; }
.v-hero-viewfinder .vf-dot { fill:var(--accent); }
.v-hero-viewfinder .vf-reticle:focus-visible { outline:2px solid color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset:7px; border-radius:10px; }
.v-hero-viewfinder .vf-reticle.cap svg { animation:vfCap .42s ease-out; }
/* capture flash (shutter) */
.v-hero-viewfinder .vf-flash { position:absolute; inset:0; z-index:4; background:#fff; opacity:0; pointer-events:none; }
.v-hero-viewfinder .vf-flash.on { animation:vfFlash .42s ease-out; }
/* hint + a11y */
.v-hero-viewfinder .vf-hint { position:absolute; z-index:2; left:50%; bottom:calc(var(--vf-pad) - 2px);
  transform:translateX(-50%); margin:0; font:600 10px/1 var(--mono, var(--font)); letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.v-hero-viewfinder .vf-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; }
@keyframes vfBlink { 0%, 60% { opacity:1; } 61%, 100% { opacity:.24; } }
@keyframes vfCap { 0% { transform:scale(1); opacity:1; } 42% { transform:scale(1.16); opacity:.72; } 100% { transform:scale(1); opacity:1; } }
@keyframes vfFlash { 0% { opacity:0; } 16% { opacity:.5; } 100% { opacity:0; } }
@container site (max-width: 720px) {
  .v-hero-viewfinder .vf-shutter, .v-hero-viewfinder .vf-afread, .v-hero-viewfinder .vf-hint { display:none; }
}
@container site (max-width: 560px) {
  .v-hero-viewfinder { --vf-pad:clamp(22px, 6cqw, 32px); --vf-inset:clamp(12px, 4cqw, 22px);
    min-height:clamp(460px, 68cqh, 620px); }
  .v-hero-viewfinder .vf-batt { display:none; }
  .v-hero-viewfinder .ws-in { width:min(560px, 88cqw); }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-viewfinder .vf-rec { animation:none; }
  .v-hero-viewfinder .vf-reticle svg { transition:none; }
  .v-hero-viewfinder .vf-reticle.cap svg, .v-hero-viewfinder .vf-flash.on { animation:none; }
}
/* hero-waitlist — ported from SB_04 drafts/hero-waitlist. Centered early-access capture.
   The form is REAL (see heros.js mount): inline email validation, a per-site signup count
   (base + localStorage joins) that ticks up live, your place in line, and a success swap.
   Origin's baked fade-in dropped (anims.js owns entrances); only the status-dot pulse and a
   one-shot count bump run at rest, both off under reduced-motion. Origin hexes → tokens
   (accent → --accent/--accent2, surfaces → --panel/--hair, success hue → semantic --ok). */
.v-hero-waitlist { position:relative; overflow:hidden; text-align:center; }
.v-hero-waitlist::before { content:''; position:absolute; top:0; left:50%; width:min(900px, 120cqw); height:440px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 66%); }
.v-hero-waitlist .wl-wrap { position:relative; z-index:1; width:min(640px, 88cqw); }
.v-hero-waitlist .ws-h1 { font-size:clamp(34px, 6.4cqw, 64px); letter-spacing:-0.03em; line-height:1.06; }
.v-hero-waitlist .ws-sub { margin:16px auto 0; max-width:52ch; }
/* badge status dot */
.v-hero-waitlist .wl-badge { gap:8px; }
.v-hero-waitlist .wl-dot { width:6px; height:6px; border-radius:50%; background:var(--accent);
  animation:wlBlink 2s ease-in-out infinite; }
/* form */
.v-hero-waitlist .wl-form { display:flex; gap:10px; width:min(460px, 100%); margin:30px auto 0; }
.v-hero-waitlist .wl-form[hidden] { display:none; }
.v-hero-waitlist .wl-input { flex:1; min-width:0; padding:13px 18px; border-radius:calc(var(--radius, 12px) * .75);
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); color:var(--ink); font:400 14px var(--font);
  outline:none; transition:border-color 140ms ease; }
.v-hero-waitlist .wl-input::placeholder { color:var(--faint); }
.v-hero-waitlist .wl-input:focus { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.v-hero-waitlist .wl-submit { white-space:nowrap; }
/* validation line */
.v-hero-waitlist .wl-msg { min-height:1.2em; margin:12px 0 0; font:500 13px var(--font); color:var(--dim); }
.v-hero-waitlist .wl-msg.bad { color:var(--bad, #ff6b6b); }
/* success swap */
.v-hero-waitlist .wl-success { display:inline-flex; align-items:center; gap:12px; margin:30px auto 0; max-width:min(460px, 100%);
  padding:12px 16px; border-radius:calc(var(--radius, 12px) * .75); text-align:left;
  border:1px solid color-mix(in srgb, var(--ok, #46c17a) 40%, transparent);
  background:color-mix(in srgb, var(--ok, #46c17a) 12%, transparent); }
.v-hero-waitlist .wl-success[hidden] { display:none; }
.v-hero-waitlist .wl-check { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; color:var(--ok, #46c17a);
  background:color-mix(in srgb, var(--ok, #46c17a) 18%, transparent); }
.v-hero-waitlist .wl-check svg { width:16px; height:16px; }
.v-hero-waitlist .wl-success-tx { display:flex; flex-direction:column; gap:1px; min-width:0; }
.v-hero-waitlist .wl-success-tx b { font:600 14px var(--font); color:var(--ink); }
.v-hero-waitlist .wl-success-tx i { font:400 12.5px/1.5 var(--font); font-style:normal; color:var(--dim); }
/* social proof — avatar stack + live count */
.v-hero-waitlist .wl-proof { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
.v-hero-waitlist .wl-avatars { display:inline-flex; }
.v-hero-waitlist .wl-av { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  margin-left:-8px; border-radius:50%; border:2px solid var(--bg); color:var(--ink); font:700 12px var(--font); }
.v-hero-waitlist .wl-av:first-child { margin-left:0; }
.v-hero-waitlist .wl-av.a1 { background:color-mix(in srgb, var(--accent) 82%, var(--panel)); }
.v-hero-waitlist .wl-av.a2 { background:color-mix(in srgb, var(--accent) 60%, var(--panel)); }
.v-hero-waitlist .wl-av.a3 { background:color-mix(in srgb, var(--accent2, var(--accent)) 55%, var(--panel)); }
.v-hero-waitlist .wl-av.a4 { background:color-mix(in srgb, var(--accent) 40%, var(--panel)); }
.v-hero-waitlist .wl-av.a5 { background:color-mix(in srgb, var(--accent2, var(--accent)) 74%, var(--panel)); }
.v-hero-waitlist .wl-av.wl-you { display:none; color:var(--accent-text, var(--bg)); background:var(--accent); }
.v-hero-waitlist .wl-av.wl-you svg { width:15px; height:15px; }
.v-hero-waitlist .wl-proof.joined .wl-you { display:inline-flex; }
.v-hero-waitlist .wl-count { margin:0; font:400 13px var(--font); color:var(--dim); }
.v-hero-waitlist .wl-count strong { display:inline-block; color:var(--ink); font-weight:600; }
.v-hero-waitlist .wl-count strong.bumped { animation:wlBump 420ms ease-out; }
.v-hero-waitlist .wl-note { margin:18px 0 0; font:400 12px var(--font); color:var(--faint); }
@keyframes wlBlink { 0%, 100% { opacity:1; } 50% { opacity:.3; } }
@keyframes wlBump { 0% { transform:scale(1); } 40% { transform:scale(1.14); color:var(--accent); } 100% { transform:scale(1); } }
@container site (max-width: 560px) {
  .v-hero-waitlist .wl-form { flex-direction:column; }
  .v-hero-waitlist .wl-submit { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .v-hero-waitlist .wl-dot { animation:none; }
  .v-hero-waitlist .wl-count strong.bumped { animation:none; }
}
/* hero-walkthrough — ported from SB_04 drafts/hero-walkthrough (centered pitch +
   a numbered Connect -> Configure -> Deploy step flow). The static source shell is
   made real: the row walks itself (an auto-advancing highlight, resettable by click)
   and the connectors fill with accent as progress moves. CSS vars mapped to theme
   tokens; entrance motion belongs to anims.js, only hover/state motion runs here. */
.v-hero-walkthrough .ws-wt-steps { display:flex; align-items:stretch; gap:0;
  width:100%; max-width:820px; margin:44px auto 0; }
.v-hero-walkthrough .ws-wt-step { flex:1 1 0; min-width:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:24px 18px; color:var(--ink); font:inherit;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  transition:transform .2s ease, border-color .2s ease, opacity .2s ease; }
.v-hero-walkthrough .ws-wt-step:hover { transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.v-hero-walkthrough .ws-wt-step.on { border-color:var(--accent); transform:translateY(-4px); }
.v-hero-walkthrough .ws-wt-step:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.v-hero-walkthrough .ws-wt-ico { width:36px; height:36px; display:grid; place-items:center;
  border-radius:99px; color:var(--dim); border:var(--bw, 1px) solid var(--hair);
  transition:color .2s ease, border-color .2s ease, transform .2s ease; }
.v-hero-walkthrough .ws-wt-ico svg { width:18px; height:18px; display:block; }
.v-hero-walkthrough .ws-wt-step.on .ws-wt-ico { color:var(--accent); border-color:var(--accent); transform:scale(1.06); }
.v-hero-walkthrough .ws-wt-step.done .ws-wt-ico { color:var(--accent); }
.v-hero-walkthrough .ws-wt-num { font:800 10px var(--mono); letter-spacing:2px; color:var(--faint);
  transition:color .2s ease; }
.v-hero-walkthrough .ws-wt-step.on .ws-wt-num,
.v-hero-walkthrough .ws-wt-step.done .ws-wt-num { color:var(--accent); }
.v-hero-walkthrough .ws-wt-t { font:700 15px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-hero-walkthrough .ws-wt-d { font:400 12px/1.6 var(--font); color:var(--dim); }
.v-hero-walkthrough .ws-wt-arrow { flex:0 0 auto; align-self:center; padding:0 10px;
  display:grid; place-items:center; color:var(--faint); transition:color .2s ease, transform .2s ease; }
.v-hero-walkthrough .ws-wt-arrow svg { width:20px; height:20px; display:block; }
.v-hero-walkthrough .ws-wt-arrow.on { color:var(--accent); }
@container site (max-width: 560px) {
  .v-hero-walkthrough .ws-wt-steps { flex-direction:column; align-items:stretch; }
  .v-hero-walkthrough .ws-wt-arrow { transform:rotate(90deg); padding:6px 0; }
}
/* hero-waitlist-form — early-access opener: eyebrow + headline + benefit ticks + a social-proof
   count (left) beside a live waitlist form (right): name/email validate, a themed role select, and
   on submit it confirms inline, locks the fields and advances a real position-in-line meter. Ported
   from SB_04 drafts/hero-waitlist-form. Reuses the shared .ws-in.split grid (narrow-stacks via the
   global 860px .ws-hero .ws-in.split rule) and the .ws-bkinput field family so the controls theme
   with no native blue. Origin CSS vars mapped to tokens (bg/surface -> --panel/--panel-2, heading ->
   --ink, body -> --dim/--faint, border/divider -> --hair, accent/focus -> --accent). Baked entrance
   and the width transition are dropped (anims.js owns entrances; the meter animates transform:scaleX,
   never a background/width); the error hue reuses the semantic #e5484d red. Container queries only. */
.v-hero-waitlist-form .ws-in.split { align-items:stretch; }
.v-hero-waitlist-form .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-hero-waitlist-form .hwf-benefits { list-style:none; display:flex; flex-direction:column; gap:14px; margin:28px 0 0; padding:0; }
.v-hero-waitlist-form .hwf-benefit { display:flex; align-items:flex-start; gap:12px; font:400 14px/1.5 var(--font); color:var(--dim); }
.v-hero-waitlist-form .hwf-bdot { flex:none; width:8px; height:8px; margin-top:5px; border-radius:2px; background:var(--accent); transform:rotate(45deg); }
.v-hero-waitlist-form .hwf-proof { margin:26px 0 0; font:400 13.5px var(--font); color:var(--faint); }
.v-hero-waitlist-form .hwf-proof b { font-weight:700; font-size:16px; color:var(--ink); }
.v-hero-waitlist-form .hwf-panel { display:flex; flex-direction:column; justify-content:center; gap:24px;
  padding:clamp(24px, 3cqw, 40px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  background:var(--panel-2); background-image:var(--surface-grad, none);
  box-shadow:var(--inset-hi,0 0 #0000), var(--elev,0 0 #0000); }
.v-hero-waitlist-form .hwf-form { display:flex; flex-direction:column; gap:14px; }
.v-hero-waitlist-form .hwf-field { gap:6px; }
.v-hero-waitlist-form .hwf-field > span { text-transform:none; letter-spacing:.2px; font:600 11px var(--mono); color:var(--faint); }
.v-hero-waitlist-form input.ws-bkinput[type="text"], .v-hero-waitlist-form input.ws-bkinput[type="email"] { cursor:text; }
.v-hero-waitlist-form .ws-bkinput:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.v-hero-waitlist-form .hwf-submit { width:100%; justify-content:center; margin-top:4px; border:none; transition:opacity 140ms linear, transform 140ms linear; }
.v-hero-waitlist-form .hwf-submit:hover { opacity:.92; }
.v-hero-waitlist-form .hwf-submit:active { transform:translateY(1px); }
.v-hero-waitlist-form .hwf-submit:disabled { opacity:.6; cursor:default; }
.v-hero-waitlist-form .hwf-note { margin:0; font:500 13px/1.5 var(--font); }
.v-hero-waitlist-form .hwf-note:empty { display:none; }
.v-hero-waitlist-form .hwf-note.err { color:#e5484d; }
.v-hero-waitlist-form .hwf-note.ok { color:var(--accent); padding:11px 13px; border-radius:calc(var(--radius, 12px) * .7); background:var(--accent-fill); }
.v-hero-waitlist-form .hwf-privacy { margin:0; text-align:center; font:400 12px/1.5 var(--font); color:var(--faint); }
.v-hero-waitlist-form .hwf-meter { display:flex; flex-direction:column; gap:9px; padding-top:22px; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-waitlist-form .hwf-meter-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.v-hero-waitlist-form .hwf-meter-label { font:400 13.5px var(--font); color:var(--dim); }
.v-hero-waitlist-form .hwf-meter-label strong { font-weight:700; color:var(--ink); }
.v-hero-waitlist-form .hwf-meter-pct { font:600 12.5px var(--mono); color:var(--accent); }
.v-hero-waitlist-form .hwf-meter-track { position:relative; height:6px; border-radius:99px; overflow:hidden; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-hero-waitlist-form .hwf-meter-fill { position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--p, .6)); border-radius:99px; background:var(--accent); transition:transform 600ms cubic-bezier(.22,1,.36,1); }
.v-hero-waitlist-form .hwf-meter-note { margin:0; font:400 12px var(--font); color:var(--faint); }
/* immersive — ported from SB_04 drafts/immersive-hero (full-viewport cinematic opener: a landscape
   image, or a themed CSS wash when none is set, under a token-toned vignette, with a centered eyebrow,
   oversized headline, tagline, twin CTAs and a live scroll cue that scrolls the stage). The origin's
   fixed black overlay + white text map to theme tokens so it themes in light AND dark; the ghost
   button's backdrop-blur is dropped for the site's solid button fill; entrance fades belong to the
   reveal system — only the scroll cue's bounce runs at rest, and it stops for reduced-motion. */
.v-immersive { position:relative; overflow:hidden; isolation:isolate; text-align:center;
  min-height:clamp(520px, 86cqh, 860px); display:grid; place-items:center;
  padding:clamp(72px, 10cqh, 120px) 24px; background:var(--panel); }
.v-immersive .imm-bg { position:absolute; inset:0; z-index:0;
  background-color:var(--panel); background-size:cover; background-position:center; }
.v-immersive .imm-bg.ph {
  background-image:
    radial-gradient(78% 54% at 50% 116%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 60%),
    radial-gradient(64% 46% at 80% 6%, color-mix(in srgb, var(--accent2, var(--accent)) 30%, transparent) 0%, transparent 58%),
    radial-gradient(56% 44% at 14% 2%, color-mix(in srgb, var(--ink) 20%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 16%, var(--panel)) 0%, var(--panel) 44%, color-mix(in srgb, var(--bg) 82%, var(--panel)) 100%); }
.v-immersive .imm-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 76% 66% at 50% 44%,
    color-mix(in srgb, var(--bg) 8%, transparent) 0%,
    color-mix(in srgb, var(--bg) 56%, transparent) 56%,
    color-mix(in srgb, var(--bg) 88%, transparent) 100%); }
.v-immersive .imm-wrap { position:relative; z-index:2; width:min(820px, 88cqw); }
.v-immersive .imm-eyebrow { display:inline-block; margin-bottom:18px;
  font:600 12px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.v-immersive .imm-h { font-size:clamp(42px, 8.4cqw, 92px); line-height:1.02; letter-spacing:-0.03em;
  text-wrap:balance; text-shadow:0 2px 34px color-mix(in srgb, var(--bg) 52%, transparent); }
.v-immersive .imm-sub { margin:20px auto 0; max-width:46ch; text-wrap:pretty; }
.v-immersive .ws-ctarow { margin-top:30px; justify-content:center; }
.v-immersive .imm-scroll { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  display:inline-flex; flex-direction:column; align-items:center; gap:7px; padding:6px 12px;
  background:none; border:0; cursor:pointer; color:var(--faint);
  transition:color .2s ease, transform .2s ease; }
.v-immersive .imm-scroll:hover { color:var(--dim); }
.v-immersive .imm-scroll-t { font:500 10px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; }
.v-immersive .imm-scroll-i { width:20px; height:20px; animation:immBounce 1.8s ease-in-out infinite; }
@keyframes immBounce { 0%, 100% { transform:translateY(0); opacity:.55; } 50% { transform:translateY(5px); opacity:1; } }
@container site (max-width: 560px) {
  .v-immersive { min-height:clamp(440px, 78cqh, 640px); padding:64px 18px; }
  .v-immersive .imm-wrap { width:min(560px, 92cqw); }
  .v-immersive .imm-sub { max-width:38ch; }
}
@media (prefers-reduced-motion: reduce) {
  .v-immersive .imm-scroll-i { animation:none; }
}
/* hero-work-showcase — ported from SB_04 drafts/hero-work-showcase (portfolio opener:
   a featured case study — headline, client/type/year meta, description, service tags, CTA —
   beside a tall visual panel, over a strip of recent projects). The origin's dead thumbnail
   strip is made real: every project is data-driven and clicking a thumb features it — title,
   meta, description, service tags and the panel monogram all swap. Origin entrance fades were
   dropped (anims.js owns entrances); only hover/selection motion on transform/opacity/color
   remains. Colors map to theme tokens; featured + thumb visuals reuse the ws-hpanel.ph atom. */
.v-hero-work-showcase .wk-main { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.v-hero-work-showcase .wk-copy { display:flex; flex-direction:column; justify-content:center; }
.v-hero-work-showcase .wk-meta { margin:26px 0 0; padding:0; border-top:var(--bw, 1px) solid var(--hair); }
.v-hero-work-showcase .wk-mrow { display:flex; align-items:center; gap:22px; padding:11px 0;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.v-hero-work-showcase .wk-mrow dt { flex:0 0 auto; min-width:88px; margin:0;
  font:600 10px var(--mono); letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); }
.v-hero-work-showcase .wk-mrow dd { margin:0; font:500 14px var(--font); color:var(--ink); }
.v-hero-work-showcase .wk-desc { margin-top:22px; max-width:52ch; }
.v-hero-work-showcase .wk-tags { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none; }
.v-hero-work-showcase .wk-tag { font:500 11.5px var(--font); letter-spacing:0.02em; color:var(--dim);
  border:var(--bw, 1px) solid var(--hair); border-radius:99px; padding:5px 13px;
  background:color-mix(in srgb, var(--ink) 3%, transparent); }
.v-hero-work-showcase .ws-ctarow { margin-top:30px; }
/* featured visual */
.v-hero-work-showcase .wk-featured { min-height:clamp(340px, 46cqw, 520px); aspect-ratio:4 / 5;
  display:flex; align-items:center; justify-content:center; }
.v-hero-work-showcase .wk-mono { position:relative; z-index:1; letter-spacing:-0.03em;
  font:800 clamp(56px, 12cqw, 128px) var(--font-head, var(--font));
  color:color-mix(in srgb, var(--ink) 16%, transparent); transition:color 0.25s ease; }
.v-hero-work-showcase .wk-fcap { position:absolute; left:20px; right:20px; bottom:18px; z-index:1;
  display:flex; flex-direction:column; gap:3px; }
.v-hero-work-showcase .wk-fcap-name { font:600 14px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-hero-work-showcase .wk-fcap-type { font:400 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); font-style:normal; }
/* recent-work strip */
.v-hero-work-showcase .wk-recent { margin-top:56px; padding-top:30px; border-top:var(--bw, 1px) solid var(--hair);
  display:flex; flex-direction:column; gap:18px; }
.v-hero-work-showcase .wk-recent-label { font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-hero-work-showcase .wk-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px; }
.v-hero-work-showcase .wk-thumb { display:flex; flex-direction:column; gap:11px; padding:0; text-align:left;
  background:none; border:0; cursor:pointer; font:inherit; color:inherit; }
.v-hero-work-showcase .wk-thumb-fig { min-height:0; aspect-ratio:16 / 10; display:flex; align-items:center; justify-content:center;
  transition:opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
.v-hero-work-showcase .wk-thumb-fig b { position:relative; z-index:1; letter-spacing:-0.02em;
  font:800 clamp(26px, 5cqw, 44px) var(--font-head, var(--font));
  color:color-mix(in srgb, var(--ink) 15%, transparent); transition:color 0.25s ease; }
.v-hero-work-showcase .wk-thumb-name { font:500 12.5px var(--font); color:var(--dim); transition:color 0.2s ease; }
.v-hero-work-showcase .wk-thumb:hover .wk-thumb-fig { opacity:0.86; transform:translateY(-3px); }
.v-hero-work-showcase .wk-thumb:hover .wk-thumb-name { color:var(--ink); }
.v-hero-work-showcase .wk-thumb.on .wk-thumb-fig { border-color:color-mix(in srgb, var(--accent) 60%, var(--hair)); }
.v-hero-work-showcase .wk-thumb.on .wk-thumb-fig b { color:var(--accent); }
.v-hero-work-showcase .wk-thumb.on .wk-thumb-name { color:var(--ink); }
.v-hero-work-showcase .wk-thumb:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
@container site (max-width: 860px) {
  .v-hero-work-showcase .wk-main { grid-template-columns:1fr; gap:34px; }
  .v-hero-work-showcase .wk-featured { aspect-ratio:16 / 10; min-height:0; }
}
@container site (max-width: 560px) {
  .v-hero-work-showcase .wk-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .v-hero-work-showcase .wk-recent { margin-top:40px; }
}
/* history — ported from SB_04 drafts/history-hero (the studio's founding story).
   Origin was a static "Founded in YYYY" + story + quote beside a DEAD 6-image mosaic.
   Ported to a split: narrative copy beside a REAL milestone timeline, data-driven from
   DEF_YEARS (the mosaic had no assets to carry over, so the dead grid became a working
   scrubber — click or arrow a year to expand it; aria-selected tablist). Origin --hhy-*
   vars -> theme tokens; no baked entrance kept; transitions ride color/transform/opacity
   only; narrow-stacks via the global 860px .ws-hero .ws-in.split rule. */
.v-history .ws-in.split { align-items:center; }
.v-history .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-history .v-history-quote { margin:22px 0 0; padding-left:18px; border-left:2px solid var(--accent);
  display:flex; flex-direction:column; gap:8px; }
.v-history .v-history-quote p { margin:0; font:italic 400 clamp(14px, 1.7cqw, 16px)/1.6 var(--font); color:var(--ink); }
.v-history .v-history-quote cite { font:500 12px var(--font); font-style:normal; letter-spacing:0.02em; color:var(--dim); }

/* right column — a founded-year crest over the milestone rail */
.v-history .v-history-panel { display:flex; flex-direction:column; gap:clamp(22px, 3cqw, 34px);
  padding:clamp(24px, 3cqw, 36px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  background:var(--panel); }
.v-history .v-history-head { display:flex; align-items:baseline; gap:12px;
  padding-bottom:clamp(16px, 2cqw, 22px); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-history .v-history-since { font:600 10px var(--mono); letter-spacing:3px; text-transform:uppercase; color:var(--accent); }
.v-history .v-history-fy { font:800 clamp(40px, 7cqw, 72px)/0.9 var(--font-head, var(--font));
  letter-spacing:-0.04em; color:var(--ink); }

.v-history .v-history-track { display:flex; flex-direction:column; }
.v-history .v-history-node { display:grid; grid-template-columns:24px 1fr; gap:14px;
  width:100%; text-align:left; background:none; border:0; padding:0 0 clamp(18px, 2.4cqw, 26px);
  cursor:pointer; font-family:inherit; color:inherit;
  transition:transform 180ms ease, opacity 180ms linear; }
.v-history .v-history-node:last-child { padding-bottom:0; }
.v-history .v-history-mark { position:relative; display:flex; justify-content:center; padding-top:2px; }
.v-history .v-history-mark::before { content:''; position:absolute; left:50%; top:15px;
  bottom:calc(-1 * clamp(18px, 2.4cqw, 26px)); width:2px; transform:translateX(-50%); background:var(--hair); }
.v-history .v-history-node:last-child .v-history-mark::before { display:none; }
.v-history .v-history-dot { position:relative; z-index:1; width:12px; height:12px; border-radius:99px;
  border:2px solid var(--hair); background:var(--panel); flex:0 0 auto;
  transition:transform 180ms ease, border-color 180ms linear; }
.v-history .v-history-node.on .v-history-dot { border-color:var(--accent); transform:scale(1.2); }
.v-history .v-history-node.on .v-history-dot::after { content:''; position:absolute; inset:2px; border-radius:99px; background:var(--accent); }

.v-history .v-history-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.v-history .v-history-y { font:700 12px var(--mono); letter-spacing:1.5px; color:var(--dim);
  transition:color 180ms linear; }
.v-history .v-history-nt { font:700 clamp(15px, 1.9cqw, 18px) var(--font-head, var(--font)); color:var(--ink);
  transition:color 180ms linear; }
.v-history .v-history-nd { display:none; margin:4px 0 0; font:400 clamp(13px, 1.6cqw, 15px)/1.6 var(--font);
  color:var(--dim); max-width:46ch; }
.v-history .v-history-node.on .v-history-y { color:var(--accent); }
.v-history .v-history-node.on .v-history-nt { color:var(--ink); }
.v-history .v-history-node.on .v-history-nd { display:block; }
.v-history .v-history-node:not(.on) { opacity:0.6; }
.v-history .v-history-node:not(.on):hover,
.v-history .v-history-node:focus-visible { opacity:1; transform:translateX(3px); outline:none; }
.v-history .v-history-node:focus-visible .v-history-dot { border-color:var(--accent); }

@container site (max-width: 560px) {
  .v-history .v-history-panel { padding:22px 18px; }
  .v-history .v-history-fy { font-size:clamp(38px, 13cqw, 56px); }
}
/* job-board — ported from SB_04 drafts/job-board-hero (careers opener: a culture statement + values
   row over a list of open roles). Made real per the port rules: the search box filters roles live and
   the department chips toggle a single-select filter (both wired in mount). Entrance motion belongs to
   the reveal system (anims.js); only hover/focus and the filter interactions move here. The row hover
   flips an instant panel tint (background is never transitioned); the arrow + title ride color/transform.
   Colours map to theme tokens; layout uses container queries, not viewport media. */
.v-job-board .ws-jbhead { max-width:62ch; }
.v-job-board .ws-jbhead .ws-h1 { margin-top:14px; letter-spacing:-0.03em; }
.v-job-board .ws-jbhead .ws-sub { margin-top:20px; }
.ws-jbvalues { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:22px; }
.ws-jbvalue { font:500 13px var(--font); color:var(--ink); letter-spacing:0.01em; }
.ws-jbsep { color:var(--faint); font-size:13px; line-height:1; }
.v-job-board .ws-ctarow { margin-top:26px; }
.ws-jbcontrols { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 20px; margin-top:52px; padding-bottom:18px; border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-jbsearch { display:inline-flex; align-items:center; gap:9px; flex:1 1 240px; min-width:190px;
  max-width:340px; padding:9px 14px; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  background:color-mix(in srgb, var(--ink) 3%, transparent); color:var(--dim);
  transition:color .18s ease, border-color .18s ease; }
.ws-jbsearch:focus-within { border-color:var(--accent); color:var(--ink); }
.ws-jbmag { width:16px; height:16px; flex-shrink:0; }
.ws-jbinput { flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  font:400 14px var(--font); color:var(--ink); }
.ws-jbinput::placeholder { color:var(--faint); }
.ws-jbchips { display:flex; flex-wrap:wrap; gap:8px; }
.ws-jbchip { font:500 12px var(--font); letter-spacing:0.01em; color:var(--dim); cursor:pointer;
  padding:7px 14px; border:var(--bw, 1px) solid var(--hair); border-radius:99px; background:transparent;
  transition:color .18s ease, border-color .18s ease, transform .18s ease; }
.ws-jbchip:hover { color:var(--ink); transform:translateY(-1px); }
.ws-jbchip.on { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.ws-jbcount { margin:18px 0 0; font:400 12px var(--mono); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--faint); }
.ws-jblist { display:flex; flex-direction:column; margin-top:6px; }
.ws-jbrow { display:flex; align-items:center; gap:18px; padding:20px 12px; text-decoration:none;
  color:inherit; border-bottom:var(--bw, 1px) solid var(--hair); cursor:pointer; }
.ws-jbrow:first-child { border-top:var(--bw, 1px) solid var(--hair); }
.ws-jbrow[hidden] { display:none; }
.ws-jbrow:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ws-jbtitle { flex:1 1 auto; min-width:0; font:500 clamp(15px, 1.9cqw, 18px) var(--font); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .18s ease, transform .18s ease; }
.ws-jbrow:hover .ws-jbtitle { transform:translateX(3px); }
.ws-jbmeta { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.ws-jbtag { font:500 10.5px var(--mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--dim);
  border:var(--bw, 1px) solid var(--hair); border-radius:4px; padding:3px 9px; white-space:nowrap; }
.ws-jbloc, .ws-jbtype { font:400 13px var(--font); color:var(--faint); white-space:nowrap; }
.ws-jbarrow { display:inline-flex; flex-shrink:0; color:var(--faint); transition:color .18s ease, transform .18s ease; }
.ws-jbarrow svg { width:18px; height:18px; }
.ws-jbrow:hover .ws-jbarrow { color:var(--accent); transform:translateX(4px); }
.ws-jbempty { margin:26px 0 0; font:400 14px var(--font); color:var(--dim); }
@container site (max-width: 860px) {
  .ws-jbcontrols { margin-top:40px; }
}
@container site (max-width: 560px) {
  .ws-jbcontrols { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:14px; }
  .ws-jbsearch { flex:0 0 auto; max-width:none; }
  .ws-jbrow { flex-wrap:wrap; gap:10px 14px; padding:18px 4px; }
  .ws-jbtitle { flex:1 1 100%; white-space:normal; }
  .ws-jbrow:hover .ws-jbtitle { transform:none; }
  .ws-jbloc, .ws-jbtype { display:none; }
  .ws-jbarrow { margin-left:auto; }
}
/* minimal — ported from SB_04 drafts/minimal-hero (typography-first opener: an eyebrow, one
   restrained statement, twin CTAs, then a hairline rule carrying small status/location meta). The
   origin was a full-viewport flex-centered block with the meta bar + a base divider pinned absolute;
   in the site's scrolling section that becomes a normal-flow left-set column with the hairline + meta
   row at the foot of the copy. Entrance fades are dropped (anims.js owns section reveals) — only the
   token-driven CTA hover motion remains. No gimmicks: lives on whitespace and type restraint, every
   colour mapped to a theme token. */
.v-minimal .mnh-in { max-width:900px; }
.v-minimal .mnh-copy { display:flex; flex-direction:column; align-items:flex-start; }
.v-minimal .ws-kick { font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:0.16em; margin-bottom:20px; }
.v-minimal .ws-h1 { font-weight:600; line-height:1.08; letter-spacing:-0.03em; max-width:20ch; text-wrap:balance; }
.v-minimal .ws-sub { margin-top:22px; max-width:44ch; }
.v-minimal .ws-ctarow { margin-top:34px; }
.v-minimal .mnh-meta { display:flex; gap:52px; margin-top:56px; padding-top:22px; border-top:var(--bw, 1px) solid var(--hair); }
.v-minimal .mnh-mitem { display:flex; flex-direction:column; gap:6px; font:400 12.5px var(--font); color:var(--dim); letter-spacing:0.03em; }
.v-minimal .mnh-mlabel { text-transform:uppercase; font-size:10px; font-weight:600; letter-spacing:0.16em; color:var(--faint); }
@container site (max-width: 560px) {
  .v-minimal .ws-ctarow { flex-direction:column; align-items:flex-start; }
  .v-minimal .mnh-meta { flex-direction:column; gap:16px; margin-top:44px; }
}
/* integrations — ported from SB_04 drafts/integrations-hero (an orbit of tool tiles wired to a central
   hub). Source geometry kept: each tile rides a per-angle radius, counter-rotated upright, over a radial
   connector; retokenized to the theme (accent hub/lines, --panel tiles, --hair ring/borders, --dim/--ink
   labels). Upgrades on the static original: tiles are real focusable buttons, hover/focus/active light the
   connector, and mount() auto-cycles the ring so one connection at a time streams a pulse into the hub.
   Baked entrance motion is dropped (anims.js owns entrances); the pulse is ambient and gated to the active
   tile only. Only transform/opacity/color transition; the collapse is driven by container queries. */
.v-integrations { --int-tile:62px; --int-orbit:clamp(264px, 34cqw, 384px);
  --int-radius:calc(var(--int-orbit) / 2 - var(--int-tile) / 2); }
.v-integrations .ws-in.v-int-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5cqw, 64px); align-items:center; }
.v-int-copy { display:flex; flex-direction:column; min-width:0; }
.v-int-stage { display:flex; align-items:center; justify-content:center; min-height:var(--int-orbit); }
.v-int-orbit { position:relative; width:var(--int-orbit); height:var(--int-orbit); }
.v-int-ring { position:absolute; top:50%; left:50%; width:calc(var(--int-radius) * 2); height:calc(var(--int-radius) * 2);
  margin:calc(var(--int-radius) * -1) 0 0 calc(var(--int-radius) * -1);
  border:var(--bw, 1px) dashed var(--hair); border-radius:50%; z-index:0; pointer-events:none; }
.v-int-hub { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:86px; height:86px; border-radius:22px; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center;
  background:color-mix(in srgb, var(--accent) 12%, var(--panel));
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--hair));
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent); }
.v-int-hub-name { font:700 11px/1.15 var(--font-head, var(--font)); letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); max-width:70px; overflow:hidden; text-overflow:ellipsis; }
.v-int-hub-sub { font:500 8.5px/1 var(--font); font-style:normal; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); transition:color .25s; }
.v-int-hub.live .v-int-hub-sub { color:var(--dim); }
.v-int-node { position:absolute; top:50%; left:50%; width:var(--int-tile); height:var(--int-tile);
  margin:calc(var(--int-tile) / -2) 0 0 calc(var(--int-tile) / -2);
  transform:rotate(var(--angle)) translateY(calc(var(--int-radius) * -1)) rotate(calc(var(--angle) * -1));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; z-index:2;
  appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer; padding:0;
  border-radius:15px; border:var(--bw, 1px) solid var(--hair); color:var(--dim);
  background:color-mix(in srgb, var(--ink) 4%, var(--panel));
  transition:transform .28s cubic-bezier(.22,1,.36,1), color .2s, border-color .2s; }
.v-int-node:hover, .v-int-node:focus-visible, .v-int-node.on {
  color:var(--ink); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair));
  transform:rotate(var(--angle)) translateY(calc(var(--int-radius) * -1)) rotate(calc(var(--angle) * -1)) scale(1.09); }
.v-int-node:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-int-ico { width:20px; height:20px; color:var(--accent); }
.v-int-ico svg { width:100%; height:100%; display:block; }
.v-int-node b { font:600 8.5px/1 var(--font); letter-spacing:.02em; max-width:calc(var(--int-tile) - 8px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-int-line { position:absolute; top:50%; left:50%; width:2px; height:calc(var(--int-radius) - var(--int-tile));
  transform-origin:top center; opacity:.5; pointer-events:none; z-index:1;
  transform:rotate(var(--angle)) translateX(-50%) translateY(calc(var(--int-tile) / 2));
  background:linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 55%, transparent));
  transition:opacity .25s; }
.v-int-node:hover .v-int-line, .v-int-node:focus-visible .v-int-line, .v-int-node.on .v-int-line { opacity:1; }
.v-int-pulse { position:absolute; top:0; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 9px 1px color-mix(in srgb, var(--accent) 60%, transparent); opacity:0; }
.v-int-node.on .v-int-pulse, .v-int-node:hover .v-int-pulse, .v-int-node:focus-visible .v-int-pulse {
  animation:v-int-flow 1.05s linear infinite; }
@keyframes v-int-flow {
  0% { transform:translateY(0); opacity:0; }
  18% { opacity:1; }
  82% { opacity:1; }
  100% { transform:translateY(calc(var(--int-radius) - var(--int-tile))); opacity:0; } }
@container site (max-width:860px) {
  .v-integrations .ws-in.v-int-grid { grid-template-columns:1fr; gap:36px; justify-items:center; }
  .v-int-copy { align-items:center; text-align:center; max-width:560px; }
  .v-int-copy .ws-ctarow { justify-content:center; }
}
@container site (max-width:560px) {
  .v-integrations { --int-tile:52px; --int-orbit:clamp(232px, 74cqw, 300px); }
  .v-int-node b { font-size:7.5px; }
  .v-int-hub { width:74px; height:74px; }
}
/* manifesto — ported from SB_04 drafts/manifesto-hero (a towering, line-by-line brand
   statement: a left accent edge, display lines that descend in scale with the closing
   line in accent, a hairline rule, then standfirst + a drawn-arrow CTA). Origin CSS vars
   mapped to theme tokens (mani-bg->--bg, mani-text->--ink, mani-accent->--accent,
   mani-muted->--dim, mani-font->--font-head). The source's baked fade-up entrance belongs
   to anims.js; only the CTA's transform/color hover motion runs here. */
.ws-hero.v-manifesto { position:relative; isolation:isolate; padding:clamp(72px, 12cqw, 128px) 0; }
.v-manifesto .ws-mani-edge { position:absolute; top:0; left:0; width:3px; height:100%;
  background:var(--accent); opacity:0.4; }
.v-manifesto .ws-mani-body { display:flex; flex-direction:column; align-items:flex-start; }
.v-manifesto .ws-kick.rule { width:100%; margin-bottom:clamp(22px, 3cqw, 34px); }
.v-manifesto .ws-mani-stmt { display:flex; flex-direction:column; gap:0.06em; max-width:20ch;
  font-family:var(--font-head, var(--font)); font-weight:800; line-height:0.98; letter-spacing:-0.03em; }
.v-manifesto .ws-mani-line { display:block; color:var(--ink); text-wrap:balance;
  font-size:calc(clamp(40px, 9cqw, 104px) * (1 - var(--li, 0) * 0.14)); }
.v-manifesto .ws-mani-line.accent { color:var(--accent); }
.v-manifesto .ws-mani-rule { width:100%; height:0; margin:clamp(30px, 4.5cqw, 52px) 0 0;
  border:0; border-top:var(--bw, 1px) solid var(--hair); }
.v-manifesto .ws-mani-foot { display:flex; align-items:center; justify-content:space-between;
  width:100%; margin-top:clamp(24px, 3.5cqw, 38px); gap:clamp(24px, 5cqw, 56px); flex-wrap:wrap; }
.v-manifesto .ws-mani-foot .ws-sub { margin:0; max-width:46ch; }
.v-manifesto .ws-mani-cta { display:inline-flex; align-items:center; gap:14px; flex:none;
  font:600 11px var(--mono); letter-spacing:0.16em; text-transform:uppercase; text-decoration:none;
  color:var(--accent); cursor:pointer; transition:color 200ms ease; }
.v-manifesto .ws-mani-cta:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.v-manifesto .ws-mani-arrow { position:relative; width:26px; height:1px; flex:none; background:currentColor;
  transition:transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.v-manifesto .ws-mani-arrow::after { content:''; position:absolute; right:0; top:50%; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-top:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg); }
.v-manifesto .ws-mani-cta:hover .ws-mani-arrow { transform:translateX(7px); }
@container site (max-width: 860px) {
  .v-manifesto .ws-mani-stmt { max-width:16ch; }
}
@container site (max-width: 560px) {
  .v-manifesto .ws-mani-stmt { max-width:none; }
  .v-manifesto .ws-mani-line { font-size:calc(clamp(34px, 13cqw, 72px) * (1 - var(--li, 0) * 0.12)); }
  .v-manifesto .ws-mani-foot { flex-direction:column; align-items:flex-start; gap:20px; }
}
/* mission — ported from SB_04 drafts/mission-hero (a full-bleed typographic mission
   statement over a column-divided values row and a signed footer). Origin --mish-* vars map
   to theme tokens: bg->--bg (via ws-site), text->--ink, secondary->--dim, dim->--faint,
   divider->--hair; the source's solid accent word becomes the ws-grad accent gradient. Values
   row is data-driven (take items {t,d}); baked entrance + reduced-motion resets dropped
   (anims.js owns entrances) — only the per-value hover accent + CTA nudge move here, all on
   transform/opacity/color; responsive by container query, not viewport. */
.v-mission { padding:clamp(72px, 12cqh, 140px) 0; }
.v-mission .ws-in { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(40px, 6cqw, 76px); }
.v-mission .ws-msn-head { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.v-mission .ws-msn-statement { max-width:16ch; line-height:1.04; letter-spacing:-0.035em; text-wrap:balance; }
.v-mission .ws-msn-sub { max-width:52ch; }
.v-mission .ws-msn-values { list-style:none; margin:0; padding:0; display:flex; width:100%; gap:0; }
.v-mission .ws-msn-value { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:9px;
  padding:0 clamp(20px, 2.4cqw, 40px); }
.v-mission .ws-msn-value:first-child { padding-left:0; }
.v-mission .ws-msn-value + .ws-msn-value { border-left:var(--bw, 1px) solid var(--hair); }
.v-mission .ws-msn-vname { font:700 11px var(--mono); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); transition:color 160ms linear; }
.v-mission .ws-msn-value:hover .ws-msn-vname { color:var(--accent); }
.v-mission .ws-msn-vdesc { font:400 13.5px/1.55 var(--font); color:var(--dim); }
.v-mission .ws-msn-foot { width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; border-top:var(--bw, 1px) solid var(--hair); padding-top:22px; }
.v-mission .ws-msn-sig { font:500 10.5px var(--mono); letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }
.v-mission .ws-msn-cta { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:600 12px var(--font); letter-spacing:0.02em; color:var(--accent);
  transition:opacity 160ms linear, transform 160ms ease; }
.v-mission .ws-msn-cta svg { width:15px; height:15px; transition:transform 160ms ease; }
.v-mission .ws-msn-cta:hover { opacity:.82; }
.v-mission .ws-msn-cta:hover svg { transform:translateX(3px); }
@container site (max-width: 720px) {
  .v-mission .ws-msn-values { flex-direction:column; gap:22px; }
  .v-mission .ws-msn-value { padding:0 0 0 16px; border-left:var(--bw, 1px) solid var(--hair); }
  .v-mission .ws-msn-value:first-child { padding-left:16px; }
}
/* magazine — ported from SB_04 drafts/magazine-hero (editorial magazine cover: full-bleed
   featured story with a bottom-anchored masthead/headline/standfirst/meta over a dark scrim).
   The static source cover is made real: a data-driven "In This Issue" rail sits beside it and
   each story CLICK swaps the cover text, meta, active marker and cover tone (a small re-enter
   pulse — transform/opacity only). Origin's baked fade-in/up entrances were dropped (anims.js
   owns section entrances). CSS vars mapped to theme tokens; the display face uses --font-head.
   Over-photo text is intentionally white (a scrim reads on any theme) — the rail is fully
   tokenised (--ink/--dim/--faint/--panel/--hair/--accent) and theme-aware. Container queries,
   not viewport media. Tone classes are mag-scoped so they cannot collide with other variants. */
.v-magazine .mag-wrap { display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(28px, 4cqw, 60px);
  align-items:stretch; }
.v-magazine .mag-cover { --mag-fg:#fff; --mag-fg-dim:color-mix(in srgb, #fff 68%, transparent);
  position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; min-height:clamp(420px, 62cqw, 600px);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  background-color:var(--panel); background-size:cover; background-position:center; }
.v-magazine .mag-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb, #000 84%, transparent) 0%,
    color-mix(in srgb, #000 72%, transparent) 28%,
    color-mix(in srgb, #000 24%, transparent) 68%,
    transparent 100%); }
.v-magazine .mag-cover.ph { background-image:
    radial-gradient(110% 82% at 18% 8%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 58%),
    radial-gradient(120% 90% at 92% 96%, color-mix(in srgb, var(--accent2, var(--accent)) 40%, transparent), transparent 60%),
    linear-gradient(202deg, color-mix(in srgb, var(--ink) 30%, var(--panel)), color-mix(in srgb, var(--ink) 74%, var(--bg))); }
.v-magazine .mag-cover.ph.mag-tone-1 { background-image:
    radial-gradient(120% 92% at 84% 6%, color-mix(in srgb, var(--accent2, var(--accent)) 48%, transparent), transparent 60%),
    radial-gradient(120% 90% at 8% 100%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--ink) 26%, var(--panel)), color-mix(in srgb, var(--ink) 78%, var(--bg))); }
.v-magazine .mag-cover.ph.mag-tone-2 { background-image:
    radial-gradient(120% 100% at 50% -6%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 58%),
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--ink) 42%, transparent), transparent 60%),
    linear-gradient(238deg, color-mix(in srgb, var(--ink) 34%, var(--panel)), color-mix(in srgb, var(--ink) 82%, var(--bg))); }
.v-magazine .mag-cover.ph.mag-tone-3 { background-image:
    radial-gradient(140% 92% at 4% 4%, color-mix(in srgb, var(--accent2, var(--accent)) 42%, transparent), transparent 60%),
    radial-gradient(120% 90% at 96% 90%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 60%),
    linear-gradient(176deg, color-mix(in srgb, var(--ink) 24%, var(--panel)), color-mix(in srgb, var(--ink) 80%, var(--bg))); }
.v-magazine .mag-mast { position:relative; z-index:2; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:clamp(18px, 3cqw, 30px); }
.v-magazine .mag-logo { font:800 clamp(15px, 2.2cqw, 20px) var(--font-head, var(--font));
  letter-spacing:0.16em; text-transform:uppercase; color:var(--mag-fg); }
.v-magazine .mag-issue { font:500 11px var(--font); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mag-fg-dim); text-align:right; }
.v-magazine .mag-body { position:relative; z-index:2; padding:clamp(22px, 3.4cqw, 40px); max-width:760px; }
.v-magazine .mag-kick { display:block; font:600 clamp(11px, 1.4cqw, 13px) var(--font);
  letter-spacing:0.18em; text-transform:uppercase; color:var(--mag-fg-dim); margin-bottom:14px; }
.v-magazine .mag-headline { margin:0; letter-spacing:-0.02em; color:var(--mag-fg); text-wrap:balance;
  font:800 clamp(30px, 6.4cqw, 62px)/1.02 var(--font-head, var(--font)); }
.v-magazine .mag-stand { margin:16px 0 0; max-width:56ch; color:var(--mag-fg-dim);
  font:400 clamp(14px, 1.7cqw, 17px)/1.5 var(--font); }
.v-magazine .mag-stand:empty { display:none; }
.v-magazine .mag-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.v-magazine .mag-mi { font:500 12px var(--font); letter-spacing:0.02em; color:var(--mag-fg-dim); }
.v-magazine .mag-sep { width:4px; height:4px; border-radius:99px; background:var(--mag-fg-dim); opacity:.7; }
.v-magazine .mag-cta { margin-top:26px; }
.v-magazine .mag-rail { display:flex; flex-direction:column; min-width:0; }
.v-magazine .mag-railhead { font:600 11px var(--mono, var(--font)); letter-spacing:0.22em;
  text-transform:uppercase; color:var(--faint); padding-bottom:14px; margin-bottom:2px;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.v-magazine .mag-list { list-style:none; margin:0; padding:0; }
.v-magazine .mag-item { position:relative; display:flex; align-items:center; gap:16px; width:100%;
  text-align:left; cursor:pointer; background:none; border:0; border-bottom:var(--bw, 1px) solid var(--hair);
  padding:18px 4px 18px 12px; color:inherit; transition:transform .18s ease; }
.v-magazine .mag-item::before { content:''; position:absolute; left:0; top:50%; width:2px; height:56%;
  background:var(--accent); transform:translateY(-50%) scaleY(0); transform-origin:center;
  transition:transform .2s ease; }
.v-magazine .mag-item.on::before { transform:translateY(-50%) scaleY(1); }
.v-magazine .mag-item:hover { transform:translateX(4px); }
.v-magazine .mag-num { flex:none; width:2ch; font:700 13px var(--mono, var(--font)); color:var(--faint);
  transition:color .18s ease; }
.v-magazine .mag-item.on .mag-num { color:var(--accent); }
.v-magazine .mag-itmain { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.v-magazine .mag-ittag { font:600 10px var(--font); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); }
.v-magazine .mag-ittitle { font:600 clamp(15px, 1.9cqw, 18px)/1.25 var(--font-head, var(--font));
  letter-spacing:-0.01em; color:var(--dim); transition:color .18s ease; }
.v-magazine .mag-item.on .mag-ittitle, .v-magazine .mag-item:hover .mag-ittitle { color:var(--ink); }
.v-magazine .mag-itarrow { flex:none; color:var(--faint); opacity:0; transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease; }
.v-magazine .mag-itarrow svg { width:16px; height:16px; display:block; }
.v-magazine .mag-item.on .mag-itarrow, .v-magazine .mag-item:hover .mag-itarrow { opacity:1; transform:none; }
@keyframes magRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.v-magazine .mag-body.mag-swap > * { animation:magRise .5s cubic-bezier(.2,.7,.2,1) both; }
.v-magazine .mag-body.mag-swap > *:nth-child(2) { animation-delay:.05s; }
.v-magazine .mag-body.mag-swap > *:nth-child(3) { animation-delay:.1s; }
.v-magazine .mag-body.mag-swap > *:nth-child(4) { animation-delay:.15s; }
.v-magazine .mag-body.mag-swap > *:nth-child(5) { animation-delay:.2s; }
@container site (max-width: 860px) {
  .v-magazine .mag-wrap { grid-template-columns:1fr; gap:28px; }
  .v-magazine .mag-cover { min-height:clamp(360px, 92cqw, 520px); }
}
@container site (max-width: 560px) {
  .v-magazine .mag-body { padding:20px; }
  .v-magazine .mag-mast { padding:16px 18px; }
  .v-magazine .mag-headline { font-size:clamp(26px, 9cqw, 40px); }
  .v-magazine .mag-stand { font-size:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-magazine .mag-item, .v-magazine .mag-item::before, .v-magazine .mag-num,
  .v-magazine .mag-ittitle, .v-magazine .mag-itarrow { transition:none; }
  .v-magazine .mag-body.mag-swap > * { animation:none; }
}
/* kinetic-type — ported from SB_04 drafts/kinetic-type-hero. A layered display headline: a light
   "normal" lead line whose LAST word is an outline stroke, then a bold accent line. The origin was a
   STATIC three-treatment headline; the port makes the accent line KINETIC — mount() cycles a rotating
   word (transform/opacity only, returns a cleanup, holds one static word for prefers-reduced-motion;
   the first word ships .is-active so a no-JS still frame stays legible). The diagonal stripe field is
   a STATIC background (never transitioned) drawn with --hair. Entrance motion belongs to anims.js.
   Container queries (name: site) drive the responsive stack. */
.v-kinetic-type { position:relative; overflow:hidden; isolation:isolate; }
.v-kinetic-type .kt-bg { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:repeating-linear-gradient(-45deg, transparent 0 40px, var(--hair) 40px, var(--hair) 41px); }
.v-kinetic-type .ws-in { position:relative; z-index:1; display:flex; flex-direction:column;
  gap:clamp(28px, 5cqw, 52px); }
.v-kinetic-type .ws-kick { margin:0; }
.v-kinetic-type .kt-head { margin:0; display:flex; flex-direction:column; gap:0.06em;
  font-family:var(--font-head, var(--font)); font-size:clamp(38px, 8cqw, 104px);
  line-height:0.96; letter-spacing:-0.035em; }
.v-kinetic-type .kt-lead { font-weight:300; color:var(--ink); }
.v-kinetic-type .kt-out { font-weight:800; color:transparent; -webkit-text-stroke:1.6px var(--ink); }
.v-kinetic-type .kt-rotator { display:inline-grid; width:max-content; max-width:100%; font-weight:800; }
.v-kinetic-type .kt-word { grid-area:1 / 1; color:var(--accent); opacity:0; transform:translateY(0.3em);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.75,.25,1); }
.v-kinetic-type .kt-word.is-active { opacity:1; transform:translateY(0); }
.v-kinetic-type .kt-foot { display:flex; flex-direction:column; gap:22px; }
.v-kinetic-type .kt-foot .ws-sub { margin:0; max-width:52ch; }
@container site (min-width:721px) {
  .v-kinetic-type .kt-foot { flex-direction:row; align-items:center; gap:clamp(28px, 4cqw, 52px); }
  .v-kinetic-type .kt-foot .ws-sub { flex:1; }
}
@container site (max-width:560px) {
  .v-kinetic-type .kt-head { line-height:1.0; letter-spacing:-0.02em; }
  .v-kinetic-type .kt-out { -webkit-text-stroke-width:1.2px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-kinetic-type .kt-word { transition:none; }
}
/* location — ported from SB_04 drafts/location-hero (branch-locator opener: copy + hours on the
   left, a pure-CSS/SVG mini-map with switchable pins on the right). The origin shipped ONE static
   location and a dead "get directions" link; the port data-drives a branch list
   (take(p,'items',DEF_LOCS)) and makes the switcher REAL — clicking a city chip or a map pin moves
   the active highlight and rewrites the address/hours/phone and the card footer (mount()). The map
   is a token-tinted CSS grid + inline-SVG avenues/park/water — no tiles, no external scripts.
   Entrance motion belongs to anims.js; only the active pin's ambient pulse runs at rest
   (transform/opacity only) and stops for prefers-reduced-motion. Colors map to theme tokens. */
.v-location .ws-in.split { align-items:center; }
.v-location .ws-hcopy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.v-location .lch-locs { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.v-location .lch-loc { font:600 12px var(--font); letter-spacing:0.01em; color:var(--dim);
  padding:7px 14px; border-radius:99px; border:var(--bw, 1px) solid var(--hair); background:transparent;
  cursor:pointer; transition:color 0.18s ease, transform 0.18s ease; }
.v-location .lch-loc:hover { color:var(--ink); transform:translateY(-1px); }
.v-location .lch-loc.on { color:var(--accent-text, #fff); border-color:transparent; background:var(--accent); }
.v-location .lch-details { display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.v-location .lch-detail { display:flex; align-items:center; gap:10px; font:400 13.5px/1.5 var(--font); color:var(--dim); }
.v-location .lch-dicon { display:inline-flex; flex-shrink:0; color:var(--accent); }
.v-location .lch-dicon svg { width:15px; height:15px; display:block; }
.v-location .ws-ctarow { margin-top:30px; }
.v-location .lch-card { align-self:center; display:flex; flex-direction:column; min-width:0;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); overflow:hidden; background:var(--panel); }
.v-location .lch-map { position:relative; min-height:clamp(240px, 34cqw, 340px); background:var(--panel-2); overflow:hidden; }
.v-location .lch-grid { position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 29px, color-mix(in srgb, var(--ink) 5%, transparent) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, color-mix(in srgb, var(--ink) 5%, transparent) 29px 30px);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 38%, #000 55%, transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 38%, #000 55%, transparent 100%); }
.v-location .lch-roads { position:absolute; inset:0; width:100%; height:100%; display:block; }
.v-location .lch-roads .lch-av line { stroke:color-mix(in srgb, var(--ink) 12%, transparent); stroke-width:11; stroke-linecap:round; }
.v-location .lch-roads .lch-park { fill:color-mix(in srgb, var(--ink) 7%, transparent); }
.v-location .lch-roads .lch-water { fill:color-mix(in srgb, var(--accent) 9%, transparent); }
.v-location .lch-pin { position:absolute; width:16px; height:22px; padding:0; border:0; background:transparent;
  transform:translate(-50%, -100%); transform-origin:50% 100%; opacity:0.5; cursor:pointer;
  transition:opacity 0.2s ease, transform 0.2s ease; z-index:2; }
.v-location .lch-pin:hover { opacity:0.85; }
.v-location .lch-pin.on { opacity:1; }
.v-location .lch-pin::before { content:''; position:absolute; top:0; left:50%; width:16px; height:16px;
  transform:translateX(-50%) rotate(-45deg); background:var(--accent); border-radius:50% 50% 50% 0;
  box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.v-location .lch-pindot { position:absolute; top:4px; left:50%; transform:translateX(-50%); width:6px; height:6px;
  border-radius:50%; background:var(--accent-text, #fff); z-index:2; }
.v-location .lch-pinpulse { position:absolute; top:8px; left:50%; width:34px; height:34px; transform:translate(-50%, -50%);
  border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 70%); }
.v-location .lch-pin.on .lch-pinpulse { animation:lch-pulse 2.4s ease-out infinite; }
@keyframes lch-pulse { 0% { transform:translate(-50%, -50%) scale(0.4); opacity:0.85; } 100% { transform:translate(-50%, -50%) scale(2.4); opacity:0; } }
.v-location .lch-foot { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; border-top:var(--bw, 1px) solid var(--hair); }
.v-location .lch-addr { display:flex; flex-direction:column; gap:3px; min-width:0; }
.v-location .lch-fstreet { font:600 13.5px var(--font); color:var(--ink); }
.v-location .lch-fcity { font:400 12px var(--font); color:var(--faint); }
.v-location .lch-dir { display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:600 12.5px var(--font); color:var(--accent); text-decoration:none; transition:color 0.18s ease; }
.v-location .lch-dir:hover { color:var(--ink); }
.v-location .lch-dir svg { width:15px; height:15px; }
@container site (max-width: 560px) {
  .v-location .lch-foot { flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-location .lch-pin.on .lch-pinpulse { animation:none; }
}
/* map — ported from SB_04 drafts/map-hero (a "find us" split: copy + CTA beside an interactive CSS
   map). The origin's single static pin + 5 baked palette vars become a DATA-DRIVEN set of selectable
   pins (take(p,'items',DEF_LOCS)) wired to a live detail card: click OR hover a pin and the address /
   hours / phone panel updates (mount sets textContent, never innerHTML). No external map tiles or
   scripts — the map is a themed CSS grid-street mock with a vignette and two faint park/water blocks,
   all off theme tokens so brands cascade. Entrance motion is the reveal system's job; only hover +
   the active-pin pulse move here (pulse honours reduced-motion) and only transform/opacity/color
   transition — never a background. Narrow-stacks via the global 860px rule (.ws-hero .ws-in.split). */
.v-map .ws-in.split { align-items:stretch; }
.v-map .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-map .mp-stage { display:flex; flex-direction:column; gap:14px; width:100%; min-width:0; }
.v-map .mp-map { position:relative; width:100%; min-height:clamp(280px, 40cqw, 400px); overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); background-color:var(--panel-2, var(--panel));
  background-image:
    repeating-linear-gradient(0deg, transparent 0 59px, color-mix(in srgb, var(--ink) 7%, transparent) 59px 61px),
    repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in srgb, var(--ink) 7%, transparent) 79px 81px),
    repeating-linear-gradient(0deg, transparent 0 19px, color-mix(in srgb, var(--ink) 4%, transparent) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, color-mix(in srgb, var(--ink) 4%, transparent) 19px 20px); }
.v-map .mp-park { position:absolute; z-index:0; left:8%; top:14%; width:26%; height:24%; border-radius:12px;
  background:color-mix(in srgb, var(--accent) 13%, transparent); }
.v-map .mp-water { position:absolute; z-index:0; right:-6%; bottom:-8%; width:42%; height:46%; border-radius:44% 0 0 0;
  background:color-mix(in srgb, var(--accent) 8%, transparent); }
.v-map .mp-vignette { position:absolute; z-index:1; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 66% 66% at 50% 46%, transparent 32%, color-mix(in srgb, var(--bg) 66%, transparent) 100%); }
.v-map .mp-pin { position:absolute; z-index:3; transform:translate(-50%, -50%); width:22px; height:22px; padding:0;
  border:0; background:none; cursor:pointer; color:var(--dim);
  transition:transform 150ms var(--ease-pop, ease-out), color 140ms linear; }
.v-map .mp-pin:hover, .v-map .mp-pin:focus-visible { color:var(--ink); transform:translate(-50%, -50%) scale(1.14); outline:none; }
.v-map .mp-pin.on { color:var(--accent); transform:translate(-50%, -50%) scale(1.2); z-index:4; }
.v-map .mp-pin-dot { position:absolute; inset:2px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 22%, transparent), 0 3px 8px color-mix(in srgb, #000 32%, transparent); }
.v-map .mp-pin-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid currentColor; opacity:0; }
.v-map .mp-pin.on .mp-pin-dot::after { animation:mpPulse 2.2s ease-out infinite; }
.v-map .mp-pin-label { position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%) translateY(3px);
  max-width:132px; padding:3px 9px; border-radius:100px; font:600 10px var(--mono); letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  opacity:0; pointer-events:none; transition:opacity 140ms linear, transform 140ms var(--ease-pop, ease-out); }
.v-map .mp-pin:hover .mp-pin-label, .v-map .mp-pin:focus-visible .mp-pin-label, .v-map .mp-pin.on .mp-pin-label {
  opacity:1; transform:translateX(-50%) translateY(0); }
@keyframes mpPulse { 0% { opacity:.7; transform:scale(1); } 70% { opacity:0; transform:scale(1.9); } 100% { opacity:0; transform:scale(1.9); } }
.v-map .mp-detail { display:flex; flex-direction:column; gap:12px; padding:clamp(16px, 2cqw, 22px);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); background:var(--panel); }
.v-map .mp-d-name { font:600 clamp(15px, 2cqw, 18px)/1.2 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-map .mp-d-rows { display:flex; flex-direction:column; gap:10px; }
.v-map .mp-d-row { display:flex; align-items:flex-start; gap:10px; }
.v-map .mp-d-ico { flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:1px; color:var(--accent); }
.v-map .mp-d-ico svg { width:16px; height:16px; }
.v-map .mp-d-loc { display:flex; flex-direction:column; gap:1px; }
.v-map .mp-d-addr { font:500 13.5px/1.4 var(--font); color:var(--ink); }
.v-map .mp-d-city, .v-map .mp-d-hours, .v-map .mp-d-phone { font:400 13px/1.45 var(--font); color:var(--dim); font-style:normal; }
@container site (max-width: 560px) {
  .v-map .mp-map { min-height:250px; }
  .v-map .mp-pin { width:20px; height:20px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-map .mp-pin.on .mp-pin-dot::after { animation:none; opacity:.45; }
}
/* mosaic — ported from SB_04 drafts/mosaic-hero (centered studio message over a dense tiled
   portfolio mosaic behind a radial scrim). Origin was a 4x3 wall of remote <img> tiles under a flat
   dark scrim + blur; here the tiles are token-driven CSS placeholder art (no images, no blur), the
   scrim rides --bg mixes so it tracks the theme, and every tile is a REAL hover target (lifts,
   brightens, reveals its data-driven caption + accent ring). Reuses ws-in.center + ws-kick/ws-h1/
   ws-sub/ws-ctarow atoms. Entrance keyframes dropped (reveal system owns entrances); only
   transform/opacity/color transition, never a background. The grid holds its own stacking context
   (z:0) so a hovered tile can never rise over the veil or copy. */
.v-mosaic { display:flex; align-items:center; justify-content:center;
  min-height:clamp(500px, 64cqw, 660px); overflow:hidden; padding-block:clamp(76px, 9cqw, 116px); }
.v-mosaic .mos-grid { position:absolute; inset:0; z-index:0; display:grid;
  grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(3, 1fr); }
.v-mosaic .mos-tile { position:relative; overflow:hidden; pointer-events:auto;
  border:1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  background:
    radial-gradient(130% 100% at 16% 10%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 58%),
    linear-gradient(calc(var(--i, 0) * 33deg + 120deg),
      color-mix(in srgb, var(--ink) 9%, var(--panel)) 0%, var(--panel-2, var(--panel)) 100%);
  transition:transform .32s var(--ease-pop, ease-out), opacity .3s ease; }
.v-mosaic .mos-tile.mos-k1 { background:linear-gradient(calc(var(--i, 0) * 33deg + 120deg),
    color-mix(in srgb, var(--accent) 30%, var(--panel)) 0%, color-mix(in srgb, var(--accent) 7%, var(--panel-2, var(--panel))) 100%); }
.v-mosaic .mos-tile.mos-k3 { background:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 7%, transparent) 25%, transparent 25%) 0 0 / 34px 34px,
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 7%, transparent) 25%, transparent 25%) 0 0 / 34px 34px,
    var(--panel); }
.v-mosaic .mos-tile.mos-k2 { background:linear-gradient(calc(var(--i, 0) * 33deg),
    color-mix(in srgb, var(--accent2, var(--accent)) 24%, var(--panel)) 0%, var(--panel) 100%); }
.v-mosaic .mos-tile::after { content:''; position:absolute; inset:0; z-index:2; opacity:0;
  border:1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); pointer-events:none;
  transition:opacity .3s ease; }
.v-mosaic .mos-tile:hover { transform:scale(1.05); z-index:3; }
.v-mosaic .mos-tile:hover::after { opacity:1; }
.v-mosaic .mos-cap { position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:2px; padding:11px 13px; text-align:left;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s var(--ease-pop, ease-out); }
.v-mosaic .mos-tile:hover .mos-cap { opacity:1; transform:translateY(0); }
.v-mosaic .mos-cap b { font:700 13px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.v-mosaic .mos-cap i { font:600 9px var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); font-style:normal; }
.v-mosaic .mos-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 82% 76% at 50% 50%,
      color-mix(in srgb, var(--bg) 90%, transparent) 0%,
      color-mix(in srgb, var(--bg) 60%, transparent) 52%,
      color-mix(in srgb, var(--bg) 30%, transparent) 100%),
    linear-gradient(color-mix(in srgb, var(--bg) 15%, transparent), color-mix(in srgb, var(--bg) 15%, transparent)); }
.v-mosaic .ws-in { position:relative; z-index:2; pointer-events:none; }
.v-mosaic .ws-in .ws-btn { pointer-events:auto; }
.v-mosaic .ws-kick { margin-bottom:18px; }
.v-mosaic .ws-h1 { max-width:16ch; margin-inline:auto; text-wrap:balance; }
.v-mosaic .ws-sub { margin-top:18px; }
@container site (max-width: 560px) {
  .v-mosaic .mos-grid { grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(6, 1fr); }
  .v-mosaic .ws-h1 { max-width:14ch; }
}
/* motion — ported from SB_04 drafts/motion-hero (centered eyebrow + two-line headline +
   subtitle + primary/ghost CTAs above a full-width product shot). The source shipped only a
   one-shot fade-up entrance; that belongs to anims.js and is dropped. The variant's motion
   identity is restored as an ONGOING loop driven from mount(): the mock breathes on a slow
   vertical float above a drifting ambient glow -- transform-only and reduced-motion safe. The
   baked-in <img> screenshot becomes a real CSS browserMock; source --moh-* vars map to tokens. */
.v-motion .ws-in.center { display:flex; flex-direction:column; align-items:center; }
.v-motion .ws-h1 { max-width:18ch; text-wrap:balance; }
.v-motion .ws-sub { margin-top:18px; max-width:52ch; }
.v-motion .ws-ctarow { margin-top:30px; }
.v-motion .ws-mostage { position:relative; width:min(1000px, 94cqw); isolation:isolate;
  margin:clamp(46px, 6cqw, 88px) auto 0; display:flex; justify-content:center; }
.v-motion .ws-moglow { position:absolute; left:0; right:0; top:-9%; margin-inline:auto;
  width:min(760px, 82%); aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%);
  will-change:transform; }
.v-motion .ws-moshot { position:relative; z-index:1; width:100%; will-change:transform; }
.v-motion .ws-moshot .ws-browser { width:100%;
  box-shadow:0 30px 80px -42px color-mix(in srgb, var(--ink) 46%, transparent); }
@container site (max-width: 860px) {
  .v-motion .ws-mostage { width:min(560px, 94cqw); }
}
@container site (max-width: 560px) {
  .v-motion .ws-moglow { width:96%; top:-5%; }
  .v-motion .ws-sub { margin-top:14px; }
}
/* media — ported from SB_04 drafts/media-hero (editorial publication front page:
   masthead row, one feature story beside its cover, then a row of secondary stories).
   The origin's remote article photos become token-built cover tiles (a ghosted category
   initial over an accent-tinted panel) so nothing loads off-site. Made real: the origin's
   secondary items were cursor:pointer no-ops - here clicking one promotes it into the
   feature slot (see mount), a live front page. Entrance motion belongs to the reveal
   system; only hover color/transform transitions run here (never a background). */
.v-media .ws-in { display:flex; flex-direction:column; }
.v-media .ws-mdmast { display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding-bottom:20px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-media .ws-mdpub { font:800 clamp(16px, 2.2cqw, 21px) var(--font-head, var(--font));
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); }
.v-media .ws-mdmeta { display:flex; align-items:center; gap:12px;
  font:600 11px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-media .ws-mddiv { display:inline-block; width:1px; height:11px; background:var(--hair); flex:none; }
.v-media .ws-mdfeat { display:grid; grid-template-columns:1.05fr 1fr;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.v-media .ws-mdfeatbody { display:flex; flex-direction:column; justify-content:center; gap:18px;
  padding:clamp(28px, 4cqw, 52px) clamp(24px, 3.5cqw, 44px) clamp(28px, 4cqw, 52px) 0;
  border-right:var(--bw, 1px) solid var(--hair); }
.v-media .ws-mdcat { font:700 10px var(--mono); letter-spacing:3px; text-transform:uppercase; color:var(--accent); }
.v-media .ws-mdtitle { letter-spacing:-0.02em; }
.v-media .ws-mddeck { margin:0; }
.v-media .ws-mdbyline { display:flex; align-items:center; gap:12px; padding-top:16px;
  border-top:var(--bw, 1px) solid var(--hair); font:400 13px var(--font); }
.v-media .ws-mdauthor { color:var(--dim); }
.v-media .ws-mdread { color:var(--faint); }
.v-media .ws-mdcta { display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font:700 11px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  cursor:pointer; transition:opacity .15s ease, transform .15s ease; }
.v-media .ws-mdcta svg { width:14px; height:14px; transition:transform .15s ease; }
.v-media .ws-mdcta:hover { opacity:.72; }
.v-media .ws-mdcta:hover svg { transform:translateX(3px); }
/* cover tiles - token-built stand-ins for the origin's article photos (no remote media) */
.v-media .ws-mdfig, .v-media .ws-mdthumb { position:relative; overflow:hidden; isolation:isolate;
  background-color:var(--panel);
  background-image:
    linear-gradient(var(--a, 120deg), color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 2px, transparent 2px 13px); }
.v-media .ws-mdfig { min-height:340px; }
.v-media .ws-mdmono { position:absolute; inset:0; display:grid; place-items:center; user-select:none;
  font:800 clamp(56px, 12cqw, 128px)/1 var(--font-head, var(--font));
  color:color-mix(in srgb, var(--ink) 13%, transparent); transition:color .15s ease; }
.v-media .ws-mdsec { display:grid; grid-template-columns:repeat(3, 1fr); }
.v-media .ws-mditem { display:flex; flex-direction:column; gap:12px;
  padding:clamp(18px, 2.4cqw, 26px) clamp(20px, 2.6cqw, 28px); cursor:pointer; }
.v-media .ws-mditem:not(:last-child) { border-right:var(--bw, 1px) solid var(--hair); }
.v-media .ws-mditem:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-media .ws-mdthumb { aspect-ratio:16 / 9; }
.v-media .ws-mdthumb .ws-mdmono { font-size:clamp(34px, 7cqw, 58px); }
.v-media .ws-mditemtitle { margin:0; color:var(--ink); transition:color .15s ease;
  font:600 clamp(15px, 1.7cqw, 17px)/1.35 var(--font-head, var(--font)); }
.v-media .ws-mditem:hover .ws-mditemtitle { color:var(--accent); }
.v-media .ws-mditem:hover .ws-mdmono { color:color-mix(in srgb, var(--accent) 30%, transparent); }
@container site (max-width: 860px) {
  .v-media .ws-mdfeat { grid-template-columns:1fr; }
  .v-media .ws-mdfeatbody { border-right:none; border-bottom:var(--bw, 1px) solid var(--hair);
    padding:clamp(24px, 5cqw, 36px) 0; }
  .v-media .ws-mdfig { min-height:200px; }
}
@container site (max-width: 560px) {
  .v-media .ws-mdsec { grid-template-columns:1fr; }
  .v-media .ws-mditem { padding-inline:0; }
  .v-media .ws-mditem:not(:last-child) { border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
}
/* murmur — live flocking-particle hero (SB_04 · drafts/murmur-hero) */
.v-murmur { position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center;
  min-height:clamp(500px, 80vh, 760px); background:var(--bg); }
.v-murmur .ws-fx { z-index:0; }
.v-murmur::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='mn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23mn)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:256px 256px; }
.v-murmur::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 72% 72% at 50% 50%, transparent 32%, color-mix(in srgb, var(--bg) 55%, transparent) 72%, var(--bg) 100%); }
.v-murmur .ws-murmframe { position:absolute; inset:clamp(14px, 3cqw, 34px); z-index:3; pointer-events:none; }
.v-murmur .ws-murmframe i { position:absolute; width:clamp(16px, 2.4cqw, 34px); height:clamp(16px, 2.4cqw, 34px); border:0 solid var(--hair); }
.v-murmur .ws-murmframe .tl { top:0; left:0; border-top-width:1px; border-left-width:1px; }
.v-murmur .ws-murmframe .tr { top:0; right:0; border-top-width:1px; border-right-width:1px; }
.v-murmur .ws-murmframe .bl { bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.v-murmur .ws-murmframe .br { bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.v-murmur .ws-in { position:relative; z-index:2; width:min(680px, 88cqw);
  padding:clamp(30px, 5cqw, 62px) clamp(24px, 5cqw, 66px); border-radius:4px;
  background:color-mix(in srgb, var(--bg) 62%, transparent); border:var(--bw, 1px) solid var(--hair);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.v-murmur .ws-kick { color:var(--accent); margin-bottom:18px; }
.v-murmur .ws-h1 { text-shadow:0 0 60px color-mix(in srgb, var(--accent) 30%, transparent); }
.v-murmur .ws-ctarow { margin-top:26px; justify-content:center; }
@container site (max-width: 560px) {
  .v-murmur { min-height:clamp(440px, 72vh, 620px); }
  .v-murmur .ws-in { padding:clamp(24px, 7cqw, 40px) clamp(18px, 6cqw, 30px); }
  .v-murmur .ws-murmframe { inset:12px; }
}
/* Newsletter — SB_04 drafts/newsletter-hero. Left-set editorial newsletter opener: big headline +
   subtext, a joined email+button field that validates live and flips to a subscribed confirmation,
   an uppercase social-proof line, and a bordered recent-issues list whose rows tint to accent on
   hover. Origin --nlh-* vars -> theme tokens (bg->--bg, text->--ink, secondary->--dim/--faint,
   border/input->--hair, accent/btn->--accent, surface->--panel-2, fonts->--font). Zero baked
   entrance to drop; only focus/hover + the submit reveal move. Joined field collapses to a stacked
   set by container query. Selectors qualified .ws-hero.v-newsletter — a .ws-cta.v-newsletter (CTA
   family) already exists. */
.ws-hero.v-newsletter .nl-in { width:min(620px, 88cqw); display:flex; flex-direction:column; gap:34px; text-align:left; }
.ws-hero.v-newsletter .nl-head { display:flex; flex-direction:column; gap:16px; }
.ws-hero.v-newsletter .nl-head .ws-sub { margin:0; max-width:46ch; }
.ws-hero.v-newsletter .nl-form { display:flex; flex-direction:column; gap:12px; }
.ws-hero.v-newsletter .nl-row { display:flex; gap:0; width:100%; background:var(--panel-2, var(--panel));
  border:var(--bw, 1px) solid var(--hair); border-radius:12px; overflow:hidden; transition:box-shadow 160ms ease-out; }
.ws-hero.v-newsletter .nl-row:focus-within { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-hero.v-newsletter .nl-input { flex:1; min-width:0; background:transparent; border:none; outline:none;
  padding:14px 18px; font:400 14.5px var(--font); color:var(--ink); }
.ws-hero.v-newsletter .nl-input::placeholder { color:var(--faint); }
.ws-hero.v-newsletter .nl-input.bad { color:#e07a4f; }
.ws-hero.v-newsletter .nl-btn { flex-shrink:0; margin:4px; border-radius:9px; }
.ws-hero.v-newsletter .nl-msg { margin:0; font:600 12.5px var(--font); color:#e07a4f; }
.ws-hero.v-newsletter .nl-confirm { display:flex; align-items:center; gap:9px; padding:13px 18px; border-radius:12px;
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color:var(--accent); font:600 13.5px var(--font); }
.ws-hero.v-newsletter .nl-confirm i { display:flex; }
.ws-hero.v-newsletter .nl-confirm svg { width:16px; height:16px; }
.ws-hero.v-newsletter .nl-form[hidden], .ws-hero.v-newsletter .nl-confirm[hidden],
.ws-hero.v-newsletter .nl-msg[hidden] { display:none; }
.ws-hero.v-newsletter .nl-proof { margin:0; font:500 12px var(--font); letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); }
.ws-hero.v-newsletter .nl-issues { display:flex; flex-direction:column; border-top:var(--bw, 1px) solid var(--hair); }
.ws-hero.v-newsletter .nl-issues-h { font:600 11px var(--font); letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); padding:16px 0 10px; }
.ws-hero.v-newsletter .nl-issue { display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:14px 0; border-bottom:var(--bw, 1px) solid var(--hair); text-decoration:none; color:var(--ink);
  transition:color 160ms ease-out; }
.ws-hero.v-newsletter .nl-issue:hover { color:var(--accent); }
.ws-hero.v-newsletter .nl-issue-t { font:400 14.5px var(--font); line-height:1.5; }
.ws-hero.v-newsletter .nl-issue-d { flex-shrink:0; font:500 12.5px var(--font); color:var(--dim); white-space:nowrap; }
.ws-hero.v-newsletter .nl-issue:hover .nl-issue-d { color:inherit; }
@container site (max-width: 560px) {
  .ws-hero.v-newsletter .nl-row { flex-direction:column; gap:10px; background:transparent; border:none;
    border-radius:0; overflow:visible; }
  .ws-hero.v-newsletter .nl-row:focus-within { box-shadow:none; border:none; }
  .ws-hero.v-newsletter .nl-input { background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair);
    border-radius:11px; }
  .ws-hero.v-newsletter .nl-input:focus { border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
  .ws-hero.v-newsletter .nl-btn { margin:0; width:100%; justify-content:center; border-radius:11px; }
}
/* parallax — ported from SB_04 parallax-hero (multi-layer depth fold). Origin drove three layers on
   scroll with filter:blur() blobs + a remote mid-image; here the layers are token-built (soft
   radial-gradient blobs, no blur filter, no remote media) and moved by the variant's mount() on
   pointer + scroll (transform-only; reduced-motion settles them). Entrance motion belongs to anims.js.
   Extra specificity (.ws-hero.v-parallax) so .ws-hero's base padding can't win. */
.ws-hero.v-parallax { position:relative; display:flex; align-items:center; overflow:hidden;
  isolation:isolate; min-height:clamp(460px, 72cqh, 720px); padding:96px 0; background:var(--bg); }
.v-parallax .pxh-stage { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v-parallax .pxh-layer { position:absolute; inset:-14%; will-change:transform; }
.v-parallax .pxh-sky { background:
    radial-gradient(58% 50% at 50% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%),
    radial-gradient(46% 44% at 84% 6%, color-mix(in srgb, var(--accent2, var(--accent)) 15%, transparent), transparent 70%),
    radial-gradient(66% 60% at 10% 98%, color-mix(in srgb, var(--ink) 10%, transparent), transparent 74%); }
.v-parallax .pxh-blob { position:absolute; border-radius:50%; }
.v-parallax .pxh-blob.b1 { width:46%; aspect-ratio:1; top:-10%; left:-6%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 42%, transparent), transparent 72%); }
.v-parallax .pxh-blob.b2 { width:40%; aspect-ratio:1; bottom:-12%; right:-6%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent2, var(--accent)) 38%, transparent), transparent 72%); }
.v-parallax .pxh-blob.b3 { width:26%; aspect-ratio:1; top:42%; left:22%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent 74%); }
.v-parallax .pxh-grid { opacity:0.6;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 46%, #000, transparent 82%);
          mask-image:radial-gradient(72% 62% at 50% 46%, #000, transparent 82%); }
.v-parallax .pxh-shape { position:absolute; opacity:0.6;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.v-parallax .pxh-shape.s1 { width:118px; height:118px; top:15%; right:13%; border-radius:16px; transform:rotate(12deg); }
.v-parallax .pxh-shape.s2 { width:72px; height:72px; bottom:16%; left:11%; border-radius:50%; }
.v-parallax .pxh-fg { position:relative; z-index:2; will-change:transform; }
.v-parallax .ws-h1 { text-wrap:balance; }
@container site (max-width: 860px) {
  .ws-hero.v-parallax { min-height:clamp(420px, 64cqh, 600px); }
  .v-parallax .pxh-shape.s1 { width:92px; height:92px; }
  .v-parallax .pxh-shape.s2 { width:58px; height:58px; }
}
@container site (max-width: 560px) {
  .ws-hero.v-parallax { padding:72px 0; }
  .v-parallax .pxh-shape.s1 { top:9%; right:7%; }
  .v-parallax .pxh-shape.s2 { bottom:11%; left:7%; }
}
/* portfolio — ported from SB_04 drafts/portfolio-hero (designer intro beside a work
   showcase). Origin was a static placeholder-fx image + a fixed "12 Projects" chip with
   baked pfh-fade-up/fade-in entrances; here the reveal system (anims.js) owns entrances and
   the dead image column became a REAL filterable work grid — the category chips filter the
   tiles and the count pill tracks what's shown; tiles lift on hover/focus (transform only).
   Tokens replace the origin's #0a0a0a / #3b82f6. Narrow-stacks via the global 860px
   .ws-hero .ws-in.split rule; its own container query drops the tile grid to one column. */
.v-portfolio .ws-in.split { grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items:center; gap:clamp(32px, 5cqw, 72px); }
.v-portfolio .ws-hcopy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-portfolio .ws-hcopy .ws-kick { color:var(--dim); }
.v-portfolio .ws-pfwork { min-width:0; }
/* filter bar — chips (real) + a live count pill echoing the origin's floating chip */
.v-portfolio .ws-pffilters { display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.v-portfolio .ws-pfchips { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.v-portfolio .ws-pfchip { appearance:none; cursor:pointer; font:600 11px var(--font);
  letter-spacing:0.05em; text-transform:uppercase; padding:7px 13px; border-radius:999px;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); color:var(--dim);
  transition:transform 140ms ease, color 140ms linear, border-color 140ms linear; }
.v-portfolio .ws-pfchip:hover { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 42%, var(--hair)); }
.v-portfolio .ws-pfchip:active { transform:scale(0.96); }
.v-portfolio .ws-pfchip.on { color:var(--accent-text, var(--bg)); background:var(--accent); border-color:var(--accent); }
.v-portfolio .ws-pfcount { flex:none; display:inline-flex; align-items:baseline; gap:6px;
  padding:6px 13px; border-radius:999px; background:var(--accent); color:var(--accent-text, var(--bg)); }
.v-portfolio .ws-pfcount b { font:700 15px var(--font-head, var(--font)); line-height:1; letter-spacing:-0.02em; }
.v-portfolio .ws-pfcount i { font:600 9.5px var(--font); font-style:normal; letter-spacing:0.12em; text-transform:uppercase; }
/* work grid */
.v-portfolio .ws-pfgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.v-portfolio .ws-pftile { position:relative; overflow:hidden; aspect-ratio:4 / 3;
  border-radius:var(--radius, 14px); border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  cursor:pointer; transition:transform 200ms ease, border-color 200ms linear, opacity 200ms ease; }
.v-portfolio .ws-pftile.hide { display:none; }
.v-portfolio .ws-pfart { position:absolute; inset:0;
  background:linear-gradient(calc(120deg + var(--ti, 0) * 44deg),
    color-mix(in srgb, var(--accent) 30%, var(--panel)),
    color-mix(in srgb, var(--accent2, var(--accent)) 12%, var(--panel)) 72%); }
.v-portfolio .ws-pfart::after { content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 8%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--ink) 8%, transparent) 25%, transparent 25%);
  background-size:22px 22px; background-position:0 0, 11px 11px; opacity:0.55; }
.v-portfolio .ws-pfmeta { position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; gap:3px; padding:34px 13px 11px;
  background:linear-gradient(to top, color-mix(in srgb, var(--bg) 86%, transparent), transparent); }
.v-portfolio .ws-pftag { font:600 9.5px var(--font); letter-spacing:0.11em; text-transform:uppercase; color:var(--accent); }
.v-portfolio .ws-pftt { font:600 13px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; line-height:1.2; }
.v-portfolio .ws-pfview { position:absolute; top:11px; right:11px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px;
  background:var(--accent); color:var(--accent-text, var(--bg)); font:600 10.5px var(--font); letter-spacing:0.02em;
  opacity:0; transform:translateY(-5px); transition:opacity 180ms ease, transform 180ms ease; }
.v-portfolio .ws-pfview svg { width:12px; height:12px; }
.v-portfolio .ws-pftile:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-portfolio .ws-pftile:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-portfolio .ws-pftile:hover .ws-pfview,
.v-portfolio .ws-pftile:focus-visible .ws-pfview { opacity:1; transform:translateY(0); }
/* press & media — ported from SB_04 drafts/press-hero (press-kit opener: headline, a row of
   brand-asset download cards, then a recent-coverage list). Source --prh-* vars map to theme
   tokens and the baked black background is dropped so the section wears the site theme. The
   origin's real outlet names (The Verge / Wired / Fast Company / TechCrunch) are replaced with
   neutral house wordmarks so nothing ships a fake endorsement. Entrance motion belongs to
   anims.js; only hover color/transform transitions run here and hover fills are set instantly
   (never a transitioned background). Container queries, not viewport media, for pane-width layout. */
.v-press .ws-in { display:flex; flex-direction:column; gap:clamp(32px, 5cqw, 56px); }
.v-press .prs-intro { display:flex; flex-direction:column; gap:16px; max-width:52ch; }
.v-press .prs-intro .ws-kick { margin-bottom:0; }
.v-press .ws-h1 { letter-spacing:-0.03em; }
.v-press .ws-sub { margin:0; }
/* downloads — a row of brand-asset cards */
.v-press .prs-downloads { display:grid; grid-template-columns:repeat(3, 1fr); border-top:var(--bw, 1px) solid var(--hair); }
.v-press .prs-dl { display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:clamp(18px, 2.2cqw, 26px); text-decoration:none; color:var(--ink);
  border-bottom:var(--bw, 1px) solid var(--hair); border-top:2px solid transparent;
  transition:transform .15s ease, color .15s ease; }
.v-press .prs-dl + .prs-dl { border-left:var(--bw, 1px) solid var(--hair); }
.v-press .prs-dl:hover { transform:translateY(-2px); border-top-color:var(--accent);
  background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-press .prs-dl:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-press .prs-dl-label { display:flex; align-items:center; gap:12px;
  font:600 clamp(14px, 1.5cqw, 15px) var(--font-head, var(--font)); color:var(--ink); }
.v-press .prs-dl-ico { flex:none; display:grid; place-items:center; width:30px; height:30px;
  border:var(--bw, 1px) solid var(--hair); border-radius:7px; color:var(--accent); }
.v-press .prs-dl-ico svg { width:16px; height:16px; }
.v-press .prs-dl:hover .prs-dl-ico { border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.v-press .prs-dl-detail { font:400 12px var(--mono); letter-spacing:0.04em; color:var(--faint); }
/* coverage — recent press list */
.v-press .prs-coverage { display:flex; flex-direction:column; gap:16px; }
.v-press .prs-items { display:flex; flex-direction:column; border-top:var(--bw, 1px) solid var(--hair); }
.v-press .prs-item { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  gap:6px 16px; align-items:start; padding:clamp(18px, 2cqw, 22px) clamp(4px, 1cqw, 12px);
  border-bottom:var(--bw, 1px) solid var(--hair); text-decoration:none; color:var(--ink); transition:color .15s ease; }
.v-press .prs-item:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-press .prs-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-press .prs-item-top { grid-column:1; display:flex; align-items:center; gap:14px; }
.v-press .prs-pub { font:700 11px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.v-press .prs-date { font:400 12px var(--font); color:var(--faint); white-space:nowrap; }
.v-press .prs-head { grid-column:1; margin:0; font:400 clamp(14px, 1.6cqw, 16px)/1.5 var(--font); color:var(--ink); }
.v-press .prs-read { grid-column:2; grid-row:1 / 3; align-self:center; display:inline-flex; align-items:center; gap:6px;
  font:600 12px var(--font); color:var(--faint); white-space:nowrap; transition:color .15s ease; }
.v-press .prs-read svg { width:14px; height:14px; transition:transform .15s ease; }
.v-press .prs-item:hover .prs-read { color:var(--accent); }
.v-press .prs-item:hover .prs-read svg { transform:translateX(3px); }
@container site (max-width: 860px) {
  .v-press .prs-downloads { grid-template-columns:1fr; }
  .v-press .prs-dl { flex-direction:row; align-items:center; justify-content:space-between; padding-block:16px; }
  .v-press .prs-dl + .prs-dl { border-left:none; }
  .v-press .prs-dl:hover { transform:none; }
}
@container site (max-width: 560px) {
  .v-press .prs-item { grid-template-columns:1fr; }
  .v-press .prs-read { grid-column:1; grid-row:auto; align-self:start; margin-top:2px; }
}
/* resource-hub — ported from SB_04 drafts/resource-hub-hero (learning-library opener:
   centered headline + working search, a browse-by-type category grid, and a featured-
   resources row). The search box and category tiles are LIVE — mount() filters the cards;
   origin placeholder-fx thumbnails become the themed ws-hpanel.ph atom. Entrance motion is
   the reveal system's job; only hover/color moves here. Origin --rhh-* vars map to tokens:
   bg->--bg, heading->--ink, body->--dim, accent->--accent, dividers->--hair, muted->--faint. */
.v-resource-hub .ws-in { display:flex; flex-direction:column; gap:clamp(40px, 6cqw, 64px); }
.v-resource-hub .rhh-head { text-align:center; max-width:680px; margin:0 auto; }
.v-resource-hub .rhh-head .ws-kick { margin-bottom:16px; }
.v-resource-hub .rhh-head .ws-sub { margin-top:18px; }
/* search — a real input; mount() filters the featured cards as you type */
.v-resource-hub .rhh-search { position:relative; max-width:560px; margin:28px auto 0; }
.v-resource-hub .rhh-search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--faint); pointer-events:none; }
.v-resource-hub .rhh-search-input { width:100%; background:var(--panel-2, var(--panel));
  border:var(--bw, 1px) solid var(--hair); border-radius:10px; padding:14px 16px 14px 46px;
  font:400 15px var(--font); color:var(--ink); outline:none; transition:color .18s; }
.v-resource-hub .rhh-search-input::placeholder { color:var(--faint); }
.v-resource-hub .rhh-search-input:focus { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-resource-hub .rhh-search-input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* category grid — clickable filter tiles (toggle to narrow the row below) */
.v-resource-hub .rhh-types { display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:var(--bw, 1px) solid var(--hair); border-left:var(--bw, 1px) solid var(--hair); }
.v-resource-hub .rhh-type { appearance:none; -webkit-appearance:none; text-align:left; font:inherit;
  cursor:pointer; background:transparent; padding:28px 26px; border:0;
  border-right:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair);
  display:flex; flex-direction:column; gap:12px; }
.v-resource-hub .rhh-type:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-resource-hub .rhh-type.is-on { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.v-resource-hub .rhh-type:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-resource-hub .rhh-type-icon { width:40px; height:40px; display:flex; align-items:center;
  justify-content:center; border-radius:var(--radius, 8px); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.v-resource-hub .rhh-type-icon svg { width:20px; height:20px; }
.v-resource-hub .rhh-type-label { font:700 15px var(--font-head, var(--font)); color:var(--ink); }
.v-resource-hub .rhh-type-count { font:400 13px var(--font); color:var(--faint); transition:color .18s; }
.v-resource-hub .rhh-type.is-on .rhh-type-count { color:var(--accent); }
/* featured resources — the filterable card row */
.v-resource-hub .rhh-featured-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.v-resource-hub .rhh-featured-label { font:600 11px var(--font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
.v-resource-hub .rhh-status { font:500 12px var(--font); color:var(--dim); }
.v-resource-hub .rhh-grid { display:grid; grid-template-columns:repeat(3, 1fr); border-top:var(--bw, 1px) solid var(--hair); }
.v-resource-hub .rhh-card { display:flex; flex-direction:column; gap:16px;
  padding:28px 26px 28px 0; border-right:var(--bw, 1px) solid var(--hair); }
.v-resource-hub .rhh-card:last-child { border-right:none; padding-right:0; }
.v-resource-hub .rhh-card.is-hidden { display:none; }
.v-resource-hub .rhh-thumb.ws-hpanel { min-height:0; height:180px; border-radius:var(--radius, 8px); }
.v-resource-hub .rhh-card-meta { display:flex; flex-direction:column; gap:8px; }
.v-resource-hub .rhh-card-tag { font:700 10px var(--font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); }
.v-resource-hub .rhh-card-title { font:700 16px var(--font-head, var(--font)); color:var(--ink); line-height:1.3; }
.v-resource-hub .rhh-card-read { font:400 13px var(--font); color:var(--faint); }
.v-resource-hub .rhh-empty { margin-top:20px; text-align:center; font:500 14px var(--font); color:var(--dim); }
.v-resource-hub .rhh-empty[hidden] { display:none; }
@container site (max-width: 860px) {
  .v-resource-hub .rhh-grid { grid-template-columns:1fr; border-top:none; }
  .v-resource-hub .rhh-card { border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); padding:26px 0; }
  .v-resource-hub .rhh-card:last-child { border-bottom:none; padding-bottom:0; }
}
@container site (max-width: 560px) {
  .v-resource-hub .rhh-types { grid-template-columns:repeat(2, 1fr); }
}
/* podcast — ported from SB_04 drafts/podcast-hero (audio-show opener: cover art + show info +
   subscribe links above a "latest episodes" list). Dead affordances made real: the cover Play
   button toggles a playing state (aria-pressed + equalizer) and the episode list is a
   roving-tabindex single-select listbox (arrows/Home/End/Enter/Space) whose selection drives the
   Now-Playing label and moves the animated bars. Reuses the album-art equalizer keyframes (aaEq).
   Entrance motion belongs to the reveal system; only the user-toggled equalizer runs, and it
   stills for prefers-reduced-motion. Origin's dark palette + blue accent map to theme tokens. */
.v-podcast .pod-head { display:grid; grid-template-columns:clamp(196px, 26cqw, 258px) 1fr;
  gap:clamp(28px, 5cqw, 52px); align-items:start; padding-bottom:34px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-podcast .pod-art { position:relative; width:100%; aspect-ratio:1 / 1; display:grid; place-items:center;
  border-radius:var(--radius, 14px); border:var(--bw, 1px) solid var(--hair); overflow:hidden;
  background-color:var(--panel); background-size:cover; background-position:center; }
.v-podcast .pod-art.ph { background-image:
    radial-gradient(120% 92% at 28% 20%, color-mix(in srgb, var(--accent) 70%, transparent) 0%,
      color-mix(in srgb, var(--accent) 26%, transparent) 44%, transparent 74%),
    radial-gradient(92% 84% at 84% 90%, color-mix(in srgb, var(--accent2, var(--accent)) 46%, transparent) 0%, transparent 68%); }
.v-podcast .pod-play { position:relative; z-index:2; width:60px; height:60px; border-radius:50%; border:none;
  display:grid; place-items:center; cursor:pointer; color:var(--accent-text, #04121a);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  box-shadow:0 8px 30px color-mix(in srgb, #000 34%, transparent);
  transition:transform 140ms var(--ease-pop, ease-out); }
.v-podcast .pod-play:hover { transform:scale(1.06); }
.v-podcast .pod-play:active { transform:scale(0.97); }
.v-podcast .pod-play svg { width:24px; height:24px; }
.v-podcast .pod-play .pod-pause-ico { display:none; }
.v-podcast.playing .pod-play .pod-play-ico { display:none; }
.v-podcast.playing .pod-play .pod-pause-ico { display:block; }
.v-podcast .pod-eq { position:absolute; left:13px; bottom:13px; z-index:2; display:flex; align-items:flex-end;
  gap:3px; height:18px; opacity:0; transition:opacity 160ms linear; }
.v-podcast.playing .pod-eq { opacity:1; }
.v-podcast .pod-eq i { width:3px; height:40%; border-radius:2px; background:var(--accent); }
.v-podcast .pod-eq i:nth-child(2) { animation-delay:-.6s; }
.v-podcast .pod-eq i:nth-child(3) { animation-delay:-.3s; }
.v-podcast .pod-eq i:nth-child(4) { animation-delay:-.15s; }
.v-podcast.playing .pod-eq i { animation:aaEq 900ms ease-in-out infinite; }
.v-podcast .pod-info { display:flex; flex-direction:column; min-width:0; }
.v-podcast .pod-info .ws-kick { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.v-podcast .pod-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.v-podcast .pod-host { margin:12px 0 0; font:500 clamp(13px, 1.6cqw, 15px) var(--font); color:var(--dim); }
.v-podcast .pod-count { margin:6px 0 0; font:400 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.v-podcast .pod-desc { margin-top:16px; max-width:52ch; }
.v-podcast .pod-subs { list-style:none; margin:22px 0 0; padding:0; border-top:var(--bw, 1px) solid var(--hair); max-width:380px; }
.v-podcast .pod-sub { border-bottom:var(--bw, 1px) solid var(--hair); }
.v-podcast .pod-sub a { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 2px; text-decoration:none; color:var(--dim); font:500 13px var(--font);
  transition:color 140ms linear; }
.v-podcast .pod-sub a:hover { color:var(--accent); }
.v-podcast .pod-sub-ar { display:inline-flex; color:var(--faint);
  transition:color 140ms linear, transform 140ms var(--ease-pop, ease-out); }
.v-podcast .pod-sub-ar svg { width:15px; height:15px; display:block; }
.v-podcast .pod-sub a:hover .pod-sub-ar { color:var(--accent); transform:translateX(3px); }
.v-podcast .pod-eps { padding-top:30px; }
.v-podcast .pod-eps-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:6px; flex-wrap:wrap; }
.v-podcast .pod-eps-h { margin:0; font:600 10px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.v-podcast .pod-now { font:400 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.v-podcast .pod-now b { color:var(--accent); font-weight:500; text-transform:none; letter-spacing:0; }
.v-podcast .pod-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.v-podcast .pod-ep { display:flex; align-items:center; gap:16px; padding:14px 12px;
  border-top:var(--bw, 1px) solid var(--hair); cursor:pointer; color:var(--dim); border-radius:calc(var(--radius, 12px) * .5);
  transition:color 140ms linear, transform 140ms var(--ease-pop, ease-out); }
.v-podcast .pod-ep:last-child { border-bottom:var(--bw, 1px) solid var(--hair); }
.v-podcast .pod-ep:hover { color:var(--ink); transform:translateX(3px); }
.v-podcast .pod-ep:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-podcast .pod-ep.on { background:var(--accent-fill); color:var(--ink); }
.v-podcast .pod-n { font:500 12px var(--mono); letter-spacing:.04em; color:var(--faint); min-width:2.2em; text-align:right; flex:none; }
.v-podcast .pod-ep.on .pod-n { color:var(--accent); }
.v-podcast .pod-ep-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.v-podcast .pod-ep-t { font:500 clamp(14px, 1.7cqw, 15.5px) var(--font); color:var(--ink); line-height:1.3; }
.v-podcast .pod-ep-meta { font:400 11px var(--mono); letter-spacing:.06em; color:var(--faint); }
.v-podcast .pod-dur { font:400 12px var(--font); color:var(--faint); white-space:nowrap; flex:none; }
.v-podcast .pod-state { width:18px; display:flex; align-items:center; justify-content:center; flex:none; }
.v-podcast .pod-ep-play { display:inline-flex; color:var(--faint); opacity:0;
  transition:opacity 140ms linear, color 140ms linear; }
.v-podcast .pod-ep-play svg { width:13px; height:13px; display:block; }
.v-podcast .pod-ep:hover .pod-ep-play, .v-podcast .pod-ep:focus-visible .pod-ep-play { opacity:1; color:var(--accent); }
.v-podcast .pod-bars { display:none; align-items:flex-end; gap:2px; height:13px; }
.v-podcast .pod-ep.on .pod-ep-play { display:none; }
.v-podcast .pod-ep.on .pod-bars { display:flex; }
.v-podcast .pod-bars i { width:2px; height:35%; border-radius:1px; background:var(--accent); }
.v-podcast .pod-bars i:nth-child(2) { animation-delay:-.5s; }
.v-podcast .pod-bars i:nth-child(3) { animation-delay:-.25s; }
.v-podcast.playing .pod-ep.on .pod-bars i { animation:aaEq 780ms ease-in-out infinite; }
@container site (max-width: 560px) {
  .v-podcast .pod-head { grid-template-columns:1fr; gap:22px; }
  .v-podcast .pod-art { max-width:196px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-podcast.playing .pod-eq i, .v-podcast.playing .pod-ep.on .pod-bars i { animation:none; height:70%; }
}
/* process — ported from SB_04 drafts/process-hero (a numbered "how we work" opener: an eyebrow, a
   headline + standfirst, then a row of numbered steps joined by a connector line, stacking to a
   vertical timeline on narrow widths). The origin was a static, zero-JS display; the port makes it
   a REAL stepper — each step is a selectable button (roving tabindex, aria-current="step",
   arrow / Home / End keys), a "Next step" control advances and wraps, the connector RAIL fills
   (transform: scaleX / scaleY, never a width transition) up to the selected step and earlier steps
   read as done, and an aria-live status announces "Step n of N — Title". Origin --prh2-* vars map to
   tokens: bg->page --bg, heading->--ink, body->--dim/--faint, accent->--accent (+ --accent-fill tint,
   --accent-text for text on the accent node), connector->--hair, chip->--panel, font->--font/--font-head.
   Baked fade-up entrances are dropped (anims.js owns entrances); only hover/selection + the rail fill
   move here, and node fills flip instantly (never transitioned). Container queries only, no blur. */
.v-process .prc-head { max-width:52rem; margin:0 auto clamp(38px, 5cqw, 62px); text-align:center; }
.v-process .prc-head .ws-kick { margin:0 auto 14px; }
.v-process .prc-head .ws-h1 { letter-spacing:-0.03em; text-wrap:balance; }
.v-process .prc-head .ws-sub { margin:16px auto 0; max-width:54ch; }
.v-process .prc-steps { --prc-node:44px; list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(var(--prc-n, 4), minmax(0, 1fr));
  gap:clamp(18px, 2.4cqw, 34px); }
/* connector rail — runs through the node centers (first center to last center) */
.v-process .prc-rail { position:absolute; top:calc(var(--prc-node) / 2); height:2px;
  left:calc(50% / var(--prc-n, 4)); right:calc(50% / var(--prc-n, 4));
  transform:translateY(-1px); background:var(--hair); border-radius:2px; overflow:hidden; pointer-events:none; }
.v-process .prc-rail-fill { position:absolute; inset:0; background:var(--accent);
  transform:scaleX(var(--prc-p, 0)); transform-origin:left center; transition:transform .32s ease; }
.v-process .prc-step { position:relative; z-index:1; width:100%; cursor:pointer; appearance:none;
  -webkit-appearance:none; background:transparent; border:0; padding:0; color:inherit; font:inherit;
  text-align:center; display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px, 1.2cqw, 14px); }
.v-process .prc-node { width:var(--prc-node); height:var(--prc-node); border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--panel); border:1.5px solid var(--hair);
  color:var(--faint); transition:transform .2s ease, border-color .2s ease, color .2s ease; }
.v-process .prc-num { font:800 15px var(--mono); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.v-process .prc-copy { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.v-process .prc-title { font:600 clamp(15px, 1.5cqw, 17px) var(--font-head, var(--font));
  letter-spacing:-0.01em; color:var(--ink); }
.v-process .prc-desc { font:400 clamp(13px, 1.3cqw, 14px)/1.6 var(--font); color:var(--dim);
  max-width:28ch; }
/* hover — lift the node + warm its border (the background flips instantly, never transitioned) */
.v-process .prc-step:hover .prc-node { transform:translateY(-2px); color:var(--ink);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-process .prc-step:focus-visible { outline:none; }
.v-process .prc-step:focus-visible .prc-node { outline:2px solid var(--accent); outline-offset:3px; }
/* done — earlier steps read complete */
.v-process .prc-step.is-done .prc-node { background:var(--accent-fill); border-color:var(--accent);
  color:var(--accent); }
/* on — the selected step */
.v-process .prc-step.is-on .prc-node { background:var(--accent); border-color:var(--accent);
  color:var(--accent-text, var(--bg)); transform:scale(1.06); }
.v-process .prc-foot { display:flex; align-items:center; gap:clamp(14px, 1.8cqw, 22px); flex-wrap:wrap;
  margin-top:clamp(30px, 4cqw, 50px); }
.v-process .prc-next { display:inline-flex; align-items:center; gap:8px; cursor:pointer; appearance:none;
  -webkit-appearance:none; font:600 13px var(--font); color:var(--ink); background:var(--panel);
  border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:9px 16px;
  transition:transform .16s ease, border-color .16s ease, color .16s ease; }
.v-process .prc-next i { display:inline-flex; }
.v-process .prc-next i svg { width:15px; height:15px; display:block; }
.v-process .prc-next:hover { transform:translateX(2px); color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-process .prc-next:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-process .prc-status { margin:0; font:500 12.5px var(--font); color:var(--faint); min-height:1.1em; }
.v-process .prc-cta { margin:0 0 0 auto; }
/* narrow — steps become a vertical timeline (node left, copy right); the rail turns vertical */
@container site (max-width: 760px) {
  .v-process .prc-steps { grid-template-columns:1fr; gap:clamp(20px, 5cqw, 28px); }
  .v-process .prc-step { flex-direction:row; align-items:flex-start; text-align:left; gap:16px; }
  .v-process .prc-copy { align-items:flex-start; padding-top:9px; }
  .v-process .prc-desc { max-width:46ch; }
  .v-process .prc-rail { top:calc(var(--prc-node) / 2); bottom:calc(var(--prc-node) / 2); height:auto;
    left:calc(var(--prc-node) / 2); right:auto; width:2px; transform:translateX(-1px); }
  .v-process .prc-rail-fill { transform:scaleY(var(--prc-p, 0)); transform-origin:top center; }
}
@container site (max-width: 560px) {
  .v-process .prc-cta { margin-left:0; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .v-process .prc-rail-fill, .v-process .prc-node, .v-process .prc-next { transition:none; }
}
/* scroll-progress — ported from SB_04 scroll-progress-hero: a centered editorial hero fronted by a
   viewport-pinned reading-progress bar. The bar is a REAL progressbar — mount() tracks the scroll
   container and drives --sp + aria-valuenow; a sensible at-rest value is baked into render() so the
   static preview is never blank. Transform-only fill, no transitioned backgrounds, reduced-motion
   safe. Entrance motion belongs to the reveal system (anims.js). Narrow-scales by container query. */
.ws-hero.v-scroll-progress { padding-top:0; }
.v-scroll-progress .spg-rail { position:sticky; top:0; z-index:6; display:flex; align-items:center;
  gap:14px; padding:12px clamp(16px, 4cqw, 40px); }
.v-scroll-progress .spg-track { position:relative; flex:1; height:3px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 12%, transparent); }
.v-scroll-progress .spg-fill { position:absolute; inset:0; transform-origin:left center;
  transform:scaleX(var(--sp, 0)); border-radius:inherit;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  transition:transform 90ms linear; }
.v-scroll-progress .spg-track.spg-instant .spg-fill { transition:none; }
.v-scroll-progress .spg-pct { flex:none; min-width:42px; text-align:right; font:600 11px var(--mono);
  letter-spacing:1px; color:var(--dim); font-variant-numeric:tabular-nums; }
.v-scroll-progress .ws-in.center { padding-top:clamp(60px, 9cqw, 104px); }
.v-scroll-progress .spg-media { margin-top:clamp(36px, 5cqw, 64px); width:100%; aspect-ratio:16 / 7;
  min-height:0; border-radius:var(--radius, 14px); }
.v-scroll-progress .spg-media:not(.ws-hpanel) { border:var(--bw, 1px) solid var(--hair); overflow:hidden;
  background-color:var(--panel); background-size:cover; background-position:center;
  box-shadow:var(--inset-hi, 0 0 #0000), var(--elev, 0 0 #0000); }
@media (prefers-reduced-motion: reduce) {
  .v-scroll-progress .spg-fill { transition:none; }
}
@container site (max-width: 560px) {
  .v-scroll-progress .spg-media { aspect-ratio:4 / 3; }
  .v-scroll-progress .spg-rail { padding-inline:clamp(12px, 4cqw, 20px); }
}
/* satellite — ported from SB_04 drafts/satellite-hero (copy beside an orbital diagram: a glowing
   central core, concentric guide rings and satellite dots tracing slow orbits over a faint star field).
   Origin --sah-* vars -> theme tokens: the #0a0a0a space bg becomes the theme's --bg; stars ride --ink
   and rings/dots ride --accent so it themes both ways. Baked entrance fades dropped (anims.js owns
   entrances); the orbital drift is kept as ambient transform-only motion that parks for reduced-motion,
   like the ticker/abstract loops. No blur/backdrop-filter. Reuses ws-in.split (narrow-stacks on the
   global 860px rule) + ws-hcopy + DEF_STATS metrics; container queries only, no viewport media. */
.v-satellite .ws-in.split { align-items:stretch; }
.v-satellite .ws-in { z-index:1; }
.v-satellite .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-satellite .sat-stars { position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, color-mix(in srgb, var(--ink) 55%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 28% 72%, color-mix(in srgb, var(--ink) 38%, transparent) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 9%, color-mix(in srgb, var(--ink) 60%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 60% 55%, color-mix(in srgb, var(--ink) 32%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 73% 27%, color-mix(in srgb, var(--ink) 45%, transparent) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 80%, color-mix(in srgb, var(--ink) 52%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 5% 88%, color-mix(in srgb, var(--ink) 40%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 35% 40%, color-mix(in srgb, var(--ink) 28%, transparent) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 14%, color-mix(in srgb, var(--ink) 50%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 52% 92%, color-mix(in srgb, var(--ink) 36%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 18% 50%, color-mix(in srgb, var(--ink) 28%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 78% 60%, color-mix(in srgb, var(--ink) 44%, transparent) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 34%, color-mix(in srgb, var(--ink) 36%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 40% 62%, color-mix(in srgb, var(--ink) 30%, transparent) 0, transparent 100%),
    radial-gradient(1px 1px at 95% 45%, color-mix(in srgb, var(--ink) 44%, transparent) 0, transparent 100%); }
.v-satellite .sat-metrics { display:flex; flex-wrap:wrap; gap:22px 36px; margin-top:42px; }
.v-satellite .sat-metric { display:flex; flex-direction:column; gap:3px; }
.v-satellite .sat-metric-l { font:600 10.5px var(--mono, var(--font)); letter-spacing:1.6px;
  text-transform:uppercase; color:var(--faint); }
.v-satellite .sat-metric-v { font:800 19px var(--font-head, var(--font)); letter-spacing:-0.01em; color:var(--ink); }
.v-satellite .sat-stage { display:flex; align-items:center; justify-content:center;
  border-left:var(--bw, 1px) solid var(--hair); padding-left:clamp(20px, 3cqw, 52px); }
.v-satellite .sat-orbit { --sat-size:min(380px, 64cqw); position:relative;
  width:var(--sat-size); height:var(--sat-size); display:flex; align-items:center; justify-content:center; }
.v-satellite .sat-core { position:relative; z-index:2; width:38%; height:38%; border-radius:50%; overflow:hidden;
  background-image:radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 45%, var(--ink)) 0%,
    var(--accent) 46%, color-mix(in srgb, var(--accent) 55%, #000) 100%);
  background-size:cover; background-position:center;
  box-shadow:0 0 46px color-mix(in srgb, var(--accent) 38%, transparent),
    inset -6px -6px 18px color-mix(in srgb, #000 34%, transparent); }
.v-satellite .sat-ring { position:absolute; inset:50%; transform:translate(-50%, -50%);
  border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); pointer-events:none; }
.v-satellite .sat-ring.r1 { width:56%; height:56%; }
.v-satellite .sat-ring.r2 { width:75%; height:75%; border-color:color-mix(in srgb, var(--accent) 15%, transparent); }
.v-satellite .sat-ring.r3 { width:94%; height:94%; border-color:color-mix(in srgb, var(--accent) 9%, transparent); }
.v-satellite .sat-dot { position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 80%, transparent); }
.v-satellite .sat-dot.d1 { animation:satOrbit1 19s linear infinite; }
.v-satellite .sat-dot.d2 { animation:satOrbit2 29s linear infinite reverse; }
.v-satellite .sat-dot.d3 { animation:satOrbit3 43s linear infinite; }
@keyframes satOrbit1 { from { transform:rotate(0deg) translateX(calc(var(--sat-size) * 0.28)); }
  to { transform:rotate(360deg) translateX(calc(var(--sat-size) * 0.28)); } }
@keyframes satOrbit2 { from { transform:rotate(120deg) translateX(calc(var(--sat-size) * 0.375)); }
  to { transform:rotate(480deg) translateX(calc(var(--sat-size) * 0.375)); } }
@keyframes satOrbit3 { from { transform:rotate(240deg) translateX(calc(var(--sat-size) * 0.47)); }
  to { transform:rotate(600deg) translateX(calc(var(--sat-size) * 0.47)); } }
@container site (max-width: 860px) {
  .v-satellite .sat-stage { border-left:none; padding-left:0; margin-top:8px; }
  .v-satellite .sat-orbit { --sat-size:min(300px, 74cqw); }
}
@media (prefers-reduced-motion: reduce) {
  .v-satellite .sat-dot.d1 { animation:none; transform:rotate(0deg) translateX(calc(var(--sat-size) * 0.28)); }
  .v-satellite .sat-dot.d2 { animation:none; transform:rotate(120deg) translateX(calc(var(--sat-size) * 0.375)); }
  .v-satellite .sat-dot.d3 { animation:none; transform:rotate(240deg) translateX(calc(var(--sat-size) * 0.47)); }
}
/* scroll-reveal — centered giant statement; stacked words rise in on cue. The entrance is owned by the
   scroll system: content is VISIBLE at rest, mount() arms (.sr-armed) then an IntersectionObserver reveals
   (.sr-in) with transform/opacity only. No baked-in keyframes, no blur. */
.v-scroll-reveal { position:relative; overflow:hidden; display:flex; align-items:center;
  padding:clamp(88px, 13cqw, 150px) 0; min-height:clamp(420px, 58cqw, 640px); }
.v-scroll-reveal .sr-glow { position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 50% at 50% 62%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%); }
.v-scroll-reveal .ws-in.center { position:relative; z-index:1; }
.v-scroll-reveal .sr-stack { display:flex; flex-direction:column; align-items:center; gap:0; line-height:1; }
.v-scroll-reveal .sr-line { display:block; font:800 clamp(44px, 12cqw, 120px)/0.98 var(--font-head, var(--font));
  letter-spacing:-0.04em; color:var(--ink); }
.v-scroll-reveal .sr-line.ws-grad { color:transparent;
  background:var(--accent-grad, linear-gradient(120deg, var(--accent), var(--accent2, var(--accent))));
  -webkit-background-clip:text; background-clip:text; }
/* reveal states — visible at rest; .sr-armed hides instantly (no fade-out), .sr-in transitions in with a per-line stagger */
.v-scroll-reveal .sr-line, .v-scroll-reveal .sr-rise { opacity:1; transform:none; }
.v-scroll-reveal.sr-armed .sr-line, .v-scroll-reveal.sr-armed .sr-rise { opacity:0; transform:translateY(26px); }
.v-scroll-reveal.sr-in .sr-line, .v-scroll-reveal.sr-in .sr-rise { opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--sri, 0) * .11s); }
@container site (max-width: 560px) {
  .v-scroll-reveal { min-height:auto; padding:clamp(64px, 16cqw, 96px) 0; }
  .v-scroll-reveal .sr-line { font-size:clamp(40px, 15cqw, 74px); }
  .v-scroll-reveal .ws-ctarow { flex-direction:column; align-items:center; }
}
@media (prefers-reduced-motion: reduce) {
  .v-scroll-reveal.sr-armed .sr-line, .v-scroll-reveal.sr-armed .sr-rise,
  .v-scroll-reveal.sr-in .sr-line, .v-scroll-reveal.sr-in .sr-rise { opacity:1; transform:none; transition:none; }
}
/* pricing — ported from SB_04 drafts/pricing-hero (plan cards under a centered headline with a
   monthly/annual billing switch). The origin's data-billing crossfade is reimplemented as REAL
   state: mount() flips a role="switch" (aria-checked), toggles .is-annual and swaps every price
   from its data-mo to its data-yr, so the switch genuinely re-prices. Origin --ph-* vars map to
   theme tokens; card CTAs are ZenOS btn() (ghost, primary for the featured tier) so brand
   button-sets cascade. Only the switch knob and card lift transition (transform); track and label
   colors flip instantly. Container queries stack the grid. */
.v-pricing .ws-plhead { margin-bottom:44px; }
.v-pricing .ws-plhead .ws-sub { margin-top:16px; }
.v-pricing .ws-billrow { display:inline-flex; align-items:center; gap:12px; margin-top:26px; }
.v-pricing .ws-billlab { display:inline-flex; align-items:center; gap:8px; font:500 13px var(--font); color:var(--dim); }
.v-pricing .ws-billlab.m { color:var(--ink); }
.v-pricing.is-annual .ws-billlab.m { color:var(--dim); }
.v-pricing.is-annual .ws-billlab.a { color:var(--ink); }
.v-pricing .ws-billsave { font:700 10px var(--font); letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); padding:3px 8px; border-radius:999px; }
.v-pricing .ws-billsw { position:relative; flex-shrink:0; width:46px; height:26px; padding:0;
  border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:var(--panel-2); cursor:pointer;
  -webkit-appearance:none; appearance:none; }
.v-pricing .ws-billsw:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-pricing .ws-billknob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--ink); transition:transform .2s ease; }
.v-pricing.is-annual .ws-billsw { background:var(--accent); border-color:var(--accent); }
.v-pricing.is-annual .ws-billknob { background:var(--bg); transform:translateX(20px); }
.v-pricing .ws-plgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:start; text-align:left; }
.v-pricing .ws-plcard { position:relative; display:flex; flex-direction:column; padding:28px;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); background:var(--panel); transition:transform .2s ease; }
.v-pricing .ws-plcard:hover { transform:translateY(-3px); }
.v-pricing .ws-plcard.hot { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.v-pricing .ws-plbadge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font:700 10px var(--font); letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
  background:var(--accent); color:var(--accent-text, #04121a); }
.v-pricing .ws-pltop { flex:1; }
.v-pricing .ws-plname { display:block; font:700 15px var(--font); color:var(--ink); }
.v-pricing .ws-pldesc { margin:6px 0 0; font:400 13px/1.5 var(--font); color:var(--dim); }
.v-pricing .ws-plprice { margin-top:22px; display:flex; align-items:baseline; gap:6px; min-height:38px; }
.v-pricing .ws-plnum { font:700 clamp(30px, 4cqw, 36px) var(--font-head, var(--font)); color:var(--ink); line-height:1; }
.v-pricing .ws-plper { font:500 13px var(--font); color:var(--dim); }
.v-pricing .ws-plfeats { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.v-pricing .ws-plfeat { display:flex; align-items:center; gap:10px; font:400 13px var(--font); color:var(--dim); }
.v-pricing .ws-plfeat svg { width:14px; height:14px; color:var(--accent); flex-shrink:0; }
.v-pricing .ws-plcard .ws-ctarow { margin-top:24px; }
.v-pricing .ws-plcard .ws-btn { width:100%; justify-content:center; }
@container site (max-width: 860px) {
  .v-pricing .ws-plgrid { grid-template-columns:1fr 1fr; }
}
@container site (max-width: 560px) {
  .v-pricing .ws-plgrid { grid-template-columns:1fr; }
}
/* results — ported from SB_04 results-hero (centered statement over a bordered proof-metric grid,
   a client logo strip, and a case-studies link). The origin's six static numbers become REAL
   count-ups: each metric is baked into the DOM as its final value (works with scripting off) and,
   once the fold scrolls into view, eases from zero to that exact value a single time (mount-driven
   via whenVisible; reduced-motion jumps straight to the value). Origin palette maps to theme
   tokens, viewport media queries become container queries, and the hairline dividers are a 1px
   grid gap over a --hair backing so they hold at any column count. No blur, no baked entrances. */
.v-results .rsh-in { display:flex; flex-direction:column; align-items:center; gap:clamp(38px, 5cqw, 62px); }
.v-results .rsh-head { display:flex; flex-direction:column; align-items:center; gap:16px; }
.v-results .rsh-head .ws-kick { margin:0; }
.v-results .rsh-head .ws-h1 { max-width:16ch; }
.v-results .rsh-grid { width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--hair); border:var(--bw, 1px) solid var(--hair); border-radius:16px; overflow:hidden; }
.v-results .rsh-cell { display:flex; flex-direction:column; gap:7px; text-align:left;
  padding:clamp(22px, 3cqw, 40px); background:var(--panel); }
.v-results .rsh-cell:hover { background:var(--panel-2); }
.v-results .rsh-num { font:800 clamp(30px, 4.4cqw, 52px)/1 var(--font-head, var(--font));
  color:var(--accent); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.v-results .rsh-label { font:600 14px/1.3 var(--font); color:var(--ink); }
.v-results .rsh-ctx { font:400 12px/1.4 var(--font); color:var(--dim); opacity:.85; }
.v-results .rsh-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 40px; }
.v-results .rsh-logo { font:700 13px var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.v-results .rsh-cta-wrap { display:flex; justify-content:center; }
@container site (max-width: 640px) {
  .v-results .rsh-grid { grid-template-columns:repeat(2, 1fr); }
  .v-results .rsh-logos { gap:12px 26px; }
}
@container site (max-width: 440px) {
  .v-results .rsh-grid { grid-template-columns:1fr; }
}
/* product — e-commerce product-detail buy-box (SB_04 · drafts/product-hero).
   Left: a recolourable product stage (--pv-col drives the art) + a view-switching
   thumb rail; right: the purchase panel. Colour swatches repaint the shown product,
   thumbs reframe it (transform only), add-to-cart confirms. Entrances belong to
   anims.js; only transform/opacity/colour transition, backgrounds swap instantly.
   Product colours (--pv-col/--sw) and their white-highlight/black-shadow shading are
   deliberately literal — a physical product colour is content, like a semantic hue. */
.v-product .pv-in { align-items:stretch; --pv-col:var(--accent); }
.v-product .pv-stage { display:flex; flex-direction:column; gap:14px; min-width:0; }
.v-product .pv-frame { position:relative; aspect-ratio:4 / 5; border-radius:var(--radius, 14px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); overflow:hidden;
  box-shadow:var(--inset-hi,0 0 #0000), var(--elev,0 0 #0000); }
.v-product .pv-art { position:absolute; inset:0;
  background:
    radial-gradient(120% 110% at 28% 16%, color-mix(in srgb, var(--pv-col) 60%, transparent), transparent 60%),
    radial-gradient(130% 120% at 84% 104%, color-mix(in srgb, var(--pv-col) 38%, transparent), transparent 64%),
    color-mix(in srgb, var(--pv-col) 12%, var(--panel)); }
.v-product .pv-figure { position:absolute; inset:0; display:grid; place-items:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.v-product .pv-form { width:46%; height:64%; border-radius:120px 120px 26px 26px; position:relative;
  background:linear-gradient(160deg, color-mix(in srgb, var(--pv-col) 92%, #fff 8%),
    color-mix(in srgb, var(--pv-col) 76%, #000 24%));
  box-shadow:inset 0 2px 0 color-mix(in srgb, #fff 24%, transparent),
    inset 0 -30px 44px color-mix(in srgb, #000 26%, transparent),
    0 26px 40px color-mix(in srgb, #000 32%, transparent); }
.v-product .pv-form::before { content:''; position:absolute; left:17%; top:9%; width:19%; height:52%;
  border-radius:99px; opacity:.7;
  background:linear-gradient(180deg, color-mix(in srgb, #fff 42%, transparent), transparent); }
.v-product .pv-tag { position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:9px;
  padding:6px 12px; border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--bg) 70%, transparent); }
.v-product .pv-tagcol { font:600 11px var(--font); color:var(--ink); }
.v-product .pv-tagcol::before { content:''; display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--pv-col); margin-right:7px; vertical-align:-1px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent) inset; }
.v-product .pv-tagview { font-style:normal; font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); padding-left:9px; border-left:var(--bw, 1px) solid var(--hair); }
.v-product .pv-rail { display:flex; gap:10px; }
.v-product .pv-thumb { position:relative; flex:0 0 auto; width:62px; height:62px; padding:0; border-radius:10px;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel-2); overflow:hidden; cursor:pointer; opacity:.6;
  transition:opacity .18s ease, transform .18s ease; }
.v-product .pv-thumb:hover { opacity:1; transform:translateY(-2px); }
.v-product .pv-thumb.is-on { opacity:1; border-color:var(--accent); }
.v-product .pv-thumb.is-on::after { content:''; position:absolute; inset:0; border-radius:inherit;
  border:1px solid var(--accent); pointer-events:none; }
.v-product .pv-thumb:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-product .pv-thumbart { position:absolute; inset:0; display:grid; place-items:center;
  background:radial-gradient(120% 110% at 30% 20%, color-mix(in srgb, var(--pv-col) 58%, transparent), transparent 62%),
    color-mix(in srgb, var(--pv-col) 14%, var(--panel-2)); }
.v-product .pv-thumbfig { width:44%; height:60%; border-radius:34px 34px 7px 7px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--pv-col) 90%, #fff 10%),
    color-mix(in srgb, var(--pv-col) 74%, #000 26%));
  box-shadow:inset 0 -9px 15px color-mix(in srgb, #000 24%, transparent); }
.v-product .pv-panel { display:flex; flex-direction:column; align-self:center; min-width:0; }
.v-product .pv-brand { margin-bottom:12px; }
.v-product .pv-name { font-size:clamp(26px, 4.4cqw, 42px); }
.v-product .pv-pricerow { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-top:16px; }
.v-product .pv-price { font:700 clamp(20px, 2.6cqw, 26px) var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.01em; }
.v-product .pv-orig { font:400 15px var(--font); color:var(--faint); text-decoration:line-through; }
.v-product .pv-save { font:700 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding:3px 8px; border-radius:99px; }
.v-product .pv-rating { display:flex; align-items:center; gap:8px; margin-top:14px; }
.v-product .pv-stars { position:relative; display:inline-block; font-size:14px; line-height:1; letter-spacing:2px;
  color:color-mix(in srgb, var(--ink) 20%, transparent); white-space:nowrap; }
.v-product .pv-stars-on { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--accent); }
.v-product .pv-rnum { font:600 12px var(--font); color:var(--ink); }
.v-product .pv-rcount { font:400 12px var(--font); color:var(--faint); }
.v-product .pv-desc { margin-top:16px; max-width:52ch; }
.v-product .pv-opt { margin-top:22px; }
.v-product .pv-optlabel { display:block; font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:var(--faint); margin-bottom:12px; }
.v-product .pv-optval { color:var(--ink); font-weight:600; letter-spacing:0; text-transform:none; }
.v-product .pv-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.v-product .pv-swatch { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); color:var(--dim); cursor:pointer;
  transition:color .16s ease, transform .16s ease; }
.v-product .pv-swatch:hover { transform:translateY(-1px); color:var(--ink); }
.v-product .pv-swatch.is-on { border-color:var(--accent); color:var(--ink); }
.v-product .pv-swatch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-product .pv-swdot { width:16px; height:16px; border-radius:50%; flex:none; background:var(--sw, var(--accent));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent) inset; }
.v-product .pv-swname { font:500 12px var(--font); }
.v-product .pv-sizes { display:flex; flex-wrap:wrap; gap:8px; }
.v-product .pv-size { min-width:44px; padding:8px 12px; border-radius:10px; border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); color:var(--dim); font:500 13px var(--font); cursor:pointer;
  transition:color .16s ease, transform .16s ease; }
.v-product .pv-size:hover { transform:translateY(-1px); color:var(--ink); }
.v-product .pv-size.is-on { border-color:var(--accent); color:var(--accent); }
.v-product .pv-size:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-product .pv-buy { display:flex; gap:12px; margin-top:26px; align-items:stretch; }
.v-product .pv-qty { display:inline-flex; align-items:stretch; border:var(--bw, 1px) solid var(--hair); border-radius:12px;
  overflow:hidden; background:var(--panel); flex:none; }
.v-product .pv-qtybtn { width:44px; border:none; background:transparent; color:var(--ink); font:400 18px var(--font);
  cursor:pointer; transition:color .15s ease; }
.v-product .pv-qtybtn:hover { color:var(--accent); }
.v-product .pv-qtybtn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.v-product .pv-qtyval { min-width:42px; display:grid; place-items:center; font:600 14px var(--font); color:var(--ink);
  border-inline:var(--bw, 1px) solid var(--hair); }
.v-product .pv-cart { flex:1 1 auto; border:none; border-radius:12px; cursor:pointer; min-height:48px; padding:0 22px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, var(--bg));
  font:600 14px var(--font); letter-spacing:.01em; transition:transform .15s ease, opacity .15s ease; }
.v-product .pv-cart:hover { opacity:.9; }
.v-product .pv-cart:active { transform:scale(.99); }
.v-product .pv-cart:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-product .pv-cart.is-added { background-image:none;
  background-color:color-mix(in srgb, var(--accent) 20%, var(--panel)); color:var(--ink); }
.v-product .pv-trust { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.v-product .pv-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); font:500 12px var(--font); color:var(--dim); }
.v-product .pv-chipico { display:inline-flex; color:var(--accent); }
.v-product .pv-chipico svg { width:13px; height:13px; }
.v-product .pv-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) {
  .v-product .pv-figure, .v-product .pv-thumb, .v-product .pv-swatch, .v-product .pv-size,
  .v-product .pv-qtybtn, .v-product .pv-cart { transition:none; }
}
@container site (max-width: 860px) {
  .v-product .pv-panel { align-self:start; }
  .v-product .pv-frame { aspect-ratio:16 / 11; }
}
@container site (max-width: 560px) {
  .v-product .pv-frame { aspect-ratio:4 / 5; }
  .v-product .pv-rail { overflow-x:auto; }
  .v-product .pv-buy { flex-wrap:wrap; }
  .v-product .pv-cart { min-width:60%; }
}
/* portal — ported from SB_04 drafts/portal-hero. A dark "threshold" void: an accent
   glow that leans toward the pointer (transform-only, whenVisible-gated, reduced-motion
   aware in mount), drifting particles, a technical corner frame and a REAL access gate
   that validates a key and OPENS the portal in response. Entrance choreography is
   delegated to the reveal system via ws-chor; only interaction/ambient motion lives here.
   Origin --hero-* vars map to theme tokens; no blur/backdrop-filter; transitions ride
   transform/opacity/color only. Extra specificity (.ws-hero.v-portal) so .ws-hero padding
   can't win. */
.ws-hero.v-portal { position:relative; isolation:isolate; overflow:hidden; text-align:center;
  min-height:clamp(520px, 82vh, 760px); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(72px, 10cqw, 120px) 0; background:color-mix(in srgb, var(--bg) 82%, black); color:var(--ink); }
/* static ambient void tint (no motion) */
.v-portal::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 78% 60% at 50% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
    radial-gradient(ellipse 48% 74% at 18% 84%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%); }
/* cursor-leaning glow (mount translates .pt-glow) + a granted "flood" that fades in on open */
.v-portal .pt-void { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.92;
  transition:opacity 600ms ease; }
.v-portal.pt-open .pt-void { opacity:1; }
.v-portal .pt-glow { position:absolute; left:50%; top:44%; width:min(120%, 900px); aspect-ratio:1 / 1;
  margin:calc(min(120%, 900px) / -2) 0 0 calc(min(120%, 900px) / -2); border-radius:50%; will-change:transform;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); }
.v-portal .pt-flood { position:absolute; left:50%; top:44%; width:min(70%, 520px); aspect-ratio:1 / 1;
  margin:calc(min(70%, 520px) / -2) 0 0 calc(min(70%, 520px) / -2); border-radius:50%; opacity:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%);
  transition:opacity 700ms ease; }
.v-portal.pt-open .pt-flood { opacity:1; }
/* static scanlines + fine grain for the "screen" feel — no animation, no blur */
.v-portal .pt-scan { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 4px); }
.v-portal .pt-grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.34; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)' opacity='0.5'/%3E%3C/svg%3E"); }
/* drifting particles (mount drives transform + opacity; CSS gives a resting value) */
.v-portal .pt-particles { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.v-portal .pt-particle { position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--accent); opacity:.16; will-change:transform, opacity; }
/* technical corner frame */
.v-portal .pt-frame { position:absolute; inset:clamp(1.1rem, 2.6cqw, 2.5rem); z-index:1; pointer-events:none; }
.v-portal .pt-c { position:absolute; width:clamp(1.2rem, 2.4cqw, 2.2rem); height:clamp(1.2rem, 2.4cqw, 2.2rem); }
.v-portal .pt-c::before, .v-portal .pt-c::after { content:''; position:absolute;
  background:color-mix(in srgb, var(--accent) 24%, transparent); }
.v-portal.pt-open .pt-c::before, .v-portal.pt-open .pt-c::after { background:color-mix(in srgb, var(--accent) 55%, transparent); }
.v-portal .pt-c::before { top:0; height:1px; width:100%; }
.v-portal .pt-c::after { width:1px; height:100%; }
.v-portal .pt-c.tl { top:0; left:0; } .v-portal .pt-c.tl::before, .v-portal .pt-c.tl::after { left:0; }
.v-portal .pt-c.tr { top:0; right:0; } .v-portal .pt-c.tr::before, .v-portal .pt-c.tr::after { right:0; }
.v-portal .pt-c.bl { bottom:0; left:0; } .v-portal .pt-c.bl::before { top:auto; bottom:0; } .v-portal .pt-c.bl::after { left:0; }
.v-portal .pt-c.br { bottom:0; right:0; } .v-portal .pt-c.br::before { top:auto; bottom:0; } .v-portal .pt-c.br::after { right:0; }
/* content */
.v-portal .pt-content { position:relative; z-index:2; width:min(720px, 88cqw); }
.v-portal .pt-pre { margin-bottom:18px; }
.v-portal .ws-h1 { text-shadow:0 0 64px color-mix(in srgb, var(--accent) 26%, transparent); }
.v-portal .ws-sub { margin:18px auto 0; max-width:46ch; }
/* access gate — a real threshold: input + submit, validates on submit, opens on a key */
.v-portal .pt-gate { display:inline-flex; align-items:stretch; gap:10px; margin-top:30px; padding:6px;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) + 4px);
  background:color-mix(in srgb, var(--bg) 55%, transparent); transition:opacity 400ms ease; }
.v-portal .pt-gate.err { animation:ptShake 440ms ease; }
@keyframes ptShake { 20% { transform:translateX(-7px); } 45% { transform:translateX(6px); }
  70% { transform:translateX(-4px); } 90% { transform:translateX(2px); } }
.v-portal .pt-key { min-width:0; width:clamp(120px, 30cqw, 220px); border:0; outline:0; background:transparent;
  padding:10px 14px; font:500 13px var(--mono); letter-spacing:2px; color:var(--ink); caret-color:var(--accent); }
.v-portal .pt-key::placeholder { color:var(--faint); letter-spacing:2px; text-transform:lowercase; }
.v-portal .pt-enter { display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:var(--radius, 12px);
  padding:10px 20px; background:color-mix(in srgb, var(--accent) 12%, transparent);
  font:600 11px var(--mono); letter-spacing:3px; text-transform:uppercase; color:var(--accent);
  transition:transform 160ms cubic-bezier(.25, 0, 0, 1), color 160ms linear; }
.v-portal .pt-enter:hover { background:color-mix(in srgb, var(--accent) 20%, transparent);
  border-color:var(--accent); color:var(--ink); transform:scale(1.03); }
.v-portal .pt-enter:active { transform:scale(.98); }
.v-portal .pt-enter:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.v-portal .pt-arrow { width:.5em; height:.5em; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform 200ms ease; }
.v-portal .pt-enter:hover .pt-arrow { transform:rotate(-45deg) translate(2px, 2px); }
.v-portal.pt-open .pt-gate { opacity:.5; }
.v-portal.pt-open .pt-enter { pointer-events:none; }
.v-portal .pt-note { margin:14px 0 0; font:500 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-portal .pt-status { min-height:1.2em; margin:12px 0 0; font:600 11px var(--mono); letter-spacing:2px; text-transform:uppercase; color:transparent; }
.v-portal .pt-status.ok { color:var(--accent); }
.v-portal .pt-status.warn { color:#e5a83a; }
@container site (max-width: 560px) {
  .ws-hero.v-portal { min-height:clamp(440px, 72vh, 640px); }
  .v-portal .pt-gate { flex-direction:column; width:min(280px, 80cqw); }
  .v-portal .pt-key { width:100%; text-align:center; }
  .v-portal .pt-enter { justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .v-portal .pt-gate.err { animation:none; }
  .v-portal .pt-particle { opacity:.16; }
}
/* split-hero — ported from SB_04 drafts/split-hero (bordered pill tag + copy + full-height visual +
   proof stats). Distinct from the native `split` variant: this one carries the origin's pill tag and
   its signature seam-blend, where the visual's inner edge dissolves into the page. Origin --hero-*
   vars -> theme tokens (bg->--bg, text->--ink/--dim/--faint, border->--hair, visual bg->--panel,
   accent->--accent via the ws-badge/ws-btn atoms); baked fade-up/fade-in entrance keyframes dropped
   (anims.js owns section entrances); reuses ws-hpanel/ws-herostats/ws-badge atoms; narrow-stacks on
   the global 860px .ws-hero .ws-in.split rule, where the blend flips from the left edge to the top. */
.v-split-hero .ws-in.split { align-items:stretch; }
.v-split-hero .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-split-hero .ws-badge { align-self:flex-start; }
.v-split-hero .ws-hpanel { position:relative; }
.v-split-hero .shb-blend { position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, var(--bg) 0%, transparent 15%); }
@container site (max-width: 860px) {
  .v-split-hero .shb-blend { background:linear-gradient(180deg, var(--bg) 0%, transparent 16%); }
}
/* split-content — ported from SB_04 drafts/split-content-hero (copy beside an image with a single
   proof stat card pinned to the visual's corner). Distinct from `split`: the proof is one floating
   card overlaid on the image, not an inline stat row. Origin --sch-* vars map to tokens (bg->--bg,
   surface->--panel-2, heading->--ink, body->--dim, border->--hair, accent->--accent); the baked
   entrance keyframes and transition-all are dropped — anims.js owns entrances and the card hover
   rides transform only. Narrow-stacks via the global 860px .ws-hero .ws-in.split rule. */
.v-split-content .ws-in.split { align-items:stretch; }
.v-split-content .ws-hcopy { display:flex; flex-direction:column; justify-content:center; }
.v-split-content .ws-scwrap { position:relative; display:flex; align-items:stretch; }
.v-split-content .ws-hpanel { width:100%; min-height:clamp(340px, 40cqw, 460px); }
.v-split-content .ws-statcard { position:absolute; left:-18px; bottom:-18px; z-index:2;
  display:flex; flex-direction:column; gap:5px; min-width:9.5rem;
  padding:15px 20px; border-radius:var(--radius, 14px);
  background-color:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair);
  box-shadow:var(--elev, 0 14px 34px -16px rgba(0,0,0,.45));
  transition:transform .2s ease; }
.v-split-content .ws-statcard:hover { transform:translateY(-3px); }
.v-split-content .ws-statcard b { font:800 clamp(28px, 3.4cqw, 40px)/1 var(--font-head, var(--font));
  letter-spacing:-0.03em; color:var(--ink); }
.v-split-content .ws-statcard i { font-style:normal; font:500 12px var(--font);
  letter-spacing:.02em; color:var(--dim); }
@container site (max-width: 860px) {
  .v-split-content .ws-statcard { left:16px; bottom:16px; }
}
/* security — SB_04 drafts/security-hero. Compliance hero: centered headline over a
   four-up feature grid (icon frames reuse .ws-fico) and a certification badge row.
   Origin --sec-* vars -> theme tokens; the origin's CSS-drawn icons -> S_ICONS SVGs;
   hairline dividers ride --hair. Container queries only: the grid is tuned for a
   4-up row and narrow-stacks 4 -> 2 -> 1. Hover motion is transform/color only. */
.v-security .ws-kick { margin-bottom:18px; }
.v-security .ws-h1 { max-width:20ch; margin-inline:auto; text-wrap:balance; }
.v-security .ws-sub { max-width:60ch; }
.v-security .sec-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  margin-top:clamp(44px, 5.2cqw, 64px); text-align:left; }
.v-security .sec-feat { display:flex; flex-direction:column; align-items:flex-start;
  gap:13px; padding:2px clamp(20px, 2.4cqw, 32px); border-left:var(--bw, 1px) solid var(--hair); }
.v-security .sec-feat:nth-child(4n+1) { border-left:none; padding-left:0; }
.v-security .sec-feat:nth-child(4n) { padding-right:0; }
.v-security .sec-feat:nth-child(n+5) { border-top:var(--bw, 1px) solid var(--hair);
  margin-top:clamp(28px, 3cqw, 40px); padding-top:clamp(28px, 3cqw, 40px); }
.v-security .sec-feat .ws-fico { width:42px; height:42px; border-radius:11px;
  transition:transform 160ms var(--ease-pop, ease-out); }
.v-security .sec-feat .ws-fico svg { width:20px; height:20px; }
.v-security .sec-feat:hover .ws-fico { transform:translateY(-2px); }
.v-security .sec-feat b { font:600 clamp(14px, 1.5cqw, 15.5px) var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; line-height:1.3; }
.v-security .sec-feat p { margin:0; font:400 clamp(12.5px, 1.3cqw, 13.5px)/1.62 var(--font); color:var(--dim); }
.v-security .sec-trust { display:flex; flex-direction:column; align-items:center; gap:15px;
  margin-top:clamp(44px, 5cqw, 60px); padding-top:clamp(30px, 3.4cqw, 40px); border-top:var(--bw, 1px) solid var(--hair); }
.v-security .sec-trust-label { font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.v-security .sec-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.v-security .sec-badge { padding:5px 12px; border:var(--bw, 1px) solid var(--hair); border-radius:6px;
  font:600 10.5px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
  transition:color 140ms linear, border-color 140ms linear; }
.v-security .sec-badge:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
@container site (max-width: 860px) {
  .v-security .sec-grid { grid-template-columns:1fr 1fr; }
  .v-security .sec-feat { border-left:none; padding-left:clamp(20px, 3cqw, 28px); padding-right:clamp(20px, 3cqw, 28px); }
  .v-security .sec-feat:nth-child(odd) { padding-left:0; }
  .v-security .sec-feat:nth-child(even) { border-left:var(--bw, 1px) solid var(--hair); padding-right:0; }
  .v-security .sec-feat:nth-child(n+3) { border-top:var(--bw, 1px) solid var(--hair);
    margin-top:clamp(24px, 4cqw, 34px); padding-top:clamp(24px, 4cqw, 34px); }
}
@container site (max-width: 560px) {
  .v-security .sec-grid { grid-template-columns:1fr; }
  .v-security .sec-grid .sec-feat { border-left:none; padding-left:0; padding-right:0; }
  .v-security .sec-grid .sec-feat:nth-child(n+2) { border-top:var(--bw, 1px) solid var(--hair);
    margin-top:clamp(24px, 6cqw, 30px); padding-top:clamp(24px, 6cqw, 30px); }
  .v-security .sec-grid .sec-feat:first-child { border-top:none; margin-top:0; padding-top:2px; }
}
/* split-image — ported from SB_04 drafts/split-image-hero (copy beside a full-bleed
   photographic panel). Distinct from native .v-split: a real edge-to-edge image (not a
   contained card), no proof stats, and the image LEADS above the copy on mobile. Origin
   vars mapped to tokens (bg->--bg, heading->--ink, body->--dim, accent->--accent,
   divider->--hair); no baked hex. Baked fade entrance dropped (anims.js owns entrances);
   only the shared .ws-btn hover moves — transform/opacity/color only, no bg transitions.
   Container queries only; narrow-stack rides the global 860px .ws-hero .ws-in.split rule. */
.v-split-image .ws-in.split { grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
.v-split-image .simg-copy { display:flex; flex-direction:column; justify-content:center;
  padding-right:clamp(28px, 4cqw, 56px); }
.v-split-image .simg-copy .ws-h1 { max-width:15ch; text-wrap:balance; }
.v-split-image .simg-copy .ws-ctarow { margin-top:clamp(22px, 3cqw, 34px); }
.v-split-image .simg-media { align-self:stretch; min-height:clamp(360px, 46cqw, 560px);
  border:none; border-left:var(--bw, 1px) solid var(--hair); border-radius:0; box-shadow:none; }
@container site (max-width: 860px) {
  .v-split-image .simg-copy { padding-right:0; }
  .v-split-image .simg-media { order:-1; min-height:clamp(220px, 52cqw, 320px); border-left:none; }
}
/* stats-ticker — ported from SB_04 drafts/stats-ticker-hero (centered pitch over a
   full-bleed proof-stat marquee). The strip is JS-driven (mount + whenVisible): it
   rides transform only, pauses off-screen and on hover, and honours reduced-motion
   (static, readable strip). Copy reuses ws-kick/ws-h1+ws-grad/ws-sub/ws-ctarow.
   Origin --sth-* vars map to tokens; edge fade is an alpha mask so it works on any
   panel. Extra specificity (.ws-hero.v-stats-ticker) so narrow-container padding
   on .ws-hero can't win. */
.ws-hero.v-stats-ticker { padding:clamp(72px, 11cqw, 116px) 0 0; overflow:hidden; }
.v-stats-ticker .ws-in.center { margin-bottom:clamp(56px, 8cqw, 92px); }
.v-stats-ticker .stkr-marq { position:relative; width:100%; overflow:hidden;
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); background:var(--panel);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 84px, #000 calc(100% - 84px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 84px, #000 calc(100% - 84px), transparent); }
.v-stats-ticker .stkr-track { display:flex; width:max-content; will-change:transform; }
.v-stats-ticker .stkr-group { display:flex; align-items:center; }
.v-stats-ticker .stkr-stat { display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:22px clamp(26px, 4cqw, 52px); white-space:nowrap; }
.v-stats-ticker .stkr-stat b { font:700 clamp(19px, 2.4cqw, 26px)/1 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.02em; transition:color .15s ease; }
.v-stats-ticker .stkr-stat i { font:500 11px var(--mono); color:var(--dim); font-style:normal;
  text-transform:uppercase; letter-spacing:0.09em; }
.v-stats-ticker .stkr-stat:hover b { color:var(--accent); }
.v-stats-ticker .stkr-div { flex:none; width:1px; height:34px; background:var(--hair); }
@container site (max-width: 560px) {
  .v-stats-ticker .stkr-stat { padding:18px clamp(22px, 6cqw, 34px); }
  .v-stats-ticker .stkr-div { height:30px; }
}
/* support — ported from SB_04 drafts/support-hero (help-centre opener: headline, a live
   knowledge-base search, a category grid and a support-channel row). The origin's static search
   is made real: it filters the category tiles by title AND keyword tags with an aria-live count +
   empty state; category tiles quick-fill the search; channels stay as the always-visible contact
   fallback. Origin --suh-* vars map to theme tokens; the flush 1px hairline grids become bordered
   tiles so filtering reflows cleanly. Motion is interaction only (color/transform); the entrance
   belongs to the site's reveal system (anims.js). */
.v-support .sup-in { display:flex; flex-direction:column; align-items:center; gap:clamp(26px, 3.6cqw, 42px); }
.v-support .sup-head { max-width:640px; display:flex; flex-direction:column; gap:14px; }
.v-support .sup-head > * { margin:0; }
/* search — leading magnifier + live input + clear + accent submit */
.v-support .sup-search { width:100%; max-width:640px; }
.v-support .sup-sfield { display:flex; align-items:center; gap:10px; padding:6px 6px 6px 16px;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  transition:border-color .16s linear; }
.v-support .sup-sfield:focus-within { border-color:var(--accent); }
.v-support .sup-sicon { flex:none; width:18px; height:18px; color:var(--faint); }
.v-support .sup-sinput { flex:1; min-width:0; background:transparent; border:0; outline:none;
  padding:8px 0; font:400 clamp(14px, 1.6cqw, 15.5px) var(--font); color:var(--ink); text-align:left; }
.v-support .sup-sinput::placeholder { color:var(--faint); }
.v-support .sup-sinput::-webkit-search-cancel-button { display:none; }
.v-support .sup-sclear { flex:none; display:none; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent;
  color:var(--dim); cursor:pointer; transition:color .16s linear; }
.v-support .sup-sclear svg { width:15px; height:15px; }
.v-support .sup-sclear.show { display:inline-flex; }
.v-support .sup-sclear:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-support .sup-sclear:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-support .sup-sbtn { flex:none; cursor:pointer; border:0; border-radius:calc(var(--radius, 12px) - 4px);
  padding:10px 20px; background:var(--accent); color:var(--accent-text, #fff);
  font:600 clamp(13px, 1.5cqw, 14px) var(--font); white-space:nowrap; transition:opacity .16s linear; }
.v-support .sup-sbtn:hover { opacity:.9; }
.v-support .sup-sbtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* results group — tiles + empty state + live count, tucked close together */
.v-support .sup-results { width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
/* category tiles — a data-driven, search-filterable grid */
.v-support .sup-cats { width:100%; max-width:960px; display:grid; grid-template-columns:repeat(4, 1fr);
  gap:12px; text-align:left; }
.v-support .sup-cat { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0;
  padding:clamp(18px, 2cqw, 26px); cursor:pointer; text-align:left; font:inherit;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  transition:border-color .16s linear, transform .16s ease; }
.v-support .sup-cat[hidden] { display:none; }
.v-support .sup-cat:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); transform:translateY(-2px); }
.v-support .sup-cat:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-support .sup-cicon { display:flex; align-items:center; margin-bottom:6px; color:var(--accent); }
.v-support .sup-cicon svg { width:22px; height:22px; }
.v-support .sup-ctitle { font:600 clamp(14px, 1.6cqw, 15px) var(--font); color:var(--ink);
  letter-spacing:-0.01em; transition:color .16s linear; }
.v-support .sup-cat:hover .sup-ctitle { color:var(--accent); }
.v-support .sup-ccount { font:400 12px var(--font); color:var(--dim); }
/* empty state + live count */
.v-support .sup-empty { margin:0; width:100%; max-width:960px; padding:clamp(24px, 4cqw, 40px); text-align:center;
  font:500 14px var(--font); color:var(--dim); border:var(--bw, 1px) dashed var(--hair); border-radius:var(--radius, 12px); }
.v-support .sup-empty[hidden] { display:none; }
.v-support .sup-status { min-height:1.3em; margin:0; font:500 12px var(--font); color:var(--faint); text-align:center; }
/* support channels — always-visible contact fallback */
.v-support .sup-channels { width:100%; max-width:960px; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; text-align:left; }
.v-support .sup-ch { display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:clamp(18px, 2cqw, 24px); background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); }
.v-support .sup-chicon { display:flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px;
  border-radius:10px; background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--accent); }
.v-support .sup-chicon svg { width:20px; height:20px; }
.v-support .sup-chtitle { font:600 clamp(13.5px, 1.5cqw, 14.5px) var(--font); color:var(--ink); }
.v-support .sup-chnote { font:400 12.5px var(--font); color:var(--dim); }
@container site (max-width: 860px) {
  .v-support .sup-cats { grid-template-columns:repeat(2, 1fr); }
  .v-support .sup-channels { grid-template-columns:1fr; }
}
@container site (max-width: 560px) {
  .v-support .sup-cats { grid-template-columns:repeat(2, 1fr); }
  .v-support .sup-sbtn { padding:10px 14px; }
}
/* shop — ported from SB_04 drafts/shop-hero (the editorial collection / category opener: a headline
   with an item count, a row of category filter chips and a borderless product grid — image, name, price).
   Origin --shh-* vars map to theme tokens (bg -> section default, heading -> --ink, body -> --dim/--faint,
   border -> --hair, accent -> --accent, radius -> --radius, fonts -> --font/--mono). The origin's chips only
   toggled an active class and its quick-add was a decorative aria-hidden bar; the port makes both REAL via
   mount() (chips narrow the grid + relabel the live count; quick-add toggles into the header bag). Entrances
   belong to anims.js; only transform/opacity/color transition, never a background. Prefix shp-; scoped
   under .ws-hero.v-shop. */
.ws-hero.v-shop .ws-h1 { font-size:clamp(30px, 4.6cqw, 52px); }
.ws-hero.v-shop .shp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ws-hero.v-shop .shp-head-l { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ws-hero.v-shop .shp-titles { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.ws-hero.v-shop .shp-count { font:500 13px var(--font); color:var(--dim); letter-spacing:.02em; white-space:nowrap; }
.ws-hero.v-shop .shp-sub { margin-top:14px; max-width:54ch; }
.ws-hero.v-shop .shp-bag { flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; padding:9px 15px;
  border:var(--bw, 1px) solid var(--hair); border-radius:999px; color:var(--dim); font:600 12.5px var(--font); }
.ws-hero.v-shop .shp-bag svg { width:17px; height:17px; display:block; }
.ws-hero.v-shop .shp-bagn { color:var(--ink); font-weight:700; min-width:1ch; text-align:center; }
/* category filter chips — inverted-ink active pill (theme-safe, faithful to the origin) */
.ws-hero.v-shop .shp-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(22px, 3cqw, 34px); }
.ws-hero.v-shop .shp-chip { appearance:none; -webkit-appearance:none; cursor:pointer; font:600 12.5px var(--font);
  color:var(--dim); background:transparent; border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:7px 15px;
  transition:color .18s ease, border-color .18s ease; }
.ws-hero.v-shop .shp-chip:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 42%, var(--hair)); }
.ws-hero.v-shop .shp-chip.is-on { color:var(--bg); background:var(--ink); border-color:var(--ink); }
.ws-hero.v-shop .shp-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* borderless product grid */
.ws-hero.v-shop .shp-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(22px, 2.8cqw, 36px) clamp(16px, 2cqw, 26px); margin-top:clamp(26px, 3.4cqw, 44px); }
.ws-hero.v-shop .shp-card { display:flex; flex-direction:column; min-width:0; }
.ws-hero.v-shop .shp-card.is-hidden { display:none; }
.ws-hero.v-shop .shp-media { position:relative; width:100%; aspect-ratio:3 / 4; overflow:hidden;
  border-radius:var(--radius, 10px); margin-bottom:12px; background:var(--panel-2, var(--panel)); }
.ws-hero.v-shop .shp-img { position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .35s ease; }
.ws-hero.v-shop .shp-card:hover .shp-img:not(.ph) { transform:scale(1.03); }
.ws-hero.v-shop .shp-img.ph { display:flex; align-items:center; justify-content:center; color:var(--faint); }
.ws-hero.v-shop .shp-phg svg { width:34px; height:34px; display:block; opacity:.6; }
/* quick-add — a real toggle: revealed on hover/focus, persistent once added */
.ws-hero.v-shop .shp-qadd { position:absolute; left:0; right:0; bottom:0; appearance:none; -webkit-appearance:none;
  cursor:pointer; border:0; border-top:var(--bw, 1px) solid var(--hair); padding:10px; text-align:center; color:var(--ink);
  font:600 12px var(--font); letter-spacing:.03em; background:color-mix(in srgb, var(--panel) 90%, transparent);
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .22s ease, transform .22s ease; }
.ws-hero.v-shop .shp-card:hover .shp-qadd,
.ws-hero.v-shop .shp-card:focus-within .shp-qadd,
.ws-hero.v-shop .shp-card.is-added .shp-qadd { opacity:1; transform:none; pointer-events:auto; }
.ws-hero.v-shop .shp-qadd[aria-pressed="true"] { background:var(--accent); color:var(--accent-text, var(--bg)); border-top-color:transparent; }
.ws-hero.v-shop .shp-qadd:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.ws-hero.v-shop .shp-name { margin:0 0 3px; font:500 14px var(--font); color:var(--ink); line-height:1.4; }
.ws-hero.v-shop .shp-price { margin:0; font:600 13.5px var(--font); color:var(--dim); }
.ws-hero.v-shop .shp-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@container site (max-width: 860px) {
  .ws-hero.v-shop .shp-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@container site (max-width: 360px) {
  .ws-hero.v-shop .shp-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-hero.v-shop .shp-img, .ws-hero.v-shop .shp-qadd { transition:none; }
}
/* typewriter-hero (SB) — fixed prefix + JS-cycled typed phrases with a blinking accent caret.
   Look-alike of the native `typewriter` (single-shot CSS type); this one type/deletes a loop. Flagged for merge. */
.v-typewriter-hero .twh-headline { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.12em .3em; }
.v-typewriter-hero .twh-prefix { color:var(--ink); white-space:nowrap; }
.v-typewriter-hero .twh-typed-wrap { display:inline-block; text-align:left; min-width:6ch; }
.v-typewriter-hero .twh-typed { color:var(--accent); white-space:nowrap; border-right:3px solid var(--accent);
  padding-right:2px; animation:twhBlink 1s steps(1) infinite; }
.v-typewriter-hero .ws-a11y { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@keyframes twhBlink { 0%,100% { border-right-color:var(--accent); } 50% { border-right-color:transparent; } }
@container site (max-width: 560px) {
  .v-typewriter-hero .twh-headline { flex-direction:column; align-items:center; gap:.08em; }
  .v-typewriter-hero .twh-typed-wrap { min-width:0; text-align:center; }
}
@media (prefers-reduced-motion: reduce) {
  .v-typewriter-hero .twh-typed { border-right-color:transparent; animation:none; }
}
/* ticker-hero — ported from SB_04 drafts/ticker-hero (marquee word-bands frame a static center message).
   Distinct from `ticker`: the marquee is JS-driven (mount(): whenVisible + transform, so it pauses off-screen
   and never runs on a hidden section) and the eyebrow is a monospace bordered tag (the origin's .ticker-hero__tag).
   Entrance motion belongs to the site's reveal system. Extra specificity (.ws-hero.v-ticker-hero) so the
   narrow-container padding on .ws-hero can't win. Own ws-th* class family — no overlap with `ticker`'s ws-tk*. */
.ws-hero.v-ticker-hero { padding:0; overflow:hidden; }
.v-ticker-hero .ws-thband { width:100%; overflow:hidden; white-space:nowrap;
  border-block:var(--bw, 1px) solid var(--hair); padding:14px 0; }
.v-ticker-hero .ws-thband + .ws-thband { border-top:none; }
.v-ticker-hero .ws-thtrack { display:inline-flex; align-items:center; will-change:transform; }
.v-ticker-hero .ws-thitem { display:inline-flex; align-items:center; gap:22px; padding:0 22px; flex-shrink:0;
  user-select:none; text-transform:uppercase; letter-spacing:-0.02em; line-height:1;
  font:900 clamp(48px, 9cqw, 116px) var(--font-head, var(--font));
  color:color-mix(in srgb, var(--ink) 8%, transparent); }
.v-ticker-hero .ws-thitem.on { color:color-mix(in srgb, var(--accent) 22%, transparent); }
.v-ticker-hero .ws-thband.lg { padding:20px 0; }
.v-ticker-hero .ws-thband.sm .ws-thitem { font-size:clamp(26px, 5cqw, 68px);
  font-weight:700; letter-spacing:0.02em; }
.v-ticker-hero .ws-thdot { width:9px; height:9px; border-radius:99px; flex-shrink:0;
  background:color-mix(in srgb, var(--ink) 10%, transparent); }
.v-ticker-hero .ws-thitem.on .ws-thdot { background:var(--accent); opacity:.55; }
.v-ticker-hero .ws-thbody { padding:clamp(52px, 9cqw, 104px) 24px; text-align:center; }
.v-ticker-hero .ws-thtag { display:inline-block; margin-bottom:20px; padding:6px 16px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  font:600 11px var(--mono); letter-spacing:2.4px; text-transform:uppercase; color:var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .v-ticker-hero .ws-thtrack { transform:none !important; }
}
/* stats — ported from SB_04 drafts/stats-hero (copy + 2x2 metric grid with trend badges).
   Origin --sh-* vars -> theme tokens; the grid's hairline separators ride --hair over --panel
   cells so it themes both ways; baked entrance keyframes dropped (anims.js owns section reveals)
   and reborn as an on-view count-up in mount(); up/down trend hues stay semantic (--ok/--bad).
   Split narrow-stacks via the global 860px rule (.ws-hero .ws-in.split); the 2x2 collapses to a
   single column under 560px. */
.v-stats .ws-hcopy { min-width:0; }
.v-stats .sh-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; min-width:0;
  background:var(--hair); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); overflow:hidden; }
.v-stats .sh-cell { display:flex; flex-direction:column; gap:7px; min-width:0;
  background:var(--panel); padding:clamp(20px, 2.8cqw, 34px) clamp(18px, 2.4cqw, 30px); }
.v-stats .sh-num { font:800 clamp(34px, 5.2cqw, 58px)/1 var(--font-head, var(--font));
  letter-spacing:-0.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
.v-stats .sh-trend { display:inline-flex; align-items:center; gap:4px; width:fit-content;
  font:600 11px/1 var(--font); letter-spacing:0.05em; text-transform:uppercase; }
.v-stats .sh-trend::before { font-size:0.85em; }
.v-stats .sh-trend.up { color:var(--ok, #22c55e); }
.v-stats .sh-trend.up::before { content:'\2191'; }
.v-stats .sh-trend.down { color:var(--bad, #ef4444); }
.v-stats .sh-trend.down::before { content:'\2193'; }
.v-stats .sh-trend.flat { color:var(--dim); }
.v-stats .sh-trend.flat::before { content:'\2192'; }
.v-stats .sh-label { margin-top:2px; font:400 13px/1.4 var(--font); color:var(--dim); }
@container site (max-width: 560px) {
  .v-stats .sh-grid { grid-template-columns:1fr; }
}
/* showcase — ported from SB_04 drafts/showcase-hero (premium product hero: copy + a social-proof
   avatar row beside a tilted product frame ringed with four floating stat chips at its corners).
   Reuses ws-in.split (the global 860px rule stacks it), ws-hcopy / ws-h1+gradLast / ws-sub /
   ws-ctarow + btn(), and the browserMock atom for the frame. Origin --sh-* vars -> theme tokens;
   the glass stat chips drop backdrop-filter (house rule) for a translucent panel color-mix +
   hairline border; baked sh-fade-up / sh-scale-in entrance keyframes dropped (anims.js owns
   section entrances) — only the frame's hover-flatten tilt moves, and it rides transform alone. */
.v-showcase .ws-in.split { align-items:center; gap:clamp(40px, 5.5cqw, 80px); }
.v-showcase .ws-hcopy { display:flex; flex-direction:column; }
.v-showcase .ws-sub { margin-top:18px; }
/* social-proof row — overlapping avatar stack + trust line */
.v-showcase .sho-proof { display:flex; align-items:center; gap:13px; margin-top:26px; flex-wrap:wrap; }
.v-showcase .sho-avs { display:inline-flex; }
.v-showcase .sho-av { width:30px; height:30px; border-radius:50%; margin-left:-8px; flex:none;
  display:inline-grid; place-items:center; font:600 11px var(--font);
  color:var(--accent-text, #04121a); background:var(--accent); border:2px solid var(--bg); }
.v-showcase .sho-av:first-child { margin-left:0; }
.v-showcase .sho-av.a1 { background:color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.v-showcase .sho-av.a2 { background:color-mix(in srgb, var(--accent) 55%, var(--panel)); color:var(--ink); }
.v-showcase .sho-av.a3 { background:color-mix(in srgb, var(--accent2, var(--accent)) 72%, var(--panel)); }
.v-showcase .sho-av.a4 { background:var(--accent); }
.v-showcase .sho-proof-t { font:500 13px/1.4 var(--font); color:var(--dim); }
/* the stage — product frame (browserMock) + floating chips */
.v-showcase .sho-stage { position:relative; }
.v-showcase .sho-frame { position:relative; z-index:1; }
.v-showcase .sho-frame::before { content:''; position:absolute; inset:-8% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 54% at 62% 40%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%); }
.v-showcase .sho-frame .ws-browser { transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);
  transition:transform .6s ease-out;
  box-shadow:0 30px 80px -22px rgba(0,0,0,.5), 0 0 60px -26px color-mix(in srgb, var(--accent) 55%, transparent); }
.v-showcase .sho-frame:hover .ws-browser { transform:perspective(1200px) rotateY(0deg) rotateX(0deg); }
.v-showcase .sho-stat { position:absolute; z-index:3; display:flex; flex-direction:column; gap:3px;
  padding:11px 15px; border-radius:var(--radius, 12px); white-space:nowrap;
  background:color-mix(in srgb, var(--panel) 84%, transparent); border:var(--bw, 1px) solid var(--hair);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.55); }
.v-showcase .sho-ico { display:inline-flex; color:var(--accent); }
.v-showcase .sho-ico svg { width:14px; height:14px; }
.v-showcase .sho-n { font:800 20px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; line-height:1; }
.v-showcase .sho-l { font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-style:normal; }
.v-showcase .sho-stat.tl { top:-18px; left:-20px; }
.v-showcase .sho-stat.tr { top:34px; right:-24px; }
.v-showcase .sho-stat.bl { bottom:44px; left:-24px; }
.v-showcase .sho-stat.br { bottom:-18px; right:-18px; }
@container site (max-width: 860px) {
  .v-showcase .sho-stage { margin:8px 22px 0; }
  .v-showcase .sho-frame .ws-browser,
  .v-showcase .sho-frame:hover .ws-browser { transform:none; }
  .v-showcase .sho-stat.tl { top:-14px; left:-14px; }
  .v-showcase .sho-stat.tr { top:20px; right:-14px; }
  .v-showcase .sho-stat.bl { bottom:24px; left:-14px; }
  .v-showcase .sho-stat.br { bottom:-14px; right:-14px; }
}
@container site (max-width: 560px) {
  .v-showcase .sho-stat.tr, .v-showcase .sho-stat.bl { display:none; }
  .v-showcase .sho-stat { padding:9px 12px; }
  .v-showcase .sho-n { font-size:17px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-showcase .sho-frame .ws-browser,
  .v-showcase .sho-frame:hover .ws-browser { transform:none; }
}
/* testimonial-video — ported from SB_04 drafts/testimonial-video-hero (a featured video
   testimonial: playable portrait/poster on the left, pull-quote + customer on the right with
   a divider). The origin play button was inert; here it drives a REAL <video> — click reveals
   native controls and calls play() (rejection caught for the no-source/headless path). Vars
   mapped to tokens (bg->--bg via section, accent->--accent, text->--ink/--dim, divider->--hair).
   Split narrow-stacks via the global 860px rule; entrance motion belongs to anims.js. */
.v-testimonial-video .ws-in.split { grid-template-columns:1.5fr 1fr; align-items:center; }
.v-testimonial-video .tv-videocol { min-width:0; }
.v-testimonial-video .tv-frame { position:relative; aspect-ratio:16 / 10; overflow:hidden;
  border-radius:var(--radius, 14px); border:var(--bw, 1px) solid var(--hair); background:var(--panel); }
.v-testimonial-video .tv-video { width:100%; height:100%; object-fit:cover; display:block;
  background:var(--panel); }
.v-testimonial-video .tv-frame.ph::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(64% 58% at 50% 42%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); }
/* play — a real control; only transform transitions, hover bg is set instantly */
.v-testimonial-video .tv-play { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:72px; height:72px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-text, #fff); background:var(--accent); transition:transform 160ms ease; }
.v-testimonial-video .tv-play svg { width:26px; height:26px; margin-left:3px; }
.v-testimonial-video .tv-play:hover { transform:translate(-50%, -50%) scale(1.08);
  background:color-mix(in srgb, var(--accent) 84%, #000); }
.v-testimonial-video .tv-frame.playing .tv-play { display:none; }
.v-testimonial-video .tv-frame.playing::after { display:none; }
/* copy column */
.v-testimonial-video .tv-copy { min-width:0; display:flex; flex-direction:column; gap:1.5rem;
  padding-left:clamp(2rem, 4cqw, 4rem); border-left:var(--bw, 1px) solid var(--hair); }
.v-testimonial-video .tv-mark { display:block; color:var(--accent);
  font:700 clamp(4rem, 8cqw, 6rem)/0.8 var(--font-head, var(--font)); }
.v-testimonial-video .tv-quote { margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:1rem; }
.v-testimonial-video .tv-line { margin:0; color:var(--ink); font:400 clamp(1rem, 1.4cqw, 1.2rem)/1.7 var(--font); }
.v-testimonial-video .tv-line.sub { color:var(--dim); }
.v-testimonial-video .tv-cust { display:flex; flex-direction:column; gap:0.25rem;
  padding-top:1rem; border-top:var(--bw, 1px) solid var(--hair); }
.v-testimonial-video .tv-name { color:var(--ink); font:600 0.95rem var(--font); letter-spacing:0.01em; }
.v-testimonial-video .tv-role { color:var(--dim); font:400 0.85rem var(--font); }
.v-testimonial-video .tv-company { color:var(--accent); font:700 0.7rem var(--font);
  letter-spacing:0.18em; text-transform:uppercase; }
@container site (max-width: 860px) {
  .v-testimonial-video .ws-in.split { grid-template-columns:1fr; }
  .v-testimonial-video .tv-copy { padding-left:0; border-left:0; }
}
/* trial — ported from SB_04 drafts/trial-hero (centered free-trial fold: eyebrow, headline, sub,
   inline email capture, reassurance checklist, avatar social proof). Origin --trh-* vars -> theme
   tokens; the flat #0a0a0a bg becomes a subtle ambient accent glow (static, no bg transition). The
   email form is REAL — the mount validates and confirms inline, and persists the address to the
   site's `trials` collection when services exist. Reuses ws-in.center + ws-kick + ws-h1/ws-grad +
   ws-sub; the segmented input+button rides the same pill-that-stacks pattern as countdown; the error
   hue reuses the house #e5484d semantic red. Container queries only, no viewport media. */
.ws-hero.v-trial { position:relative; isolation:isolate; overflow:hidden; }
.v-trial .trl-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 64% 48% at 50% 6%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%),
    radial-gradient(ellipse 50% 40% at 50% 72%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 62%); }
.v-trial .trl-wrap { position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:clamp(15px, 2.1cqw, 22px); }
.v-trial .trl-h { max-width:16ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-trial .trl-desc { max-width:48ch; }
.v-trial .trl-form { display:flex; width:min(470px, 100%); margin-top:clamp(6px, 1.2cqw, 12px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55); overflow:hidden;
  transition:border-color 160ms linear; }
.v-trial .trl-form:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-trial .trl-input { flex:1; min-width:0; padding:13px 16px; border:none; outline:none;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:400 14px var(--font); }
.v-trial .trl-input::placeholder { color:var(--faint); }
.v-trial .trl-btn { flex:none; padding:13px 24px; border:none; cursor:pointer; white-space:nowrap;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:600 13px var(--font); letter-spacing:.01em;
  transition:opacity 140ms linear; }
.v-trial .trl-btn:hover { opacity:.9; }
.v-trial .trl-btn:active { opacity:.82; }
.v-trial .trl-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-trial .trl-note { min-height:1.25em; margin:0; font:500 12.5px var(--font); color:var(--dim); }
.v-trial .trl-note.trl-ok { color:var(--accent); }
.v-trial .trl-note.trl-err { color:#e5484d; }
.v-trial .trl-perks { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:12px 22px; margin:2px 0 0; padding:0; list-style:none; }
.v-trial .trl-perk { display:inline-flex; align-items:center; gap:8px; font:500 13px var(--font); color:var(--dim); }
.v-trial .trl-perk svg { flex:none; width:17px; height:17px; padding:3px; border-radius:50%;
  color:var(--accent); background:var(--accent-fill); }
.v-trial .trl-proof { display:flex; flex-direction:column; align-items:center; gap:11px;
  width:min(470px, 100%); margin-top:clamp(8px, 1.4cqw, 16px);
  padding-top:clamp(16px, 2cqw, 22px); border-top:var(--bw, 1px) solid var(--hair); }
.v-trial .trl-avatars { display:inline-flex; align-items:center; }
.v-trial .trl-av { width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center;
  font:700 12px var(--font); color:var(--accent); background:var(--accent-fill);
  border:2px solid var(--bg); margin-left:-9px; }
.v-trial .trl-av:first-child { margin-left:0; }
.v-trial .trl-prooftext { margin:0; font:400 13.5px var(--font); color:var(--dim); }
.v-trial .trl-prooftext strong { color:var(--ink); font-weight:700; }
@container site (max-width: 560px) {
  .v-trial .trl-form { flex-direction:column; border:none; overflow:visible; gap:10px;
    width:100%; max-width:380px; }
  .v-trial .trl-input { border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5); }
  .v-trial .trl-btn { width:100%; border-radius:calc(var(--radius, 12px) * .5); }
  .v-trial .trl-perks { gap:10px 16px; }
}
/* technical — ported from SB_04 drafts/technical-hero (terminal/console opener: an engineering-blueprint
   grid, a faint CRT scanline + vignette, a mono prompt line with a blinking caret, and a bordered
   live-data readout). Origin --hero-* vars -> theme tokens: bg->--bg, text->--ink, secondary->--dim/
   --faint, border+grid->--hair, accent->--accent, fonts->--mono. Baked fade-up/fade-in entrance
   keyframes are dropped (anims.js owns section entrances); the only motion at rest is the signature
   caret blink (prefers-reduced-motion stops it), the way the ticker/abstract ports keep their signature
   motion. No blur/backdrop-filter; nothing transitions a background. On a light theme the tokenised grid
   simply becomes the origin's "light blueprint" palette. The readout drops 4->2 columns under 560px. */
.v-technical { position:relative; overflow:hidden; isolation:isolate; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(440px, 68cqh, 680px); font-family:var(--mono); }
.v-technical .ws-in { position:relative; z-index:1; width:min(860px, 90cqw); }
/* atmosphere layers */
.ws-techgrid, .ws-techscan, .ws-techvig { position:absolute; inset:0; z-index:0; pointer-events:none; }
.ws-techgrid::before, .ws-techgrid::after { content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--tgl) 1px, transparent 1px),
    linear-gradient(90deg, var(--tgl) 1px, transparent 1px); }
.ws-techgrid::before { --tgl:color-mix(in srgb, var(--hair) 72%, transparent); background-size:60px 60px; }
.ws-techgrid::after  { --tgl:color-mix(in srgb, var(--hair) 32%, transparent); background-size:12px 12px; }
.ws-techscan { background:repeating-linear-gradient(0deg, transparent 0 2px,
  color-mix(in srgb, var(--ink) 7%, transparent) 2px 4px); }
.ws-techvig { background:radial-gradient(ellipse 64% 60% at 50% 46%, transparent 42%,
  color-mix(in srgb, var(--bg) 82%, transparent) 100%); }
/* prompt line + signature caret blink */
.ws-techprompt { display:block; font:600 11px/1 var(--mono); letter-spacing:0.14em;
  color:var(--accent); margin-bottom:18px; }
.ws-techprompt::before { content:'> '; color:var(--faint); }
.v-technical .ws-caret { animation:wsTechBlink 1.05s step-end infinite; }
@keyframes wsTechBlink { 0%, 100% { opacity:1; } 50% { opacity:0; } }
/* headline + comment body */
.v-technical .ws-h1 { font-family:var(--mono); font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(26px, 5.2cqw, 50px); line-height:1.16; }
.ws-techcomment { font-family:var(--mono); font-size:clamp(13px, 1.5cqw, 15px); line-height:1.7;
  color:var(--dim); max-width:48ch; margin-top:20px; }
.ws-techcomment::before { content:'// '; color:color-mix(in srgb, var(--faint) 70%, transparent); }
.v-technical .ws-ctarow { margin-top:30px; }
/* data readout */
.ws-techout { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; margin-top:44px;
  max-width:640px; background:var(--hair); border:var(--bw, 1px) solid var(--hair); }
.ws-techri { display:flex; flex-direction:column; gap:8px; padding:15px 18px; background:var(--bg); }
.ws-techrl { font:400 10px var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.ws-techrv { font:700 clamp(15px, 1.9cqw, 19px) var(--mono); letter-spacing:-0.01em;
  color:var(--ink); line-height:1.1; }
.ws-techrv.on { color:var(--accent); }
@container site (max-width: 560px) {
  .ws-techout { grid-template-columns:repeat(2, 1fr); max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-technical .ws-caret { animation:none; }
}
/* team — meet-the-team opener ported from SB_04 team-hero: a left-set header over a
   divided row of member cards. Circular monogram portraits (accent fill) with an
   optional per-member image. Column dividers are the design signature. Entrance
   motion dropped (anims.js owns section reveals); tokens replace the origin's --tmh-*. */
.v-team .ws-in { display:flex; flex-direction:column; gap:56px; }
.v-team .tm-head { display:flex; flex-direction:column; max-width:52ch; }
.v-team .tm-head .ws-kick { margin-bottom:16px; }
.v-team .tm-head .ws-sub { margin-top:18px; max-width:56ch; }
.v-team .tm-grid { display:grid; grid-template-columns:repeat(4, 1fr); }
.v-team .tm-member { display:flex; flex-direction:column; padding:4px 30px;
  border-left:var(--bw, 1px) solid var(--hair); min-width:0; }
.v-team .tm-member:first-child { padding-left:0; border-left:0; }
.v-team .tm-face { display:grid; place-items:center; width:72px; height:72px; border-radius:50%;
  margin-bottom:22px; overflow:hidden; flex-shrink:0;
  font:800 22px var(--font-head, var(--font)); color:var(--accent-text, #04121a);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); }
.v-team .tm-face.img { background-size:cover; background-position:center; color:transparent; }
.v-team .tm-face.p1 { opacity:.92; }
.v-team .tm-face.p2 { opacity:.84; }
.v-team .tm-face.p3 { opacity:.9; }
.v-team .tm-name { font:600 16px var(--font); color:var(--ink); margin-bottom:5px; }
.v-team .tm-role { font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-style:normal; margin-bottom:12px; }
.v-team .tm-bio { margin:0; font:400 13.5px/1.6 var(--font); color:var(--dim); max-width:34ch; }
.v-team .tm-cta { margin-top:8px; justify-content:center; }
@container site (max-width: 860px) {
  .v-team .tm-grid { grid-template-columns:1fr 1fr; gap:36px 0; }
  .v-team .tm-member { padding:0 26px; }
  .v-team .tm-member:nth-child(odd) { padding-left:0; border-left:0; }
  .v-team .tm-member:nth-child(even) { border-left:var(--bw, 1px) solid var(--hair); }
  .v-team .tm-member:nth-child(n+3) { padding-top:36px; border-top:var(--bw, 1px) solid var(--hair); }
}
@container site (max-width: 560px) {
  .v-team .ws-in { gap:40px; }
  .v-team .tm-grid { grid-template-columns:1fr; gap:0; }
  .v-team .tm-member { padding:0 0 30px !important; border-left:0 !important; border-top:0 !important;
    border-bottom:var(--bw, 1px) solid var(--hair); }
  .v-team .tm-member + .tm-member { padding-top:30px !important; }
  .v-team .tm-member:last-child { border-bottom:0; padding-bottom:0 !important; }
  .v-team .tm-bio { max-width:52ch; }
}
/* steps — ported from SB_04 drafts/steps-hero: a numbered how-it-works path.
   Origin --sth2-* vars -> theme tokens (bg/panel/ink/dim/hair/accent); the accent
   destination node rides --accent so it themes with the brand; the origin's baked
   media-query layout becomes container queries and the static diagram is made real
   — the nodes are <button>s and mount() turns the row into a click / arrow-key
   progress walk that lights nodes and fills the connector up to the step you pick.
   No background/blur transitions; only transform/opacity/color move. */
.v-steps .ws-shead { margin-bottom:0; }
.v-steps .ws-steps { list-style:none; margin:clamp(40px,5.5cqw,60px) 0 clamp(38px,5cqw,54px); padding:0;
  display:flex; align-items:flex-start; gap:clamp(12px,2.6cqw,40px); }
.v-steps .ws-step { position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; text-align:center; }
/* connector — every step but the last reaches to the next node (drawn behind the
   nodes; each node's --bg halo masks the crossing). ::before = dashed base,
   ::after = accent fill that grows when the step is marked done. */
.v-steps .ws-step:not(:last-child)::before,
.v-steps .ws-step:not(:last-child)::after {
  content:''; position:absolute; top:clamp(26px,3.5cqw,32px); left:50%;
  width:calc(100% + clamp(12px,2.6cqw,40px)); transform:translateY(-50%); z-index:0; pointer-events:none; }
.v-steps .ws-step:not(:last-child)::before { border-top:1px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.v-steps .ws-step:not(:last-child)::after { border-top:2px solid var(--accent);
  transform:translateY(-50%) scaleX(0); transform-origin:left center;
  transition:transform 440ms cubic-bezier(.5,0,0,1); }
.v-steps .ws-step.fill::after { transform:translateY(-50%) scaleX(1); }
/* node */
.v-steps .ws-stepnode { position:relative; z-index:1; width:clamp(52px,7cqw,64px); height:clamp(52px,7cqw,64px);
  border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); box-shadow:0 0 0 5px var(--bg);
  transition:transform 160ms cubic-bezier(.25,0,0,1); }
.v-steps .ws-stepnode:hover { transform:translateY(-2px); }
.v-steps .ws-stepnode:active { transform:scale(.96); }
.v-steps .ws-stepnode:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.v-steps .ws-stepnum { font:700 clamp(15px,2cqw,19px) var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; transition:color 160ms linear; }
/* accent node — the static destination (last), or any reached step once stepping */
.v-steps .ws-step.is-final .ws-stepnode,
.v-steps .ws-step.on .ws-stepnode { background:var(--accent-fill, color-mix(in srgb, var(--accent) 14%, transparent));
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.v-steps .ws-step.is-final .ws-stepnum,
.v-steps .ws-step.on .ws-stepnum { color:var(--accent); }
.v-steps .ws-step.cur .ws-stepnode { border-color:var(--accent); }
/* once the walk starts, the static 'final' accent yields to the progress model */
.v-steps .ws-steps.stepping .ws-step.is-final:not(.on) .ws-stepnode { background:var(--panel); border-color:var(--hair); }
.v-steps .ws-steps.stepping .ws-step.is-final:not(.on) .ws-stepnum { color:var(--ink); }
/* body */
.v-steps .ws-stepbody { padding:clamp(16px,2.2cqw,22px) clamp(4px,1.4cqw,14px) 0; max-width:26ch; }
.v-steps .ws-steptitle { margin:0 0 8px; font:600 clamp(15px,1.9cqw,17px) var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; transition:color 160ms linear; }
.v-steps .ws-stepdesc { margin:0; font:400 clamp(13px,1.6cqw,15px)/1.6 var(--font); color:var(--dim); }
.v-steps .ws-step.is-final .ws-steptitle, .v-steps .ws-step.cur .ws-steptitle { color:var(--accent); }
.v-steps .ws-steps.stepping .ws-step.is-final:not(.on):not(.cur) .ws-steptitle { color:var(--ink); }
.v-steps .ws-ctarow { margin-top:0; }
/* stack vertically in narrow containers — the connector runs DOWN the left rail */
@container site (max-width: 860px) {
  .v-steps .ws-steps { flex-direction:column; align-items:stretch; gap:0;
    width:min(360px, 100%); margin-inline:auto; }
  .v-steps .ws-step { flex:none; flex-direction:row; align-items:flex-start; text-align:left;
    gap:clamp(16px,4cqw,20px); padding-bottom:clamp(22px,5cqw,32px); }
  .v-steps .ws-step:last-child { padding-bottom:0; }
  .v-steps .ws-step:not(:last-child)::before,
  .v-steps .ws-step:not(:last-child)::after {
    top:clamp(26px,3.5cqw,32px); left:clamp(26px,3.5cqw,32px); width:0; height:100%;
    transform:translateX(-50%); }
  .v-steps .ws-step:not(:last-child)::before { border-top:0; border-left:1px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
  .v-steps .ws-step:not(:last-child)::after { border-top:0; border-left:2px solid var(--accent);
    transform:translateX(-50%) scaleY(0); transform-origin:top center; }
  .v-steps .ws-step.fill::after { transform:translateX(-50%) scaleY(1); }
  .v-steps .ws-stepbody { padding:clamp(2px,1cqw,6px) 0 0; max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-steps .ws-step::after { transition:none; }
}
/* transit — ported from SB_04 drafts/transit-hero (night-service signage: a live station clock over a
   self-advancing departures board whose times are computed from the real clock, a service-ticker marquee
   and a caution-stripe platform edge). Reuses ws-in.split + ws-hcopy/ws-h1/ws-sub/ws-ctarow; the split
   stacks via its own 860px rule below. Origin --trn-* map to theme tokens (bg->--bg, panel->--panel/-2,
   ink->--ink, dim->--dim/--faint, line->--hair, amber accent->--accent, mono->--mono); on-time green,
   delayed red and the live dot stay semantic status hues. Baked entrance fades were dropped (anims.js owns
   section reveals) — only the live clock, ticker marquee, live-dot pulse and row-arrive move, all paused
   for reduced-motion. Transitions ride opacity only; the LED texture is static, no blur/backdrop-filter. */
.v-transit { position:relative; overflow:hidden; }
.v-transit .ws-in.split.trn-layout { grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); align-items:center; gap:clamp(32px, 5cqw, 64px); }
.v-transit .trn-copy { display:flex; flex-direction:column; justify-content:center; }
.v-transit .trn-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.v-transit .trn-badge { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:800 12px var(--font); flex:none; }
.v-transit .trn-badge--a { background:var(--accent); color:var(--accent-text, var(--bg)); }
.v-transit .trn-badge--b { background:transparent; border:1.5px solid var(--accent); color:var(--accent); }
.v-transit .trn-meta-text { font:600 clamp(9px, 1cqw, 11px) var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.v-transit .trn-title { text-transform:uppercase; letter-spacing:-0.01em; line-height:1.05; }
.v-transit .trn-arrow { display:inline-flex; vertical-align:middle; margin-left:.24em; color:var(--accent); }
.v-transit .trn-arrow svg { width:.62em; height:.62em; }
.v-transit .trn-copytext { margin-top:20px; max-width:52ch; color:var(--dim); }
.v-transit .trn-copy .ws-ctarow { margin-top:28px; }
.v-transit .trn-footnote { margin:28px 0 0; font:600 clamp(9px, 1cqw, 11px) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
/* departures board */
.v-transit .trn-board { position:relative; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden; box-shadow:var(--elev, 0 24px 48px rgba(0, 0, 0, .3)); }
.v-transit .trn-board::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.28;
  background-image:radial-gradient(color-mix(in srgb, var(--bg) 55%, transparent) 1px, transparent 1.1px); background-size:3px 3px; }
.v-transit .trn-board-head, .v-transit .trn-table, .v-transit .trn-ticker { position:relative; z-index:1; }
.v-transit .trn-board-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:var(--bw, 1px) solid var(--hair); background:var(--panel-2); }
.v-transit .trn-board-title { font:800 13px var(--font-head, var(--font)); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.v-transit .trn-board-side { display:inline-flex; align-items:center; gap:12px; }
.v-transit .trn-live { display:inline-flex; align-items:center; gap:6px; font:400 9px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.v-transit .trn-live i { width:6px; height:6px; border-radius:50%; background:#3ddc84; animation:trnPulse 2s ease-in-out infinite; }
.v-transit .trn-clock { font:700 13px var(--mono); font-variant-numeric:tabular-nums; color:var(--accent); text-shadow:0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
.v-transit .trn-cols, .v-transit .trn-row { display:grid; grid-template-columns:3.5rem minmax(0, 1fr) 2.75rem 5.25rem; gap:12px; align-items:center; padding:0 20px; }
.v-transit .trn-cols { padding-top:12px; padding-bottom:8px; font:400 9px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.v-transit .trn-col-status { text-align:right; }
.v-transit .trn-rows { padding-bottom:8px; }
.v-transit .trn-row { padding-top:10px; padding-bottom:10px; border-top:var(--bw, 1px) solid var(--hair-soft, var(--hair)); opacity:1; transition:opacity .34s ease; }
.v-transit .trn-row.is-departing { opacity:0; }
.v-transit .trn-row.is-arriving { animation:trnArrive .45s ease both; }
.v-transit .trn-time { font:700 13px var(--mono); font-variant-numeric:tabular-nums; color:var(--accent); text-shadow:0 0 8px color-mix(in srgb, var(--accent) 32%, transparent); }
.v-transit .trn-dest { font:600 13px var(--font); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.v-transit .trn-plat { font:400 11px var(--mono); color:var(--dim); text-align:center; }
.v-transit .trn-status { font:400 9px var(--mono); letter-spacing:.08em; text-align:right; white-space:nowrap; }
.v-transit .trn-status .is-ontime { color:#3ddc84; }
.v-transit .trn-status .is-boarding { color:var(--accent); animation:trnPulse 1.3s ease-in-out infinite; }
.v-transit .trn-status .is-delayed { color:#ff5c5c; }
/* service ticker */
.v-transit .trn-ticker { overflow:hidden; border-top:var(--bw, 1px) solid var(--hair); background:var(--panel-2); padding:8px 0; }
.v-transit .trn-tick-track { display:inline-block; white-space:nowrap; font:400 9px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); animation:trnTicker 26s linear infinite; padding-left:20px; }
.v-transit .trn-tick-seg { display:inline-block; }
.v-transit .trn-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* platform edge — caution stripe */
.v-transit .trn-edge { position:absolute; left:0; right:0; bottom:0; height:10px; border-top:var(--bw, 1px) solid var(--hair);
  background:repeating-linear-gradient(-45deg, var(--accent) 0 14px, transparent 14px 28px); opacity:.8; }
@keyframes trnPulse { 0%, 100% { opacity:1; } 50% { opacity:.4; } }
@keyframes trnArrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes trnTicker { to { transform:translateX(-50%); } }
@container site (max-width: 860px) {
  .v-transit .ws-in.split.trn-layout { grid-template-columns:1fr; gap:36px; }
  .v-transit .trn-board { max-width:600px; }
}
@container site (max-width: 560px) {
  .v-transit .trn-cols, .v-transit .trn-row { grid-template-columns:3rem minmax(0, 1fr) 2rem 4.6rem; gap:8px; padding-left:14px; padding-right:14px; }
  .v-transit .trn-board-head { padding-left:14px; padding-right:14px; }
  .v-transit .trn-arrow { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-transit .trn-live i, .v-transit .trn-status .is-boarding, .v-transit .trn-tick-track, .v-transit .trn-row.is-arriving { animation:none; }
  .v-transit .trn-row { transition:none; }
}
/* upgrade — SB_04 drafts/upgrade-hero · current plan arrows into the recommended one, live billing toggle, then the ask */
.v-upgrade .up-in { width:min(760px, 88cqw); display:flex; flex-direction:column; align-items:center; gap:clamp(32px, 5cqw, 56px); }
/* billing toggle */
.v-upgrade .up-toggle { display:inline-flex; padding:4px; gap:4px; border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:var(--panel); }
.v-upgrade .up-seg { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border:0; border-radius:999px; background:transparent; cursor:pointer; font:600 13px var(--font); color:var(--dim); transition:color .18s ease; }
.v-upgrade .up-seg:hover { color:var(--ink); }
.v-upgrade .up-seg.on { background:var(--accent); color:var(--accent-text, var(--bg)); }
.v-upgrade .up-save { font:700 10px var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:999px; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.v-upgrade .up-seg.on .up-save { background:color-mix(in srgb, var(--accent-text, var(--bg)) 22%, transparent); color:var(--accent-text, var(--bg)); }
/* plans row */
.v-upgrade .up-plans { display:flex; align-items:stretch; width:100%; }
.v-upgrade .up-plan { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; padding:clamp(20px, 3cqw, 30px) clamp(18px, 2.6cqw, 28px); }
.v-upgrade .up-plan--current { background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-right:none; border-radius:14px 0 0 14px; opacity:.72; }
.v-upgrade .up-plan--reco { background:color-mix(in srgb, var(--accent) 8%, var(--panel)); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-left:none; border-radius:0 14px 14px 0; }
.v-upgrade .up-tag { font:700 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.v-upgrade .up-plan--reco .up-tag { color:var(--accent); }
.v-upgrade .up-name { font:700 20px var(--font-head, var(--font)); color:var(--ink); }
.v-upgrade .up-price { display:flex; align-items:baseline; gap:3px; }
.v-upgrade .up-price b { font:800 38px/1 var(--font-head, var(--font)); letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.v-upgrade .up-price span { font:400 15px var(--font); color:var(--dim); }
.v-upgrade .up-per { font:500 11px var(--mono); letter-spacing:.03em; color:var(--faint); }
.v-upgrade .up-per .y { display:none; }
.v-upgrade.is-yearly .up-per .m { display:none; }
.v-upgrade.is-yearly .up-per .y { display:inline; }
.v-upgrade .up-feats { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.v-upgrade .up-feats li { font:400 14px/1.5 var(--font); color:var(--dim); }
.v-upgrade .up-plan--reco .up-feats li { color:var(--ink); }
/* arrow between plans (side dividers on desktop) */
.v-upgrade .up-arrow { flex:none; width:56px; display:flex; align-items:center; justify-content:center; color:var(--accent);
  border-left:var(--bw, 1px) solid var(--hair); border-right:1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.v-upgrade .up-arrow svg { width:26px; height:26px; }
/* content */
.v-upgrade .up-content { text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.v-upgrade .up-content .ws-sub { margin:0 auto; }
.v-upgrade .up-content .ws-ctarow { margin-top:6px; justify-content:center; }
/* benefits */
.v-upgrade .up-benefits { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; }
.v-upgrade .up-benefit { display:inline-flex; align-items:center; gap:8px; font:400 14px var(--font); color:var(--dim); }
.v-upgrade .up-benefit svg { width:16px; height:16px; flex:none; color:var(--accent); }
@container site (max-width: 560px) {
  .v-upgrade .up-plans { flex-direction:column; }
  .v-upgrade .up-plan--current { border-right:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:14px 14px 0 0; }
  .v-upgrade .up-plan--reco { border-left:1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-top:none; border-radius:0 0 14px 14px; }
  .v-upgrade .up-arrow { width:100%; height:44px; border-left:none; border-right:none;
    border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
  .v-upgrade .up-arrow svg { transform:rotate(90deg); }
  .v-upgrade .up-benefits { flex-direction:column; align-items:flex-start; gap:12px; }
}
/* waitlist — ported from SB_04 drafts/waitlist-hero (coming-soon / stealth fold: eyebrow,
   statement headline + subheading over a REAL inline email capture that validates and confirms,
   a social-proof count, and a LIVE launch countdown computed from a deadline. Reuses ws-in.center
   + ws-kick + ws-h1/ws-grad + ws-sub; the segmented input+button rides the same pill-that-stacks
   pattern as trial; error hue reuses the house #e5484d semantic red. Container queries only. */
.ws-hero.v-waitlist { position:relative; isolation:isolate; overflow:hidden; }
.v-waitlist .wl-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 38%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%); }
.v-waitlist .wl-wrap { position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:clamp(14px, 2cqw, 22px); }
.v-waitlist .wl-h { max-width:15ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-waitlist .wl-desc { max-width:46ch; }
.v-waitlist .wl-form { display:flex; width:min(500px, 100%); margin-top:clamp(4px, 1cqw, 10px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55); overflow:hidden;
  transition:border-color 160ms linear; }
.v-waitlist .wl-form:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.v-waitlist .wl-input { flex:1; min-width:0; padding:13px 18px; border:none; outline:none;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:400 14px var(--font); }
.v-waitlist .wl-input::placeholder { color:var(--faint); }
.v-waitlist .wl-btn { flex:none; padding:13px 24px; border:none; cursor:pointer; white-space:nowrap;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:600 13px var(--font); letter-spacing:.01em;
  transition:opacity 140ms linear; }
.v-waitlist .wl-btn:hover { opacity:.9; }
.v-waitlist .wl-btn:active { opacity:.82; }
.v-waitlist .wl-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-waitlist .wl-note { min-height:1.25em; margin:0; font:500 12.5px var(--font); color:var(--dim); }
.v-waitlist .wl-note.wl-ok { color:var(--accent); }
.v-waitlist .wl-note.wl-err { color:#e5484d; }
.v-waitlist .wl-proof { margin:0; font:400 13px var(--font); color:var(--faint); letter-spacing:.01em; }
.v-waitlist .wl-proof-count { color:var(--dim); font-weight:600; }
.v-waitlist .wl-count { display:inline-flex; align-items:center; gap:clamp(7px, 1.4cqw, 13px);
  margin-top:clamp(6px, 1.4cqw, 14px); padding-top:clamp(16px, 2cqw, 22px); border-top:var(--bw, 1px) solid var(--hair); }
.v-waitlist .wl-unit { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:3rem; }
.v-waitlist .wl-num { font:700 clamp(1.3rem, 3.2cqw, 1.85rem) var(--font-head, var(--font));
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-0.01em; }
.v-waitlist .wl-label { font:500 10.5px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.v-waitlist .wl-sep { align-self:flex-start; margin-top:.18em; font-size:1.25rem; font-weight:300; line-height:1; color:var(--hair); }
@container site (max-width: 560px) {
  .v-waitlist .wl-form { flex-direction:column; border:none; overflow:visible; gap:10px; width:100%; max-width:380px; }
  .v-waitlist .wl-input { border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5); }
  .v-waitlist .wl-btn { width:100%; border-radius:calc(var(--radius, 12px) * .5); }
  .v-waitlist .wl-count { gap:7px; }
  .v-waitlist .wl-unit { min-width:2.6rem; }
}
/* typographic — SB_04 drafts/typographic-hero · statement type IS the design:
   filled + outlined (-webkit-text-stroke) + accent words, hand-composed via a
   markup micro-syntax, framed by a mono meta line over a faint grid. Origin
   --th-* vars map to theme tokens (bg->--bg, text->--ink, secondary->--dim,
   accent->--accent, mono meta->--mono, display->--font-head); the origin's
   dark/light/editorial skins collapse to the theme + font-pairing systems. The
   grid is a static background-image; no entrance is baked in (reveal owns it),
   only the CTA keeps its hover lift. */
.ws-hero.v-typographic { padding:clamp(88px, 14cqw, 150px) 0; }
.v-typographic .typo-grid { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.05;
  background-image:linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size:72px 72px; }
.v-typographic .typo-wrap { position:relative; z-index:1; }
.v-typographic .typo-meta { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:28px; }
.v-typographic .typo-meta i { font:600 10.5px var(--mono); letter-spacing:3px; text-transform:uppercase;
  color:var(--dim); font-style:normal; }
.v-typographic .typo-rule { width:40px; height:1px; background:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-typographic .typo-head { margin:0; font-family:var(--font-head, var(--font)); font-weight:900;
  font-size:clamp(46px, 12.5cqw, 132px); line-height:0.9; letter-spacing:-0.04em; text-transform:uppercase; color:var(--ink); }
.v-typographic .typo-line { display:block; }
.v-typographic .typo-w.out { color:transparent; -webkit-text-stroke:2px color-mix(in srgb, var(--ink) 26%, transparent); }
.v-typographic .typo-w.acc { color:var(--accent); }
.v-typographic .typo-w.lite { font-weight:300; letter-spacing:0; }
.v-typographic .typo-desc { margin:30px auto 0; max-width:52ch; }
.v-typographic .ws-ctarow { margin-top:34px; }
.v-typographic .ws-btn { border-radius:0; font-family:var(--mono); text-transform:uppercase;
  letter-spacing:0.06em; font-weight:500; font-size:12px; padding:14px 26px; }
@container site (max-width:560px) {
  .v-typographic .typo-head { font-size:clamp(32px, 12.5cqw, 64px); letter-spacing:-0.02em;
    word-break:break-word; overflow-wrap:break-word; }
  .v-typographic .typo-w.out { -webkit-text-stroke-width:1.5px; }
  .v-typographic .typo-meta { flex-direction:column; gap:10px; }
  .v-typographic .typo-rule { width:26px; }
}
/* workflow — ported from SB_04 drafts/workflow-hero (an automation-pipeline fold: copy beside a live
   flow panel whose run advances itself stage by stage — the accent rail fills as each stage completes,
   the current stage pulses, and each row's status flips queued->running->done; clicking or arrowing a
   stage takes manual control and pauses the run). Reuses ws-in.split + ws-hcopy/ws-kick/ws-h1/ws-sub/
   ws-ctarow; the split stacks via its own 860px rule below. Origin --wfh-* map to theme tokens
   (bg->--bg, stage-bg->--panel/-2, heading->--ink, body->--dim/--faint, border->--hair, blue accent->
   --accent, font->--font/--mono); the live LED stays a semantic green. The source's blurred glow was
   dropped (no blur allowed) for an accent ring that pulses on transform/opacity only; the baked pulse
   gives way to the run loop, which pauses off-screen, on user input, and for reduced-motion. Connector
   fill and node motion ride transform; status colors ride color — no background is transitioned. */
.v-workflow .ws-in.split.wf-layout { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:clamp(32px, 5cqw, 64px); }
.v-workflow .wf-panel { position:relative; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); padding:clamp(18px, 2.4cqw, 26px); box-shadow:var(--elev, 0 24px 48px rgba(0, 0, 0, .28)); }
.v-workflow .wf-panelhead { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:clamp(16px, 2.2cqw, 22px); margin-bottom:clamp(4px, 1cqw, 10px); border-bottom:var(--bw, 1px) solid var(--hair); }
.v-workflow .wf-runlabel { display:inline-flex; align-items:center; gap:7px; font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.v-workflow .wf-runled { width:7px; height:7px; border-radius:50%; background:#3ddc84; animation:wfLed 2s ease-in-out infinite; }
.v-workflow .wf-runstage { font:700 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); text-align:right; }
.v-workflow .wf-panel.paused .wf-runled { animation:none; background:var(--faint); }
/* pipeline — vertical run; the accent rail threads down through the node centers */
.v-workflow .wf-pipe { list-style:none; margin:0; padding:0; }
.v-workflow .wf-stage { position:relative; display:flex; align-items:center; gap:clamp(14px, 2.4cqw, 20px); padding:clamp(12px, 1.8cqw, 16px) 0; }
.v-workflow .wf-stage:first-child { padding-top:clamp(6px, 1cqw, 10px); }
.v-workflow .wf-stage:last-child { padding-bottom:clamp(4px, 0.8cqw, 8px); }
/* connector: dashed base + accent fill that grows once the stage is done, anchored on the node center */
.v-workflow .wf-stage:not(:last-child)::before,
.v-workflow .wf-stage:not(:last-child)::after {
  content:''; position:absolute; top:50%; left:clamp(23px, 3cqw, 28px); width:0; height:100%; z-index:0; pointer-events:none; transform:translateX(-50%); }
.v-workflow .wf-stage:not(:last-child)::before { border-left:1px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.v-workflow .wf-stage:not(:last-child)::after { border-left:2px solid var(--accent); transform:translateX(-50%) scaleY(0); transform-origin:top center; transition:transform 440ms cubic-bezier(.5, 0, 0, 1); }
.v-workflow .wf-stage.done:not(:last-child)::after { transform:translateX(-50%) scaleY(1); }
/* node */
.v-workflow .wf-node { position:relative; z-index:1; flex:none; width:clamp(46px, 6cqw, 56px); height:clamp(46px, 6cqw, 56px); border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer; background:var(--panel-2); border:var(--bw, 1px) solid var(--hair); box-shadow:0 0 0 4px var(--panel); color:var(--dim); transition:transform 160ms cubic-bezier(.25, 0, 0, 1), color 160ms linear; }
.v-workflow .wf-node:hover { transform:translateY(-2px); }
.v-workflow .wf-node:active { transform:scale(.95); }
.v-workflow .wf-node:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.v-workflow .wf-ico, .v-workflow .wf-check { grid-area:1 / 1; display:grid; place-items:center; transition:opacity 200ms linear; }
.v-workflow .wf-ico svg, .v-workflow .wf-check svg { width:clamp(19px, 2.4cqw, 23px); height:clamp(19px, 2.4cqw, 23px); }
.v-workflow .wf-check { opacity:0; }
/* current + done node states */
.v-workflow .wf-stage.cur .wf-node { color:var(--accent); border-color:var(--accent); }
.v-workflow .wf-stage.done .wf-node { color:var(--accent); background:var(--accent-fill, color-mix(in srgb, var(--accent) 14%, transparent)); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.v-workflow .wf-stage.done .wf-ico { opacity:0; }
.v-workflow .wf-stage.done .wf-check { opacity:1; }
/* current pulse ring — transform/opacity only, no blur */
.v-workflow .wf-node::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--accent); opacity:0; pointer-events:none; }
.v-workflow .wf-stage.cur .wf-node::after { animation:wfPing 1.8s ease-out infinite; }
/* body */
.v-workflow .wf-stagebody { display:flex; flex-direction:column; gap:5px; min-width:0; }
.v-workflow .wf-stagelabel { font:600 clamp(15px, 1.9cqw, 17px) var(--font-head, var(--font)); letter-spacing:-0.01em; color:var(--ink); transition:color 160ms linear; }
.v-workflow .wf-stage.cur .wf-stagelabel { color:var(--accent); }
.v-workflow .wf-stagestat { display:inline-flex; align-items:center; gap:7px; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.v-workflow .wf-stagestat em { font-style:normal; }
.v-workflow .wf-dot { width:6px; height:6px; border-radius:50%; background:var(--faint); flex:none; }
.v-workflow .wf-stage.cur .wf-dot { background:var(--accent); animation:wfLed 1.3s ease-in-out infinite; }
.v-workflow .wf-stage.cur .wf-stagestat { color:var(--accent); }
.v-workflow .wf-stage.done .wf-dot { background:#3ddc84; }
.v-workflow .wf-stage.done .wf-stagestat { color:var(--dim); }
@keyframes wfLed { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
@keyframes wfPing { 0% { transform:scale(.85); opacity:.55; } 100% { transform:scale(1.35); opacity:0; } }
/* stack: copy over panel in narrow panes */
@container site (max-width: 860px) {
  .v-workflow .ws-in.split.wf-layout { grid-template-columns:1fr; gap:36px; }
  .v-workflow .wf-panel { max-width:520px; }
}
@container site (max-width: 560px) {
  .v-workflow .wf-panel { padding:16px; }
  .v-workflow .wf-stage:not(:last-child)::before,
  .v-workflow .wf-stage:not(:last-child)::after { left:clamp(21px, 6cqw, 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .v-workflow .wf-runled, .v-workflow .wf-stage.cur .wf-node::after, .v-workflow .wf-stage.cur .wf-dot { animation:none; }
  .v-workflow .wf-stage::after { transition:none; }
}
/* carousel — APEX / above-the-fold. Full-bleed cinematic slideshow. Each slide is an absolutely-
   positioned layer that crossfades on OPACITY only (never a background transition). The photo lives on
   .car-img and slowly Ken-Burns pans/zooms via a TRANSFORM keyframe; the giant .car-title is the SAME
   photo cut into the type (background-clip:text) and pushes in FASTER via its own keyframe — the two
   speeds are the push-pull. Runs the pan only on .on (the active slide) so it restarts each cycle and
   idle slides cost nothing. Zero-image default: themed scene gradients (accent/accent2/ink over --bg)
   fill both the media and the letters, so it looks composed before any photo is added. Legibility from
   the .car-scrim (a --bg wash on the text corner, theme-correct on light or dark). Controls are real
   (dots + arrows + dwell bar, driven by mount). Reduced-motion freezes every pan and hides the bar. */
.ws-hero.v-carousel { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(560px, 92vh, 900px); display:flex; background:var(--bg); }
.v-carousel .car-track { position:absolute; inset:0; z-index:0; }
.v-carousel .car-slide { position:absolute; inset:0; display:flex; align-items:flex-end;
  opacity:0; pointer-events:none; transition:opacity 900ms ease; }
.v-carousel .car-slide.on { opacity:1; pointer-events:auto; }
/* the moving photo */
.v-carousel .car-media { position:absolute; inset:0; z-index:0; overflow:hidden; }
.v-carousel .car-img { position:absolute; inset:-6%; background-image:var(--scene); background-size:cover; background-position:center;
  background-repeat:no-repeat; transform:scale(1.05); will-change:transform; }
.v-carousel .car-slide.on .car-img { animation:car-kenburns 15s ease-out both; }
@keyframes car-kenburns { from { transform:scale(1.05) translate3d(0,0,0); } to { transform:scale(1.19) translate3d(-2.6%,-1.6%,0); } }
/* legibility wash — bottom + leading edge, tuned to --bg so it reads on either theme */
.v-carousel .car-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 44%, transparent) 46%, transparent 74%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 26%, transparent) 38%, transparent 66%); }
/* content, anchored bottom within a centered measure (title reads as side-set) */
.v-carousel .car-inner { z-index:3; align-self:flex-end; padding-block:clamp(3.4rem, 8cqw, 6.4rem);
  display:flex; flex-direction:column; align-items:flex-start; }
.v-carousel .car-kick { color:var(--accent); margin-bottom:14px; }
.v-carousel .car-title { margin:0; max-width:15ch; text-wrap:balance;
  font:800 clamp(2.6rem, 11.5cqw, 8rem)/0.98 var(--font-head, var(--font)); letter-spacing:-0.035em;
  background-image:linear-gradient(0deg, color-mix(in srgb, var(--ink) 30%, transparent), color-mix(in srgb, var(--ink) 30%, transparent)), var(--car-src, var(--scene, transparent));
  background-repeat:no-repeat; background-position:52% 48%; background-size:150%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.v-carousel .car-slide.on .car-title { animation:car-titlepan 9s ease-out both; }
@keyframes car-titlepan { from { background-position:44% 52%; background-size:124%; } to { background-position:58% 44%; background-size:172%; } }
.v-carousel .car-sub { margin:clamp(1rem, 1.6cqw, 1.4rem) 0 0; max-width:44ch; color:var(--ink);
  opacity:.9; font-size:clamp(15px, 1.7cqw, 18px); }
.v-carousel .car-inner .ws-ctarow { margin-top:clamp(1.4rem, 2.2cqw, 2.2rem); }
/* ---- themed scene gradients (only when a slide has NO photo) ---- */
.v-carousel .scene-0 { --scene:
    radial-gradient(120% 96% at 16% 108%, color-mix(in srgb, var(--accent) 70%, var(--bg)) 0%, transparent 58%),
    radial-gradient(84% 78% at 86% 6%, color-mix(in srgb, var(--accent2, var(--accent)) 60%, var(--bg)) 0%, transparent 56%),
    linear-gradient(158deg, color-mix(in srgb, var(--ink) 12%, var(--bg)), var(--bg) 78%); }
.v-carousel .scene-1 { --scene:
    radial-gradient(100% 120% at 78% 112%, color-mix(in srgb, var(--accent2, var(--accent)) 64%, var(--bg)) 0%, transparent 60%),
    radial-gradient(96% 70% at 18% 16%, color-mix(in srgb, var(--accent) 48%, var(--bg)) 0%, transparent 58%),
    linear-gradient(196deg, color-mix(in srgb, var(--ink) 9%, var(--bg)), var(--bg) 74%); }
.v-carousel .scene-2 { --scene:
    radial-gradient(130% 90% at 50% 116%, color-mix(in srgb, var(--accent) 60%, var(--bg)) 0%, transparent 62%),
    radial-gradient(70% 90% at 92% 28%, color-mix(in srgb, var(--accent2, var(--accent)) 54%, var(--bg)) 0%, transparent 52%),
    linear-gradient(140deg, color-mix(in srgb, var(--ink) 13%, var(--bg)), var(--bg) 82%); }
/* ---- controls ---- */
.v-carousel .car-progress { position:absolute; left:0; right:0; top:0; z-index:5; height:3px;
  background:color-mix(in srgb, var(--ink) 12%, transparent); }
.v-carousel .car-progress > i { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); }
.v-carousel .car-ui { position:absolute; z-index:6; right:clamp(1.4rem, 4cqw, 3.6rem);
  bottom:clamp(1.6rem, 3cqw, 2.6rem); display:flex; align-items:center; gap:16px; }
.v-carousel .car-dots { display:flex; align-items:center; gap:9px; }
.v-carousel .car-dot { width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; }
.v-carousel .car-dotfill { width:9px; height:9px; border-radius:99px; background:color-mix(in srgb, var(--ink) 34%, transparent);
  transition:background 200ms ease, transform 200ms var(--ease-pop, ease-out); }
.v-carousel .car-dot:hover .car-dotfill { background:color-mix(in srgb, var(--ink) 60%, transparent); }
.v-carousel .car-dot.on .car-dotfill { background:var(--accent); transform:scale(1.5); }
.v-carousel .car-arrow { width:44px; height:44px; border-radius:99px; cursor:pointer; display:grid; place-items:center;
  color:var(--ink); border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  transition:transform 140ms var(--ease-pop, ease-out), border-color 140ms ease, background 140ms ease; }
.v-carousel .car-arrow svg { width:18px; height:18px; }
.v-carousel .car-arrow:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--bg) 78%, transparent); }
.v-carousel .car-arrow:active { transform:translateY(0); }
@container site (max-width: 860px) {
  .ws-hero.v-carousel { min-height:clamp(500px, 84vh, 720px); }
  .v-carousel .car-title { max-width:none; }
}
@container site (max-width: 560px) {
  .v-carousel .car-inner { padding-top:clamp(2.6rem, 9cqw, 4rem); padding-bottom:clamp(5.2rem, 16cqw, 6.6rem); }
  .v-carousel .car-sub { font-size:14.5px; }
  .v-carousel .car-ui { left:clamp(1.2rem, 5cqw, 2rem); right:clamp(1.2rem, 5cqw, 2rem); justify-content:space-between; bottom:1.3rem; }
  .v-carousel .car-arrow { width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-carousel .car-slide.on .car-img, .v-carousel .car-slide.on .car-title { animation:none; }
  .v-carousel .car-img { transform:scale(1.08); }
  .v-carousel .car-title { background-position:54% 46%; background-size:150%; }
  .v-carousel .car-progress { display:none; }
  .v-carousel .car-slide { transition:opacity 200ms linear; }
}
/* prism — APEX / above-the-fold. A dark "portal" hero that commits to a dark stage on ANY theme (a
   single deep feature band, like a cinema): the star is one enormous statement headline filled with a
   slow-flowing accent-derived SPECTRUM (background-clip:text + a background-position animation — ambient
   identity motion, not an entrance). Behind it a <canvas> paints soft drifting prism bands whose hues are
   generated in mount() from the --accent token, additively blended so they only ever read as light on the
   dark stage. Because the stage is deliberately dark regardless of --bg, text uses local light-neutral
   tokens (--prm-ink/--prm-dim) and the ghost button is re-dressed for dark, so nothing depends on the
   theme being dark. Zero images. Reduced-motion freezes the flow (canvas paints a single still frame). */
.ws-hero.v-prism { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(520px, 88vh, 820px); display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(150% 120% at 50% -14%, color-mix(in srgb, var(--accent) 22%, #0a0d18) 0%, #070912 56%),
    #06070d;
  --prm-ink:#eaeef8; --prm-dim:color-mix(in srgb, #eaeef8 60%, transparent); }
.v-prism .prm-canvas { position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }
.v-prism .prm-floor { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(85% 68% at 50% 52%, transparent 38%, color-mix(in srgb, #06070d 72%, transparent) 100%),
    linear-gradient(0deg, #06070d 1%, transparent 26%, transparent 74%, color-mix(in srgb, #06070d 78%, transparent)); }
.v-prism .prm-wrap { position:relative; z-index:2; padding-block:clamp(4rem, 10cqw, 7rem); }
.v-prism .prm-badge { color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent);
  border-color:color-mix(in srgb, var(--accent) 36%, transparent); }
.v-prism .prm-h { max-width:16ch; margin-inline:auto; text-wrap:balance;
  font-size:clamp(2.8rem, 10cqw, 7rem); letter-spacing:-0.035em; line-height:0.98;
  background-image:linear-gradient(96deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 64%, #ffffff) 22%,
    var(--accent2, var(--accent)) 46%,
    color-mix(in srgb, var(--accent2, var(--accent)) 60%, #ffffff) 68%,
    var(--accent) 100%);
  background-size:260% 100%; background-position:0% 50%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:prm-flow 11s linear infinite; }
@keyframes prm-flow { to { background-position:260% 50%; } }
.v-prism .prm-sub { margin:clamp(1.2rem, 2cqw, 1.8rem) auto 0; max-width:52ch; color:var(--prm-dim); }
.v-prism .prm-wrap .ws-ctarow { margin-top:clamp(1.6rem, 2.4cqw, 2.4rem); }
.v-prism .ws-btn.ghost { color:var(--prm-ink); border-color:color-mix(in srgb, #ffffff 22%, transparent);
  background:color-mix(in srgb, #ffffff 5%, transparent); }
.v-prism .ws-btn.ghost:hover { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, #ffffff 9%, transparent); }
@container site (max-width: 560px) { .v-prism .prm-h { max-width:none; } }
@media (prefers-reduced-motion: reduce) {
  .v-prism .prm-h { animation:none; background-position:42% 50%; }
}
/* SB_04-PORT-CSS-INSERT — ported hero CSS goes directly ABOVE this line. To add: replace this whole line with `<your .v-id CSS block>` then a NEW copy of this exact sentinel line. */
/* editorial */
.v-editorial { padding:120px 0 100px; }
.v-editorial .ws-h1 { margin-top:26px; }
.ws-edrow { display:flex; align-items:flex-end; gap:40px; margin-top:34px; justify-content:space-between; }
/* terminal */
.v-terminal { background:color-mix(in srgb, var(--panel-3, var(--panel)) 60%, var(--bg)); }
.ws-caret { display:inline-block; width:0.55em; height:0.95em; margin-left:6px; vertical-align:-0.08em;
  background:var(--accent); }
.ws-cmd { display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:13px 18px;
  border-radius:10px; border:var(--bw, 1px) solid var(--hair); background:var(--bg);
  font:500 13px var(--mono); color:var(--ink); }
.ws-cmd i { color:var(--accent); font-style:normal; }
.ws-cmd b { margin-left:14px; padding:3px 9px; border-radius:6px; background:var(--accent-fill);
  color:var(--accent); font:600 9.5px var(--mono); letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
/* metric */
.ws-herostats { display:flex; gap:0; justify-content:center; margin-top:52px; }
.ws-hstat { display:flex; flex-direction:column; gap:5px; padding:0 44px; }
.ws-hstat + .ws-hstat { border-left:var(--bw, 1px) solid var(--hair); }
.ws-hstat b { font:800 30px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; }
.ws-hstat i { font:500 11.5px var(--font); color:var(--faint); font-style:normal; }
/* beam */
.ws-hcopy.edge { padding-left:26px; border-left:3px solid; border-image:var(--accent-grad, linear-gradient(var(--accent), var(--accent2, var(--accent)))) 1; }
.ws-fan { position:relative; height:320px; }
.ws-fcard { position:absolute; width:min(240px, 60%); padding:16px; border-radius:var(--radius, 12px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad,none);
  display:flex; flex-direction:column; gap:8px; }
.ws-fcard i { display:flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:8px;
  background:var(--accent-fill); color:var(--accent); }
.ws-fcard i svg { width:15px; height:15px; }
.ws-fcard b { font:600 13px var(--font); color:var(--ink); }
.ws-fcard span { height:7px; border-radius:4px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.ws-fcard span.short { width:60%; }
.ws-fcard.c1 { left:4%; top:8%; transform:rotate(-3deg); }
.ws-fcard.c2 { right:2%; top:26%; transform:rotate(2.4deg); z-index:2; }
.ws-fcard.c3 { left:16%; bottom:4%; transform:rotate(-1deg); }

/* ================= the browser mock ================= */
.ws-browser { border:var(--bw, 1px) solid var(--hair); border-radius:14px; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-btop { display:flex; align-items:center; gap:5px; padding:9px 12px; border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-btop i { width:8px; height:8px; border-radius:99px; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.ws-btop span { margin-left:10px; padding:2px 10px; border-radius:6px; background:color-mix(in srgb, var(--bg) 70%, transparent);
  font:500 9.5px var(--mono); color:var(--faint); }
.ws-bbody { display:grid; grid-template-columns:52px 1fr; min-height:210px; }
.ws-browser.big .ws-bbody { min-height:320px; }
.ws-brail { display:flex; flex-direction:column; gap:9px; padding:13px 0; align-items:center;
  border-right:var(--bw, 1px) solid var(--hair); }
.ws-brail i { width:22px; height:22px; border-radius:7px; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-brail i:first-child { background:var(--accent-fill); }
.ws-bmain { padding:14px; display:flex; flex-direction:column; gap:10px; }
.ws-bcard { border-radius:9px; background:color-mix(in srgb, var(--ink) 6%, transparent); min-height:34px; }
.ws-bcard.w { min-height:56px; background:linear-gradient(120deg, var(--accent-fill), color-mix(in srgb, var(--accent2, var(--accent)) 10%, transparent)); }
.ws-bcard.a { background:var(--accent-fill); }
.ws-brow { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.ws-brow .ws-bcard { min-height:46px; }
.ws-bline { height:8px; border-radius:5px; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-bline.short { width:55%; }

/* ================= features ================= */
.ws-fgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-feat { display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:var(--radius, 12px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad,none);
  transition:transform 160ms var(--ease-pop, ease-out), border-color 160ms linear; }
.ws-feat:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }
.ws-fico { display:flex; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:9px; background:var(--accent-fill); color:var(--accent); }
.ws-fico svg { width:17px; height:17px; }
.ws-feat b { font:600 14.5px var(--font-head, var(--font)); color:var(--ink); }
.ws-feat p { margin:0; font:400 12.5px/1.6 var(--font); color:var(--dim); }
/* open grid — ported from SB_04 sections/feature-grid.
   Chrome-less: strips the card border/panel/padding so cards sit open on the
   section; neutral icon tiles warm to the accent on hover (bg snaps, glyph +
   title colour ride the transition). Reuses .ws-fgrid/.ws-feat + theme tokens. */
.ws-features.v-open .ws-feat { padding:0; border-color:transparent; background:none; background-image:none; }
.ws-features.v-open .ws-feat:hover { transform:none; }
.ws-features.v-open .ws-fico { background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink);
  transition:color 160ms linear; }
.ws-features.v-open .ws-feat b { transition:color 160ms linear; }
.ws-features.v-open .ws-feat:hover .ws-fico { background:var(--accent-fill); color:var(--accent); }
.ws-features.v-open .ws-feat:hover b { color:var(--accent); }
/* bento */
.ws-bento { display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(150px, auto); gap:14px; }
.ws-feat.hero-cell { grid-column:span 2; grid-row:span 2; }
.ws-bmini { margin-top:auto; }
.ws-bmini .ws-bbody { min-height:150px; }
/* editorial bento — ported from SB_04 sections/bento-grid.
   12-column asymmetric grid: stat · headline+body · tag list (spans 2) · image · pull-quote (spans 2) · CTA.
   Uses theme tokens (--panel/--bg/--ink/--dim/--faint/--accent/--hair) so palette packs cascade. */
.ws-features.v-editorial .ws-shead.left { margin-bottom:22px; }
.ws-edbento { display:grid; grid-template-columns:repeat(12, 1fr); grid-template-rows:auto auto auto;
  gap:1px; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden;
  background:var(--hair); }
.ws-edcell { background:var(--panel); padding:26px 30px; position:relative; display:flex; flex-direction:column; }
.ws-edcell.ed-stat  { grid-column:1 / 5;  grid-row:1; justify-content:flex-end; background:color-mix(in srgb, var(--bg) 60%, var(--panel)); padding-bottom:32px; }
.ws-edcell.ed-head  { grid-column:5 / 13; grid-row:1; }
.ws-edcell.ed-tags  { grid-column:1 / 5;  grid-row:2 / 4; justify-content:space-between;
  background:color-mix(in srgb, var(--panel) 85%, var(--bg)); }
.ws-edcell.ed-image { grid-column:5 / 9;  grid-row:2; padding:0; min-height:220px; overflow:hidden;
  background-color:color-mix(in srgb, var(--accent-fill, var(--accent)) 24%, var(--panel));
  background-size:cover; background-position:center; }
.ws-edcell.ed-quote { grid-column:9 / 13; grid-row:2 / 4; justify-content:center;
  background:color-mix(in srgb, var(--panel) 85%, var(--bg)); }
.ws-edcell.ed-cta   { grid-column:5 / 9;  grid-row:3; flex-direction:row; align-items:center;
  justify-content:space-between; gap:16px; }
.ws-edeye { font:500 10.5px var(--font); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint); font-style:normal; margin-bottom:14px; }
.ws-edeye.accent { color:var(--accent); }
.ws-edstat { font:700 clamp(48px, 6.4cqw, 88px)/0.9 var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.04em; margin:0 0 10px; display:block; }
.ws-edcap { font:400 10.5px var(--font); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--faint); font-style:normal; display:block; }
.ws-edcap.muted { margin-top:20px; }
.ws-edcap strong { color:var(--dim); font-weight:600; letter-spacing:0.12em; }
.ws-edtitle { margin:0 0 14px; font:600 clamp(20px, 2.4cqw, 26px)/1.3 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.02em; }
.ws-edbody { margin:0; font:400 14px/1.7 var(--font); color:var(--dim); max-width:60ch; }
.ws-edtaglist { list-style:none; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.ws-edtaglist li { display:flex; align-items:center; gap:10px; padding:9px 12px;
  font:400 12.5px var(--font); color:var(--dim);
  background:color-mix(in srgb, var(--bg) 60%, var(--panel));
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5); }
.ws-eddot { width:5px; height:5px; border-radius:50%; background:var(--faint); flex:none; }
.ws-edtaglist li:hover { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.ws-edtaglist li:hover .ws-eddot { background:var(--accent); }
.ws-edcell.ed-image::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg) 60%, transparent) 100%); }
.ws-edmarker { position:absolute; top:50%; left:50%; width:36px; height:36px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--ink) 25%, transparent); transform:translate(-50%, -50%); }
.ws-edmarker::after { content:''; position:absolute; inset:0; margin:auto; width:6px; height:6px;
  border-radius:50%; background:color-mix(in srgb, var(--ink) 30%, transparent); }
.ws-edcell.ed-image .ws-edcap { position:absolute; left:22px; bottom:20px; z-index:1;
  color:color-mix(in srgb, var(--ink) 55%, transparent); }
.ws-edmark { display:block; font:400 56px/0.7 Georgia, 'Times New Roman', serif; color:var(--accent);
  opacity:.28; margin-bottom:12px; user-select:none; }
.ws-edcell.ed-quote blockquote { margin:0 0 16px; font:italic 400 clamp(15px, 1.9cqw, 19px)/1.55 var(--font);
  color:var(--ink); letter-spacing:-0.005em; }
.ws-edctatxt { margin:0; font:500 12.5px/1.5 var(--font); color:var(--dim); }
.ws-edcell.ed-cta .ws-btn { flex:none; }
@container site (max-width: 860px) {
  .ws-edbento { grid-template-columns:repeat(6, 1fr); }
  .ws-edcell.ed-stat  { grid-column:1 / 4;  grid-row:1; }
  .ws-edcell.ed-head  { grid-column:4 / 7;  grid-row:1; }
  .ws-edcell.ed-tags  { grid-column:1 / 4;  grid-row:2; }
  .ws-edcell.ed-image { grid-column:4 / 7;  grid-row:2; min-height:180px; }
  .ws-edcell.ed-quote { grid-column:1 / 4;  grid-row:3; }
  .ws-edcell.ed-cta   { grid-column:4 / 7;  grid-row:3; }
}
@container site (max-width: 560px) {
  .ws-edbento { grid-template-columns:1fr; }
  .ws-edcell,
  .ws-edcell.ed-stat, .ws-edcell.ed-head, .ws-edcell.ed-tags,
  .ws-edcell.ed-image, .ws-edcell.ed-quote, .ws-edcell.ed-cta { grid-column:1; grid-row:auto; }
  .ws-edcell.ed-cta { flex-direction:column; align-items:flex-start; gap:14px; }
}
/* rows */
.ws-frow { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:36px 0; }
.ws-frow + .ws-frow { border-top:var(--bw, 1px) solid var(--hair); }
.ws-frow.flip .ws-frcopy { order:2; }
.ws-frow.flip .ws-frviz { order:1; }
.ws-stepno { display:block; font:700 12px var(--mono); color:var(--accent); letter-spacing:2px; margin-bottom:10px; font-style:normal; }
.ws-frcopy h3 { margin:0 0 10px; font:700 21px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.ws-frcopy p { margin:0 0 16px; font:400 13.5px/1.65 var(--font); color:var(--dim); }
.ws-frviz { display:grid; place-items:center; min-height:190px; border-radius:var(--radius, 12px);
  border:var(--bw, 1px) solid var(--hair);
  background:radial-gradient(70% 80% at 50% 45%, var(--accent-fill), transparent 75%), var(--panel); }
.ws-vico { display:flex; width:58px; height:58px; align-items:center; justify-content:center; border-radius:16px;
  background:var(--panel-3, var(--panel)); border:var(--bw, 1px) solid var(--hair); color:var(--accent); }
.ws-vico svg { width:26px; height:26px; }
/* checklist */
.ws-checks { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:4px; }
.ws-checks li { display:flex; gap:13px; padding:13px 14px; border-radius:10px; align-items:flex-start;
  transition:background 140ms linear; }
.ws-checks li:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ws-checks svg { width:16px; height:16px; color:var(--accent); flex:none; margin-top:2px; }
.ws-checks b { font:600 13.5px var(--font); color:var(--ink); display:block; }
.ws-checks p { margin:3px 0 0; font:400 12px/1.55 var(--font); color:var(--dim); }

/* ================= showcase ================= */
.ws-shotwrap { margin-top:44px; }
.ws-chips { display:flex; gap:10px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.ws-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); font:500 12px var(--font); color:var(--dim); }
.ws-chip svg { width:13px; height:13px; color:var(--accent); }
.ws-duo { display:flex; align-items:center; gap:22px; margin-top:44px; }
.ws-duocell { flex:1; display:flex; flex-direction:column; gap:12px; }
.ws-duocell b { font:500 12px var(--font); color:var(--faint); }
.ws-duoshot.a { min-height:200px; border-radius:14px; border:var(--bw, 1px) dashed var(--hair); padding:16px;
  display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start; opacity:.75; }
.ws-duoshot.a i { width:calc(33% - 6px); height:34px; border-radius:8px;
  background:color-mix(in srgb, var(--ink) 7%, transparent); transform:rotate(-1deg); }
.ws-duoshot.a i:nth-child(2n) { transform:rotate(1.6deg); width:calc(42% - 6px); }
.ws-duoarrow { display:flex; color:var(--accent); flex:none; }
.ws-duoarrow svg { width:22px; height:22px; }

/* ================= logos · stats ================= */
.ws-logos { padding:44px 0; }
.ws-marks { display:flex; gap:14px 44px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.ws-mark { font:700 16px var(--font-head, var(--font)); color:var(--faint); letter-spacing:.3px;
  transition:color 140ms linear; }
.ws-mark:hover { color:var(--dim); }
.ws-markgrid { display:grid; grid-template-columns:repeat(6, 1fr); margin-top:24px;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden; }
.ws-markcell { padding:22px 10px; font:700 14px var(--font-head, var(--font)); color:var(--faint);
  border-right:var(--bw, 1px) solid var(--hair); text-align:center; }
.ws-markcell:last-child { border-right:none; }
.ws-stats.v-band { padding:56px 0; background:color-mix(in srgb, var(--panel) 45%, var(--bg));
  border-block:var(--bw, 1px) solid var(--hair); }
.ws-statrow { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.ws-stat { display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.ws-stat b { font:800 clamp(26px, 3.4cqw, 40px) var(--font-head, var(--font)); letter-spacing:-0.02em;
  background:var(--accent-grad, linear-gradient(120deg, var(--accent), var(--accent2, var(--accent))));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ws-stat i { font:500 11.5px var(--font); color:var(--faint); font-style:normal; }
.ws-statgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ws-stat.card { padding:24px 14px; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
/* titled divider stats — ported from SB_04 sections/stats-row.
   Adds an optional heading block above a divided row: hair-line separators between adjacent
   cells at the desktop width, collapsed at narrow container widths (the narrow rule at
   max-width:560px already re-lays .ws-statrow to two columns). */
.ws-stats.v-titled .ws-shead.center { margin-bottom:36px; }
.ws-statrow.divide > .ws-stat + .ws-stat { border-left:var(--bw, 1px) solid var(--hair); }
@container site (max-width: 720px) {
  .ws-statrow.divide > .ws-stat + .ws-stat { border-left:none; }
}

/* ================= quotes · team ================= */
.ws-qgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-quote { margin:0; display:flex; flex-direction:column; gap:16px; padding:22px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-quote blockquote { margin:0; font:400 13.5px/1.65 var(--font); color:var(--ink); }
.ws-quote figcaption { display:flex; align-items:center; gap:11px; margin-top:auto; }
.ws-quote figcaption b { display:block; font:600 12.5px var(--font); color:var(--ink); }
.ws-quote figcaption i { display:block; font:400 11px var(--font); color:var(--faint); font-style:normal; }
.ws-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:99px; flex:none;
  background:var(--accent-fill); color:var(--accent); font:700 13px var(--font); }
.ws-qmark { font:800 84px/0.4 var(--font-head, var(--font)); color:var(--accent); display:block; margin-bottom:8px; }
.ws-bigquote { margin:0 auto; max-width:22ch; font:600 clamp(20px, 3.2cqw, 32px)/1.4 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; }
.ws-qwho { display:flex; align-items:center; gap:10px; justify-content:center; margin-top:26px; }
.ws-qwho b { font:600 13px var(--font); color:var(--ink); }
.ws-qwho i { font:400 12px var(--font); color:var(--faint); font-style:normal; }
.ws-qwall { columns:3; column-gap:14px; }
.ws-quote.sm { break-inside:avoid; margin-bottom:14px; }
.ws-quote.sm blockquote { font-size:12.5px; }
/* star-card quote — ported from SB_04 sections/testimonial.
   The card modifier bumps padding + reads --panel-2 as a soft variant fill.
   Blockquote gains an inline accent quote-mark; stars are inline glyphs, empty stars fade. */
.ws-quote.card { padding:28px 26px; background:var(--panel-2, var(--panel));
  gap:14px; border-radius:calc(var(--radius, 12px) * .8); }
.ws-quote.card blockquote { font:400 clamp(15px, 1.7cqw, 17px)/1.6 var(--font); color:var(--ink); }
.ws-quote.card blockquote::before { content:"\201C"; color:var(--accent); opacity:.35;
  font:400 1.4em/0 var(--font-head, var(--font)); vertical-align:-0.18em; margin-right:0.08em; }
.ws-qstars { display:inline-flex; gap:2px; font:400 13px var(--font); color:var(--accent); letter-spacing:1px; margin-bottom:2px; }
.ws-qstars i { color:color-mix(in srgb, var(--faint) 55%, transparent); font-style:normal; }
.ws-shead.center { text-align:center; }
.ws-people { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.ws-person { display:flex; flex-direction:column; align-items:center; gap:4px; padding:26px 14px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  background-image:var(--surface-grad,none); text-align:center; }
.ws-portrait { display:grid; place-items:center; width:64px; height:64px; border-radius:22px; margin-bottom:10px;
  font:800 24px var(--font-head, var(--font)); color:var(--accent-text, #04121a);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); }
.ws-portrait.p1 { border-radius:99px; opacity:.9; }
.ws-portrait.p2 { border-radius:14px; opacity:.8; }
.ws-portrait.p3 { border-radius:32px 12px 32px 12px; opacity:.85; }
.ws-person b { font:600 14px var(--font); color:var(--ink); }
.ws-person i { font:400 11.5px var(--font); color:var(--faint); font-style:normal; }

/* ================= pricing ================= */
.ws-plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; align-items:stretch; }
.ws-plan { position:relative; display:flex; flex-direction:column; gap:6px; padding:26px 24px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-plan.hot { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:linear-gradient(180deg, var(--accent-fill), transparent 40%), var(--panel); }
.ws-planbadge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); padding:4px 12px;
  border-radius:99px; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:700 9.5px var(--font); letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
.ws-planname { font:700 16px var(--font-head, var(--font)); color:var(--ink); }
.ws-plandesc { font:400 12px var(--font); color:var(--faint); font-style:normal; }
.ws-price { display:flex; align-items:baseline; gap:8px; margin:16px 0 6px; }
.ws-price b { font:800 38px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.03em; }
.ws-price i { font:500 12px var(--font); color:var(--faint); font-style:normal; }
.ws-plan ul { list-style:none; margin:8px 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; }
.ws-plan ul.two { display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; }
.ws-plan li { display:flex; align-items:center; gap:9px; font:400 12.5px var(--font); color:var(--dim); }
.ws-plan li svg { width:13px; height:13px; color:var(--accent); flex:none; }
.ws-plan .ws-btn { margin-top:auto; justify-content:center; }
.ws-plan.solo { max-width:520px; margin:30px auto 0; text-align:left; }

/* ================= cta · contact ================= */
.ws-cta.v-banner { padding:72px 0; background:var(--accent-grad, var(--accent)); background-color:var(--accent); }
.ws-h2.inverse { color:var(--accent-text, #04121a); }
.ws-sub.inverse { color:color-mix(in srgb, var(--accent-text, #04121a) 72%, transparent); margin-top:12px; }
.ws-cta.v-banner .ws-btn { margin-top:26px; }
.ws-ctacard { position:relative; overflow:hidden; text-align:center; padding:64px 40px;
  border-radius:calc(var(--radius, 12px) * 1.4); border:var(--bw, 1px) solid var(--hair);
  background:
    radial-gradient(60% 90% at 10% 0%, var(--accent-fill), transparent 60%),
    radial-gradient(50% 80% at 95% 100%, color-mix(in srgb, var(--accent2, var(--accent)) 10%, transparent), transparent 60%),
    var(--panel); }
.ws-signup { display:flex; gap:10px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.ws-signup input { width:min(320px, 70cqw); padding:12px 16px; border-radius:calc(var(--radius, 12px) * .75);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); color:var(--ink); font:400 13px var(--font); outline:none; }
.ws-signup input:focus { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
/* newsletter card — ported from SB_04 newsletter/card (boxed invitation with kicker + email + disclaimer).
   The signup wires up for real (validEmail + per-site memory) so preview isn't a lie.
   Container-queried so the input/button collapse to a stack on narrow rails. */
.ws-cta.v-newsletter .ws-in { max-width:760px; }
.ws-nlcard { text-align:center; padding:clamp(36px, 6cqw, 60px) clamp(22px, 5cqw, 48px);
  border-radius:calc(var(--radius, 12px) * 1.25); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad, none); }
.ws-nlcopy { max-width:520px; margin:0 auto; }
.ws-kick.pill { display:inline-block; padding:6px 14px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); color:var(--dim); }
.ws-nlcard .ws-h2 { margin-top:14px; }
.ws-nlcard .ws-sub { margin-top:12px; }
.ws-nlform { max-width:480px; margin:26px auto 0; display:flex; flex-direction:column; gap:10px; }
.ws-nlrow { display:flex; gap:0; align-items:stretch; border-radius:calc(var(--radius, 12px) * .75);
  overflow:hidden; border:var(--bw, 1px) solid var(--hair); background:var(--bg); }
.ws-nlrow input { flex:1; min-width:0; padding:12px 14px; border:none; outline:none;
  background:transparent; color:var(--ink); font:400 13px var(--font); }
.ws-nlrow input:focus { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.ws-nlrow input::placeholder { color:var(--faint); }
.ws-nlrow .ws-btn { border-radius:0; flex-shrink:0; }
.ws-nlfine { font:400 11.5px/1.55 var(--font); color:var(--faint); margin:0; }
.ws-nlmsg { display:block; min-height:1.4em; font:500 12px var(--font); font-style:normal; margin-top:2px; }
.ws-nlmsg.ok  { color:var(--accent); }
.ws-nlmsg.bad { color:#f87171; }
@container site (max-width: 480px) {
  .ws-nlrow { flex-direction:column; }
  .ws-nlrow .ws-btn { justify-content:center; }
}

/* card-split cta — ported from SB_04 drafts/cta-card-split.
   One bordered --panel card holding two offers (a free-start path beside a
   talk-to-sales path) divided by a hairline: vertical between the columns,
   flipping to a horizontal rule when they stack. Both buttons are real btn()
   anchors; the primary + ghost pairing mirrors the origin accent/outline. */
.ws-cta.v-cta-card-split .ws-in { width:min(1000px, 88cqw); }
.ws-cta.v-cta-card-split .ccsplit { border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * 1.25); overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad, none); }
.ws-cta.v-cta-card-split .ccsplit-head { padding:clamp(26px, 3.4cqw, 36px) clamp(26px, 4cqw, 44px) clamp(20px, 2.6cqw, 28px); }
.ws-cta.v-cta-card-split .ccsplit-head .ws-kick { margin:0; }
.ws-cta.v-cta-card-split .ccsplit-grid { display:grid; grid-template-columns:1fr 1fr; }
.ws-cta.v-cta-card-split .ccsplit-half { display:flex; flex-direction:column; align-items:flex-start;
  padding:0 clamp(26px, 4cqw, 44px) clamp(30px, 4cqw, 44px); }
.ws-cta.v-cta-card-split .ccsplit-half + .ccsplit-half { border-left:var(--bw, 1px) solid var(--hair); }
.ws-cta.v-cta-card-split .ccsplit-h { margin:0; color:var(--ink); letter-spacing:-0.02em;
  font:700 clamp(19px, 2.5cqw, 26px)/1.2 var(--font-head, var(--font)); }
.ws-cta.v-cta-card-split .ccsplit-half .ws-sub { margin:12px 0 24px; max-width:42ch; }
.ws-cta.v-cta-card-split .ccsplit-half .ws-btn { margin-top:auto; }
@container site (max-width: 640px) {
  .ws-cta.v-cta-card-split .ccsplit-grid { grid-template-columns:1fr; }
  .ws-cta.v-cta-card-split .ccsplit-half + .ccsplit-half { border-left:none; border-top:var(--bw, 1px) solid var(--hair);
    padding-top:clamp(26px, 6cqw, 34px); }
  .ws-cta.v-cta-card-split .ccsplit-half .ws-btn { width:100%; justify-content:center; }
}
/* cta countdown — ported from SB_04 drafts/cta-countdown (founder-pricing pitch over a live timer + two CTAs).
   The clock ticks for real (whenVisible + Date math in convert.js) and honors reduced motion.
   Boxed unit cells on --panel, mono tabular-nums values; container-queried to a tight stack on narrow rails. */
.ws-cta.v-cta-countdown .ws-in { max-width:760px; }
.ws-cta.v-cta-countdown .ws-kick { margin-bottom:16px; }
.ws-cta.v-cta-countdown .ws-cdtimer { display:flex; align-items:flex-start; justify-content:center;
  gap:10px; margin:32px 0 30px; flex-wrap:wrap; }
.ws-cta.v-cta-countdown .ws-cdunit { display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:20px 22px; min-width:88px; border-radius:calc(var(--radius, 12px) * .9);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad, none); }
.ws-cta.v-cta-countdown .ws-cdval { font:800 clamp(30px, 4cqw, 46px) var(--mono); color:var(--ink);
  letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums; }
.ws-cta.v-cta-countdown .ws-cdval.tick { animation:wsDigit 340ms cubic-bezier(.2,.8,.25,1); }
.ws-cta.v-cta-countdown .ws-cdlabel { font:700 9.5px var(--mono); letter-spacing:2px;
  text-transform:uppercase; color:var(--faint); font-style:normal; }
.ws-cta.v-cta-countdown .ws-cdsep { align-self:flex-start; padding-top:20px;
  font:300 30px var(--font); color:var(--faint); }
@container site (max-width: 560px) {
  .ws-cta.v-cta-countdown .ws-cdtimer { gap:6px; }
  .ws-cta.v-cta-countdown .ws-cdunit { min-width:60px; padding:14px 10px; }
  .ws-cta.v-cta-countdown .ws-cdsep { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-cta.v-cta-countdown .ws-cdval.tick { animation:none; }
}

/* minimal bar — ported from SB_04 drafts/cta-minimal-bar (compact single-row CTA strip).
   A hairline-bounded band on --panel: nowrap headline + ellipsised support line + one live
   btn() link (no dead affordance). Row collapses to a left-aligned stack on narrow rails. */
.ws-cta.v-cta-minimal-bar { padding:18px 0; background:var(--panel);
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-cta.v-cta-minimal-bar .ws-in { display:flex; align-items:center; gap:28px; }
.ws-cta.v-cta-minimal-bar .mbbar-head { margin:0; flex-shrink:0; white-space:nowrap;
  font:600 15px var(--font); color:var(--ink); }
.ws-cta.v-cta-minimal-bar .mbbar-sub { margin:0; flex:1; min-width:0;
  font:400 13.5px/1.5 var(--font); color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-cta.v-cta-minimal-bar .ws-btn { flex-shrink:0; }
@container site (max-width: 640px) {
  .ws-cta.v-cta-minimal-bar { padding:22px 0; }
  .ws-cta.v-cta-minimal-bar .ws-in { flex-direction:column; align-items:flex-start; gap:14px; }
  .ws-cta.v-cta-minimal-bar .mbbar-sub { white-space:normal; overflow:visible; text-overflow:clip; }
  .ws-cta.v-cta-minimal-bar .ws-btn { width:100%; justify-content:center; }
}
/* cta fullscreen — ported from SB_04 drafts/cta-fullscreen (full-height centered ask, accent glow, dual buttons, trust row).
   Origin's #0a0a0a bg + blue radial glow -> --panel base with an --accent-fill radial; buttons become real btn() atoms.
   Baked scoped reset dropped (ZenOS owns the box model); the 100vh min-height becomes tall container padding so it can
   never overflow the scaled builder preview; the viewport @media -> container query. */
.ws-cta.v-cta-fullscreen { padding:clamp(88px, 14cqw, 168px) 0;
  background:radial-gradient(ellipse 62% 46% at 50% 46%, var(--accent-fill), transparent 72%), var(--panel); }
.ws-cta.v-cta-fullscreen .ws-in { max-width:760px; }
.ws-cta.v-cta-fullscreen .ws-h2 { font-size:clamp(30px, 5.4cqw, 52px); letter-spacing:-0.02em; }
.ws-cta.v-cta-fullscreen .ws-sub { margin-top:16px; }
.ws-cta.v-cta-fullscreen .ws-fstrust { list-style:none; margin:clamp(22px, 3.4cqw, 34px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; }
.ws-cta.v-cta-fullscreen .ws-fstrust li { display:inline-flex; align-items:center; gap:8px;
  font:500 12.5px var(--font); color:var(--faint); }
.ws-cta.v-cta-fullscreen .ws-fstrust svg { width:14px; height:14px; color:var(--accent); flex:none; }
@container site (max-width: 480px) {
  .ws-cta.v-cta-fullscreen .ws-ctarow { flex-direction:column; width:100%; }
  .ws-cta.v-cta-fullscreen .ws-ctarow .ws-btn { width:100%; justify-content:center; }
  .ws-cta.v-cta-fullscreen .ws-fstrust { gap:12px 18px; }
}
/* minimal centered cta — ported from SB_04 drafts/cta-minimal-centered.
   Pure restraint: a centered headline, one support line on a tight measure, and a primary +
   ghost pair. Rhythm rides the shared atoms (ws-in.center / ws-h2 / ws-sub / ws-ctarow.center);
   this block only narrows the column, tightens the tracking, and airs out the vertical rhythm.
   On a narrow rail the pair stacks full-width — mirrors the origin's mobile stack. */
.ws-cta.v-cta-minimal-centered { padding:clamp(72px, 10cqw, 112px) 0; }
.ws-cta.v-cta-minimal-centered .ws-in { width:min(680px, 88cqw); }
.ws-cta.v-cta-minimal-centered .ws-h2 { letter-spacing:-0.02em; text-wrap:balance; }
.ws-cta.v-cta-minimal-centered .ws-sub { max-width:46ch; margin-top:clamp(16px, 2cqw, 22px); text-wrap:balance; }
.ws-cta.v-cta-minimal-centered .ws-ctarow { margin-top:clamp(28px, 3.4cqw, 40px); }
@container site (max-width: 480px) {
  .ws-cta.v-cta-minimal-centered .ws-ctarow { flex-direction:column; align-items:stretch; }
  .ws-cta.v-cta-minimal-centered .ws-ctarow .ws-btn { justify-content:center; }
}
/* CTA / Image Overlay — SB_04 drafts/cta-image-overlay. Full-bleed photo under a cinematic
   scrim; centered kicker/headline/support/CTA and a trust strip. img prop overrides the themed
   .ph placeholder (house cover pattern, no hotlink). The scrim is a theme-independent dark
   overlay (permitted), so its foreground text is fixed light for contrast. Entrance motion
   belongs to anims.js; only hover motion here. Container queries, no viewport media. */
.ws-cta.v-cta-image-overlay { position:relative; overflow:hidden; padding:0; isolation:isolate; }
.ws-cta.v-cta-image-overlay .cio-img { position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  background-color:color-mix(in srgb, var(--bg) 62%, black); }
.ws-cta.v-cta-image-overlay .cio-img.ph { background-image:
    radial-gradient(80% 70% at 30% 22%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%),
    radial-gradient(70% 80% at 78% 84%, color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent), transparent 66%),
    repeating-linear-gradient(120deg, color-mix(in srgb, #fff 6%, transparent) 0 2px, transparent 2px 82px); }
.ws-cta.v-cta-image-overlay .cio-scrim { position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.56) 44%, rgba(0,0,0,0.88)); }
.ws-cta.v-cta-image-overlay .cio-in { position:relative; z-index:2;
  padding:clamp(72px, 12cqw, 132px) 0 clamp(52px, 8cqw, 92px);
  display:flex; flex-direction:column; align-items:center; gap:20px; }
.ws-cta.v-cta-image-overlay .ws-kick { color:rgba(255,255,255,0.62); }
.ws-cta.v-cta-image-overlay .ws-h2 { color:#fff; max-width:20ch; }
.ws-cta.v-cta-image-overlay .ws-sub { color:rgba(255,255,255,0.78); max-width:46ch; }
.ws-cta.v-cta-image-overlay .ws-ctarow { margin-top:6px; }
.ws-cta.v-cta-image-overlay .cio-trust { display:flex; flex-direction:column; align-items:center;
  gap:12px; margin-top:clamp(18px, 3cqw, 34px); }
.ws-cta.v-cta-image-overlay .cio-trust-label { font:600 10px var(--mono); letter-spacing:3px;
  text-transform:uppercase; color:rgba(255,255,255,0.42); }
.ws-cta.v-cta-image-overlay .cio-logos { display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:clamp(18px, 3cqw, 30px); }
.ws-cta.v-cta-image-overlay .cio-logo { font:700 15px var(--font-head, var(--font));
  letter-spacing:0.2px; color:rgba(255,255,255,0.5); text-transform:uppercase; transition:color .2s ease; }
.ws-cta.v-cta-image-overlay .cio-logo:hover { color:rgba(255,255,255,0.85); }
@container site (max-width: 560px) {
  .ws-cta.v-cta-image-overlay .cio-in { padding-inline:20px; }
  .ws-cta.v-cta-image-overlay .cio-logos { gap:16px; }
  .ws-cta.v-cta-image-overlay .cio-logo { font-size:13px; }
}
/* cta-split — ported from SB_04 drafts/cta-split (two-panel: pitch + checklist on the left,
   a live email trial-signup card on the right). Origin --cs-* vars -> theme tokens; the card's
   accent top-strip rides --accent; the signup wires up for real (validEmail + per-site memory,
   mirroring the newsletter card) so the preview isn't a lie. Reuses ws-in.split / ws-kick / ws-h2 /
   ws-sub / ws-nlform / ws-nlmsg atoms. This section isn't a .ws-hero, so the split narrow-stacks
   via its own container query; baked reset + entrance anims dropped. */
.ws-cta.v-cta-split .ws-in.split { align-items:center; gap:clamp(32px, 5cqw, 56px); }
.ws-cta.v-cta-split .csp-copy .ws-sub { margin-top:14px; max-width:44ch; }
.ws-cta.v-cta-split .csp-list { list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-direction:column; gap:11px; }
.ws-cta.v-cta-split .csp-list li { position:relative; padding-left:24px;
  font:400 13.5px/1.5 var(--font); color:var(--ink); }
.ws-cta.v-cta-split .csp-list li::before { content:''; position:absolute; left:0; top:0.42em;
  width:8px; height:8px; border-radius:50%; background:var(--accent); opacity:0.75; }
.ws-cta.v-cta-split .csp-card { position:relative; overflow:hidden;
  padding:clamp(28px, 3cqw, 40px) clamp(24px, 2.6cqw, 34px);
  border-radius:calc(var(--radius, 12px) * 1.1); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad, none); }
.ws-cta.v-cta-split .csp-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), transparent); }
.ws-cta.v-cta-split .csp-ctitle { margin:0; font:700 clamp(17px, 1.9cqw, 20px) var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; }
.ws-cta.v-cta-split .csp-cdesc { margin:8px 0 0; font:400 13px/1.6 var(--font); color:var(--dim); }
.ws-cta.v-cta-split .ws-nlform { max-width:none; margin:20px 0 0; }
.ws-cta.v-cta-split .csp-label { display:flex; flex-direction:column; gap:8px;
  font:600 11px var(--font); letter-spacing:0.5px; text-transform:uppercase; color:var(--dim); }
.ws-cta.v-cta-split .csp-label input { width:100%; padding:12px 14px; text-transform:none;
  letter-spacing:normal; border-radius:calc(var(--radius, 12px) * .6); border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink);
  font:400 13px var(--font); outline:none; }
.ws-cta.v-cta-split .csp-label input::placeholder { color:var(--faint); }
.ws-cta.v-cta-split .csp-label input:focus { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-cta.v-cta-split .ws-nlform .ws-btn { width:100%; justify-content:center; }
.ws-cta.v-cta-split .csp-fine { margin:14px 0 0; text-align:center;
  font:400 11.5px/1.5 var(--font); color:var(--faint); }
@container site (max-width: 860px) {
  .ws-cta.v-cta-split .ws-in.split { grid-template-columns:1fr; gap:34px; }
  .ws-cta.v-cta-split .csp-copy .ws-sub { max-width:none; }
}
/* left-aligned cta - ported from SB_04 drafts/cta-left-aligned. Asymmetric two-column ask: copy + a
   vertical hairline divider beside stacked actions (full-width primary, accent text-link, trust line),
   over a "trusted by" logo strip. Origin --cla-* mapped to tokens (bg->transparent page --bg,
   heading->--ink, body->--dim, accent->--accent, divider->--hair, trust/muted->--faint). Reuses
   ws-h2/ws-sub/btn/ws-textlink/ws-marks atoms; divider + full-width primary + strip are the only bespoke
   rules. No baked entrance (anims.js owns it); hover motion via the shared atoms. Container-queried. */
.ws-cta.v-cta-left-aligned .cla-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.ws-cta.v-cta-left-aligned .cla-copy { padding-right:clamp(24px, 4cqw, 56px); border-right:var(--bw, 1px) solid var(--hair); }
.ws-cta.v-cta-left-aligned .cla-copy .ws-sub { margin-top:16px; }
.ws-cta.v-cta-left-aligned .cla-actions { display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding-left:clamp(24px, 4cqw, 56px); }
.ws-cta.v-cta-left-aligned .cla-actions .ws-btn.primary { width:100%; justify-content:center; }
.ws-cta.v-cta-left-aligned .cla-trust { margin:2px 0 0; font:400 11.5px/1.5 var(--font); letter-spacing:.02em; color:var(--faint); }
.ws-cta.v-cta-left-aligned .cla-logos { display:flex; align-items:center; flex-wrap:wrap; gap:14px 28px;
  margin-top:clamp(32px, 5cqw, 52px); padding-top:clamp(24px, 4cqw, 40px); border-top:var(--bw, 1px) solid var(--hair); }
.ws-cta.v-cta-left-aligned .cla-logolabel { font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; }
.ws-cta.v-cta-left-aligned .cla-marks { margin-top:0; justify-content:flex-start; gap:12px 28px; }
.ws-cta.v-cta-left-aligned .cla-marks .ws-mark { font-size:14px; text-transform:uppercase; letter-spacing:.3px; }
@container site (max-width: 720px) {
  .ws-cta.v-cta-left-aligned .cla-grid { grid-template-columns:1fr; }
  .ws-cta.v-cta-left-aligned .cla-copy { padding-right:0; border-right:none; border-bottom:var(--bw, 1px) solid var(--hair);
    padding-bottom:28px; margin-bottom:28px; }
  .ws-cta.v-cta-left-aligned .cla-actions { padding-left:0; }
}
@container site (max-width: 480px) {
  .ws-cta.v-cta-left-aligned .cla-logos { flex-direction:column; align-items:flex-start; gap:14px; }
}

/* two-column cta — ported from SB_04 drafts/cta-two-col.
   A balanced 50/50 split: a CSS-drawn product window (the shared no-image .ws-browser
   stand-in, swapped in for the origin's editorial photo) beside a copy column with kicker,
   headline, body and two real buttons. Reuses the shared .ws-in.split grid, which
   narrow-stacks to one column via the global 860px rule; container queries only, no
   viewport media. Origin --ctatc-* vars folded onto theme tokens; hover rides transform
   only (never a background; no entrance anim — anims.js owns those). */
.ws-cta.v-cta-two-col .ctc-in { gap:clamp(36px, 5cqw, 80px); }
.ws-cta.v-cta-two-col .ctc-copy { display:flex; flex-direction:column; }
.ws-cta.v-cta-two-col .ctc-copy .ws-sub { margin-top:16px; max-width:46ch; }
.ws-cta.v-cta-two-col .ctc-copy .ws-ctarow { margin-top:26px; }
.ws-cta.v-cta-two-col .ctc-media .ws-browser { transition:transform 220ms var(--ease-pop, ease-out); }
.ws-cta.v-cta-two-col .ctc-media:hover .ws-browser { transform:translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .ws-cta.v-cta-two-col .ctc-media .ws-browser,
  .ws-cta.v-cta-two-col .ctc-media:hover .ws-browser { transform:none; }
}
/* tear-off ticket CTA — ported from SB_04 drafts/cta-ticket.
   Themed ticket: body + a REAL perforated strip (mask punches holes so the section --bg shows
   through) + ADMIT ONE stub. Claim tears the stub, thumps a CLAIMED stamp, and is remembered per
   site (mount). Bespoke .ctk-btn keeps the on-paper look; entrance anims dropped, interaction
   motion kept and reduced-motion honored. Foil seal is a decorative holographic hardcode.
   Container-queried, never viewport media. */
.ws-cta.v-cta-ticket { position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(56px, 9cqw, 104px) 0; background:var(--bg); }
.ws-cta.v-cta-ticket .ws-h2 { max-width:18em; margin-inline:auto; }
.ws-cta.v-cta-ticket .ws-sub { margin-top:14px; }
.ws-cta.v-cta-ticket .ctk-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.ws-cta.v-cta-ticket .ctk-tixwrap { position:relative; z-index:0; max-width:34rem;
  margin:clamp(30px, 4.5cqw, 46px) auto clamp(18px, 3cqw, 22px); }
.ws-cta.v-cta-ticket .ctk-tixwrap::before { content:""; position:absolute; inset:-22% -10%;
  z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, var(--accent-fill, color-mix(in srgb, var(--accent) 16%, transparent)), transparent 72%); }

.ws-cta.v-cta-ticket .ctk-tix { display:grid; text-align:left;
  grid-template-columns:minmax(0, 1fr) 16px minmax(86px, 104px);
  transform:rotate(-1.3deg); filter:drop-shadow(0 22px 28px rgba(0, 0, 0, .5));
  transition:transform .35s ease; }
.ws-cta.v-cta-ticket .ctk-tix:hover { transform:rotate(-1.3deg) translateY(-5px); }

.ws-cta.v-cta-ticket .ctk-body { position:relative; min-width:0; color:var(--ink);
  padding:clamp(16px, 3cqw, 24px) clamp(16px, 3.2cqw, 26px); background:var(--panel);
  border-radius:var(--radius, 16px) 0 0 var(--radius, 16px); }
.ws-cta.v-cta-ticket .ctk-perf { background:var(--panel);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 4px, #000 4.5px);
  -webkit-mask-size:100% 18px; -webkit-mask-repeat:repeat-y;
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 4px, #000 4.5px);
  mask-size:100% 18px; mask-repeat:repeat-y; }
.ws-cta.v-cta-ticket .ctk-stubcell { position:relative;
  border-radius:0 var(--radius, 16px) var(--radius, 16px) 0; }
.ws-cta.v-cta-ticket .ctk-stub { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:space-between; gap:.6rem; padding:14px 8px 13px;
  background:var(--panel-2, var(--panel)); color:var(--ink); transform-origin:10% 90%;
  border-radius:0 var(--radius, 16px) var(--radius, 16px) 0; }

.ws-cta.v-cta-ticket .ctk-ghost { position:absolute; inset:2px 0 2px 2px; display:flex; opacity:0;
  align-items:center; justify-content:center;
  border:2px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius:0 var(--radius, 16px) var(--radius, 16px) 0; transition:opacity .4s ease .3s; }
.ws-cta.v-cta-ticket .ctk-ghost span { writing-mode:vertical-rl; color:var(--faint);
  font:600 8px var(--mono); letter-spacing:.3em; text-transform:uppercase; }

.ws-cta.v-cta-ticket .ctk-admit { writing-mode:vertical-rl; color:var(--faint);
  font:700 .58rem var(--mono); letter-spacing:.46em; text-transform:uppercase; }
.ws-cta.v-cta-ticket .ctk-bar { width:38px; height:84px; border-radius:2px; opacity:.82;
  background:
    repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(180deg, var(--ink) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(180deg, var(--ink) 0 3px, transparent 3px 11px); }
.ws-cta.v-cta-ticket .ctk-serial { white-space:nowrap; color:var(--faint);
  font:400 .54rem var(--mono); letter-spacing:.18em; }

.ws-cta.v-cta-ticket .ctk-body-head { display:flex; align-items:center;
  justify-content:space-between; gap:.6rem; }
.ws-cta.v-cta-ticket .ctk-brand { color:var(--faint); font:700 .56rem var(--mono);
  letter-spacing:.3em; text-transform:uppercase; }
.ws-cta.v-cta-ticket .ctk-foil { width:24px; height:24px; flex:none; border-radius:50%; opacity:.9;
  background:conic-gradient(from 210deg, #c9a3ff, #8fe0ff, #ffe9a3, #ffb3c8, #c9a3ff);
  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .14), inset 2px 3px 6px rgba(255, 255, 255, .6); }
.ws-cta.v-cta-ticket .ctk-event { margin:.4em 0 .85em; color:var(--ink); letter-spacing:-.01em;
  font:700 clamp(20px, 3cqw, 27px)/1.1 var(--font-head, var(--font)); }
.ws-cta.v-cta-ticket .ctk-meta { display:grid; margin:0; justify-content:start;
  grid-template-columns:repeat(4, minmax(3.4rem, auto)); gap:.7rem .9rem; }
.ws-cta.v-cta-ticket .ctk-meta > div { min-width:0; }
.ws-cta.v-cta-ticket .ctk-meta dt { margin:0 0 .3em; color:var(--faint);
  font:400 .48rem var(--mono); letter-spacing:.26em; text-transform:uppercase; }
.ws-cta.v-cta-ticket .ctk-meta dd { margin:0; color:var(--ink); white-space:nowrap;
  font:700 .92rem var(--mono); }

.ws-cta.v-cta-ticket .ctk-act { display:flex; flex-wrap:wrap; align-items:center;
  gap:.9rem; margin-top:1.15rem; }
.ws-cta.v-cta-ticket .ctk-btn { -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  padding:.95em 1.5em; border-radius:calc(var(--radius, 16px) * .5);
  background:var(--accent); color:var(--accent-text, #04121a);
  font:600 .74rem var(--mono); letter-spacing:.16em; text-transform:uppercase;
  transition:transform .2s ease; }
.ws-cta.v-cta-ticket .ctk-btn:hover { transform:translateY(-1px); }
.ws-cta.v-cta-ticket .ctk-btn:focus-visible,
.ws-cta.v-cta-ticket .ctk-after:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.ws-cta.v-cta-ticket .ctk-after { color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  font:400 .72rem var(--mono); letter-spacing:.06em; }
.ws-cta.v-cta-ticket .ctk-after[hidden] { display:none; }

.ws-cta.v-cta-ticket .ctk-fine { margin:0; color:var(--dim);
  font:400 .58rem var(--mono); letter-spacing:.22em; text-transform:uppercase; }

.ws-cta.v-cta-ticket .ctk-stamp { position:absolute; top:50%; left:58%; pointer-events:none; opacity:0;
  padding:.55em .55em .55em .95em; border:3px solid var(--accent); border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent);
  font:700 .95rem var(--mono); letter-spacing:.32em; text-transform:uppercase;
  transform:translate(-50%, -50%) rotate(-9deg); }
.ws-cta.v-cta-ticket.is-claimed .ctk-stamp { animation:ctkticket-stamp .5s cubic-bezier(.18, 1.35, .35, 1) forwards; }
@keyframes ctkticket-stamp {
  0% { opacity:0; transform:translate(-50%, -50%) rotate(-15deg) scale(1.9); }
  62% { opacity:1; transform:translate(-50%, -50%) rotate(-8deg) scale(.96); }
  100% { opacity:1; transform:translate(-50%, -50%) rotate(-9deg) scale(1); } }
.ws-cta.v-cta-ticket.is-claimed .ctk-stub { animation:ctkticket-tear .75s cubic-bezier(.42, .1, .68, 1) forwards; pointer-events:none; }
@keyframes ctkticket-tear {
  12% { transform:rotate(-3deg) translateX(2%); }
  32% { transform:rotate(10deg) translateX(9%); opacity:1; }
  100% { transform:rotate(40deg) translate(60%, 135%); opacity:0; } }
.ws-cta.v-cta-ticket.is-claimed .ctk-ghost { opacity:1; }

.ws-cta.v-cta-ticket.is-claimed-instant .ctk-stub { animation:none; visibility:hidden; }
.ws-cta.v-cta-ticket.is-claimed-instant .ctk-stamp { opacity:1; transform:translate(-50%, -50%) rotate(-9deg); }
.ws-cta.v-cta-ticket.is-claimed-instant .ctk-ghost { opacity:1; transition:none; }

@container site (max-width: 480px) {
  .ws-cta.v-cta-ticket .ctk-meta { grid-template-columns:repeat(2, minmax(3.4rem, auto)); }
  .ws-cta.v-cta-ticket .ctk-stamp { font-size:.78rem; left:54%; } }

@media (prefers-reduced-motion: reduce) {
  .ws-cta.v-cta-ticket .ctk-tix,
  .ws-cta.v-cta-ticket .ctk-btn,
  .ws-cta.v-cta-ticket .ctk-ghost { transition:none; }
  .ws-cta.v-cta-ticket .ctk-tix:hover { transform:rotate(-1.3deg); }
  .ws-cta.v-cta-ticket .ctk-btn:hover { transform:none; }
  .ws-cta.v-cta-ticket.is-claimed .ctk-stub { animation:none; visibility:hidden; }
  .ws-cta.v-cta-ticket.is-claimed .ctk-stamp { animation:none; opacity:1; transform:translate(-50%, -50%) rotate(-9deg); } }

/* signature CTA — ported from SB_04 drafts/cta-signature. A "letter of engagement" close:
   numbered clauses beside a contract card with a REAL signature pad — draw with a pointer
   (velocity-variable ink) or type a name that renders on the line, then Sign stamps a SIGNED
   seal, the studio countersigns and a Continue link is revealed (persisted per-site like the
   newsletter mount). Origin --csg-* -> theme tokens (paper -> --panel-2, brass -> --accent,
   ink -> --ink, hairlines -> --hair); the oxblood seal keeps a semantic red. Typed signature
   maps to --font-head italic (no remote script font). Container queries only; entrance is left
   to anims.js — only sign/clear interaction motion remains and honours reduced-motion. */
.ws-cta.v-cta-signature { --csgn-seal:#d64533; }
.ws-cta.v-cta-signature .ws-in.split { grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr);
  align-items:center; gap:clamp(32px, 5cqw, 64px); }
.ws-cta.v-cta-signature .csgn-points { list-style:none; margin:20px 0 0; padding:0; }
.ws-cta.v-cta-signature .csgn-points li { display:flex; gap:14px; align-items:baseline; padding:11px 0;
  border-top:var(--bw, 1px) solid var(--hair); font:400 13.5px/1.5 var(--font); color:var(--dim); }
.ws-cta.v-cta-signature .csgn-points li:last-child { border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-cta.v-cta-signature .csgn-points b { font-weight:600; color:var(--ink); }
.ws-cta.v-cta-signature .csgn-cl { flex:0 0 auto; font:600 11px var(--mono); letter-spacing:1px; color:var(--accent); }

.ws-cta.v-cta-signature .csgn-paper { position:relative;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 2%, transparent) 0 1px, transparent 1px 4px),
    radial-gradient(140% 110% at 50% -20%, color-mix(in srgb, var(--ink) 5%, transparent), transparent 55%),
    var(--panel-2, var(--panel));
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  padding:clamp(22px, 4cqw, 40px); box-shadow:0 30px 60px -30px rgba(0, 0, 0, .5); }
.ws-cta.v-cta-signature .csgn-dochead { display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between;
  margin:0 0 16px; padding-bottom:14px; border-bottom:var(--bw, 1px) solid var(--hair);
  font:500 10.5px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.ws-cta.v-cta-signature .csgn-dochead b { font-weight:600; color:var(--dim); }
.ws-cta.v-cta-signature .csgn-docbody { margin:0 0 22px; font:400 14px/1.7 var(--font); color:var(--dim); }
.ws-cta.v-cta-signature .csgn-docbody em { color:var(--ink); font-style:italic; }

.ws-cta.v-cta-signature .csgn-field { margin-bottom:16px; }
.ws-cta.v-cta-signature .csgn-flabel { display:block; margin-bottom:7px; font:500 10px var(--mono);
  letter-spacing:2.5px; text-transform:uppercase; color:var(--faint); }
.ws-cta.v-cta-signature .csgn-name { width:100%; padding:11px 14px; background:var(--bg);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .6); color:var(--ink);
  font:400 15px var(--font); outline:none; }
.ws-cta.v-cta-signature .csgn-name::placeholder { color:var(--faint); }
.ws-cta.v-cta-signature .csgn-name:focus-visible { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }

.ws-cta.v-cta-signature .csgn-pad { position:relative; height:138px; margin-bottom:6px; }
.ws-cta.v-cta-signature .csgn-canvas { position:absolute; inset:0; width:100%; height:100%;
  touch-action:none; cursor:crosshair; border-radius:calc(var(--radius, 12px) * .6); }
.ws-cta.v-cta-signature.is-signed .csgn-canvas { pointer-events:none; cursor:default; }
.ws-cta.v-cta-signature .csgn-x { position:absolute; left:2px; bottom:23px; font:400 15px var(--mono);
  color:var(--accent); pointer-events:none; }
.ws-cta.v-cta-signature .csgn-baseline { position:absolute; left:26px; right:2px; bottom:26px;
  border-bottom:1px dotted color-mix(in srgb, var(--ink) 38%, transparent); pointer-events:none; }
.ws-cta.v-cta-signature .csgn-typed { position:absolute; left:32px; right:8px; bottom:28px;
  font:italic 400 clamp(23px, 4cqw, 32px)/1.1 var(--font-head, var(--font)); color:var(--ink);
  white-space:nowrap; overflow:hidden; transform:rotate(-2.2deg); transform-origin:left bottom; pointer-events:none; }
.ws-cta.v-cta-signature .csgn-hint { position:absolute; left:27px; bottom:6px; font:500 9.5px var(--mono);
  letter-spacing:1.5px; text-transform:uppercase; color:var(--faint); pointer-events:none; transition:opacity .3s ease; }
.ws-cta.v-cta-signature.has-ink .csgn-hint,
.ws-cta.v-cta-signature.has-typed .csgn-hint,
.ws-cta.v-cta-signature.is-signed .csgn-hint { opacity:0; }

.ws-cta.v-cta-signature .csgn-seal { position:absolute; right:16px; top:-6px; width:92px; height:92px;
  border:2px solid var(--csgn-seal); border-radius:50%; display:grid; place-content:center; gap:2px;
  text-align:center; transform:rotate(-12deg); color:var(--csgn-seal); opacity:0; pointer-events:none; }
.ws-cta.v-cta-signature .csgn-seal::before { content:''; position:absolute; inset:4px;
  border:1px solid var(--csgn-seal); border-radius:50%; opacity:.75; }
.ws-cta.v-cta-signature .csgn-seal span { font:600 11px var(--mono); letter-spacing:3px; text-transform:uppercase; text-indent:3px; }
.ws-cta.v-cta-signature .csgn-seal em { font:400 8.5px var(--mono); font-style:normal; letter-spacing:1px; }
.ws-cta.v-cta-signature.is-signed .csgn-seal { opacity:.92; animation:csgn-stamp .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes csgn-stamp { from { transform:rotate(-4deg) scale(1.5); opacity:0; } to { transform:rotate(-12deg) scale(1); opacity:.92; } }

.ws-cta.v-cta-signature .csgn-meta { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  justify-content:space-between; margin-bottom:20px; font:500 10.5px var(--mono); letter-spacing:1px; color:var(--faint); }
.ws-cta.v-cta-signature .csgn-date { color:var(--dim); }
.ws-cta.v-cta-signature .csgn-witness { display:inline-flex; align-items:center; gap:8px; visibility:hidden; }
.ws-cta.v-cta-signature.is-signed .csgn-witness { visibility:visible; }
.ws-cta.v-cta-signature .csgn-scribble { width:54px; height:20px; overflow:visible; }
.ws-cta.v-cta-signature .csgn-scribble path { fill:none; stroke:var(--csgn-seal); stroke-width:1.6;
  stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.ws-cta.v-cta-signature.is-witnessed .csgn-scribble path { stroke-dashoffset:0; transition:stroke-dashoffset .9s ease .1s; }
.ws-cta.v-cta-signature .csgn-clear { background:none; border:var(--bw, 1px) solid var(--hair); border-radius:99px;
  padding:5px 13px; font:500 9.5px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint);
  cursor:pointer; transition:color .2s ease, border-color .2s ease; }
.ws-cta.v-cta-signature .csgn-clear:hover { color:var(--ink); border-color:var(--ink); }
.ws-cta.v-cta-signature .csgn-clear:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ws-cta.v-cta-signature.is-signed .csgn-clear { visibility:hidden; }

.ws-cta.v-cta-signature .csgn-sign { width:100%; justify-content:center; letter-spacing:1px; margin-top:2px; }
.ws-cta.v-cta-signature .csgn-sign[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.ws-cta.v-cta-signature .csgn-sign[aria-disabled="true"]:hover { transform:none; }
.ws-cta.v-cta-signature.is-signed .csgn-sign { display:none; }

.ws-cta.v-cta-signature .csgn-done { display:none; margin:14px 0 0; font:400 14px/1.6 var(--font); color:var(--dim); }
.ws-cta.v-cta-signature.is-signed .csgn-done { display:block; }
.ws-cta.v-cta-signature .csgn-done b { font-weight:400; font-style:italic; color:var(--ink); }
.ws-cta.v-cta-signature .csgn-go { color:var(--accent); text-decoration:underline; text-underline-offset:3px; transition:color .2s ease; }
.ws-cta.v-cta-signature .csgn-go:hover { color:color-mix(in srgb, var(--accent) 72%, var(--ink)); }
.ws-cta.v-cta-signature .csgn-go:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.ws-cta.v-cta-signature .csgn-fine { margin:16px 0 0; font:italic 400 11.5px var(--font); color:var(--faint); }
.ws-cta.v-cta-signature .csgn-live { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
.ws-cta.v-cta-signature .csgn-nudge { animation:csgn-shake .4s ease; }
@keyframes csgn-shake { 20% { transform:translateX(-5px); } 45% { transform:translateX(4px); } 70% { transform:translateX(-2px); } }

@container site (max-width: 860px) {
  .ws-cta.v-cta-signature .ws-in.split { grid-template-columns:1fr; gap:36px; }
}
@container site (max-width: 480px) {
  .ws-cta.v-cta-signature .csgn-seal { width:80px; height:80px; top:-10px; }
  .ws-cta.v-cta-signature .csgn-pad { height:120px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-cta.v-cta-signature *, .ws-cta.v-cta-signature *::before, .ws-cta.v-cta-signature *::after { transition:none !important; animation:none !important; }
  .ws-cta.v-cta-signature.is-signed .csgn-seal { opacity:.92; }
  .ws-cta.v-cta-signature.is-witnessed .csgn-scribble path { stroke-dashoffset:0; }
}

/* @@SB04-CTA-PORT-CSS-SLOT@@ — SB_04 cta draft ports: insert ONE `.ws-cta.v-<id> {...}` block here (EVERY selector scoped under .ws-cta.v-<id>), then re-emit this EXACT sentinel line. One agent per item; Edit only. */

.ws-crows { display:flex; flex-direction:column; gap:16px; margin-top:26px; }
.ws-crow { display:flex; gap:14px; align-items:center; }
.ws-crow svg { width:18px; height:18px; color:var(--accent); flex:none; }
.ws-crow b { display:block; font:600 12.5px var(--font); color:var(--ink); }
.ws-crow i { display:block; font:400 12px var(--font); color:var(--dim); font-style:normal; }
.ws-form { display:flex; flex-direction:column; gap:11px; }
.ws-form.card { max-width:440px; margin:32px auto 0; padding:26px; border-radius:var(--radius, 12px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad,none); text-align:left; }
.ws-form input, .ws-form textarea { padding:12px 14px; border-radius:calc(var(--radius, 12px) * .6);
  border:var(--bw, 1px) solid var(--hair); background:var(--bg); color:var(--ink); font:400 13px var(--font);
  outline:none; resize:vertical; width:100%; box-sizing:border-box; }
.ws-form input:focus, .ws-form textarea:focus { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.ws-frow2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.ws-form .ws-btn { justify-content:center; }

/* ================= prose · faq ================= */
.ws-prose p { font:400 15px/1.8 var(--font); color:var(--dim); margin:18px 0; }
.ws-prose .ws-h2 { margin-bottom:6px; }
.ws-pull { margin:30px 0; padding:6px 0 6px 22px; border-left:3px solid var(--accent);
  font:600 19px/1.5 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.ws-prosecols { display:flex; flex-direction:column; gap:0; }
.ws-prosecols p { font:400 14px/1.75 var(--font); color:var(--dim); margin:0 0 16px; }
.ws-det { border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-det summary { display:flex; align-items:center; gap:14px; padding:17px 2px; cursor:pointer; list-style:none;
  font:600 14.5px var(--font); color:var(--ink); }
.ws-det summary::-webkit-details-marker { display:none; }
.ws-det summary i { margin-left:auto; font-style:normal; color:var(--faint); font:400 18px var(--mono);
  transition:transform 160ms ease-out, color 160ms linear; }
.ws-det[open] summary i { transform:rotate(45deg); color:var(--accent); }
.ws-det p { margin:0; padding:0 2px 18px; font:400 13px/1.65 var(--font); color:var(--dim); max-width:60ch; }
.ws-faqgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ws-qa { padding:20px 22px; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-qa b { display:block; font:600 13.5px var(--font); color:var(--ink); margin-bottom:8px; }
.ws-qa p { margin:0; font:400 12.5px/1.6 var(--font); color:var(--dim); }

/* ================= responsive — container, not viewport ================= */
@container site (max-width: 860px) {
  .ws-in.split, .ws-hero .ws-in.split { grid-template-columns:1fr; gap:40px; }
  .ws-fgrid, .ws-qgrid { grid-template-columns:1fr 1fr; }
  .ws-plans { grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .ws-plan.hot { order:-1; }
  .ws-bento { grid-template-columns:1fr 1fr; }
  .ws-feat.hero-cell { grid-column:span 2; grid-row:auto; }
  .ws-markgrid { grid-template-columns:repeat(3, 1fr); }
  .ws-markcell:nth-child(3n) { border-right:none; }
  .ws-markcell { border-bottom:var(--bw, 1px) solid var(--hair); }
  .ws-qwall { columns:2; }
  .ws-people { grid-template-columns:1fr 1fr; }
  .ws-fcols { grid-template-columns:1fr 1fr; }
  .ws-fcols.has-nl, .ws-fcols.compact, .ws-fcols.compact.has-nl { grid-template-columns:1fr 1fr; }
  .ws-fnl.col { grid-column:1 / -1; max-width:440px; padding-top:28px; border-top:var(--bw, 1px) solid var(--hair); }
  .ws-frow { grid-template-columns:1fr; gap:22px; padding:28px 0; }
  .ws-frow.flip .ws-frcopy { order:1; }
  .ws-frow.flip .ws-frviz { order:2; }
  .ws-fan { height:260px; margin-top:10px; }
  .ws-edrow { flex-direction:column; align-items:flex-start; gap:20px; }
  .ws-hpanel { min-height:240px; }
}
@container site (max-width: 560px) {
  .ws-sec { padding:calc(56px * var(--density, 1)) 0; }
  .ws-hero { padding:calc(64px * var(--density, 1)) 0 calc(60px * var(--density, 1)); }
  .ws-head { padding-block:12px; gap:12px; }
  .ws-head .ws-nav { display:none; }        /* small screens: pages via footer */
  .ws-head.h-center .ws-nav { display:flex; flex-wrap:wrap; }
  .ws-fgrid, .ws-qgrid, .ws-faqgrid, .ws-statgrid, .ws-bento { grid-template-columns:1fr; }
  .ws-feat.hero-cell { grid-column:auto; }
  .ws-statrow { grid-template-columns:1fr 1fr; gap:28px; }
  .ws-herostats { flex-direction:column; gap:22px; }
  .ws-hstat { border:none !important; padding:0; align-items:center; }
  .ws-qwall { columns:1; }
  .ws-people, .ws-fcols, .ws-frow2, .ws-fcols.has-nl, .ws-fcols.compact, .ws-fcols.compact.has-nl { grid-template-columns:1fr; }
  .ws-duo { flex-direction:column; }
  .ws-duoarrow { transform:rotate(90deg); }
  .ws-marks { gap:10px 26px; }
  .ws-foot.f-min { flex-wrap:wrap; }
  .ws-fbar { flex-wrap:wrap; }
  .ws-ctacard { padding:44px 22px; }
  .ws-logrow { grid-template-columns:1fr; gap:10px; }
  .ws-logmeta { flex-direction:row; align-items:baseline; gap:10px; }
  .ws-sched { grid-template-columns:60px 1fr; gap:12px; }
  .ws-clipgrid, .ws-citygrid, .ws-vaultgrid, .ws-shelf { grid-template-columns:1fr; }
  .ws-shead.left.row { flex-direction:column; align-items:flex-start; gap:10px; }
  .ws-chatq span, .ws-bubble { max-width:88%; }
  .ws-role { flex-wrap:wrap; }
  .ws-crowdav { width:38px; height:38px; font-size:13px; }
  .ws-pinstage { min-height:0; display:flex; flex-direction:column; gap:12px; }
  .ws-pin { position:static; width:100% !important; transform:none !important; }
}

/* ================= the MOBILE MENU — site-level, the header's sidekick.
   Rides position:sticky at the very top of the site (height 0) so its
   overlay covers the visible container without position:fixed — the
   window is a transformed ancestor in the builder, fixed would escape.
   All motion is transform/opacity, one-shot, nothing at rest. ================= */
.ws-menubtn { display:none; width:36px; height:36px; align-items:center; justify-content:center; flex:none;
  border:var(--bw, 1px) solid var(--hair); border-radius:9px; background:none; color:var(--ink); cursor:pointer;
  transition:border-color 140ms linear, color 140ms linear; }
.ws-menubtn:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); }
.ws-menubtn svg { width:17px; height:17px; }
.ws-mbl { font:700 9px var(--mono); letter-spacing:1.6px; font-style:normal; }
.ws-head.h-center { position:relative; }
.h-center .ws-menubtn { position:absolute; right:16px; top:22px; }

.ws-menu { position:sticky; top:0; height:0; z-index:60; }
.ws-mscrim { position:absolute; left:0; top:0; width:100%; height:100cqh;
  background:color-mix(in srgb, var(--bg) 52%, transparent);
  opacity:0; pointer-events:none; transition:opacity 200ms linear; }
.ws-menu.open .ws-mscrim { opacity:1; pointer-events:auto; }
.ws-mpanel { position:absolute; pointer-events:none; }
.ws-menu.open .ws-mpanel { pointer-events:auto; }
.ws-mhead { display:flex; align-items:center; justify-content:space-between; }
.ws-mclose { width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex:none;
  border:var(--bw, 1px) solid var(--hair); border-radius:9px; background:none; color:var(--dim); cursor:pointer;
  transition:color 140ms linear, border-color 140ms linear; }
.ws-mclose:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-mclose svg { width:15px; height:15px; }
.ws-mnote { font:500 11px var(--mono); color:var(--faint); font-style:normal; }
.ws-mlinks { display:flex; flex-direction:column; }
.ws-mlink { display:flex; align-items:baseline; gap:12px; padding:13px 4px; cursor:pointer;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-mlink i { font:600 9.5px var(--mono); color:var(--faint); font-style:normal; }
.ws-mlink b { font:600 16px var(--font); color:var(--ink); }
.ws-mlink.on i, .ws-mlink.on b { color:var(--accent); }
/* drawer — slides from the right */
.m-drawer .ws-mpanel { top:0; right:0; height:100cqh; width:min(320px, 86cqw);
  display:flex; flex-direction:column; gap:18px; padding:18px 20px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-left:var(--bw, 1px) solid var(--hair);
  transform:translateX(105%); transition:transform 260ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-drawer.open .ws-mpanel { transform:translateX(0); }
.m-drawer .ws-mlinks { flex:1; overflow-y:auto; }
.m-drawer .ws-btn { justify-content:center; }
/* bottom sheet */
.m-sheet .ws-mpanel { top:100cqh; left:10px; right:10px;
  display:flex; flex-direction:column; gap:14px; padding:10px 16px 18px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:18px 18px 0 0;
  transform:translateY(2%); opacity:0; transition:transform 260ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), opacity 200ms linear; }
.m-sheet.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.ws-mgrab { width:44px; height:4px; border-radius:99px; background:color-mix(in srgb, var(--ink) 18%, transparent);
  margin:2px auto 0; cursor:pointer; }
.ws-mtiles { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ws-mtile { padding:16px 14px; border-radius:12px; border:var(--bw, 1px) solid var(--hair); cursor:pointer;
  background:color-mix(in srgb, var(--ink) 3%, transparent); }
.ws-mtile b { font:600 14px var(--font); color:var(--ink); }
.ws-mtile.on { border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-fill); }
.ws-mtile.on b { color:var(--accent); }
.m-sheet .ws-btn { justify-content:center; }
/* veil — full takeover, links stagger in */
.m-veil .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; padding:18px max(20px, 6cqw) 26px; box-sizing:border-box;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  opacity:0; transform:scale(1.015); transition:opacity 220ms linear, transform 260ms ease-out; }
.m-veil.open .ws-mpanel { opacity:1; transform:none; }
.ws-mbig { flex:1; display:flex; flex-direction:column; justify-content:center; gap:2px; overflow-y:auto; }
.ws-mbiglink { display:flex; align-items:baseline; gap:16px; padding:8px 0; cursor:pointer;
  opacity:0; transform:translateY(16px); transition:opacity 240ms linear, transform 300ms var(--ease-pop, ease-out);
  transition-delay:0ms; }
.m-veil.open .ws-mbiglink { opacity:1; transform:none; transition-delay:calc(60ms + var(--i) * 50ms); }
.ws-mbiglink i { font:600 11px var(--mono); color:var(--faint); font-style:normal; }
.ws-mbiglink b { font:800 clamp(30px, 8.5cqw, 54px)/1.05 var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; transition:color 140ms linear; }
.ws-mbiglink:hover b, .ws-mbiglink.on b { color:var(--accent); }
.ws-mfoot { display:flex; align-items:center; justify-content:space-between; gap:16px; }
/* dropdown — unfolds under the top edge */
.m-drop .ws-mpanel { top:0; left:0; width:100%;
  display:flex; flex-direction:column; gap:16px; padding:20px 22px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-bottom:var(--bw, 1px) solid var(--hair);
  transform:translateY(-8%); opacity:0; transition:transform 240ms var(--ease-pop, ease-out), opacity 200ms linear; }
.m-drop.open .ws-mpanel { transform:none; opacity:1; }
.ws-mrow { display:flex; gap:10px; }

/* ================= announcement banners ================= */
.ws-banner.v-announce { padding:0; border-block:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--accent) 7%, transparent); }
.v-announce .ws-in { display:flex; align-items:center; gap:14px; padding:12px 0; flex-wrap:wrap; }
.ws-bnbadge { padding:3px 10px; border-radius:99px; flex:none;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:700 9px var(--mono); letter-spacing:1.4px; }
.ws-bntext { font:500 12.5px var(--font); color:var(--ink); flex:1; min-width:200px; }
.v-announce .ws-textlink { font-size:12.5px; flex:none; }
.ws-banner.v-ticker { padding:0; border-block:var(--bw, 1px) solid var(--hair); overflow:hidden; }
.ws-tickrow { display:flex; gap:26px; align-items:center; padding:13px 0; white-space:nowrap;
  justify-content:center; }
.ws-tickrow span { font:700 11px var(--mono); letter-spacing:2.5px; color:var(--dim); flex:none; }
.ws-tickrow i { color:var(--accent); font-style:normal; font-size:10px; flex:none; }

/* ================= process / steps ================= */
.ws-tline { position:relative; padding-left:6px; }
.ws-tstop { position:relative; display:flex; gap:22px; padding:0 0 34px 0; }
.ws-tstop::before { content:''; position:absolute; left:16px; top:36px; bottom:2px; width:2px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }
.ws-tstop:last-child::before { display:none; }
.ws-tdot { display:grid; place-items:center; width:34px; height:34px; border-radius:99px; flex:none; z-index:1;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-fill);
  color:var(--accent); font:700 13px var(--mono); }
.ws-tbody b { display:block; font:700 16.5px var(--font-head, var(--font)); color:var(--ink); margin:6px 0 7px; }
.ws-tbody p { margin:0; font:400 13px/1.65 var(--font); color:var(--dim); max-width:54ch; }
.ws-stepgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-stepcard { position:relative; overflow:hidden; padding:26px 22px 24px; border-radius:var(--radius, 12px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad,none); }
.ws-ghostno { position:absolute; top:-18px; right:2px; font:800 96px/1 var(--font-head, var(--font));
  color:color-mix(in srgb, var(--ink) 6%, transparent); font-style:normal; pointer-events:none; }
.ws-stepcard b { display:block; font:700 15.5px var(--font-head, var(--font)); color:var(--ink); margin-bottom:8px; }
.ws-stepcard p { margin:0; font:400 12.5px/1.6 var(--font); color:var(--dim); }

/* ================= gallery — CSS-drawn art tiles ================= */
.ws-art { border-radius:12px; border:var(--bw, 1px) solid var(--hair); background:var(--panel); }
.ws-work { margin:0 0 14px; break-inside:avoid; cursor:pointer; }
.ws-work .ws-art { transition:transform 180ms var(--ease-pop, ease-out); }
.ws-work:hover .ws-art { transform:translateY(-4px); }
.ws-wall { columns:3; column-gap:14px; }
.ws-work figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 2px 0; }
.ws-work figcaption b { font:600 13px var(--font); color:var(--ink); }
.ws-work figcaption i { font:600 9px var(--mono); letter-spacing:1.2px; color:var(--faint);
  font-style:normal; text-transform:uppercase; }
/* six art recipes — gradients only, nothing external */
.a0 .ws-art { aspect-ratio:4/5; background:
  radial-gradient(80% 70% at 20% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), var(--panel); }
.a1 .ws-art { aspect-ratio:1/1; background:
  linear-gradient(135deg, var(--accent-fill), color-mix(in srgb, var(--accent2, var(--accent)) 16%, transparent)), var(--panel); }
.a2 .ws-art { aspect-ratio:4/3; background:
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 2px, transparent 2px 18px), var(--panel); }
.a3 .ws-art { aspect-ratio:3/4; background:
  radial-gradient(90% 80% at 82% 88%, color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent), transparent 72%), var(--panel); }
.a4 .ws-art { aspect-ratio:1/1.15; background:
  conic-gradient(from 210deg at 60% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent) 78%, transparent), var(--panel); }
.a5 .ws-art { aspect-ratio:4/3; background:
  repeating-linear-gradient(45deg, transparent 0 26px, color-mix(in srgb, var(--ink) 7%, transparent) 26px 27px),
  radial-gradient(60% 60% at 50% 30%, var(--accent-fill), transparent 75%), var(--panel); }
/* filmstrip */
.ws-strip { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px max(24px, calc((100cqw - 1080px) / 2)) 12px; scrollbar-width:thin; }
.ws-frame { position:relative; flex:0 0 min(300px, 72cqw); margin:0; scroll-snap-align:start; }
.ws-frame .ws-art { aspect-ratio:3/4 !important; }
.ws-fno { position:absolute; top:12px; left:14px; font:700 11px var(--mono); color:var(--dim);
  font-style:normal; z-index:1; }
.ws-frame figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 2px 0; }
.ws-frame figcaption b { font:600 13px var(--font); color:var(--ink); }
.ws-frame figcaption i { font:600 9px var(--mono); letter-spacing:1.2px; color:var(--faint);
  font-style:normal; text-transform:uppercase; }

/* ================= integrations constellation ================= */
.ws-orbitrow { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
  max-width:760px; margin:6px auto 0; }
.ws-tool { display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 10px; border-radius:99px;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad,none);
  transition:transform 160ms var(--ease-pop, ease-out), border-color 160ms linear; }
.ws-tool:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-tool i { display:grid; place-items:center; width:24px; height:24px; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--dim);
  font:700 11px var(--font); font-style:normal; }
.ws-tool b { font:600 12.5px var(--font); color:var(--ink); }
.ws-tool.t1 { transform:rotate(-1.2deg); } .ws-tool.t3 { transform:rotate(1.2deg); }
.ws-toolhub { display:grid; place-items:center; width:62px; height:62px; border-radius:20px; margin:0 8px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:800 26px var(--font-head, var(--font)); }

/* ================= code & terminal ================= */
.ws-term, .ws-codecard { border:var(--bw, 1px) solid var(--hair); border-radius:14px; overflow:hidden;
  background:color-mix(in srgb, var(--panel-3, var(--panel)) 70%, var(--bg)); }
.ws-tlines { padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; }
.ws-tl { font:500 12.5px var(--mono); color:var(--dim); }
.ws-tl i { color:var(--accent); font-style:normal; margin-right:9px; }
.ws-tl.cmd { color:var(--ink); }
.ws-tl.ok { color:var(--accent); }
.ws-tl.dim { color:var(--faint); }
.ws-tl .ws-caret { height:0.85em; }
.ws-codeblk { margin:0; padding:18px 20px; font:500 12.5px/1.75 var(--mono); color:var(--dim);
  overflow-x:auto; }
.ws-codeblk .k { color:var(--accent); }
.ws-codeblk .s { color:var(--accent2, var(--accent)); }
.ws-codeblk .f { color:var(--ink); font-weight:700; }
.ws-codeblk .c { color:var(--faint); }

/* ================= media player ================= */
.ws-player { position:relative; margin-top:44px; border-radius:18px; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); aspect-ratio:16/9; background:var(--panel); }
.ws-poster { position:absolute; inset:0; background:
  radial-gradient(70% 90% at 12% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%),
  radial-gradient(60% 80% at 92% 94%, color-mix(in srgb, var(--accent2, var(--accent)) 14%, transparent), transparent 65%),
  color-mix(in srgb, var(--bg) 80%, black); }
.ws-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:99px; border:none; cursor:pointer;
  display:grid; place-items:center; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); transition:transform 160ms var(--ease-pop, ease-out); }
.ws-play:hover { transform:translate(-50%,-50%) scale(1.07); }
.ws-play svg { width:24px; height:24px; margin-left:3px; fill:currentColor; }
.ws-scrub { position:absolute; left:20px; right:86px; bottom:20px; height:4px; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 16%, transparent); }
.ws-elapsed { display:block; width:34%; height:100%; border-radius:99px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); }
.ws-ptime { position:absolute; right:20px; bottom:14px; font:600 10.5px var(--mono); color:var(--dim); }

/* ================= comparison table ================= */
.ws-vs { border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden; }
.ws-vsrow { display:grid; grid-template-columns:1.15fr 1fr 1fr; }
.ws-vsrow + .ws-vsrow { border-top:var(--bw, 1px) solid var(--hair); }
.ws-vsrow > span { padding:13px 18px; font:400 13px var(--font); color:var(--dim);
  display:flex; align-items:center; gap:9px; }
.ws-vsrow .f { color:var(--ink); font-weight:500; }
.ws-vsrow .us { background:color-mix(in srgb, var(--accent) 7%, transparent);
  border-inline:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color:var(--ink); font-weight:500; }
.ws-vsrow .us svg { width:13px; height:13px; color:var(--accent); flex:none; }
.ws-vsrow .them { color:var(--faint); }
.ws-vsrow.head > span { padding:14px 18px; font:700 10px var(--mono); letter-spacing:1.6px;
  text-transform:uppercase; }
.ws-vsrow.head .us { color:var(--accent); }

/* ================= story · manifesto ================= */
.ws-year { display:grid; grid-template-columns:88px 1fr; gap:22px; padding:24px 0; }
.ws-year + .ws-year { border-top:var(--bw, 1px) solid var(--hair); }
.ws-yno { font:700 14px var(--mono); color:var(--accent); font-style:normal; padding-top:3px; }
.ws-ybody b { display:block; font:700 16.5px var(--font-head, var(--font)); color:var(--ink); margin-bottom:7px; }
.ws-ybody p { margin:0; font:400 13px/1.65 var(--font); color:var(--dim); max-width:56ch; }
.ws-prin { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; }
.ws-prin + .ws-prin { border-top:var(--bw, 1px) solid var(--hair); }
.ws-pno { font:800 24px var(--font-head, var(--font)); font-style:normal;
  color:color-mix(in srgb, var(--ink) 22%, transparent); }
.ws-pbody b { display:block; font:700 18px var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.01em; margin-bottom:7px; }
.ws-pbody p { margin:0; font:400 13px/1.65 var(--font); color:var(--dim); max-width:58ch; }

/* ================= giant wordmark footer ================= */
.ws-foot.f-giant { padding-bottom:0; overflow:hidden; }
.f-giant .ws-fbar.top { border-top:none; padding-top:0; }
/* --gl = name length (set inline) — the wordmark sizes itself to fit */
.ws-fgiant { font:800 clamp(44px, calc(158cqw / var(--gl, 8)), 230px)/0.78 var(--font-head, var(--font));
  letter-spacing:-0.04em; white-space:nowrap; text-align:center; transform:translateY(16%);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 36%, transparent), color-mix(in srgb, var(--ink) 3%, transparent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none; pointer-events:none; margin-top:18px; }

/* ================= SECTION REVEALS — data-reveal on .ws-slot, .in added
   by the runner's IntersectionObserver. Transitions only fire on the class
   flip: one-shot, transform/opacity (wipe uses a one-shot clip). ================= */
.ws-slot[data-reveal] { transition:opacity 560ms ease, transform 640ms cubic-bezier(.22,.7,.2,1); }
.ws-slot[data-reveal="rise"]:not(.in) { opacity:0; transform:translateY(30px); }
.ws-slot[data-reveal="fade"] { transition-duration:820ms; }
.ws-slot[data-reveal="fade"]:not(.in) { opacity:0; }
.ws-slot[data-reveal="drift"]:not(.in) { opacity:0; transform:translateX(-46px); }
.ws-slot[data-reveal="drift"]:nth-child(even):not(.in) { transform:translateX(46px); }
.ws-slot[data-reveal="bloom"]:not(.in) { opacity:0; transform:scale(.955); }
.ws-slot[data-reveal="spring"] { transition:opacity 480ms ease, transform 780ms cubic-bezier(.28,1.5,.35,1); }
.ws-slot[data-reveal="spring"]:not(.in) { opacity:0; transform:translateY(44px); }
.ws-slot[data-reveal="tilt"]:not(.in) { opacity:0;
  transform:perspective(900px) rotateX(10deg) translateY(26px); transform-origin:50% 100%; }
.ws-slot[data-reveal="wipe"] { transition:clip-path 700ms cubic-bezier(.6,.1,.25,1), opacity 500ms linear; }
.ws-slot[data-reveal="wipe"]:not(.in) { clip-path:inset(0 100% 0 0); opacity:.4; }
.ws-slot[data-reveal="wipe"].in { clip-path:inset(0 0 0 0); }
.ws-slot[data-reveal="focus"]:not(.in) { opacity:0; transform:translateY(22px) scale(1.025); }
/* cascade — the slot appears instantly, its pieces stagger */
.ws-slot[data-reveal="cascade"] { transition:none; }
.ws-slot[data-reveal="cascade"] .ws-in > * { transition:opacity 480ms ease, transform 560ms cubic-bezier(.22,.7,.2,1); }
.ws-slot[data-reveal="cascade"]:not(.in) .ws-in > * { opacity:0; transform:translateY(20px); }
.ws-slot[data-reveal="cascade"].in .ws-in > *:nth-child(2) { transition-delay:90ms; }
.ws-slot[data-reveal="cascade"].in .ws-in > *:nth-child(3) { transition-delay:180ms; }
.ws-slot[data-reveal="cascade"].in .ws-in > *:nth-child(4) { transition-delay:270ms; }
.ws-slot[data-reveal="cascade"].in .ws-in > *:nth-child(5) { transition-delay:360ms; }
.ws-slot[data-reveal="cascade"].in .ws-in > *:nth-child(n+6) { transition-delay:450ms; }
/* grid items inside a cascading section ripple with a little extra lag */
.ws-slot[data-reveal="cascade"] :is(.ws-fgrid, .ws-qgrid, .ws-plans, .ws-people, .ws-statrow, .ws-statgrid, .ws-bento, .ws-checks, .ws-orbitrow, .ws-faqgrid) > *
  { transition:opacity 460ms ease, transform 540ms cubic-bezier(.22,.7,.2,1); }
.ws-slot[data-reveal="cascade"]:not(.in) :is(.ws-fgrid, .ws-qgrid, .ws-plans, .ws-people, .ws-statrow, .ws-statgrid, .ws-bento, .ws-checks, .ws-orbitrow, .ws-faqgrid) > *
  { opacity:0; transform:translateY(16px); }
.ws-slot[data-reveal="cascade"].in :is(.ws-fgrid, .ws-qgrid, .ws-plans, .ws-people, .ws-statrow, .ws-statgrid, .ws-bento, .ws-checks, .ws-orbitrow, .ws-faqgrid) > *:nth-child(1) { transition-delay:160ms; }
.ws-slot[data-reveal="cascade"].in :is(.ws-fgrid, .ws-qgrid, .ws-plans, .ws-people, .ws-statrow, .ws-statgrid, .ws-bento, .ws-checks, .ws-orbitrow, .ws-faqgrid) > *:nth-child(2) { transition-delay:230ms; }
.ws-slot[data-reveal="cascade"].in :is(.ws-fgrid, .ws-qgrid, .ws-plans, .ws-people, .ws-statrow, .ws-statgrid, .ws-bento, .ws-checks, .ws-orbitrow, .ws-faqgrid) > *:nth-child(3) { transition-delay:300ms; }
.ws-slot[data-reveal="cascade"].in :is(.ws-fgrid, .ws-qgrid, .ws-plans, .ws-people, .ws-statrow, .ws-statgrid, .ws-bento, .ws-checks, .ws-orbitrow, .ws-faqgrid) > *:nth-child(4) { transition-delay:370ms; }
.ws-slot[data-reveal="cascade"].in :is(.ws-fgrid, .ws-qgrid, .ws-plans, .ws-people, .ws-statrow, .ws-statgrid, .ws-bento, .ws-checks, .ws-orbitrow, .ws-faqgrid) > *:nth-child(5) { transition-delay:440ms; }
.ws-slot[data-reveal="cascade"].in :is(.ws-fgrid, .ws-qgrid, .ws-plans, .ws-people, .ws-statrow, .ws-statgrid, .ws-bento, .ws-checks, .ws-orbitrow, .ws-faqgrid) > *:nth-child(n+6) { transition-delay:520ms; }

/* ================= PAGE TRANSITIONS — the old page exits as a pinned
   ghost while the fresh page enters. Paired fx-out-*/fx-in-* keyframes,
   one-shot. ================= */
.ws-old { position:absolute; left:0; right:0; z-index:6; pointer-events:none; }
@keyframes wsToNone { to { opacity:1; transform:none; } }
@keyframes wsOutFade { to { opacity:0; } }
.ws-old.fx-out-fade { animation:wsOutFade 420ms ease forwards; }
.ws-site.fx-in-fade { opacity:0; animation:wsToNone 460ms ease 60ms forwards; }
@keyframes wsOutRise { to { opacity:0; transform:translateY(-18px); } }
.ws-old.fx-out-rise { animation:wsOutRise 420ms ease forwards; }
.ws-site.fx-in-rise { opacity:0; transform:translateY(30px); animation:wsToNone 520ms cubic-bezier(.22,.8,.25,1) 90ms forwards; }
@keyframes wsOutSlide { to { opacity:0; transform:translateX(-8%); } }
.ws-old.fx-out-slide { animation:wsOutSlide 480ms cubic-bezier(.5,.1,.4,1) forwards; }
.ws-site.fx-in-slide { opacity:0; transform:translateX(7%); animation:wsToNone 520ms cubic-bezier(.2,.8,.25,1) 80ms forwards; }
@keyframes wsOutZoom { to { opacity:0; transform:scale(1.06); } }
.ws-old.fx-out-zoom { animation:wsOutZoom 480ms ease-in forwards; }
.ws-site.fx-in-zoom { opacity:0; transform:scale(.962); animation:wsToNone 560ms cubic-bezier(.2,.8,.25,1) 120ms forwards; }
@keyframes wsOutTurn { to { opacity:0; transform:perspective(1400px) rotateY(-8deg) translateX(-6%); } }
.ws-old.fx-out-turn { transform-origin:0 50%; animation:wsOutTurn 520ms ease-in forwards; }
.ws-site.fx-in-turn { opacity:0; transform:perspective(1400px) rotateY(7deg) translateX(5%); transform-origin:100% 50%;
  animation:wsToNone 560ms cubic-bezier(.2,.8,.25,1) 120ms forwards; }
@keyframes wsOutDrop { to { transform:translateY(-103%); } }
.ws-old.fx-out-drop { animation:wsOutDrop 620ms cubic-bezier(.6,.05,.3,1) forwards; }
.ws-site.fx-in-drop { opacity:.72; transform:scale(.992); animation:wsToNone 620ms ease 140ms forwards; }
@keyframes wsOutHold { 0%, 52% { opacity:1; } 100% { opacity:0; } }
.ws-old.fx-out-veil { animation:wsOutHold 520ms linear forwards; }
@keyframes wsInLate { 0%, 42% { opacity:0; } 100% { opacity:1; } }
.ws-site.fx-in-veil { animation:wsInLate 720ms linear forwards; }
@keyframes wsVeilSweep { to { transform:translateX(120%) skewX(-8deg); } }
.ws-veilfx { position:absolute; top:0; left:-10%; width:120%; height:100cqh; z-index:8; pointer-events:none;
  transform:translateX(-120%) skewX(-8deg);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  animation:wsVeilSweep 780ms cubic-bezier(.65,.05,.3,.95) forwards; }

/* ================= HERO ENTRANCE CHOREOGRAPHY — plays once on render,
   only when the site wears .anim (fresh opens · page nav · replays) ================= */
.anim .ws-chor > * { opacity:0; transform:translateY(20px);
  animation:wsToNone 680ms cubic-bezier(.2,.8,.25,1) forwards; }
.anim .ws-chor > *:nth-child(1) { animation-delay:60ms; }
.anim .ws-chor > *:nth-child(2) { animation-delay:170ms; }
.anim .ws-chor > *:nth-child(3) { animation-delay:280ms; }
.anim .ws-chor > *:nth-child(4) { animation-delay:400ms; }
.anim .ws-chor > *:nth-child(n+5) { animation-delay:520ms; }
.anim .ws-chor.late > *:nth-child(2) { animation-delay:1350ms; }
.anim .ws-chor.late > *:nth-child(3) { animation-delay:1520ms; }
.anim .ws-chor-solo { display:block; }
.anim .ws-chor-solo { opacity:0; transform:translateY(14px); animation:wsToNone 520ms ease 60ms forwards; }

/* ================= new headers ================= */
/* glass beam */
.ws-head.h-glass { position:sticky; border-bottom:none;
  background:color-mix(in srgb, var(--panel) 58%, transparent); }
.ws-hbeam { position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 2%,
    color-mix(in srgb, var(--accent) 65%, transparent) 30%,
    color-mix(in srgb, var(--accent2, var(--accent)) 65%, transparent) 70%, transparent 98%); }
/* brutalist */
.ws-head.h-brutal { border-bottom:3px solid var(--ink); background:var(--bg); }
.ws-logobox { border:2px solid var(--ink); padding:6px 13px; white-space:nowrap; cursor:pointer;
  font:800 13.5px var(--font-head, var(--font)); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink); box-shadow:3px 3px 0 var(--accent); }
.ws-navlink.block { border-radius:0; padding:8px 11px; text-transform:uppercase;
  font:700 10.5px var(--font); letter-spacing:.14em; }
.ws-navlink.block.on { background:var(--ink); color:var(--bg); }
.ws-btn.brut { border:2px solid var(--ink); border-radius:0; cursor:pointer;
  background:var(--accent); color:var(--accent-text, #04121a); box-shadow:4px 4px 0 var(--ink);
  font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.ws-btn.brut:hover { transform:translate(-1px, -1px); box-shadow:5px 5px 0 var(--ink); }
/* terminal path */
.ws-head.h-mono { gap:18px; }
.ws-hpath { font:600 12px var(--mono); color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-hpath i { color:var(--accent); font-style:normal; }
.ws-hpath b { color:var(--ink); font-weight:600; }
.ws-nav.mono { gap:10px; }
.ws-navlink.tno { display:inline-flex; align-items:baseline; gap:6px; font:500 11.5px var(--mono); }
.ws-navlink.tno i { font:600 8.5px var(--mono); color:var(--faint); font-style:normal; }
.ws-navlink.tno.on { background:none; color:var(--accent); }
.ws-navlink.tno.on i { color:var(--accent); }
.ws-cmdbtn { font:700 12px var(--mono); color:var(--accent); cursor:pointer; padding:7px 10px;
  border-radius:7px; white-space:nowrap; transition:background 140ms linear; }
.ws-cmdbtn:hover { background:var(--accent-fill); }
/* masthead */
.ws-head.h-masthead { flex-direction:column; align-items:stretch; gap:0; padding-block:0; }
.ws-mastrip { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0;
  border-bottom:var(--bw, 1px) solid var(--hair); font:600 9.5px var(--mono); letter-spacing:1.6px;
  text-transform:uppercase; color:var(--faint); }
.ws-mastrip i, .ws-mastrip b { font-style:normal; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-mastrow { display:flex; align-items:center; gap:26px; padding:15px 0; }
.ws-mastrow .ws-nav { margin-left:auto; }
.ws-navlink.big { font:600 14px var(--font-head, var(--font)); }

/* ================= new heros ================= */
/* orbital — rings bloom outward behind the message */
.v-orbital { padding:120px 0 110px; }
.ws-rings { position:absolute; inset:0; pointer-events:none; }
.ws-rings i { position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  border-radius:99em; border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ws-rings i.r1 { width:min(400px, 74cqw); height:min(400px, 74cqw); }
.ws-rings i.r2 { width:min(650px, 108cqw); height:min(650px, 108cqw);
  border-color:color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-rings i.r3 { width:min(920px, 150cqw); height:min(920px, 150cqw);
  border-color:color-mix(in srgb, var(--ink) 4.5%, transparent); }
.ws-rings b { position:absolute; width:8px; height:8px; border-radius:99px; background:var(--accent); }
.ws-rings b.d1 { left:calc(50% + min(200px, 37cqw)); top:54%; }
.ws-rings b.d2 { left:calc(50% - min(325px, 54cqw)); top:44%; background:var(--accent2, var(--accent)); opacity:.75; }
.ws-rings b.d3 { left:56%; top:calc(54% - min(455px, 73cqw)); opacity:.6; }
.anim .ws-rings i, .anim .ws-rings b { opacity:0; animation:wsRingIn 900ms cubic-bezier(.2,.8,.25,1) forwards; }
.anim .ws-rings i.r1, .anim .ws-rings b.d1 { animation-delay:120ms; }
.anim .ws-rings i.r2, .anim .ws-rings b.d2 { animation-delay:280ms; }
.anim .ws-rings i.r3, .anim .ws-rings b.d3 { animation-delay:440ms; }
@keyframes wsRingIn { from { opacity:0; transform:translate(-50%,-50%) scale(.86); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
.anim .ws-rings b { transform:scale(.4); }
@keyframes wsDotIn { to { opacity:1; transform:scale(1); } }
.anim .ws-rings b { animation-name:wsDotIn; }
.v-orbital .ws-in { z-index:1; }
/* echo — the hollow giant behind */
.v-echo { padding:130px 0 120px; }
.ws-echo { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); pointer-events:none;
  font:800 clamp(110px, calc(175cqw / var(--gl, 6)), 340px)/1 var(--font-head, var(--font));
  letter-spacing:-.03em; white-space:nowrap; color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--ink) 15%, transparent); }
.anim .ws-echo { opacity:0; animation:wsEchoIn 1000ms ease-out 80ms forwards; }
@keyframes wsEchoIn { from { opacity:0; transform:translate(-50%,-50%) scale(1.07); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
.v-echo .ws-in { z-index:1; }
/* slab — poster lines slam in */
.v-slab { padding:110px 0 96px; }
.ws-slabstack { display:flex; flex-direction:column; margin:30px 0 0; }
.ws-slabline { font:800 clamp(50px, 11.5cqw, 128px)/0.96 var(--font-head, var(--font));
  text-transform:uppercase; letter-spacing:-.03em; color:var(--ink); }
.ws-slabline.ws-grad { color:transparent;
  background:var(--accent-grad, linear-gradient(120deg, var(--accent), var(--accent2, var(--accent))));
  -webkit-background-clip:text; background-clip:text; width:fit-content; }
.anim .ws-slabline { opacity:0; transform:translateX(-64px);
  animation:wsToNone 640ms cubic-bezier(.2,.85,.3,1) forwards;
  animation-delay:calc(120ms + var(--wi) * 140ms); }
.anim .ws-slabline:nth-child(even) { transform:translateX(64px); }
.v-slab .ws-edrow { margin-top:38px; }
/* typewriter — the headline types itself */
.anim .ws-typed { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  max-width:0; animation:wsType 1150ms steps(var(--ch, 24)) 320ms forwards; }
@keyframes wsType { to { max-width:calc(var(--ch, 24) * 1ch); } }
.ws-caret.type { vertical-align:baseline; }
.anim .ws-caret.type { animation:wsCaretOff 300ms ease 2300ms forwards; }
@keyframes wsCaretOff { to { opacity:0; } }
/* color field — the product rises out of the wash */
.v-field { padding:104px 0 0; }
.ws-fieldwrap { position:relative; width:min(1080px, 92cqw); margin:64px auto 0; }
.ws-field { position:absolute; left:-6%; right:-6%; top:10%; bottom:-40%; border-radius:36px;
  background:
    radial-gradient(55% 70% at 22% 30%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(50% 65% at 80% 24%, color-mix(in srgb, var(--accent2, var(--accent)) 30%, transparent), transparent 72%),
    radial-gradient(70% 60% at 50% 90%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 75%),
    color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.ws-fieldshot { position:relative; z-index:1; padding:0 5cqw; }
.anim .ws-field { opacity:0; transform:scale(.97); animation:wsToNone 900ms ease 200ms forwards; }
.anim .ws-fieldshot { opacity:0; transform:translateY(48px) scale(.985);
  animation:wsToNone 820ms cubic-bezier(.2,.8,.25,1) 480ms forwards; }
/* constellation — words assemble under still stars */
.v-constel { padding:120px 0 110px; }
.ws-stars { position:absolute; inset:0; pointer-events:none; background-repeat:no-repeat; background-image:
  radial-gradient(2px 2px at 11% 22%, color-mix(in srgb, var(--ink) 55%, transparent) 50%, transparent 51%),
  radial-gradient(2px 2px at 24% 64%, color-mix(in srgb, var(--ink) 35%, transparent) 50%, transparent 51%),
  radial-gradient(3px 3px at 33% 14%, color-mix(in srgb, var(--accent) 80%, transparent) 50%, transparent 51%),
  radial-gradient(2px 2px at 46% 78%, color-mix(in srgb, var(--ink) 42%, transparent) 50%, transparent 51%),
  radial-gradient(2px 2px at 57% 30%, color-mix(in srgb, var(--ink) 55%, transparent) 50%, transparent 51%),
  radial-gradient(3px 3px at 68% 68%, color-mix(in srgb, var(--accent2, var(--accent)) 75%, transparent) 50%, transparent 51%),
  radial-gradient(2px 2px at 76% 18%, color-mix(in srgb, var(--ink) 40%, transparent) 50%, transparent 51%),
  radial-gradient(2px 2px at 86% 52%, color-mix(in srgb, var(--ink) 52%, transparent) 50%, transparent 51%),
  radial-gradient(2px 2px at 93% 26%, color-mix(in srgb, var(--ink) 30%, transparent) 50%, transparent 51%),
  radial-gradient(2px 2px at 6% 84%, color-mix(in srgb, var(--ink) 30%, transparent) 50%, transparent 51%); }
.anim .ws-stars { opacity:0; animation:wsStarsIn 1100ms ease 150ms forwards; }
@keyframes wsStarsIn { to { opacity:1; } }
.ws-wstack .ws-w { display:inline-block; }
.anim .ws-wstack .ws-w { opacity:0; transform:translateY(30px);
  animation:wsToNone 620ms cubic-bezier(.2,.8,.25,1) forwards;
  animation-delay:calc(180ms + var(--wi) * 95ms); }
.v-constel .ws-in { z-index:1; }
.v-constel .ws-chor.late > *:nth-child(1) { animation-delay:900ms; }
.v-constel .ws-chor.late > *:nth-child(2) { animation-delay:1050ms; }

/* ================= feature tabs — CSS-only radio switching ================= */
.ws-tabwrap > input { display:none; }
.ws-tabbar { display:flex; gap:8px; margin-bottom:26px; flex-wrap:wrap; justify-content:center; }
.ws-tabbar label { padding:9px 22px; border-radius:99px; border:var(--bw, 1px) solid var(--hair); cursor:pointer;
  background:var(--panel); font:600 13px var(--font); color:var(--dim);
  transition:color 140ms linear, border-color 140ms linear, background 140ms linear; }
.ws-tabbar label:hover { color:var(--ink); }
.ws-tabwrap > input:nth-of-type(1):checked ~ .ws-tabbar label:nth-child(1),
.ws-tabwrap > input:nth-of-type(2):checked ~ .ws-tabbar label:nth-child(2),
.ws-tabwrap > input:nth-of-type(3):checked ~ .ws-tabbar label:nth-child(3),
.ws-tabwrap > input:nth-of-type(4):checked ~ .ws-tabbar label:nth-child(4)
  { background:var(--accent-fill); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-tabpane { display:none; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:center; }
@keyframes wsTabIn { from { opacity:0; transform:translateY(12px); } }
.ws-tabwrap > input:nth-of-type(1):checked ~ .ws-tabpanes .ws-tabpane:nth-child(1),
.ws-tabwrap > input:nth-of-type(2):checked ~ .ws-tabpanes .ws-tabpane:nth-child(2),
.ws-tabwrap > input:nth-of-type(3):checked ~ .ws-tabpanes .ws-tabpane:nth-child(3),
.ws-tabwrap > input:nth-of-type(4):checked ~ .ws-tabpanes .ws-tabpane:nth-child(4)
  { display:grid; animation:wsTabIn 320ms ease-out; }
.ws-tpcopy b { display:block; font:700 21px var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.01em; margin-bottom:11px; }
.ws-tpcopy p { margin:0 0 18px; font:400 13.5px/1.65 var(--font); color:var(--dim); }

/* ================= roadmap lanes ================= */
.ws-lanes { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; align-items:start; }
.ws-lane { padding:18px 16px; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-lane.t-now { border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-lanehead { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.ws-lanehead i { width:9px; height:9px; border-radius:99px; flex:none;
  background:color-mix(in srgb, var(--ink) 25%, transparent); }
.ws-lane.t-now .ws-lanehead i { background:var(--accent); }
.ws-lane.t-next .ws-lanehead i { background:var(--accent2, var(--accent)); opacity:.85; }
.ws-lanehead b { font:700 14px var(--font-head, var(--font)); color:var(--ink); }
.ws-lanehead span { margin-left:auto; font:500 9.5px var(--mono); color:var(--faint);
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-laneitem { padding:11px 13px; border-radius:calc(var(--radius, 12px) * .6); border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--bg) 55%, transparent); font:500 12.5px var(--font); color:var(--dim); }
.ws-laneitem + .ws-laneitem { margin-top:8px; }
.ws-lane.t-now .ws-laneitem { color:var(--ink); }

/* ================= collage pinboard ================= */
.ws-pinstage { position:relative; min-height:440px; }
.ws-pin { position:absolute; margin:0; }
.ws-pin.big { left:0; top:0; width:60%; }
.ws-pin.small { right:2%; top:6%; width:33%; transform:rotate(2deg); }
.ws-pin.note { right:4%; bottom:8%; width:46%; padding:18px 20px; z-index:2; transform:rotate(-1.6deg);
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-pin.note p { margin:0; font:500 14px/1.6 var(--font-head, var(--font)); color:var(--ink); font-style:italic; }
.ws-pin.stat { left:40%; top:44%; z-index:3; padding:16px 22px; transform:rotate(1.5deg);
  border-radius:16px; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); }
.ws-pin.stat b { display:block; font:800 30px var(--font-head, var(--font)); letter-spacing:-0.02em; }
.ws-pin.stat i { font:600 10.5px var(--font); font-style:normal; opacity:.85; }

/* ================= changelog ledger ================= */
.ws-logrow { display:grid; grid-template-columns:150px 1fr; gap:24px; padding:24px 0; }
.ws-logrow + .ws-logrow { border-top:var(--bw, 1px) solid var(--hair); }
.ws-logmeta { display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.ws-logmeta b { font:700 15px var(--mono); color:var(--ink); }
.ws-logmeta i { font:500 10.5px var(--mono); color:var(--faint); font-style:normal; }
.ws-logtag { padding:2px 9px; border-radius:99px; font:700 8.5px var(--mono); letter-spacing:1.3px;
  background:var(--accent-fill); color:var(--accent); }
.ws-logtag.t-fast { background:color-mix(in srgb, var(--accent2, var(--accent)) 14%, transparent);
  color:var(--accent2, var(--accent)); }
.ws-logtag.t-fix { background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--dim); }
.ws-logrow ul { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ws-logrow li { position:relative; padding-left:18px; font:400 13px/1.55 var(--font); color:var(--dim); }
.ws-logrow li::before { content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:2px;
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }

/* ================= schedule programme ================= */
.ws-daylabel { display:block; font:700 10px var(--mono); letter-spacing:2.4px; color:var(--accent);
  text-transform:uppercase; font-style:normal; margin-bottom:6px; }
.ws-sched { display:grid; grid-template-columns:86px 1fr; gap:20px; padding:16px 12px; align-items:baseline;
  border-top:var(--bw, 1px) solid var(--hair); transition:background 140ms linear; border-radius:8px; }
.ws-sched:hover { background:color-mix(in srgb, var(--ink) 3.5%, transparent); }
.ws-schtime { font:700 13px var(--mono); color:var(--accent); font-style:normal; }
.ws-schbody b { font:600 14.5px var(--font); color:var(--ink); }
.ws-schbody span { display:block; margin-top:3px; font:400 11.5px var(--font); color:var(--faint); }

/* ================= community cards ================= */
.ws-comgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-comcard { display:flex; flex-direction:column; gap:7px; padding:24px 22px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none);
  transition:transform 160ms var(--ease-pop, ease-out), border-color 160ms linear; }
.ws-comcard:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 38%, transparent); }
.ws-comn { font:800 32px var(--font-head, var(--font)); letter-spacing:-0.02em; margin-top:8px;
  background:var(--accent-grad, linear-gradient(120deg, var(--accent), var(--accent2, var(--accent))));
  -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content; }
.ws-comt { font:700 10px var(--mono); letter-spacing:1.6px; color:var(--faint);
  text-transform:uppercase; font-style:normal; }
.ws-comcard p { margin:0 0 12px; font:400 12.5px/1.6 var(--font); color:var(--dim); flex:1; }

/* ================= download badges ================= */
.ws-storerow { display:flex; gap:12px; justify-content:center; align-items:center; margin-top:32px; flex-wrap:wrap; }
.ws-store { display:inline-flex; align-items:center; gap:11px; padding:10px 20px 10px 15px; cursor:pointer;
  border-radius:13px; background:var(--ink); color:var(--bg);
  transition:transform 150ms var(--ease-pop, ease-out); }
.ws-store:hover { transform:translateY(-2px); }
.ws-stico { display:flex; }
.ws-stico svg { width:20px; height:20px; }
.ws-sttxt { display:flex; flex-direction:column; align-items:flex-start; line-height:1.18; }
.ws-sttxt i { font:600 8.5px var(--font); letter-spacing:.5px; text-transform:uppercase;
  opacity:.72; font-style:normal; }
.ws-sttxt b { font:700 14.5px var(--font-head, var(--font)); }
.ws-qr { display:grid; grid-template-columns:repeat(5, 7px); grid-auto-rows:7px; gap:2px; padding:8px;
  border-radius:9px; border:var(--bw, 1px) solid var(--hair); background:var(--panel); margin-left:8px; }
.ws-qr i { border-radius:1.5px; }
.ws-qr i.on { background:var(--ink); }
.ws-finenote { display:block; margin-top:18px; font:500 10.5px var(--mono); color:var(--faint); font-style:normal; }

/* ================= wave-5 components ================= */
/* heading row — title left, archive link right */
.ws-shead.left.row { display:flex; align-items:flex-end; justify-content:space-between; gap:22px;
  max-width:none; margin-bottom:32px; text-align:left; }
.ws-shead.left.row .ws-textlink { flex:none; margin-bottom:4px; }

/* before/after flip — a real toggle, CSS only */
.ws-flipwrap > input { display:none; }
.ws-flipsw { display:inline-flex; align-items:center; gap:12px; margin-top:22px; padding:8px 16px;
  border:var(--bw, 1px) solid var(--hair); border-radius:99px; cursor:pointer;
  background:var(--panel); font:600 12.5px var(--font); color:var(--dim); user-select:none; }
.ws-flipsw i { position:relative; width:40px; height:22px; border-radius:99px; flex:none;
  background:color-mix(in srgb, var(--ink) 14%, transparent); transition:background 200ms linear; }
.ws-flipsw i::after { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px;
  border-radius:99px; background:var(--ink); transition:transform 220ms var(--ease-pop, ease-out), background 200ms linear; }
.ws-flipwrap > input:checked ~ .ws-flipsw i { background:var(--accent-fill); }
.ws-flipwrap > input:checked ~ .ws-flipsw i::after { transform:translateX(18px); background:var(--accent); }
.ws-flipwrap > input:not(:checked) ~ .ws-flipsw span:first-child { color:var(--ink); }
.ws-flipwrap > input:checked ~ .ws-flipsw span:last-child { color:var(--accent); }
.ws-flippanes { display:grid; margin-top:30px; }
.ws-flippane { grid-area:1 / 1; transition:opacity 320ms ease, transform 380ms ease; }
.ws-flippane b { display:block; margin-top:14px; font:500 12px var(--font); color:var(--faint); }
.ws-flippane.b { opacity:0; transform:translateY(14px) scale(.99); pointer-events:none; }
.ws-flipwrap > input:checked ~ .ws-flippanes .ws-flippane.a { opacity:0; transform:translateY(-10px) scale(.99); pointer-events:none; }
.ws-flipwrap > input:checked ~ .ws-flippanes .ws-flippane.b { opacity:1; transform:none; pointer-events:auto; }

/* sparkline stat cards — static area charts, clip-path only */
.ws-sparkgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-sparkcard { padding:24px 22px 0; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  overflow:hidden; background:var(--panel); background-image:var(--surface-grad,none); }
.ws-sparkcard b { display:block; font:800 30px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; }
.ws-sparkcard i { font:500 11.5px var(--font); color:var(--faint); font-style:normal; }
.ws-spark { display:block; height:62px; margin:16px -22px 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, transparent), transparent 92%); }
.ws-spark.s0 { clip-path:polygon(0 78%, 12% 70%, 26% 74%, 40% 55%, 55% 60%, 70% 38%, 85% 30%, 100% 12%, 100% 100%, 0 100%); }
.ws-spark.s1 { clip-path:polygon(0 85%, 15% 60%, 30% 68%, 45% 45%, 60% 52%, 75% 28%, 100% 18%, 100% 100%, 0 100%); }
.ws-spark.s2 { clip-path:polygon(0 70%, 14% 74%, 30% 50%, 46% 58%, 62% 34%, 80% 40%, 100% 8%, 100% 100%, 0 100%); }

/* chat-bubble faq */
.ws-chatq { display:flex; justify-content:flex-end; margin:16px 0 10px; }
.ws-chatq span { max-width:72%; padding:11px 16px; border-radius:16px 16px 4px 16px;
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  font:600 13px/1.5 var(--font); color:var(--ink); }
.ws-chata { display:flex; gap:10px; align-items:flex-end; margin-bottom:6px; }
.ws-bubble { max-width:76%; padding:12px 17px; border-radius:16px 16px 16px 4px;
  background:var(--panel); background-image:var(--surface-grad,none); border:var(--bw, 1px) solid var(--hair);
  font:400 13px/1.6 var(--font); color:var(--dim); }

/* case-study result cards */
.ws-case { display:grid; grid-template-columns:220px 1fr auto; gap:32px; align-items:center;
  padding:28px; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-case + .ws-case { margin-top:14px; }
.ws-casemark { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; margin-bottom:12px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:800 22px var(--font-head, var(--font)); }
.ws-casemark.m1 { border-radius:99px; opacity:.9; }
.ws-casemark.m2 { border-radius:10px; opacity:.82; }
.ws-casebrand b { display:block; font:700 16px var(--font-head, var(--font)); color:var(--ink); }
.ws-casebrand i { display:block; margin:4px 0 12px; font:400 11px var(--font); color:var(--faint); font-style:normal; }
.ws-caseq { margin:0; font:500 16px/1.55 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.005em; }
.ws-casestats { display:flex; gap:30px; }
.ws-casestats .ws-stat { align-items:flex-start; text-align:left; }
.ws-casestats .ws-stat b { font-size:26px; }

/* press clippings */
.ws-clipgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-clip { display:flex; flex-direction:column; gap:13px; margin:0; padding:24px 22px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-stars { color:var(--accent2, var(--accent)); font-size:13px; letter-spacing:3.5px; }
.ws-clip blockquote { margin:0; font:600 15px/1.5 var(--font-head, var(--font)); color:var(--ink); flex:1; }
.ws-clip figcaption { font:700 11px var(--mono); letter-spacing:2px; color:var(--faint); text-transform:uppercase; }

/* city clocks */
.ws-citygrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-city { display:flex; flex-direction:column; gap:3px; padding:20px 22px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-citytime { display:flex; align-items:baseline; gap:8px; font:700 26px var(--mono); color:var(--ink); }
.ws-citytime i { font:600 10px var(--mono); color:var(--faint); font-style:normal; letter-spacing:1px; }
.ws-cityname { font:600 13.5px var(--font); color:var(--ink); margin-top:4px; }
.ws-citynote { display:inline-flex; align-items:center; gap:7px; font:400 11px var(--font); color:var(--faint); }
.ws-citynote i { width:7px; height:7px; border-radius:99px; background:var(--accent); }
.ws-city:nth-child(3n) .ws-citynote i { background:color-mix(in srgb, var(--ink) 25%, transparent); }

/* the security vault */
.ws-vaultgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:36px 0 28px; }
.ws-vaultchip { display:flex; flex-direction:column; align-items:center; gap:7px; padding:22px 16px;
  text-align:center; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-vaultchip b { font:700 13px var(--font); color:var(--ink); }
.ws-vaultchip i { font:400 11px var(--font); color:var(--faint); font-style:normal; }

/* the avatar crowd */
.ws-crowdrow { display:flex; justify-content:center; margin-bottom:30px; }
.ws-crowdav { display:grid; place-items:center; width:46px; height:46px; border-radius:99px; flex:none;
  margin-left:-10px; border:2px solid var(--bg);
  background:var(--accent-fill); color:var(--accent); font:700 15px var(--font-head, var(--font));
  transform:rotate(calc((var(--ci, 0) - 5) * 1.5deg)); }
.ws-crowdav:first-child { margin-left:0; }
.ws-crowdav.c1 { background:color-mix(in srgb, var(--accent2, var(--accent)) 16%, transparent); color:var(--accent2, var(--accent)); }
.ws-crowdav.c2 { background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--dim); }
.ws-crowdav.c3 { background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #04121a); }
.ws-crowdav.more { background:var(--ink); color:var(--bg); font:700 11px var(--font); transform:none; }

/* articles — featured + list */
.ws-artgrid { display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:start; }
.ws-artfeat { display:block; cursor:pointer; }
.ws-artfeat .ws-art { aspect-ratio:16/9 !important; transition:transform 180ms var(--ease-pop, ease-out); }
.ws-artfeat:hover .ws-art { transform:translateY(-4px); }
.ws-artmeta { padding:16px 4px 0; }
.ws-arttag { font:700 9px var(--mono); letter-spacing:1.6px; color:var(--accent); text-transform:uppercase; }
.ws-artfeat b { display:block; margin:9px 0 8px; font:700 22px var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.015em; }
.ws-artfeat p { margin:0 0 10px; font:400 13px/1.6 var(--font); color:var(--dim); }
.ws-artfeat i, .ws-artrow > i { font:500 10.5px var(--mono); color:var(--faint); font-style:normal; }
.ws-artlist { display:flex; flex-direction:column; }
.ws-artrow { display:flex; flex-direction:column; gap:7px; padding:18px 4px; cursor:pointer; }
.ws-artrow + .ws-artrow { border-top:var(--bw, 1px) solid var(--hair); }
.ws-artrow b { font:600 15.5px var(--font-head, var(--font)); color:var(--ink);
  transition:color 140ms linear; }
.ws-artrow:hover b { color:var(--accent); }

/* careers — open roles */
.ws-perkrow { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.ws-role { display:flex; align-items:center; gap:16px; padding:17px 20px; cursor:pointer;
  border-radius:calc(var(--radius, 12px) * .7); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none);
  transition:border-color 160ms linear, transform 160ms var(--ease-pop, ease-out); }
.ws-role + .ws-role { margin-top:10px; }
.ws-role:hover { border-color:color-mix(in srgb, var(--accent) 40%, transparent); transform:translateX(4px); }
.ws-rolemain { flex:1; min-width:0; }
.ws-rolemain b { display:block; font:600 14.5px var(--font); color:var(--ink); }
.ws-rolemain i { display:block; margin-top:4px; font:400 11.5px var(--font); color:var(--faint); font-style:normal; }
.ws-roletype { flex:none; padding:4px 11px; border-radius:99px; background:var(--accent-fill);
  color:var(--accent); font:700 9px var(--mono); letter-spacing:1.2px; text-transform:uppercase; }
.ws-rolego { display:flex; color:var(--faint); font-style:normal; transition:color 140ms linear; }
.ws-rolego svg { width:15px; height:15px; }
.ws-role:hover .ws-rolego { color:var(--accent); }

/* menu card — dotted leaders */
.ws-dishes { display:grid; grid-template-columns:1fr 1fr; gap:10px 48px; margin-bottom:24px; }
.ws-dish { padding:12px 0; }
.ws-dishrow { display:flex; align-items:baseline; gap:10px; }
.ws-dishrow b { font:600 15px var(--font-head, var(--font)); color:var(--ink); }
.ws-lead { flex:1; border-bottom:2px dotted color-mix(in srgb, var(--ink) 26%, transparent);
  transform:translateY(-3px); }
.ws-dishrow em { font:700 14px var(--mono); color:var(--accent); font-style:normal; }
.ws-dish p { margin:5px 0 0; font:400 12px/1.5 var(--font); color:var(--dim); font-style:italic; }

/* shop — product cards */
.ws-shelf { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.ws-product { position:relative; display:flex; flex-direction:column; gap:10px; }
.ws-product .ws-art { aspect-ratio:1/1 !important; transition:transform 180ms var(--ease-pop, ease-out); }
.ws-product:hover .ws-art { transform:translateY(-4px); }
.ws-prodtag { position:absolute; top:10px; left:10px; z-index:1; padding:3px 10px; border-radius:99px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:700 8.5px var(--mono); letter-spacing:1.2px; text-transform:uppercase; }
.ws-prodrow { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ws-prodrow b { font:600 13.5px var(--font); color:var(--ink); }
.ws-prodrow em { font:700 13px var(--mono); color:var(--accent); font-style:normal; }
.ws-btn.wide { width:100%; justify-content:center; }

/* ================= LIVE sections (mount() showpieces) ================= */
.ws-fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.v-starfield, .v-waves { position:relative; }
.v-starfield { padding:130px 0 120px; background:color-mix(in srgb, var(--bg) 84%, black); }
.v-starfield .ws-in, .v-waves .ws-in { position:relative; z-index:1; }
.v-waves { padding:120px 0 130px; }
/* spotlight — base is ghost-stroked, the lit copy is clipped to the torch */
.v-spot2 { padding:110px 0 100px; }
.ws-spotstage { position:relative; }
.ws-spotbase .ws-h1, .ws-spotbase .ws-grad { color:transparent; background:none;
  -webkit-text-stroke:1px color-mix(in srgb, var(--ink) 22%, transparent); }
.ws-spotbase .ws-kick, .ws-spotbase .ws-sub { opacity:.22; }
.ws-spotlit { position:absolute; inset:0; pointer-events:none;
  clip-path:circle(clamp(110px, 22cqw, 230px) at var(--mx, 50%) var(--my, 42%)); }
.ws-spotstage .ws-kick { margin-bottom:16px; }
.ws-spotstage .ws-sub { margin-top:18px; margin-inline:auto; }
/* hologram tilt */
.ws-holowrap { perspective:1100px; margin-top:44px; }
.ws-holo { position:relative; will-change:transform; }
.ws-holo .ws-browser { border-radius:16px; }
.ws-glare { position:absolute; inset:0; border-radius:16px; opacity:0; pointer-events:none;
  background:linear-gradient(105deg, transparent calc(var(--gx, 50%) - 16%),
    color-mix(in srgb, var(--ink) 14%, transparent) var(--gx, 50%),
    transparent calc(var(--gx, 50%) + 16%));
  transition:opacity 300ms linear; }
/* marquee belt */
.v-marquee { padding:40px 0; }
.v-marquee .ws-in { margin-bottom:20px; }
.ws-belt { overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.ws-belttrack { display:flex; align-items:center; gap:40px; width:max-content; will-change:transform; }
.ws-belttrack .ws-mark { white-space:nowrap; font-size:18px; }
.ws-beltsep { color:var(--accent); font-style:normal; font-size:11px; flex:none; }
/* live terminal */
.ws-tlines.live { min-height:172px; }
/* wireframe globe */
.ws-globewrap { position:relative; }
.ws-globecv { display:block; width:100%; aspect-ratio:1 / 1; cursor:grab; touch-action:none; }
.ws-globecv:active { cursor:grabbing; }
.ws-globe .ws-in.split { align-items:center; }

/* ================= ACCOUNTS & COMMERCE — working systems ================= */
/* auth card */
.ws-authcard { max-width:420px; margin:0 auto; padding:26px; text-align:left;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-authcard.shake { animation:wsShake 380ms ease; }
@keyframes wsShake { 20% { transform:translateX(-7px); } 45% { transform:translateX(6px); }
  70% { transform:translateX(-4px); } 90% { transform:translateX(2px); } }
.ws-autabs { display:flex; gap:6px; margin-bottom:18px; padding:4px;
  border-radius:99px; border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--bg) 60%, transparent); }
.ws-autabs button { flex:1; padding:8px 10px; border:none; border-radius:99px; cursor:pointer;
  background:none; font:600 12.5px var(--font); color:var(--dim);
  transition:background 140ms linear, color 140ms linear; }
.ws-autabs button.on { background:var(--accent-fill); color:var(--accent); }
.ws-auerr { padding:9px 13px; border-radius:9px; font:500 12px var(--font);
  background:color-mix(in srgb, #e5484d 13%, transparent); color:#e5484d;
  border:1px solid color-mix(in srgb, #e5484d 30%, transparent); }
.ws-authin { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.ws-authin b { font:700 17px var(--font-head, var(--font)); color:var(--ink); margin-top:6px; }
.ws-authin i { font:400 12px var(--font); color:var(--faint); font-style:normal; }
.ws-aurow { display:flex; gap:9px; margin-top:14px; }
.ws-avatar.big { width:56px; height:56px; font-size:22px; }

/* account panel */
.ws-accthead { display:flex; align-items:center; gap:16px; padding:20px 22px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-acctwho { flex:1; min-width:0; }
.ws-acctwho b { display:block; font:700 17px var(--font-head, var(--font)); color:var(--ink); }
.ws-acctwho i { display:block; margin-top:3px; font:400 11.5px var(--font); color:var(--faint); font-style:normal; }
.ws-acctchips { display:flex; gap:9px; margin:14px 0 6px; }
.ws-accth { margin:26px 0 6px; font:700 10px var(--mono); letter-spacing:2px; color:var(--faint);
  text-transform:uppercase; }
.ws-acctrow { display:flex; align-items:center; gap:14px; padding:13px 14px;
  border-radius:calc(var(--radius, 12px) * .6); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); }
.ws-acctrow + .ws-acctrow { margin-top:8px; }
.ws-acctrow b { font:600 13px var(--font); color:var(--ink); }
.ws-acctrow i { flex:1; font:400 12px var(--font); color:var(--faint); font-style:normal; }
.ws-acctrow em { font:700 13px var(--mono); color:var(--accent); font-style:normal; }
.ws-acctnone { padding:16px 4px; font:400 12.5px var(--font); color:var(--faint); }
.ws-acctempty, .ws-bkdone, .ws-codone, .ws-coempty { display:flex; flex-direction:column; align-items:center;
  gap:7px; padding:40px 24px; text-align:center; border-radius:var(--radius, 12px);
  border:var(--bw, 1px) dashed var(--hair); }
.ws-acctempty b, .ws-bkdone b, .ws-codone b, .ws-coempty b { font:700 17px var(--font-head, var(--font)); color:var(--ink); }
.ws-acctempty i, .ws-bkdone i, .ws-codone i, .ws-coempty i { font:400 12.5px var(--font); color:var(--faint); font-style:normal; }
.ws-acctempty .ws-btn, .ws-bkdone .ws-btn, .ws-codone .ws-btn { margin-top:12px; }

/* booking calendar */
.ws-bkwrap { display:grid; grid-template-columns:1.05fr 1fr; gap:26px; align-items:start; }
.ws-bkcal { padding:20px; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-bkhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ws-bkhead b { font:700 15px var(--font-head, var(--font)); color:var(--ink); }
.ws-bkhead button { width:32px; height:32px; border-radius:9px; border:var(--bw, 1px) solid var(--hair);
  background:none; color:var(--dim); cursor:pointer; font-size:16px; line-height:1;
  transition:color 140ms linear, border-color 140ms linear; }
.ws-bkhead button:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-bkgrid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.ws-bkdow { text-align:center; font:700 9px var(--mono); letter-spacing:1px; color:var(--faint);
  text-transform:uppercase; padding:6px 0; }
.ws-bkday { aspect-ratio:1; display:grid; place-items:center; border-radius:9px; border:1px solid transparent;
  background:none; cursor:pointer; font:600 12.5px var(--font); color:var(--ink);
  transition:background 130ms linear, border-color 130ms linear; }
.ws-bkday:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ws-bkday.today { border-color:var(--hair); }
.ws-bkday.on { background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); }
.ws-bkday.off { display:grid; place-items:center; aspect-ratio:1; color:var(--faint); opacity:.4;
  font:500 12.5px var(--font); }
.ws-bkdate { display:block; font:700 11px var(--mono); letter-spacing:1.6px; color:var(--accent);
  font-style:normal; margin-bottom:10px; }
.ws-bkslots { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:16px; }
.ws-bkslot { padding:10px 4px; text-align:center; border-radius:9px; border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); cursor:pointer; font:600 12px var(--mono); color:var(--ink);
  transition:border-color 130ms linear, background 130ms linear; }
.ws-bkslot:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-bkslot.on { background:var(--accent-fill); color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.ws-bkslot.off { padding:10px 4px; text-align:center; border-radius:9px; border:var(--bw, 1px) dashed var(--hair);
  font:500 12px var(--mono); color:var(--faint); text-decoration:line-through; opacity:.55; }
.ws-bkconfirm { display:flex; flex-direction:column; gap:10px; padding:18px;
  border-radius:var(--radius, 12px); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-bkconfirm b { font:700 14px var(--font-head, var(--font)); color:var(--ink); }
.ws-bkconfirm .nb-in { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:9px;
  border:var(--bw, 1px) solid var(--hair); background:var(--bg); color:var(--ink); font:400 13px var(--font); }
.ws-bkhint { display:flex; flex-direction:column; gap:6px; padding:40px 20px; text-align:center;
  border:var(--bw, 1px) dashed var(--hair); border-radius:var(--radius, 12px); }
.ws-bkhint b { font:700 15px var(--font-head, var(--font)); color:var(--dim); }
.ws-bkhint i { font:400 11.5px var(--font); color:var(--faint); font-style:normal; }
.ws-bktick { display:grid; place-items:center; width:52px; height:52px; border-radius:99px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:800 24px var(--font); margin-bottom:6px; }
.ws-bkdone em { font:700 11px var(--mono); letter-spacing:1.6px; color:var(--accent); font-style:normal; }

/* checkout */
.ws-cogrid { display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; }
.ws-coline { display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:calc(var(--radius, 12px) * .6); border:var(--bw, 1px) solid var(--hair); background:var(--panel); }
.ws-coline + .ws-coline { margin-top:8px; }
.ws-coline b { flex:1; font:600 13.5px var(--font); color:var(--ink); }
.ws-coline em { font:700 13px var(--mono); color:var(--ink); font-style:normal; min-width:56px; text-align:right; }
.ws-coqty { display:inline-flex; align-items:center; gap:2px; border:var(--bw, 1px) solid var(--hair);
  border-radius:99px; padding:2px; }
.ws-coqty button { width:24px; height:24px; border:none; border-radius:99px; background:none;
  color:var(--dim); cursor:pointer; font:600 14px var(--font); line-height:1;
  transition:background 130ms linear, color 130ms linear; }
.ws-coqty button:hover { background:var(--accent-fill); color:var(--accent); }
.ws-coqty i { min-width:22px; text-align:center; font:700 12px var(--mono); color:var(--ink); font-style:normal; }
.ws-cosum { padding:20px; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none);
  display:flex; flex-direction:column; gap:11px; }
.ws-corow { display:flex; justify-content:space-between; font:400 13px var(--font); color:var(--dim); }
.ws-corow em { font:600 13px var(--mono); color:var(--ink); font-style:normal; }
.ws-corow.total { padding-top:11px; border-top:var(--bw, 1px) solid var(--hair); font-weight:700; color:var(--ink); }
.ws-corow.total em { font-size:17px; color:var(--accent); }
.ws-couser { font:500 10.5px var(--mono); color:var(--faint); font-style:normal; }
.ws-cosum .ws-btn { justify-content:center; }
.ws-btn.added { border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--accent); }

/* ================= wave-8 showstoppers ================= */
/* particle name hero */
.v-particles { padding:96px 0 90px; }
.ws-pcv { display:block; width:100%; height:clamp(180px, 34cqw, 340px); margin:10px 0 4px; }
/* magnetic type */
.v-magnetic { padding:120px 0 110px; overflow:visible; }
.ws-mag { letter-spacing:-0.01em; }
.ws-mchar { display:inline-block; will-change:transform; }
.ws-msp { display:inline-block; width:0.32em; }
/* velocity rows */
.ws-banner.v-velocity { padding:48px 0; overflow:hidden; border-block:var(--bw, 1px) solid var(--hair); }
.ws-velrow { white-space:nowrap; overflow:visible; line-height:1.04; }
.ws-velrow span { display:inline-block; will-change:transform;
  font:800 clamp(44px, 9cqw, 104px) var(--font-head, var(--font));
  letter-spacing:-0.03em; text-transform:uppercase; color:var(--ink); }
.ws-velrow.b span { color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--ink) 35%, transparent); }
.ws-velrow i { font-style:normal; color:var(--accent); -webkit-text-stroke:0; }
/* reveal slider */
.ws-cmp { position:relative; margin-top:40px; border-radius:16px; overflow:hidden;
  cursor:ew-resize; touch-action:none; user-select:none; }
.ws-cmpafter .ws-browser { border-radius:0; border:none; }
.ws-cmpbefore { position:absolute; inset:0; background:var(--bg);
  clip-path:inset(0 45% 0 0); }
.ws-cmpbefore .ws-duoshot.a { min-height:0; height:100%; border:none; border-radius:0; opacity:1;
  background:color-mix(in srgb, var(--panel) 70%, var(--bg)); padding:22px; }
.ws-cmp { border:var(--bw, 1px) solid var(--hair); }
.ws-cmphandle { position:absolute; top:0; bottom:0; left:55%; width:2px; margin-left:-1px;
  background:var(--accent); pointer-events:none; }
.ws-cmphandle i { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:99px; border:2px solid var(--accent);
  background:var(--bg); display:block; }
.ws-cmphandle i::before { content:'◂ ▸'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:9px; color:var(--accent); letter-spacing:1px; }
.ws-cmptag { position:absolute; top:14px; z-index:2; padding:4px 12px; border-radius:99px;
  font:700 9.5px var(--mono); letter-spacing:1.4px; text-transform:uppercase;
  background:color-mix(in srgb, var(--bg) 75%, transparent); color:var(--ink);
  border:var(--bw, 1px) solid var(--hair); pointer-events:none; }
.ws-cmptag.l { left:14px; }
.ws-cmptag.r { right:14px; }
/* quote ring */
.v-ring { overflow:hidden; }
.ws-ringwrap { position:relative; height:340px; margin-top:10px; perspective:1300px;
  cursor:grab; touch-action:pan-y; }
.ws-ringwrap:active { cursor:grabbing; }
.ws-ring { position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d; will-change:transform; }
.ws-ringcard { position:absolute; left:-150px; top:-110px; width:300px; margin:0;
  display:flex; flex-direction:column; gap:14px; padding:22px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  background-image:var(--surface-grad,none); backface-visibility:hidden; }
.ws-ringcard blockquote { margin:0; font:400 13px/1.6 var(--font); color:var(--ink); }
.ws-ringcard figcaption { display:flex; align-items:center; gap:10px; margin-top:auto; }
.ws-ringcard figcaption b { display:block; font:600 12px var(--font); color:var(--ink); }
.ws-ringcard figcaption i { display:block; font:400 10.5px var(--font); color:var(--faint); font-style:normal; }
.ws-finenote.center { display:block; text-align:center; margin-top:14px; }
/* scroll tour */
.ws-tour { padding:0; overflow:visible; }   /* .ws-sec's overflow:hidden would un-pin the sticky stage */
.ws-tourtrack { height:280cqh; }
.ws-toursticky { position:sticky; top:0; height:100cqh; display:flex; align-items:center; overflow:hidden; }
.ws-toursticky .ws-in { width:min(1080px, 88cqw); }
.ws-toursticky .ws-shead { margin-bottom:30px; }
.ws-tourgrid { display:grid; grid-template-columns:0.9fr 1.3fr; gap:48px; align-items:center; }
.ws-tourcaps { position:relative; padding-left:22px; }
.ws-tourbar { position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 10%, transparent); }
.ws-tourbar i { display:block; width:100%; height:0%;
  background:var(--accent-grad, var(--accent)); border-radius:99px; }
.ws-tourcap { padding:14px 0; opacity:.32; transition:opacity 300ms linear, transform 400ms cubic-bezier(.2,.8,.25,1); transform:translateX(0); }
.ws-tourcap.on { opacity:1; transform:translateX(6px); }
.ws-tourcap i { font:700 11px var(--mono); color:var(--accent); font-style:normal; }
.ws-tourcap b { display:block; margin:6px 0 6px; font:700 17px var(--font-head, var(--font)); color:var(--ink); }
.ws-tourcap p { margin:0; font:400 12.5px/1.6 var(--font); color:var(--dim); max-width:38ch; }
.ws-tourstage { position:relative; display:grid; }
.ws-tourstage .tstate { grid-area:1 / 1; opacity:0; transform:translateY(26px) scale(.96);
  transition:opacity 480ms ease, transform 560ms cubic-bezier(.2,.8,.25,1); }
.ws-tourstage[data-step="0"] .tstate:nth-child(1),
.ws-tourstage[data-step="1"] .tstate:nth-child(2),
.ws-tourstage[data-step="2"] .tstate:nth-child(3) { opacity:1; transform:none; }
/* scroll film — the video plays as you scroll (JS drives opacity/transform only) */
.ws-film { padding:0; overflow:visible; }   /* .ws-sec's overflow:hidden would un-pin the sticky stage */
.ws-filmtrack { position:relative; }
.ws-filmsticky { position:sticky; top:0; height:100cqh; overflow:hidden; background:#05070d; }
.ws-filmstage { position:absolute; inset:0; }
.ws-filmstage .ws-clip { position:absolute; inset:0; opacity:0; }
.ws-filmstage .ws-clip:first-child { opacity:1; }
.ws-filmvid, .ws-filmdemo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ws-film.hasvid .ws-filmdemo { display:none; }
.ws-filmgrade { position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(180deg, rgba(3,5,10,0.5), transparent 28%, transparent 60%, rgba(3,5,10,0.72)),
  radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(3,5,10,0.42)); }
.ws-filmtitle { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; pointer-events:none; }
.ws-filmtitle > div { max-width:min(920px, 86cqw); padding:0 6cqw; }
.ws-film .ws-h1 { color:#f4f6ff; }
.ws-film .ws-sub { color:rgba(230,236,252,0.75); margin-left:auto; margin-right:auto; }
.ws-filmhint { display:inline-flex; align-items:center; gap:7px; margin-top:26px;
  font:600 10.5px var(--mono); letter-spacing:0.22em; text-transform:uppercase; color:rgba(230,236,252,0.55); }
.ws-filmhint svg { width:14px; height:14px; }
.ws-filmcap { position:absolute; bottom:16cqh; max-width:36ch; opacity:0; pointer-events:none; }
.ws-filmcap.l { left:7cqw; }
.ws-filmcap.r { right:7cqw; text-align:right; }
.ws-filmcap i { font:700 10.5px var(--mono); letter-spacing:0.16em; color:var(--accent); font-style:normal; }
.ws-filmcap b { display:block; margin:9px 0 7px; font:700 clamp(21px, 3.4cqw, 32px) var(--font-head, var(--font));
  color:#f4f6ff; letter-spacing:-0.01em; }
.ws-filmcap p { margin:0; font:400 13.5px/1.65 var(--font); color:rgba(230,236,252,0.76); }
.ws-filmbar { position:absolute; left:7cqw; right:7cqw; bottom:4.5cqh; display:flex; align-items:center; gap:16px; }
.ws-filmtc, .ws-filmreel { font:600 10.5px var(--mono); letter-spacing:0.14em; color:rgba(230,236,252,0.6);
  font-variant-numeric:tabular-nums; }
.ws-filmmeter { flex:1; height:2px; border-radius:99px; background:rgba(230,236,252,0.16); overflow:hidden; }
.ws-filmmeter i { display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.ws-chainmeter { flex:1; display:flex; gap:7px; }
.ws-chainmeter i { flex:1; height:2px; border-radius:99px; background:rgba(230,236,252,0.16); overflow:hidden; }
.ws-chainmeter b { display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
/* live pulse */
.ws-pulsegrid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:22px; align-items:start; }
.ws-viewers { display:flex; flex-direction:column; align-items:center; gap:4px; padding:34px 20px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-vdot { width:10px; height:10px; border-radius:99px; background:#4ade80; margin-bottom:8px; }
.ws-vdot.ping { animation:wsPing 900ms ease-out; }
@keyframes wsPing { 0% { box-shadow:0 0 0 0 rgba(74,222,128,0.5); } 100% { box-shadow:0 0 0 14px rgba(74,222,128,0); } }
.ws-vcount { font:800 44px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; }
.ws-viewers i { font:400 12px var(--font); color:var(--faint); font-style:normal; }
.ws-toasts { display:flex; flex-direction:column; gap:9px; min-height:230px; }
.ws-toast { display:flex; align-items:center; gap:11px; padding:13px 16px;
  border-radius:calc(var(--radius, 12px) * .7); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none);
  opacity:0; transform:translateY(-10px); transition:opacity 320ms ease, transform 380ms cubic-bezier(.2,.8,.25,1); }
.ws-toast.in { opacity:1; transform:none; }
.ws-toasttxt { flex:1; font:400 12.5px var(--font); color:var(--dim); }
.ws-toasttxt b { color:var(--ink); font-weight:600; }
.ws-toast > i { font:500 10px var(--mono); color:var(--faint); font-style:normal; white-space:nowrap; }
/* confetti cta */
.ws-cta.v-party { position:relative; overflow:hidden; padding:90px 0; }
.v-party .ws-in { position:relative; z-index:1; }
.v-party .ws-fx { z-index:2; }
.ws-partybtn.pop { animation:wsPop 360ms cubic-bezier(.2,.9,.3,1.4); }
@keyframes wsPop { 35% { transform:scale(.93); } 75% { transform:scale(1.05); } }

/* ================= wave-9: ★ headers ================= */
/* progress beam */
.ws-head.h-progress { position:sticky; }
.ws-hpct { font:700 10px var(--mono); color:var(--faint); font-style:normal; min-width:34px; text-align:right; }
.ws-hprog { position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-hprog b { display:block; width:0%; height:100%;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); }
/* grand shrink */
.ws-head.h-shrink { display:block; padding-block:30px; background:color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom:1px solid transparent;
  transition:padding 340ms cubic-bezier(.2,.8,.25,1), background 240ms linear, border-color 240ms linear; }
.ws-shrinkrow { display:flex; align-items:center; gap:26px; }
.ws-shrinkrow .ws-nav { margin-left:auto; }
.h-shrink .ws-logo b { font-size:24px; transition:font-size 340ms cubic-bezier(.2,.8,.25,1); }
.h-shrink .ws-logodot { width:12px; height:12px; transition:width 340ms, height 340ms; }
.ws-head.h-shrink.cond { padding-block:9px; background:color-mix(in srgb, var(--panel) 88%, transparent);
  border-bottom-color:var(--hair); }
.h-shrink.cond .ws-logo b { font-size:15px; }
.h-shrink.cond .ws-logodot { width:9px; height:9px; }
/* dynamic island */
.ws-head.h-island { background:none; border-bottom:none; padding:14px 18px; }
.ws-island { display:flex; align-items:center; gap:14px; margin:0 auto; width:fit-content; max-width:96%;
  padding:8px 10px 8px 18px; border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  transition:gap 380ms cubic-bezier(.2,.8,.25,1); }
.ws-islandbody { display:flex; align-items:center; gap:14px; max-width:720px; overflow:hidden;
  transition:max-width 420ms cubic-bezier(.2,.8,.25,1), opacity 260ms linear; }
.ws-islandbody .ws-nav { margin-left:0; flex-wrap:nowrap; }
.ws-islandbody .ws-navlink, .ws-islandbody .ws-btn { white-space:nowrap; }
.ws-island.tuck { gap:0; }
.ws-island.tuck .ws-islandbody { max-width:0; opacity:0; }
/* ink bar */
.ws-nav.ink { position:relative; padding-bottom:6px; }
.ws-navlink.ib.on { background:none; color:var(--accent); }
.ws-ink { position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:99px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); pointer-events:none; }
/* cockpit hud */
.ws-head.h-hud { position:sticky; font-family:var(--mono); gap:20px; }
.ws-hudbr { position:absolute; width:13px; height:13px; pointer-events:none;
  border-color:color-mix(in srgb, var(--accent) 55%, transparent); border-style:solid; border-width:0; }
.ws-hudbr.tl { left:7px; top:7px; border-left-width:1.5px; border-top-width:1.5px; }
.ws-hudbr.tr { right:7px; top:7px; border-right-width:1.5px; border-top-width:1.5px; }
.ws-hudlogo { display:inline-flex; align-items:center; gap:9px; font:700 11.5px var(--mono);
  letter-spacing:2.4px; color:var(--ink); white-space:nowrap; }
.ws-huddot { width:8px; height:8px; border-radius:2px; background:var(--accent); transform:rotate(45deg); }
.ws-hudmeta { display:inline-flex; align-items:baseline; gap:13px; margin-left:6px; white-space:nowrap; }
.ws-hudclock { font:700 11.5px var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.ws-hudscroll { font:600 9.5px var(--mono); color:var(--faint); font-style:normal; }
.ws-hudmeta em { font:700 9.5px var(--mono); color:var(--accent); font-style:normal; letter-spacing:1.5px; }
/* borealis */
.ws-head.h-borealis { overflow:hidden; background:color-mix(in srgb, var(--bg) 78%, transparent); }
.ws-borsheet { position:absolute; inset:0; pointer-events:none; opacity:.55; background-image:
  linear-gradient(100deg, transparent 12%, color-mix(in srgb, var(--accent) 16%, transparent) 34%,
    transparent 52%, color-mix(in srgb, var(--accent2, var(--accent)) 13%, transparent) 72%, transparent 90%),
  linear-gradient(80deg, transparent 20%, color-mix(in srgb, var(--accent2, var(--accent)) 9%, transparent) 50%, transparent 78%);
  background-size:340px 100%, 520px 100%; background-repeat:repeat-x; }
.h-borealis > *:not(.ws-borsheet) { position:relative; z-index:1; }

/* ================= wave-9: ★ heros ================= */
.v-orrery, .v-flock, .v-topo, .v-gridpulse { position:relative; }
.v-orrery .ws-in, .v-flock .ws-in, .v-topo .ws-in, .v-gridpulse .ws-in { position:relative; z-index:1; }
.v-orrery { padding:130px 0 120px; }
.v-flock { padding:126px 0 116px; }
/* sine — NOVA's harmonic hero: particles riding a composite wave (also the
   coming-soon holding screen). Its canvas paints its own deep background
   (trail fade needs an opaque floor), so the section goes dark with it. */
.v-sine { position:relative; overflow:hidden; padding:150px 0 150px;
  background:color-mix(in srgb, var(--bg-deep, var(--bg)) 72%, black); }
.v-sine .ws-in { position:relative; z-index:1; }
.v-sine .ws-h1 { font-weight:200; text-transform:uppercase; letter-spacing:.22em;
  padding-left:.22em; /* optically recenter the tracked line */
  text-shadow:0 0 42px color-mix(in srgb, var(--accent) 35%, transparent); }
.v-sine .ws-h1 .ws-grad { font-weight:600; }
.ws-sinesoon { margin-top:34px; display:inline-flex; align-items:center; gap:.8em;
  font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--faint); }
.ws-sinesoon::before, .ws-sinesoon::after { content:""; height:1px; width:52px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent)); }
.ws-sinesoon::after { transform:scaleX(-1); }
.ws-sinepulse { width:6px; height:6px; border-radius:99px; background:var(--accent);
  box-shadow:0 0 12px var(--accent); animation:wsSinePulse 2.4s ease-in-out infinite; }
@keyframes wsSinePulse { 0%, 100% { opacity:.45; transform:scale(.85); } 50% { opacity:1; transform:scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .ws-sinepulse { animation:none; } }
/* the coming-soon holding screen — a bare body that fills the window and
   centers its section stack (renderPage emits it chromeless) */
.ws-body.ws-soonbody { display:flex; flex-direction:column; }
.ws-soonbody > .ws-slot { flex:1 1 auto; display:flex; flex-direction:column; }
.ws-soonbody > .ws-slot > .ws-sec { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.v-topo { padding:120px 0 110px; }
.v-gridpulse { padding:130px 0 140px; background:color-mix(in srgb, var(--bg) 82%, black); }
/* magnifier */
.v-lens { padding:110px 0 100px; }
.ws-lensstage { position:relative; }
.ws-lensbase .ws-kick { margin-bottom:16px; }
.ws-lensbase .ws-sub, .ws-lenszoom .ws-sub { margin-top:18px; margin-inline:auto; }
.ws-lenscopy { position:absolute; inset:0; pointer-events:none; overflow:hidden;
  clip-path:circle(0px at 50% 50%); }
.ws-lenszoom { transform:scale(1.42); will-change:transform; }
.ws-lenszoom .ws-kick { margin-bottom:16px; }
.ws-lensring { position:absolute; left:0; top:0; border-radius:99px; pointer-events:none;
  border:1.5px solid color-mix(in srgb, var(--accent) 75%, transparent);
  outline:1px solid color-mix(in srgb, var(--ink) 10%, transparent); outline-offset:4px; }
/* glitch */
.ws-glitchword { position:relative; display:inline-block; }
.ws-glitchword::before, .ws-glitchword::after { content:attr(data-text); position:absolute; inset:0;
  opacity:0; pointer-events:none; }
.ws-glitchword.zap::before { opacity:.85; color:var(--accent);
  clip-path:inset(8% 0 56% 0); animation:wsZapA 240ms steps(3) both; }
.ws-glitchword.zap::after { opacity:.85; color:var(--accent2, var(--accent));
  clip-path:inset(58% 0 6% 0); animation:wsZapB 240ms steps(3) both; }
.ws-glitchword.zap > span { animation:wsZapC 240ms steps(2) both; }
@keyframes wsZapA { 0% { transform:translate(-5px,-2px); } 50% { transform:translate(4px,1px); } 100% { transform:translate(-2px,0); } }
@keyframes wsZapB { 0% { transform:translate(5px,2px); } 50% { transform:translate(-4px,-1px); } 100% { transform:translate(2px,0); } }
@keyframes wsZapC { 0% { transform:translate(1px,0) } 100% { transform:none; } }
/* depth field */
.v-depth { position:relative; overflow:hidden; padding:130px 0 120px; }
.ws-dlayer { position:absolute; inset:-40px; pointer-events:none; will-change:transform; }
.ws-dlayer.d1 i { position:absolute; border-radius:99px; }
.ws-dlayer.d1 .p1 { left:6%; top:12%; width:300px; height:300px;
  background:radial-gradient(closest-side, var(--accent-fill), transparent 72%); }
.ws-dlayer.d1 .p2 { right:4%; top:44%; width:380px; height:380px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent), transparent 72%); }
.ws-dlayer.d1 .p3 { left:38%; bottom:-8%; width:260px; height:260px;
  background:radial-gradient(closest-side, var(--accent-fill), transparent 72%); }
.ws-dlayer .ws-fcard { position:absolute; width:min(230px, 26%); }
.ws-dlayer.d2 .c1 { left:7%; top:20%; transform:rotate(-3deg); }
.ws-dlayer.d2 .c2 { right:5%; top:26%; transform:rotate(2.4deg); }
.ws-dlayer.d3 .c3 { left:13%; bottom:12%; transform:rotate(-1deg); }
.ws-dcopy { will-change:transform; }

/* ================= wave-9: footers ================= */
/* shoreline */
.ws-foot.f-shore { padding-top:0; overflow:hidden; }
.ws-shorecv { display:block; width:100%; height:120px; margin-bottom:10px; }
.f-shore .ws-fbar.top { border-top:none; align-items:center; gap:22px; }
.f-shore .ws-fnav { margin-left:auto; }
/* night sky */
.ws-foot.f-night { position:relative; overflow:hidden; border-top:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--bg) 72%, black); }
.ws-nightstars { position:absolute; inset:0; pointer-events:none; background-repeat:no-repeat; background-image:
  radial-gradient(1.6px 1.6px at 8% 30%, color-mix(in srgb, var(--ink) 60%, transparent) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 21% 62%, color-mix(in srgb, var(--ink) 38%, transparent) 50%, transparent 51%),
  radial-gradient(2.2px 2.2px at 34% 22%, color-mix(in srgb, var(--accent) 75%, transparent) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 47% 74%, color-mix(in srgb, var(--ink) 45%, transparent) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 58% 36%, color-mix(in srgb, var(--ink) 55%, transparent) 50%, transparent 51%),
  radial-gradient(2.2px 2.2px at 71% 58%, color-mix(in srgb, var(--accent2, var(--accent)) 70%, transparent) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 82% 26%, color-mix(in srgb, var(--ink) 42%, transparent) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 93% 64%, color-mix(in srgb, var(--ink) 50%, transparent) 50%, transparent 51%); }
.ws-meteor { position:absolute; left:20%; top:18%; width:78px; height:1.6px; opacity:0; pointer-events:none;
  background:linear-gradient(90deg, var(--ink), transparent); transform:rotate(-30deg); }
.ws-meteor.fall { animation:wsMeteor 950ms ease-out both; }
@keyframes wsMeteor { 0% { opacity:0; translate:0 0; } 10% { opacity:.95; } 100% { opacity:0; translate:230px 148px; } }
.ws-nightin { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:16px; padding:52px 0 42px; }
.ws-fnav.center { justify-content:center; }
/* the horizon */
.ws-foot.f-horizon { position:relative; overflow:hidden; padding-bottom:200px; }
.ws-planet { position:absolute; left:50%; bottom:-92cqw; transform:translateX(-50%);
  width:110cqw; height:110cqw; border-radius:50%; pointer-events:none;
  border-top:2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  background:
    radial-gradient(120% 34% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--panel) 75%, var(--bg)); }
.ws-satellite { position:absolute; left:0; top:0; width:8px; height:8px; border-radius:99px;
  background:var(--accent2, var(--accent)); pointer-events:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent); }
/* rolling credits */
.ws-foot.f-credits { overflow:hidden; padding-bottom:14px; }
.f-credits .ws-fbar.top { border-top:none; }
.ws-creditbelt { overflow:hidden; margin-top:22px;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.ws-credittrack { display:flex; align-items:center; gap:38px; width:max-content; will-change:transform; }
.ws-credittrack b { white-space:nowrap; font:800 clamp(38px, 8.5cqw, 84px)/1 var(--font-head, var(--font));
  letter-spacing:-0.03em; color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.ws-credittrack i { color:var(--accent); font-style:normal; font-size:14px; }
/* terminal footer */
.ws-foot.f-term { font-family:var(--mono); background:color-mix(in srgb, var(--panel-3, var(--panel)) 60%, var(--bg)); }
.ws-termline { font:500 12.5px var(--mono); color:var(--ink); padding:3px 0; }
.ws-termline i { color:var(--accent); font-style:normal; }
.ws-termline.dim { color:var(--faint); }
.ws-termls { display:flex; flex-wrap:wrap; gap:8px 26px; padding:12px 0 14px; }
.ws-termlink { font:600 13px var(--mono); color:var(--ink); cursor:pointer;
  transition:color 130ms linear; }
.ws-termlink:hover, .ws-termlink.on { color:var(--accent); }
/* blueprint footer */
.ws-foot.f-blue { padding-top:0; background-image:
  repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 3.5%, transparent) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 3.5%, transparent) 0 1px, transparent 1px 26px); }
.ws-bluescale { display:block; height:11px; margin-bottom:26px; border-bottom:var(--bw, 1px) solid var(--hair);
  background:repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--ink) 32%, transparent) 11px 12px); }
.ws-bluegrid { display:grid; grid-template-columns:1.3fr 1fr 1fr; border:var(--bw, 1px) solid var(--hair); }
.ws-bluecell { position:relative; padding:24px 24px 26px; }
.ws-bluecell + .ws-bluecell { border-left:var(--bw, 1px) solid var(--hair); }
.ws-bluecell h5 { margin:0 0 12px; font:700 9.5px var(--mono); letter-spacing:2.2px; color:var(--faint); }
.ws-fnav.col { flex-direction:column; gap:8px; }
.ws-bluenote { display:block; margin-top:16px; font:600 9px var(--mono); letter-spacing:1.8px;
  color:var(--faint); font-style:normal; }
.ws-bluescrew { position:absolute; width:9px; height:9px; border-radius:99px;
  border:1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  background:linear-gradient(45deg, transparent 44%, color-mix(in srgb, var(--ink) 45%, transparent) 44% 56%, transparent 56%); }
.ws-bluescrew.tl { top:9px; left:9px; }
.ws-bluescrew.br { bottom:9px; right:9px; }
.ws-bluecell.meta b { display:block; font:700 15px var(--mono); color:var(--ink); }
.ws-bluecell.meta i { display:block; margin-top:6px; font:600 9.5px var(--mono);
  letter-spacing:1.4px; color:var(--faint); font-style:normal; }
.ws-bluecell.meta em { display:block; margin-top:14px; font:500 11px var(--mono);
  color:var(--dim); font-style:normal; }

/* ================= wave-9: menus ================= */
/* orbital veil */
.m-orbital .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; padding:18px max(20px, 6cqw) 26px; box-sizing:border-box;
  background:color-mix(in srgb, var(--bg) 97%, transparent); overflow:hidden;
  opacity:0; transition:opacity 220ms linear; }
.m-orbital.open .ws-mpanel { opacity:1; }
.ws-morbit { position:absolute; right:-14%; top:50%; transform:translateY(-50%) scale(.8);
  border-radius:99em; border:1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  opacity:0; transition:opacity 400ms linear, transform 600ms cubic-bezier(.2,.8,.25,1); pointer-events:none; }
.ws-morbit.r1 { width:340px; height:340px; }
.ws-morbit.r2 { width:560px; height:560px; border-color:color-mix(in srgb, var(--accent) 10%, transparent); }
.ws-morbit.r3 { width:820px; height:820px; border-color:color-mix(in srgb, var(--accent) 6%, transparent); }
.m-orbital.open .ws-morbit { opacity:1; transform:translateY(-50%) scale(1); }
.m-orbital.open .ws-morbit.r2 { transition-delay:90ms; }
.m-orbital.open .ws-morbit.r3 { transition-delay:180ms; }
.m-orbital .ws-mbig.arc { position:relative; z-index:1; }
.m-orbital .ws-mbig.arc .ws-mbiglink { margin-left:calc(var(--i, 0) * 30px); transform:translateY(20px) rotate(-2.5deg); transform-origin:0 100%; }
.m-orbital.open .ws-mbig.arc .ws-mbiglink { opacity:1; transform:none;
  transition-delay:calc(80ms + var(--i, 0) * 60ms); }
.m-orbital .ws-mhead, .m-orbital .ws-mfoot { position:relative; z-index:1; }
/* split stage */
.m-stage .ws-mpanel { top:0; left:0; width:100%; height:100cqh; display:grid;
  grid-template-columns:1.4fr 1fr; pointer-events:none; }
.ws-mwing { padding:22px max(20px, 4cqw) 30px; box-sizing:border-box; display:flex; flex-direction:column;
  transition:transform 380ms cubic-bezier(.2,.85,.25,1); }
.ws-mwing.l { background:var(--panel); background-image:var(--surface-grad,none);
  border-right:var(--bw, 1px) solid var(--hair); transform:translateX(-102%); }
.ws-mwing.r { background:color-mix(in srgb, var(--panel-3, var(--panel)) 70%, var(--bg));
  transform:translateX(102%); align-items:flex-end; }
.m-stage.open .ws-mwing { transform:none; }
.m-stage.open .ws-mwing.r { transition-delay:60ms; }
.m-stage .ws-mbig { margin-top:30px; justify-content:flex-start; }
.m-stage.open .ws-mbiglink { opacity:1; transform:none; transition-delay:calc(140ms + var(--i, 0) * 55ms); }
.ws-mbrandcard { margin:auto 0; display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right; }
.ws-mbrandcard b { font:700 18px var(--font-head, var(--font)); color:var(--ink); }
.ws-mbrandcard i { font:400 12.5px/1.6 var(--font); color:var(--dim); font-style:normal; max-width:24ch; }
.ws-mbrandcard .ws-btn { margin-top:10px; }

/* ================= wave-10: ★★ text heros ================= */
/* neon sign */
.v-neon { padding:120px 0 110px; background:
  radial-gradient(80% 60% at 50% 20%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
  color-mix(in srgb, var(--bg) 82%, black); }
.ws-neonkick { display:block; margin-bottom:22px; font:600 11px var(--mono); letter-spacing:5px;
  color:color-mix(in srgb, var(--accent2, var(--accent)) 70%, transparent); text-transform:uppercase; font-style:normal; }
.ws-neonsign { margin:0; font:400 clamp(40px, 8.4cqw, 96px)/1.12 var(--font-head, var(--font)); letter-spacing:0.04em; }
.ws-neonch { display:inline-block; color:color-mix(in srgb, var(--ink) 14%, transparent);
  -webkit-text-stroke:1px color-mix(in srgb, var(--ink) 20%, transparent);
  transition:color 120ms linear, text-shadow 120ms linear; }
.ws-neonch.lit { color:color-mix(in srgb, var(--accent) 60%, white); -webkit-text-stroke:0;
  text-shadow:0 0 7px var(--accent), 0 0 22px var(--accent),
    0 0 52px color-mix(in srgb, var(--accent) 55%, transparent); }
.ws-neonch.buzz { animation:wsNeonBuzz 340ms steps(5); }
@keyframes wsNeonBuzz { 0% { opacity:.2; } 25% { opacity:1; } 40% { opacity:.3; } 60% { opacity:1; } 80% { opacity:.5; } 100% { opacity:1; } }
.v-neon .ws-sub { margin-top:26px; }
/* ink · starchart · mirror share the canvas headline */
.v-ink .ws-pcv, .v-starchart .ws-pcv { height:clamp(170px, 30cqw, 300px); }
.v-mirror .ws-pcv { height:clamp(260px, 44cqw, 460px); margin-bottom:-30px; }
/* eclipse */
.v-eclipse { position:relative; overflow:hidden; padding:130px 0 120px;
  transition:background 600ms linear; }
.v-eclipse.dimmed { background:color-mix(in srgb, var(--bg) 86%, black); }
.ws-sunorb { position:absolute; left:0; top:0; width:120px; height:120px; border-radius:99px;
  pointer-events:none; will-change:transform;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 85%, white) 0%,
    color-mix(in srgb, var(--accent) 45%, transparent) 42%, transparent 72%); }
.ws-sunorb.totality { background:
  radial-gradient(closest-side, var(--bg) 0 30%, color-mix(in srgb, var(--accent) 90%, white) 34%,
    color-mix(in srgb, var(--accent) 35%, transparent) 52%, transparent 72%); }
.v-eclipse .ws-in { position:relative; z-index:1; }
.ws-eclipseword { will-change:text-shadow; }
/* shattered glass */
.v-shatter { padding:120px 0 110px; }
.ws-shatterstage { position:relative; display:inline-block; cursor:crosshair; }
.ws-shbase { margin:0; opacity:0; }
.ws-shard { position:absolute; inset:0; margin:0; pointer-events:none; will-change:transform;
  color:var(--ink);
  transition:transform 620ms cubic-bezier(.2,.85,.3,1.1), opacity 480ms linear; }
.ws-shatterstage:not(.settled) .ws-shard {
  transform:translate(calc(var(--sx) * 90px), calc(var(--sy) * 70px)) rotate(var(--sr)); opacity:0; }
.ws-shatterstage.settled .ws-shard { transform:none; opacity:1; }
.ws-shatterstage.settled.broken .ws-shard {
  transform:translate(calc(var(--sx) * 56px), calc(var(--sy) * 44px)) rotate(var(--sr)); opacity:.82;
  transition:transform 340ms cubic-bezier(.2,.8,.3,1); }

/* ================= wave-11: ★★ chrome + conversions ================= */
/* iris portal menu */
.m-iris .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; padding:18px max(20px, 6cqw) 26px; box-sizing:border-box;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  clip-path:circle(0px at var(--ox, 92%) var(--oy, 34px));
  transition:clip-path 560ms cubic-bezier(.3,.75,.25,1); }
.m-iris.open .ws-mpanel { clip-path:circle(165% at var(--ox, 92%) var(--oy, 34px)); }
.m-iris.open .ws-mbiglink { opacity:1; transform:none; transition-delay:calc(180ms + var(--i, 0) * 55ms); }
/* flip deck menu */
.m-flipdeck .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; padding:18px max(20px, 5cqw) 26px; box-sizing:border-box;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  opacity:0; transition:opacity 200ms linear; }
.m-flipdeck.open .ws-mpanel { opacity:1; }
.ws-decktiles { flex:1; display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
  align-content:center; perspective:1100px; }
.ws-decktile { position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
  min-height:120px; padding:18px 20px; border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); cursor:pointer;
  transform:rotateX(-84deg); opacity:0; transform-origin:50% 100%;
  transition:transform 520ms cubic-bezier(.2,.8,.25,1.08), opacity 300ms linear,
    border-color 150ms linear; }
.m-flipdeck.open .ws-decktile { transform:none; opacity:1;
  transition-delay:calc(90ms + var(--i, 0) * 70ms); }
.ws-decktile i { font:600 10px var(--mono); color:var(--faint); font-style:normal; }
.ws-decktile b { font:700 20px var(--font-head, var(--font)); color:var(--ink); }
.ws-decktile em { position:absolute; top:14px; right:14px; display:flex; color:var(--faint); }
.ws-decktile em svg { width:15px; height:15px; }
.ws-decktile:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-decktile.on b, .ws-decktile.cta b { color:var(--accent); }
.ws-decktile.cta { background:var(--accent-fill); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }
/* mobile-menu-set-accordion (SB_04) — left side drawer of collapsible page sections; one open at a time */
.m-mobile-menu-set-accordion .ws-mpanel { top:0; left:0; height:100cqh; width:min(330px, 88cqw);
  display:flex; flex-direction:column; gap:16px; padding:18px 20px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-right:var(--bw, 1px) solid var(--hair);
  transform:translateX(-104%); transition:transform 280ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-accordion.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-accordion .ws-macclist { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin:0 -2px; padding:2px; }
.m-mobile-menu-set-accordion .ws-macc { border:var(--bw, 1px) solid var(--hair); border-radius:12px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 3%, transparent); transition:border-color 160ms linear; }
.m-mobile-menu-set-accordion .ws-macc.exp { border-color:color-mix(in srgb, var(--accent) 38%, transparent); }
.m-mobile-menu-set-accordion .ws-macchead { display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; background:none; border:0; cursor:pointer; text-align:left; color:var(--ink); }
.m-mobile-menu-set-accordion .ws-maccnum { font:600 9.5px var(--mono); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-accordion .ws-macchead b { font:600 16px var(--font); color:var(--ink); flex:1; }
.m-mobile-menu-set-accordion .ws-macc.on .ws-macchead b, .m-mobile-menu-set-accordion .ws-macc.on .ws-maccnum { color:var(--accent); }
.m-mobile-menu-set-accordion .ws-accchev { display:flex; color:var(--dim);
  transition:transform 260ms var(--ease-pop, ease-out), color 140ms linear; }
.m-mobile-menu-set-accordion .ws-accchev svg { width:16px; height:16px; }
.m-mobile-menu-set-accordion .ws-macc.exp .ws-accchev { transform:rotate(180deg); color:var(--accent); }
.m-mobile-menu-set-accordion .ws-accsub { max-height:0; opacity:0; overflow:hidden;
  transition:max-height 300ms var(--ease-pop, ease-out), opacity 220ms linear; }
.m-mobile-menu-set-accordion .ws-macc.exp .ws-accsub { max-height:200px; opacity:1; }
.m-mobile-menu-set-accordion .ws-subrow { display:flex; align-items:center; gap:10px; padding:11px 14px 6px; cursor:pointer; }
.m-mobile-menu-set-accordion .ws-subdot { width:6px; height:6px; border-radius:99px; flex:none;
  background:color-mix(in srgb, var(--accent) 65%, transparent); }
.m-mobile-menu-set-accordion .ws-subrow b { font:600 13.5px var(--font); color:var(--dim); flex:1; transition:color 140ms linear; }
.m-mobile-menu-set-accordion .ws-subrow:hover b, .m-mobile-menu-set-accordion .ws-subrow.on b { color:var(--accent); }
.m-mobile-menu-set-accordion .ws-subrow em { display:flex; color:var(--faint); }
.m-mobile-menu-set-accordion .ws-subrow em svg { width:13px; height:13px; }
.m-mobile-menu-set-accordion .ws-submeta { display:block; padding:0 14px 12px; font:500 10px var(--mono); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-accordion .ws-btn { justify-content:center; }
/* card grid — SB_04 mobile-menu-set-cards: pages as icon cards in a bottom sheet */
.m-mobile-menu-set-cards .ws-mpanel { top:100cqh; left:8px; right:8px; max-height:84cqh;
  display:flex; flex-direction:column; gap:12px; padding:8px 14px 18px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:22px 22px 0 0;
  box-shadow:0 -12px 46px color-mix(in srgb, var(--ink) 15%, transparent);
  transform:translateY(4%); opacity:0;
  transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), opacity 200ms linear; }
.m-mobile-menu-set-cards.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.m-mobile-menu-set-cards .ws-mhead { padding:2px 2px 0; }
.m-mobile-menu-set-cards .ws-mcards { display:grid; grid-template-columns:1fr 1fr; gap:10px;
  overflow-y:auto; padding:2px; margin:0 -2px; }
.m-mobile-menu-set-cards .ws-mcard { position:relative; display:flex; flex-direction:column;
  padding:14px 13px; border-radius:15px; border:var(--bw, 1px) solid var(--hair); cursor:pointer; overflow:hidden;
  text-decoration:none; background:color-mix(in srgb, var(--ink) 3%, transparent);
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity 300ms linear, transform 360ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)),
    box-shadow 180ms linear, border-color 140ms linear;
  transition-delay:0ms; }
.m-mobile-menu-set-cards.open .ws-mcard { opacity:1; transform:none;
  transition-delay:calc(80ms + var(--i) * 46ms); }
.m-mobile-menu-set-cards .ws-mcard:hover { border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow:0 6px 20px color-mix(in srgb, var(--ink) 12%, transparent); }
.m-mobile-menu-set-cards .ws-mcard.press { transform:scale(.955); transition-duration:120ms; }
.m-mobile-menu-set-cards .ws-mcard-ic { width:42px; height:42px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; margin-bottom:11px;
  background:var(--accent-fill); color:var(--accent);
  transition:transform 220ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-cards .ws-mcard:hover .ws-mcard-ic { transform:scale(1.09); }
.m-mobile-menu-set-cards .ws-mcard-ic svg { width:21px; height:21px; }
.m-mobile-menu-set-cards .ws-mcard b { font:700 13.5px var(--font); color:var(--ink); letter-spacing:-0.01em; }
.m-mobile-menu-set-cards .ws-mcard i { font:500 10.5px var(--mono); color:var(--faint); font-style:normal; margin-top:3px; }
.m-mobile-menu-set-cards .ws-mcard.on { border-color:color-mix(in srgb, var(--accent) 50%, transparent);
  background:color-mix(in srgb, var(--accent) 10%, transparent); }
.m-mobile-menu-set-cards .ws-mcard.on b { color:var(--accent); }
.m-mobile-menu-set-cards .ws-btn { justify-content:center; }
/* animated slide-down (SB_04 mobile-menu-set-animated) — springy panel drops from the top,
   links cascade in (mount() drives it live; the CSS keyframe below is the no-JS floor), each with a live dot */
.m-mobile-menu-set-animated .ws-mpanel { top:0; left:0; width:100%;
  display:flex; flex-direction:column; gap:14px; padding:18px 22px 22px; box-sizing:border-box;
  background:color-mix(in srgb, var(--panel) 92%, transparent); background-image:var(--surface-grad,none);
  border-bottom:var(--bw, 1px) solid var(--hair);
  transform:translateY(-102%); transition:transform 460ms cubic-bezier(.32,1.5,.58,1); }
.m-mobile-menu-set-animated.open .ws-mpanel { transform:translateY(0); }
.m-mobile-menu-set-animated .ws-mlink { align-items:center; }
.m-mobile-menu-set-animated .ws-mlink b { transition:color 140ms linear, transform 180ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-animated .ws-mlink:hover b { color:var(--accent); transform:translateX(4px); }
.m-mobile-menu-set-animated .ws-mlink.on b { color:var(--accent); }
.m-mobile-menu-set-animated .ws-mdot { width:7px; height:7px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--ink) 24%, transparent);
  transition:background 160ms linear, transform 220ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-animated .ws-mlink.on .ws-mdot { background:var(--accent); transform:scale(1.3); }
.m-mobile-menu-set-animated .ws-mlink:hover .ws-mdot { transform:scale(1.5); }
.m-mobile-menu-set-animated.open .ws-mlink { animation:mset-anim-drop 420ms cubic-bezier(.32,1.5,.58,1) backwards;
  animation-delay:calc(60ms + var(--i) * 60ms); }
@keyframes mset-anim-drop { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
/* context menu — a compact popover drops from the trigger; icon rows + divider + actions */
.m-mobile-menu-set-context-menu .ws-mpanel { top:8px; right:8px; width:min(300px, 82cqw);
  display:flex; flex-direction:column; gap:0; padding:6px; box-sizing:border-box;
  background:color-mix(in srgb, var(--panel) 93%, transparent);
  border:var(--bw, 1px) solid var(--hair); border-radius:16px;
  box-shadow:0 22px 50px -16px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.24);
  transform-origin:top right; transform:scale(.9); opacity:0;
  transition:transform 220ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)), opacity 150ms linear; }
.m-mobile-menu-set-context-menu.open .ws-mpanel { transform:none; opacity:1; }
.m-mobile-menu-set-context-menu .ws-mpanel::after { content:''; position:absolute; top:-6px; right:22px;
  width:12px; height:12px; background:color-mix(in srgb, var(--panel) 93%, transparent);
  border-left:var(--bw, 1px) solid var(--hair); border-top:var(--bw, 1px) solid var(--hair); border-radius:4px 0 0 0;
  transform:rotate(45deg); }
.m-mobile-menu-set-context-menu .ws-mlinks { gap:1px; }
.m-mobile-menu-set-context-menu .ws-ctxrow { align-items:center; gap:11px; padding:9px 11px;
  border-bottom:none; border-radius:10px; transition:background 120ms linear, color 120ms linear; }
.m-mobile-menu-set-context-menu.open .ws-ctxrow { animation:ctxrow-in 260ms var(--ease-pop, ease-out) both;
  animation-delay:calc(60ms + var(--i) * 32ms); }
@keyframes ctxrow-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.m-mobile-menu-set-context-menu .ws-ctxrow:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.m-mobile-menu-set-context-menu .ws-ctxrow.hl { background:color-mix(in srgb, var(--ink) 9%, transparent); }
.m-mobile-menu-set-context-menu .ws-ctxrow.on { background:var(--accent-fill); }
.m-mobile-menu-set-context-menu .ws-ctxrow.on.hl { background:var(--accent-fill2); }
.m-mobile-menu-set-context-menu .ws-ctxrow b { font:600 14.5px var(--font); color:var(--ink); }
.m-mobile-menu-set-context-menu .ws-ctxrow.on b { color:var(--accent); }
.m-mobile-menu-set-context-menu .ws-ctxico { width:26px; height:26px; display:flex; align-items:center;
  justify-content:center; flex:none; border-radius:8px; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 4%, transparent); }
.m-mobile-menu-set-context-menu .ws-ctxrow.on .ws-ctxico { color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); }
.m-mobile-menu-set-context-menu .ws-ctxico svg { width:15px; height:15px; }
.m-mobile-menu-set-context-menu .ws-ctxdiv { height:1px; margin:5px 8px; background:var(--hair); }
.m-mobile-menu-set-context-menu .ws-ctxfoot { padding:2px 6px 3px; }
.m-mobile-menu-set-context-menu .ws-ctxfoot .ws-btn { flex:1; justify-content:center; }
.m-mobile-menu-set-context-menu .ws-mnote { padding:2px 8px 4px; text-align:center; }
/* bottom-sheet grid (SB_04 · mobile-menu-set-bottom-sheet) — rises from the floor on a drag handle; pages as an icon grid */
.m-mobile-menu-set-bottom-sheet .ws-mpanel { top:100cqh; left:0; right:0; margin-inline:auto; max-width:560px;
  display:flex; flex-direction:column; gap:14px; padding:8px 16px 18px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:22px 22px 0 0;
  box-shadow:0 -10px 56px color-mix(in srgb, var(--bg) 62%, transparent);
  transform:translateY(2%); opacity:0;
  transition:transform 320ms cubic-bezier(.32,1.12,.58,1), opacity 200ms linear; }
.m-mobile-menu-set-bottom-sheet.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.m-mobile-menu-set-bottom-sheet .ws-mpanel.dragging { transition:none; }
.m-mobile-menu-set-bottom-sheet .ws-mgrab { touch-action:none; }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-head { align-items:flex-start; padding:2px 2px 12px; border-bottom:var(--bw, 1px) solid var(--hair); touch-action:none; }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-titles b { display:block; font:700 16px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-titles i { display:block; margin-top:2px; font:400 12px var(--font); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-bottom-sheet .ws-mclose { border-radius:50%; transition:color 140ms linear, border-color 140ms linear, transform 250ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-bottom-sheet .ws-mclose:hover { transform:rotate(90deg); }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-cell { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:16px 8px; border-radius:14px; border:var(--bw, 1px) solid var(--hair); cursor:pointer; text-decoration:none;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  opacity:0; transform:translateY(10px) scale(.98);
  transition:transform 200ms cubic-bezier(.2,.9,.25,1), border-color 140ms linear, background 140ms linear; }
.m-mobile-menu-set-bottom-sheet.open .ws-bsheet-cell { opacity:1; transform:none; transition-delay:calc(90ms + var(--i) * 45ms); }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-cell:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-cell:active { transform:scale(.95); }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-cell b { font:600 12px var(--font); color:var(--dim); text-align:center; letter-spacing:-0.005em; }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-ic { width:46px; height:46px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);
  transition:transform 200ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-ic svg { width:22px; height:22px; }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-cell:hover .ws-bsheet-ic { transform:scale(1.08); }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-cell.on { border-color:color-mix(in srgb, var(--accent) 48%, transparent); background:var(--accent-fill); }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-cell.on b { color:var(--accent); }
.m-mobile-menu-set-bottom-sheet .ws-bsheet-cell.on .ws-bsheet-ic { background:var(--accent); color:var(--accent-text, var(--bg)); }
.m-mobile-menu-set-bottom-sheet .ws-btn { justify-content:center; }
/* dark slide drawer — intrinsically dark (self-contained near-black surface,
   faintly accent-tinted) so it reads dark on ANY site theme; slides from the left */
.m-mobile-menu-set-dark {
  --md-base:#0e0f13; --md-ink:#f4f5f8;
  --md-panel:color-mix(in srgb, var(--md-base) 93%, var(--accent) 7%);
  --md-dim:color-mix(in srgb, var(--md-ink) 52%, transparent);
  --md-faint:color-mix(in srgb, var(--md-ink) 30%, transparent);
  --md-hair:color-mix(in srgb, var(--md-ink) 12%, transparent);
  --md-fill:color-mix(in srgb, var(--md-ink) 6%, transparent);
  --md-acc-fill:color-mix(in srgb, var(--accent) 15%, transparent);
  --md-acc-soft:color-mix(in srgb, var(--accent) 24%, transparent);
}
.m-mobile-menu-set-dark .ws-mscrim { background:color-mix(in srgb, #000 68%, transparent); }
.m-mobile-menu-set-dark .ws-mpanel { top:0; left:0; height:100cqh; width:min(300px, 88cqw);
  display:flex; flex-direction:column; gap:16px; padding:18px 16px; box-sizing:border-box;
  background:var(--md-panel); color:var(--md-ink); border-right:1px solid var(--md-hair);
  box-shadow:8px 0 48px color-mix(in srgb, #000 55%, transparent);
  transform:translateX(-105%); transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-dark.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-dark .ws-mhead { padding-bottom:14px; border-bottom:1px solid var(--md-hair); }
.m-mobile-menu-set-dark .ws-logo b { color:var(--md-ink); }
.m-mobile-menu-set-dark .ws-mclose { color:var(--md-dim); border-color:var(--md-hair); }
.m-mobile-menu-set-dark .ws-mclose:hover { color:var(--accent); border-color:var(--md-acc-soft); }
.m-mobile-menu-set-dark .md-nav { flex:1; overflow-y:auto; gap:2px; }
.m-mobile-menu-set-dark .md-link { display:flex; align-items:center; gap:12px; padding:0 10px; min-height:48px;
  border-radius:11px; cursor:pointer; text-decoration:none; color:var(--md-dim); font:500 15px var(--font);
  letter-spacing:-0.01em; transition:background 160ms linear, color 160ms linear, transform 150ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-dark .md-link:hover { background:var(--md-fill); color:var(--md-ink); transform:translateX(3px); }
.m-mobile-menu-set-dark .md-link.on { background:var(--md-acc-fill); color:var(--accent); font-weight:600; }
.m-mobile-menu-set-dark .md-link b { font:inherit; flex:1; }
.m-mobile-menu-set-dark .md-ico { width:30px; height:30px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center; background:var(--md-fill); transition:background 140ms linear; }
.m-mobile-menu-set-dark .md-link.on .md-ico { background:var(--md-acc-soft); }
.m-mobile-menu-set-dark .md-dot { width:7px; height:7px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--md-ink) 36%, transparent); transition:background 140ms linear, box-shadow 140ms linear; }
.m-mobile-menu-set-dark .md-link:hover .md-dot { background:var(--md-ink); }
.m-mobile-menu-set-dark .md-link.on .md-dot { background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.m-mobile-menu-set-dark .md-badge { margin-left:auto; flex:none; padding:3px 8px; border-radius:8px;
  font:700 9px var(--mono); letter-spacing:0.06em; text-transform:uppercase;
  background:var(--md-acc-fill); color:var(--accent); }
.m-mobile-menu-set-dark .md-div { height:1px; flex:none; background:var(--md-hair); margin:2px 6px; }
.m-mobile-menu-set-dark .ws-btn { justify-content:center; }
.m-mobile-menu-set-dark .ws-mnote { color:var(--md-faint); text-align:center; }
@container site (max-width:560px) {
  .m-mobile-menu-set-dark .ws-mpanel { width:min(300px, 90cqw); }
  .m-mobile-menu-set-dark .md-link { min-height:46px; }
}
/* corner reveal — a compact card blooms out of the corner by the menu button (SB_04 mobile-menu-set-corner) */
.m-mobile-menu-set-corner .ws-mpanel { top:14px; right:14px; width:min(300px, 82cqw);
  display:flex; flex-direction:column; gap:15px; padding:15px 17px 17px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:18px;
  box-shadow:0 22px 48px -18px color-mix(in srgb, var(--bg-deep) 90%, transparent);
  transform-origin:var(--ox, 100%) var(--oy, 0%);
  transform:scale(.82); opacity:0; clip-path:circle(0% at var(--ox, 100%) var(--oy, 0%));
  transition:transform 320ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), opacity 190ms linear,
    clip-path 400ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-corner.open .ws-mpanel { transform:scale(1); opacity:1;
  clip-path:circle(160% at var(--ox, 100%) var(--oy, 0%)); }
.m-mobile-menu-set-corner .ws-mlinks { gap:0; }
.m-mobile-menu-set-corner .ws-mlink { padding:11px 4px; opacity:0; transform:translateX(12px);
  transition:opacity 200ms linear, transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-corner .ws-mlink:last-of-type { border-bottom:none; }
.m-mobile-menu-set-corner.open .ws-mlink { opacity:1; transform:none;
  transition-delay:calc(130ms + var(--i) * 42ms); }
.m-mobile-menu-set-corner .ws-btn { justify-content:center; }
/* editorial — full masthead takeover, numbered index set in giant serif, active rule drawn under the reading link */
.m-mobile-menu-set-editorial .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; gap:14px; padding:16px max(20px, 6cqw) 24px; box-sizing:border-box;
  background:color-mix(in srgb, var(--bg) 97%, transparent); border-top:3px solid var(--accent);
  opacity:0; transform:translateY(-1.6%); transition:opacity 220ms linear, transform 300ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-editorial.open .ws-mpanel { opacity:1; transform:none; }
.m-mobile-menu-set-editorial .ws-mhead { padding-bottom:12px; border-bottom:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-editorial .ws-edlabel { display:flex; align-items:center; justify-content:space-between;
  font:600 9.5px var(--mono); letter-spacing:0.22em; text-transform:uppercase; color:var(--faint); }
.m-mobile-menu-set-editorial .ws-mbig { justify-content:flex-start; gap:0; margin-top:2px; }
.m-mobile-menu-set-editorial .ws-mbiglink { align-items:baseline; gap:18px; padding:14px 0 13px;
  border-bottom:var(--bw, 1px) solid var(--hair); position:relative;
  opacity:0; transform:translateX(-14px); transition:opacity 240ms linear, transform 320ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-editorial.open .ws-mbiglink { opacity:1; transform:none; transition-delay:calc(80ms + var(--i) * 55ms); }
.m-mobile-menu-set-editorial .ws-mbiglink i { min-width:22px; flex:none; font:600 10px var(--mono); letter-spacing:0.14em; color:var(--faint); }
.m-mobile-menu-set-editorial .ws-mbiglink b { flex:1;
  font:500 clamp(30px, 9cqw, 52px)/1.02 var(--font-head, Georgia, "Times New Roman", serif);
  letter-spacing:-0.015em; color:var(--ink); transition:color 140ms linear, font-style 140ms linear; }
.m-mobile-menu-set-editorial .ws-mbiglink::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 260ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-editorial .ws-mbiglink.on::after,
.m-mobile-menu-set-editorial .ws-mbiglink.reading::after { transform:scaleX(1); }
.m-mobile-menu-set-editorial .ws-mbiglink.on b,
.m-mobile-menu-set-editorial .ws-mbiglink.reading b,
.m-mobile-menu-set-editorial .ws-mbiglink:hover b { color:var(--accent); font-style:italic; }
.m-mobile-menu-set-editorial .ws-mbiglink.on i,
.m-mobile-menu-set-editorial .ws-mbiglink.reading i { color:var(--accent); }
.m-mobile-menu-set-editorial .ws-mfoot { border-top:var(--bw, 1px) solid var(--hair); padding-top:14px; }
@container site (max-width:560px) {
  .m-mobile-menu-set-editorial .ws-mbiglink { gap:12px; padding:11px 0; }
  .m-mobile-menu-set-editorial .ws-mbiglink b { font-size:clamp(26px, 11cqw, 40px); }
}
/* docs — a searchable chapter-tree sidebar drawer (SB_04 mobile-menu-set-docs) */
.m-mobile-menu-set-docs .ws-mpanel { top:0; right:0; height:100cqh; width:min(330px, 88cqw);
  display:flex; flex-direction:column; gap:12px; padding:16px 14px 16px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-left:var(--bw, 1px) solid var(--hair);
  transform:translateX(105%); transition:transform 280ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-docs.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-docs .mdocs-search { display:flex; align-items:center; gap:9px; flex:none;
  padding:9px 11px; border-radius:10px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 3%, transparent); }
.m-mobile-menu-set-docs .mdocs-search svg { width:14px; height:14px; color:var(--faint); flex:none; }
.m-mobile-menu-set-docs .mdocs-input { flex:1; min-width:0; border:none; background:none; outline:none;
  font:500 13px var(--font); color:var(--ink); }
.m-mobile-menu-set-docs .mdocs-input::placeholder { color:var(--faint); }
.m-mobile-menu-set-docs .mdocs-kbd { flex:none; padding:2px 7px; border-radius:6px; border:var(--bw, 1px) solid var(--hair);
  font:600 10px var(--mono); color:var(--dim); font-style:normal; }
.m-mobile-menu-set-docs .mdocs-tree { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.m-mobile-menu-set-docs .mdocs-ch { border-bottom:var(--bw, 1px) solid var(--hair-soft, var(--hair)); }
.m-mobile-menu-set-docs .mdocs-ch:last-child { border-bottom:none; }
.m-mobile-menu-set-docs .mdocs-chhead { width:100%; display:flex; align-items:center; gap:10px;
  padding:11px 4px; cursor:pointer; border:none; background:none; text-align:left;
  -webkit-tap-highlight-color:transparent; }
.m-mobile-menu-set-docs .mdocs-chnum { width:18px; flex:none; font:700 10px var(--mono); color:var(--faint);
  font-style:normal; letter-spacing:0.04em; }
.m-mobile-menu-set-docs .mdocs-chtitle { flex:1; font:700 13px var(--font); color:var(--ink); letter-spacing:-0.01em; }
.m-mobile-menu-set-docs .mdocs-chev { width:13px; height:13px; flex:none; color:var(--faint);
  transition:transform 220ms cubic-bezier(.4,0,.2,1); }
.m-mobile-menu-set-docs .mdocs-ch.open .mdocs-chev { transform:rotate(90deg); }
.m-mobile-menu-set-docs .mdocs-wrap { display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 240ms cubic-bezier(.4,0,.2,1); }
.m-mobile-menu-set-docs .mdocs-ch.open .mdocs-wrap { grid-template-rows:1fr; }
.m-mobile-menu-set-docs .mdocs-list { min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.m-mobile-menu-set-docs .mdocs-sec { position:relative; display:flex; align-items:center; gap:8px;
  padding:9px 10px 9px 22px; border-radius:8px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background 140ms linear; }
.m-mobile-menu-set-docs .mdocs-sec:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.m-mobile-menu-set-docs .mdocs-sec.active { background:var(--accent-fill); }
.m-mobile-menu-set-docs .mdocs-sec.active::before { content:''; position:absolute; left:5px; top:9px; bottom:9px;
  width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.m-mobile-menu-set-docs .mdocs-sectitle { flex:1; font:500 13px var(--font); color:var(--dim);
  transition:color 140ms linear; }
.m-mobile-menu-set-docs .mdocs-sec:hover .mdocs-sectitle { color:var(--ink); }
.m-mobile-menu-set-docs .mdocs-sec.active .mdocs-sectitle { color:var(--accent); font-weight:600; }
.m-mobile-menu-set-docs .mdocs-secnum { flex:none; font:600 10px var(--mono); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-docs .mdocs-sec.active .mdocs-secnum { color:var(--accent); }
.m-mobile-menu-set-docs .mdocs-sec.hide { display:none; }
.m-mobile-menu-set-docs .mdocs-cta { padding:8px 4px 4px; }
.m-mobile-menu-set-docs .ws-btn { width:100%; justify-content:center; }
.m-mobile-menu-set-docs .ws-mnote { flex:none; margin-top:2px; }
/* breadcrumb-nav — iOS-style drill-down: scrollable breadcrumb trail + back button, list rows with chevrons, depth dots (SB_04 mobile-menu-set-breadcrumb-nav) */
.m-mobile-menu-set-breadcrumb-nav .ws-mpanel { top:0; right:0; height:100cqh; width:min(340px, 90cqw);
  display:flex; flex-direction:column; gap:14px; padding:16px 18px 18px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-left:var(--bw, 1px) solid var(--hair);
  transform:translateX(105%); transition:transform 280ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-breadcrumb-nav.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-breadcrumb-nav .bcn-bar { display:flex; align-items:center; gap:8px; flex:none;
  padding-bottom:12px; border-bottom:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-breadcrumb-nav .bcn-back { display:flex; align-items:center; gap:2px; flex:none;
  border:none; background:none; cursor:pointer; padding:4px 2px; max-width:40%; overflow:hidden;
  font:600 12.5px var(--font); color:var(--accent); transition:opacity 120ms linear; }
.m-mobile-menu-set-breadcrumb-nav .bcn-back:hover { opacity:.6; }
.m-mobile-menu-set-breadcrumb-nav .bcn-back.is-root { opacity:.32; pointer-events:none; }
.m-mobile-menu-set-breadcrumb-nav .bcn-chevl { font-size:17px; line-height:1; margin-top:-1px; }
.m-mobile-menu-set-breadcrumb-nav .bcn-back-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-mobile-menu-set-breadcrumb-nav .bcn-trail { display:flex; align-items:center; gap:2px; flex:1; min-width:0;
  overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; scroll-behavior:smooth; }
.m-mobile-menu-set-breadcrumb-nav .bcn-trail::-webkit-scrollbar { display:none; }
.m-mobile-menu-set-breadcrumb-nav .bcn-crumb { flex:none; border:none; background:none; cursor:pointer;
  padding:4px 3px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 12.5px var(--font); color:var(--accent); transition:opacity 120ms linear; }
.m-mobile-menu-set-breadcrumb-nav .bcn-crumb:hover { opacity:.6; }
.m-mobile-menu-set-breadcrumb-nav .bcn-crumb.current { color:var(--ink); font-weight:700; cursor:default; pointer-events:none; }
.m-mobile-menu-set-breadcrumb-nav .bcn-sep { flex:none; color:var(--faint); font-size:11px; user-select:none; }
.m-mobile-menu-set-breadcrumb-nav .ws-mlinks { flex:1; overflow-y:auto; }
.m-mobile-menu-set-breadcrumb-nav .ws-mlink { align-items:center; gap:10px; padding:13px 2px; }
.m-mobile-menu-set-breadcrumb-nav .ws-mlink b { font-weight:500; }
.m-mobile-menu-set-breadcrumb-nav .ws-mlink::after { content:"\203A"; margin-left:auto; line-height:1;
  font:400 17px var(--font); color:var(--faint); transition:color 140ms linear, transform 140ms ease; }
.m-mobile-menu-set-breadcrumb-nav .ws-mlink.on::after { color:var(--accent); }
.m-mobile-menu-set-breadcrumb-nav .ws-mlink:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); border-radius:8px; }
.m-mobile-menu-set-breadcrumb-nav .ws-mlink.sel { background:var(--accent-fill); border-radius:8px; }
.m-mobile-menu-set-breadcrumb-nav .ws-mlink.sel b, .m-mobile-menu-set-breadcrumb-nav .ws-mlink.sel i { color:var(--accent); }
.m-mobile-menu-set-breadcrumb-nav .ws-mlink.sel::after { color:var(--accent); transform:translateX(2px); }
.m-mobile-menu-set-breadcrumb-nav .bcn-depth { display:flex; align-items:center; justify-content:center; gap:6px; flex:none; padding:2px 0; }
.m-mobile-menu-set-breadcrumb-nav .bcn-dot { width:7px; height:7px; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 20%, transparent); transition:transform 200ms ease, background 200ms linear; }
.m-mobile-menu-set-breadcrumb-nav .bcn-dot.on { background:var(--accent); transform:scale(1.35); }
.m-mobile-menu-set-breadcrumb-nav .ws-btn { justify-content:center; }
.m-mobile-menu-set-breadcrumb-nav .ws-mnote { text-align:center; }
@container site (max-width:560px) { .m-mobile-menu-set-breadcrumb-nav .ws-mpanel { width:min(340px, 94cqw); } }
/* ecommerce — storefront side drawer: live search over a category tile grid */
.m-mobile-menu-set-ecommerce .ws-mpanel { top:0; left:0; height:100cqh; width:min(324px, 88cqw);
  display:flex; flex-direction:column; gap:13px; padding:18px 18px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-right:var(--bw, 1px) solid var(--hair);
  transform:translateX(-106%); transition:transform 280ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-ecommerce.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-ecommerce .ws-mhead { gap:10px; }
.m-mobile-menu-set-ecommerce .ws-mecotools { display:flex; align-items:center; gap:8px; }
.m-mobile-menu-set-ecommerce .ws-mecocart { position:relative; width:34px; height:34px; flex:none;
  display:flex; align-items:center; justify-content:center; border:none; border-radius:9px; cursor:pointer;
  background:var(--accent); color:var(--accent-text); transition:transform 140ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-ecommerce .ws-mecocart:hover { transform:translateY(-1px); }
.m-mobile-menu-set-ecommerce .ws-mecocart svg { width:16px; height:16px; }
.m-mobile-menu-set-ecommerce .ws-mecobadge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px;
  padding:0 4px; box-sizing:border-box; border-radius:9px; background:var(--ink); color:var(--panel);
  border:2px solid var(--panel); font:800 9px var(--mono); display:flex; align-items:center; justify-content:center; }
.m-mobile-menu-set-ecommerce .ws-mecosearch { display:flex; align-items:center; gap:9px; padding:0 12px; min-height:42px;
  border-radius:11px; border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 4%, transparent);
  transition:border-color 140ms linear, box-shadow 140ms linear; }
.m-mobile-menu-set-ecommerce .ws-mecosearch:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 3px var(--accent-fill); }
.m-mobile-menu-set-ecommerce .ws-mecosearch svg { width:15px; height:15px; color:var(--faint); flex:none; }
.m-mobile-menu-set-ecommerce .ws-mecosearch input { flex:1; min-width:0; border:none; outline:none; background:none;
  font:500 13px var(--font); color:var(--ink); }
.m-mobile-menu-set-ecommerce .ws-mecosearch input::placeholder { color:var(--faint); }
.m-mobile-menu-set-ecommerce .ws-mecolabel { margin:2px 2px -1px; font:700 9.5px var(--mono); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--faint); }
.m-mobile-menu-set-ecommerce .ws-mecogrid { grid-template-columns:1fr 1fr 1fr; gap:8px; flex:1; overflow-y:auto;
  align-content:start; padding:2px; margin:-2px; }
.m-mobile-menu-set-ecommerce .ws-mecotile { display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:13px 6px; border-radius:13px; text-align:center; }
.m-mobile-menu-set-ecommerce .ws-mecotile.hide { display:none; }
.m-mobile-menu-set-ecommerce .ws-mecoicon { width:46px; height:46px; border-radius:13px; display:flex;
  align-items:center; justify-content:center; color:var(--accent); background:var(--accent-fill);
  transition:transform 200ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-ecommerce .ws-mecoicon svg { width:21px; height:21px; }
.m-mobile-menu-set-ecommerce .ws-mecotile:hover .ws-mecoicon { transform:scale(1.08); }
.m-mobile-menu-set-ecommerce .ws-mecotile b { font:600 11px var(--font); color:var(--ink); line-height:1.2; }
.m-mobile-menu-set-ecommerce .ws-mecotile.on { background:var(--accent-fill); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.m-mobile-menu-set-ecommerce .ws-mecotile.on .ws-mecoicon { background:var(--accent); color:var(--accent-text); }
.m-mobile-menu-set-ecommerce .ws-mecotile.on b { color:var(--accent); }
.m-mobile-menu-set-ecommerce .ws-meconohits { font:500 12px var(--font); color:var(--dim); text-align:center; padding:4px 0 2px; }
.m-mobile-menu-set-ecommerce .ws-btn { justify-content:center; }
/* mobile-menu-set-finance (SB_04) - secure banking drawer: net-worth header, live balance tiles, privacy eye, SSL badge; slides from the left */
.m-mobile-menu-set-finance .ws-mpanel { top:0; left:0; height:100cqh; width:min(330px, 88cqw);
  display:flex; flex-direction:column; gap:13px; padding:16px 16px 18px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-right:var(--bw, 1px) solid var(--hair);
  transform:translateX(-104%); transition:transform 300ms var(--ease-pop, cubic-bezier(.22,1,.36,1)); }
.m-mobile-menu-set-finance.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-finance .fin-nw { flex:none; padding:13px 14px; border-radius:14px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--accent) 9%, var(--panel-2, var(--panel))); }
.m-mobile-menu-set-finance .fin-nw-row { display:flex; align-items:center; justify-content:space-between; }
.m-mobile-menu-set-finance .fin-nw-label { font:700 9px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); font-style:normal; }
.m-mobile-menu-set-finance .fin-eye { width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex:none;
  border:var(--bw, 1px) solid var(--hair); border-radius:8px; background:none; color:var(--dim); cursor:pointer;
  transition:color 140ms linear, border-color 140ms linear; }
.m-mobile-menu-set-finance .fin-eye:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.m-mobile-menu-set-finance .fin-eye svg { width:15px; height:15px; }
.m-mobile-menu-set-finance .fin-nw-amt { font:800 25px var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.03em; margin-top:5px; font-variant-numeric:tabular-nums; }
.m-mobile-menu-set-finance .fin-nw-chg { display:flex; align-items:center; gap:5px; margin-top:5px; }
.m-mobile-menu-set-finance .fin-nw-chg svg { width:11px; height:11px; color:#1fbe58; }
.m-mobile-menu-set-finance .fin-nw-chg span { font:600 11px var(--font); color:#1fbe58; }
.m-mobile-menu-set-finance .ws-mlinks { flex:none; }
.m-mobile-menu-set-finance .ws-mlink { padding:11px 4px; }
.m-mobile-menu-set-finance .fin-accts { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.m-mobile-menu-set-finance .fin-accts-h { flex:none; font:700 9px var(--mono); letter-spacing:1.6px; text-transform:uppercase;
  color:var(--faint); font-style:normal; padding:3px 2px 6px; }
.m-mobile-menu-set-finance .fin-acc { display:flex; align-items:center; gap:11px; padding:9px 6px; border-radius:10px;
  cursor:pointer; transition:background 140ms linear; }
.m-mobile-menu-set-finance .fin-acc:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.m-mobile-menu-set-finance .fin-acc-ic { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.m-mobile-menu-set-finance .fin-acc-ic svg { width:16px; height:16px; }
.m-mobile-menu-set-finance .fin-acc-ic.checking { background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.m-mobile-menu-set-finance .fin-acc-ic.savings { background:rgba(31,190,88,0.16); color:#1fbe58; }
.m-mobile-menu-set-finance .fin-acc-ic.invest { background:rgba(245,158,11,0.18); color:#f59e0b; }
.m-mobile-menu-set-finance .fin-acc-id { flex:1; min-width:0; display:flex; flex-direction:column; }
.m-mobile-menu-set-finance .fin-acc-id b { font:600 12.5px var(--font); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-finance .fin-acc-id i { font:500 10.5px var(--mono); color:var(--faint); font-style:normal; letter-spacing:0.04em; }
.m-mobile-menu-set-finance .fin-acc-bal { text-align:right; flex:none; display:flex; flex-direction:column; }
.m-mobile-menu-set-finance .fin-acc-bal b { font:700 13px var(--font); color:var(--ink); font-variant-numeric:tabular-nums; }
.m-mobile-menu-set-finance .fin-chg { font:600 10px var(--font); color:#1fbe58; font-style:normal; margin-top:1px; }
.m-mobile-menu-set-finance .fin-chg.neg { color:#f87171; }
.m-mobile-menu-set-finance .fin-sec { flex:none; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px;
  background:rgba(31,190,88,0.10); border:1px solid rgba(31,190,88,0.22); }
.m-mobile-menu-set-finance .fin-sec svg { width:13px; height:13px; color:#1fbe58; flex:none; }
.m-mobile-menu-set-finance .fin-sec span { font:600 11px var(--font); color:#1fbe58; }
.m-mobile-menu-set-finance .ws-btn { flex:none; justify-content:center; }
/* edge swipe drawer (SB_04 - mobile-menu-set-gesture) — a left drawer dismissed by a real pointer swipe;
   mount() drags the panel and snaps it open/closed past a threshold. Transform-only transition, no blur. */
.m-mobile-menu-set-gesture .ws-mpanel { top:0; left:0; height:100cqh; width:min(300px, 84cqw);
  display:flex; flex-direction:column; gap:18px; padding:18px 22px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-right:var(--bw, 1px) solid var(--hair);
  box-shadow:8px 0 40px color-mix(in srgb, var(--bg) 60%, transparent); touch-action:pan-y;
  transform:translateX(-104%); transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-gesture.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-gesture .ws-mpanel.dragging { transition:none; }
.m-mobile-menu-set-gesture .ws-mlinks { flex:1; overflow-y:auto; }
.m-mobile-menu-set-gesture .ws-btn { justify-content:center; }
/* vertical grab rail on the trailing edge — the swipe affordance */
.m-mobile-menu-set-gesture .ws-mgrab { position:absolute; top:50%; right:5px; width:4px; height:48px; margin:0;
  transform:translateY(-50%); border-radius:99px; cursor:grab; touch-action:none;
  background:color-mix(in srgb, var(--ink) 20%, transparent);
  transition:background 140ms linear, height 180ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-gesture .ws-mpanel:hover .ws-mgrab,
.m-mobile-menu-set-gesture .ws-mpanel.dragging .ws-mgrab {
  background:color-mix(in srgb, var(--accent) 60%, transparent); height:60px; }
/* mobile-menu-set-floating-button (SB_04) — FAB anchored bottom-right; page links fan up as staggered label+badge rows (speed dial), reskinned to theme tokens */
.m-mobile-menu-set-floating-button .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; padding:16px 18px 20px; box-sizing:border-box;
  pointer-events:none; opacity:0; transition:opacity 200ms linear; }
.m-mobile-menu-set-floating-button.open .ws-mpanel { opacity:1; pointer-events:none; }
.m-mobile-menu-set-floating-button .ws-mhead { pointer-events:auto; }
.m-mobile-menu-set-floating-button .ws-mdbottom { margin-top:auto; display:flex; align-items:flex-end;
  justify-content:space-between; gap:16px; }
.m-mobile-menu-set-floating-button .ws-mnote { pointer-events:auto; max-width:40cqw; align-self:flex-end; }
.m-mobile-menu-set-floating-button .ws-mdial { display:flex; flex-direction:column; align-items:flex-end;
  gap:13px; pointer-events:auto; }
.m-mobile-menu-set-floating-button .ws-mdactions { display:flex; flex-direction:column-reverse;
  align-items:flex-end; gap:12px; }
.m-mobile-menu-set-floating-button .ws-mdaction { display:flex; align-items:center; gap:10px;
  text-decoration:none; opacity:0; transform:translateY(16px) scale(.86); pointer-events:none; cursor:pointer; }
.m-mobile-menu-set-floating-button.open .ws-mdaction { pointer-events:auto; }
.m-mobile-menu-set-floating-button .ws-mdlabel { font:600 12.5px var(--font); color:var(--ink);
  background:color-mix(in srgb, var(--panel) 90%, transparent); border:var(--bw, 1px) solid var(--hair);
  padding:7px 13px; border-radius:10px; white-space:nowrap;
  box-shadow:0 6px 18px color-mix(in srgb, var(--bg) 55%, transparent); }
.m-mobile-menu-set-floating-button .ws-mdbtn { width:46px; height:46px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:700 12px var(--mono); color:var(--ink);
  background:var(--panel); background-image:var(--surface-grad,none); border:var(--bw, 1px) solid var(--hair);
  box-shadow:0 6px 18px color-mix(in srgb, var(--bg) 60%, transparent);
  transition:transform 160ms cubic-bezier(.34,1.56,.64,1), border-color 150ms linear, color 150ms linear; }
.m-mobile-menu-set-floating-button .ws-mdbtn svg { width:17px; height:17px; }
.m-mobile-menu-set-floating-button .ws-mdaction:hover .ws-mdbtn { border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); }
.m-mobile-menu-set-floating-button .ws-mdaction:active .ws-mdbtn { transform:scale(.86); }
.m-mobile-menu-set-floating-button .ws-mdaction.on .ws-mdlabel { color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.m-mobile-menu-set-floating-button .ws-mdaction.on .ws-mdbtn { color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:var(--accent-fill); }
.m-mobile-menu-set-floating-button .ws-mdaction.cta .ws-mdlabel { color:var(--accent);
  background:var(--accent-fill); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.m-mobile-menu-set-floating-button .ws-mdaction.cta .ws-mdbtn { color:var(--accent-text);
  background:var(--accent); background-image:var(--accent-grad,none); border-color:transparent; }
.m-mobile-menu-set-floating-button .ws-mdfab { width:58px; height:58px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  color:var(--accent-text); background:var(--accent); background-image:var(--accent-grad,none);
  box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 42%, transparent), 0 2px 8px color-mix(in srgb, var(--bg) 55%, transparent);
  transition:transform 300ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms linear; }
.m-mobile-menu-set-floating-button .ws-mdfab svg { width:22px; height:22px;
  transition:transform 300ms cubic-bezier(.34,1.56,.64,1); }
.m-mobile-menu-set-floating-button.open .ws-mdfab svg { transform:rotate(45deg); }
.m-mobile-menu-set-floating-button .ws-mdfab:active { transform:scale(.9); }
@container site (max-width:560px) {
  .m-mobile-menu-set-floating-button .ws-mnote { display:none; }
  .m-mobile-menu-set-floating-button .ws-mdlabel { font-size:12px; }
}
/* food delivery (SB_04 · mobile-menu-set-food) — a warm delivery-app sheet rises from the floor:
   a live craving-chip rail, pages as tappable rows, a signature checkout bar. mount() drives the chips.
   Warm red is the set's identity (kept literal); all chrome uses theme tokens. No backdrop-filter. */
.m-mobile-menu-set-food { --fd-red:#e63e14; --fd-red-dark:#c13010; }
.m-mobile-menu-set-food .ws-mpanel { top:100cqh; left:0; right:0; margin-inline:auto; max-width:520px;
  display:flex; flex-direction:column; gap:13px; padding:8px 16px 16px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:24px 24px 0 0;
  box-shadow:0 -12px 52px color-mix(in srgb, var(--fd-red) 20%, transparent);
  transform:translateY(3%); opacity:0;
  transition:transform 340ms cubic-bezier(.22,1,.36,1), opacity 200ms linear; }
.m-mobile-menu-set-food.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.m-mobile-menu-set-food .ws-mhead { padding:2px 2px 0; }
.m-mobile-menu-set-food .ws-mclose { border-radius:50%; transition:color 140ms linear, border-color 140ms linear, transform 250ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-food .ws-mclose:hover { transform:rotate(90deg); color:var(--fd-red); border-color:color-mix(in srgb, var(--fd-red) 45%, transparent); }
.m-mobile-menu-set-food .fd-crave { font:800 17px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; padding:2px 2px 0; }
/* craving chip rail — the origin's category scroll, made live in mount() */
.m-mobile-menu-set-food .fd-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin:0 -2px;
  scrollbar-width:none; scroll-snap-type:x mandatory; }
.m-mobile-menu-set-food .fd-chips::-webkit-scrollbar { display:none; }
.m-mobile-menu-set-food .fd-chip { display:flex; align-items:center; gap:7px; flex:none; cursor:pointer;
  padding:8px 14px 8px 11px; border-radius:22px; border:1.5px solid var(--hair);
  background:color-mix(in srgb, var(--ink) 3%, transparent); color:var(--dim);
  font:600 13px var(--font); white-space:nowrap; scroll-snap-align:start;
  opacity:0; transform:translateY(8px);
  transition:border-color 160ms linear, background 160ms linear, color 160ms linear, transform 200ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-food.open .fd-chip { opacity:1; transform:none; transition-delay:calc(120ms + var(--i) * 40ms); }
.m-mobile-menu-set-food .fd-chip:hover { border-color:color-mix(in srgb, var(--fd-red) 55%, transparent); color:var(--fd-red);
  background:color-mix(in srgb, var(--fd-red) 8%, transparent); }
.m-mobile-menu-set-food .fd-chip.on { background:var(--fd-red); border-color:var(--fd-red); color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb, var(--fd-red) 38%, transparent); }
.m-mobile-menu-set-food .fd-chip:active { transform:scale(.95); }
.m-mobile-menu-set-food .fd-chip-emoji { font-size:16px; line-height:1; }
/* page rows — plated tappable list; active = warm dot + red label (the origin's bottom-tabs active cue) */
.m-mobile-menu-set-food .fd-links { gap:0; }
.m-mobile-menu-set-food .fd-link { display:flex; align-items:center; gap:12px; padding:12px 6px; cursor:pointer;
  text-decoration:none; border-bottom:var(--bw, 1px) solid var(--hair);
  opacity:0; transform:translateX(-8px);
  transition:opacity 240ms linear, transform 300ms var(--ease-pop, ease-out), background 140ms linear; }
.m-mobile-menu-set-food.open .fd-link { opacity:1; transform:none; transition-delay:calc(220ms + var(--i) * 46ms); }
.m-mobile-menu-set-food .fd-link:last-child { border-bottom:none; }
.m-mobile-menu-set-food .fd-link b { flex:1; font:600 15.5px var(--font); color:var(--ink); letter-spacing:-0.01em; transition:color 140ms linear, transform 160ms ease-out; }
.m-mobile-menu-set-food .fd-link:hover b { color:var(--fd-red); transform:translateX(3px); }
.m-mobile-menu-set-food .fd-dot { width:8px; height:8px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--ink) 22%, transparent);
  transition:background 160ms linear, transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms linear; }
.m-mobile-menu-set-food .fd-link.on .fd-dot { background:var(--fd-red); transform:scale(1.25);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--fd-red) 16%, transparent); }
.m-mobile-menu-set-food .fd-link.on b { color:var(--fd-red); }
.m-mobile-menu-set-food .fd-go { display:flex; color:var(--faint); opacity:0; transform:translateX(-4px);
  transition:opacity 160ms linear, transform 200ms ease-out, color 140ms linear; }
.m-mobile-menu-set-food .fd-go svg { width:16px; height:16px; }
.m-mobile-menu-set-food .fd-link:hover .fd-go, .m-mobile-menu-set-food .fd-link.on .fd-go { opacity:1; transform:none; color:var(--fd-red); }
/* checkout bar — the origin's cart bottom bar, reinterpreted as the primary CTA */
.m-mobile-menu-set-food .fd-checkout { display:flex; align-items:center; gap:11px; cursor:pointer; text-decoration:none;
  padding:13px 16px; border-radius:16px;
  background:linear-gradient(140deg, var(--fd-red), var(--fd-red-dark)); color:#fff;
  box-shadow:0 8px 26px color-mix(in srgb, var(--fd-red) 38%, transparent);
  transition:transform 180ms ease-out, box-shadow 180ms linear; }
.m-mobile-menu-set-food .fd-checkout:hover { transform:translateY(-2px); box-shadow:0 12px 32px color-mix(in srgb, var(--fd-red) 46%, transparent); }
.m-mobile-menu-set-food .fd-checkout:active { transform:scale(.98); }
.m-mobile-menu-set-food .fd-bag { width:32px; height:32px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, #fff 22%, transparent); }
.m-mobile-menu-set-food .fd-bag svg { width:17px; height:17px; }
.m-mobile-menu-set-food .fd-checkout b { flex:1; font:800 15px var(--font); letter-spacing:-0.01em; }
.m-mobile-menu-set-food .fd-checkout-go { display:flex; }
.m-mobile-menu-set-food .fd-checkout-go svg { width:18px; height:18px; }
.m-mobile-menu-set-food .ws-mnote { text-align:center; padding-top:2px; }
@container site (max-width:560px) {
  .m-mobile-menu-set-food .ws-mpanel { padding:8px 13px 14px; }
  .m-mobile-menu-set-food .fd-link b { font-size:15px; }
}
/* mobile-menu-set-dashboard (SB_04) - admin-style left sidebar drawer: collapsible sections, per-page glyphs, live storage meter, account card */
.m-mobile-menu-set-dashboard .ws-mpanel { top:0; left:0; height:100cqh; width:min(320px, 88cqw);
  display:flex; flex-direction:column; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-right:var(--bw, 1px) solid var(--hair);
  box-shadow:0 24px 70px color-mix(in srgb, var(--bg-deep, var(--bg)) 66%, transparent);
  transform:translateX(-105%); transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-dashboard.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-dashboard .dm-head { padding:14px; gap:11px; border-bottom:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 4%, transparent); flex:none; }
.m-mobile-menu-set-dashboard .dm-brand { display:flex; align-items:center; gap:11px; flex:1; min-width:0; cursor:pointer; }
.m-mobile-menu-set-dashboard .dm-mark { width:36px; height:36px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #04121a);
  box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent); }
.m-mobile-menu-set-dashboard .dm-mark svg { width:18px; height:18px; }
.m-mobile-menu-set-dashboard .dm-id { display:flex; flex-direction:column; min-width:0; }
.m-mobile-menu-set-dashboard .dm-id b { font:700 13px var(--font); color:var(--ink); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-dashboard .dm-id em { font:500 11px var(--mono); color:var(--faint); font-style:normal; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-dashboard .dm-nav-wrap { flex:1; overflow-y:auto; padding:6px 0 10px; }
.m-mobile-menu-set-dashboard .dm-sechead { width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 6px; background:none; border:0; cursor:pointer;
  font:700 9px var(--mono); letter-spacing:1.8px; text-transform:uppercase; color:var(--faint); }
.m-mobile-menu-set-dashboard .dm-chev { width:12px; height:12px; color:var(--faint); opacity:.7;
  transition:transform 260ms cubic-bezier(.4,0,.2,1); }
.m-mobile-menu-set-dashboard .dm-sec.shut .dm-chev { transform:rotate(-90deg); }
.m-mobile-menu-set-dashboard .dm-group { display:flex; flex-direction:column; overflow:hidden;
  max-height:640px; opacity:1; transition:max-height 320ms ease, opacity 220ms linear; }
.m-mobile-menu-set-dashboard .dm-sec.shut .dm-group { max-height:0; opacity:0; }
.m-mobile-menu-set-dashboard .dm-nav { display:flex; align-items:center; gap:11px; padding:0 14px; min-height:44px;
  position:relative; cursor:pointer; text-decoration:none; transition:background 160ms ease; }
.m-mobile-menu-set-dashboard .dm-nav:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.m-mobile-menu-set-dashboard .dm-nav.on { background:var(--accent-fill); }
.m-mobile-menu-set-dashboard .dm-nav.on::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent); box-shadow:2px 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.m-mobile-menu-set-dashboard .dm-ico { width:28px; height:28px; border-radius:7px; flex:none;
  display:flex; align-items:center; justify-content:center; transition:background 180ms, transform 180ms; }
.m-mobile-menu-set-dashboard .dm-ico svg { width:16px; height:16px; color:var(--dim); transition:color 150ms; }
.m-mobile-menu-set-dashboard .dm-nav.on .dm-ico { background:color-mix(in srgb, var(--accent) 16%, transparent); transform:scale(1.05); }
.m-mobile-menu-set-dashboard .dm-nav.on .dm-ico svg { color:var(--accent); }
.m-mobile-menu-set-dashboard .dm-nav b { flex:1; font:500 13.5px var(--font); color:var(--dim); letter-spacing:-.005em; }
.m-mobile-menu-set-dashboard .dm-nav.on b { color:var(--ink); font-weight:600; }
.m-mobile-menu-set-dashboard .dm-dot { width:7px; height:7px; border-radius:50%; flex:none; background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.m-mobile-menu-set-dashboard .dm-foot { flex:none; border-top:var(--bw, 1px) solid var(--hair); padding:12px 14px 13px;
  display:flex; flex-direction:column; gap:12px; background:color-mix(in srgb, var(--bg-deep, var(--bg)) 28%, transparent); }
.m-mobile-menu-set-dashboard .dm-foot .ws-btn { justify-content:center; width:100%; }
.m-mobile-menu-set-dashboard .dm-meter { padding:0 2px; }
.m-mobile-menu-set-dashboard .dm-meter-top { display:flex; justify-content:space-between; margin-bottom:7px; }
.m-mobile-menu-set-dashboard .dm-meter-top span { font:600 10px var(--mono); color:var(--faint); }
.m-mobile-menu-set-dashboard .dm-meter-val { color:var(--dim); }
.m-mobile-menu-set-dashboard .dm-meter-track { height:4px; border-radius:2px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
.m-mobile-menu-set-dashboard .dm-meter-bar { display:block; width:0; height:100%; border-radius:2px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
  transition:width 1s cubic-bezier(.22,1,.36,1); }
.m-mobile-menu-set-dashboard .dm-user { display:flex; align-items:center; gap:10px; min-height:40px; border-radius:10px; padding:0 2px; }
.m-mobile-menu-set-dashboard .dm-av { width:32px; height:32px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; font:700 12px var(--font); color:var(--accent-text, #04121a);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.m-mobile-menu-set-dashboard .dm-user-id { display:flex; flex-direction:column; min-width:0; }
.m-mobile-menu-set-dashboard .dm-user-id b { font:600 12px var(--font); color:var(--ink); }
.m-mobile-menu-set-dashboard .dm-user-id em { font:500 10px var(--mono); color:var(--faint); font-style:normal; margin-top:1px; }
@container site (max-width:560px) { .m-mobile-menu-set-dashboard .ws-mpanel { width:min(312px, 90cqw); } }
/* fitness dock — SB_04 mobile-menu-set-fitness: bottom tab bar + floating log FAB + live progress ring (orange is the signature energy) */
.m-mobile-menu-set-fitness { --fit-accent:#ff5a10; --fit-accent-2:#ff7340; }
.m-mobile-menu-set-fitness .ws-mpanel { top:100cqh; left:0; right:0; box-sizing:border-box;
  display:flex; flex-direction:column; gap:12px; padding:8px 16px 16px;
  background:var(--panel); background-image:var(--surface-grad,none);
  border-top:var(--bw, 1px) solid var(--hair); border-radius:22px 22px 0 0;
  box-shadow:0 -14px 48px color-mix(in srgb, var(--ink) 16%, transparent);
  transform:translateY(4%); opacity:0;
  transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), opacity 200ms linear; }
.m-mobile-menu-set-fitness.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.m-mobile-menu-set-fitness .ws-mhead { padding:0 2px; }
/* stats strip — chrome: progress ring + count-up */
.m-mobile-menu-set-fitness .ws-fitstats { display:flex; align-items:center; gap:13px; padding:2px 4px; }
.m-mobile-menu-set-fitness .ws-fitring { position:relative; width:52px; height:52px; flex:none; }
.m-mobile-menu-set-fitness .ws-fitring svg { width:52px; height:52px; display:block; }
.m-mobile-menu-set-fitness .ws-fitring-bg { fill:none; stroke:color-mix(in srgb, var(--ink) 12%, transparent); stroke-width:4; }
.m-mobile-menu-set-fitness .ws-fitring-fill { fill:none; stroke:var(--fit-accent); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset 950ms cubic-bezier(.2,.8,.25,1); }
.m-mobile-menu-set-fitness.open .ws-fitring-fill { stroke-dashoffset:28; }
.m-mobile-menu-set-fitness .ws-fitring-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:700 11px var(--font); color:var(--fit-accent); }
.m-mobile-menu-set-fitness .ws-fitstat-txt { display:flex; flex-direction:column; gap:2px; }
.m-mobile-menu-set-fitness .ws-fitcount { font:800 25px/1 var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.m-mobile-menu-set-fitness .ws-fitstat-txt i { font:600 10px var(--mono); color:var(--faint); font-style:normal;
  text-transform:uppercase; letter-spacing:0.1em; }
/* dock — the tab bar + the floating FAB */
.m-mobile-menu-set-fitness .ws-fitdock { position:relative; padding-top:20px; }
.m-mobile-menu-set-fitness .ws-fitbar { display:flex; align-items:stretch; border-top:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-fitness .ws-fittab { flex:1; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; padding:11px 3px 5px; min-height:44px;
  text-decoration:none; cursor:pointer; transition:transform 150ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-fitness .ws-fittab.press { transform:scale(.9); }
.m-mobile-menu-set-fitness .ws-fitline { position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:0; height:3px; border-radius:0 0 4px 4px; background:var(--fit-accent);
  box-shadow:0 1px 7px color-mix(in srgb, var(--fit-accent) 55%, transparent);
  transition:width 320ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-fitness .ws-fittab.on .ws-fitline { width:26px; }
.m-mobile-menu-set-fitness .ws-fittab-ic { display:flex; color:var(--dim);
  transition:color 200ms linear, transform 260ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-fitness .ws-fittab-ic svg { width:22px; height:22px; }
.m-mobile-menu-set-fitness .ws-fittab.on .ws-fittab-ic { color:var(--fit-accent); transform:translateY(-2px); }
.m-mobile-menu-set-fitness .ws-fittab:hover .ws-fittab-ic { color:var(--fit-accent); }
.m-mobile-menu-set-fitness .ws-fittab b { font:600 10px var(--font); color:var(--dim); letter-spacing:.01em;
  white-space:nowrap; transition:color 180ms linear; }
.m-mobile-menu-set-fitness .ws-fittab.on b { color:var(--fit-accent); }
/* the log FAB — floats above the bar centre */
.m-mobile-menu-set-fitness .ws-fitfab { position:absolute; top:-15px; left:50%; z-index:2;
  width:52px; height:52px; border-radius:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none;
  background:linear-gradient(140deg, var(--fit-accent), var(--fit-accent-2));
  box-shadow:0 10px 24px color-mix(in srgb, var(--fit-accent) 45%, transparent),
    0 2px 8px color-mix(in srgb, var(--ink) 22%, transparent);
  animation:fitFabFloat 3s ease-in-out infinite; transition:box-shadow 180ms linear; }
.m-mobile-menu-set-fitness .ws-fitfab-ic { display:flex; color:#fff; }
.m-mobile-menu-set-fitness .ws-fitfab-ic svg { width:23px; height:23px; }
.m-mobile-menu-set-fitness .ws-fitfab:hover { box-shadow:0 12px 30px color-mix(in srgb, var(--fit-accent) 60%, transparent),
    0 2px 8px color-mix(in srgb, var(--ink) 22%, transparent); }
.m-mobile-menu-set-fitness .ws-fitfab.press { animation:none; transform:translateX(-50%) translateY(3px) scale(.93); }
@keyframes fitFabFloat { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-5px); } }
@container site (max-width:560px) {
  .m-mobile-menu-set-fitness .ws-fittab b { font-size:9px; }
  .m-mobile-menu-set-fitness .ws-fitcount { font-size:22px; }
}
/* glass side drawer (SB_04 mobile-menu-set-glass) — a frosted translucent drawer slides in from the left.
   NO backdrop-filter: the frost is a translucent panel fill + hairline border + a soft inset edge-light,
   plus a pointer-tracked accent catch-light (mount sets --mx/--my; the origin purple/cyan orbs -> --accent). */
.m-mobile-menu-set-glass .ws-mscrim { background:color-mix(in srgb, var(--bg) 60%, transparent); }
.m-mobile-menu-set-glass .ws-mpanel { top:0; left:0; height:100cqh; width:min(300px, 87cqw);
  display:flex; flex-direction:column; gap:15px; padding:18px; box-sizing:border-box; overflow:hidden;
  background:color-mix(in srgb, var(--panel) 62%, transparent);
  border-right:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.10), 8px 0 44px color-mix(in srgb, var(--ink) 13%, transparent);
  transform:translateX(-104%); transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-glass.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-glass .ws-mpanel::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,74%) var(--my,16%),
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  transition:background 120ms linear; }
.m-mobile-menu-set-glass .ws-mhead, .m-mobile-menu-set-glass .ws-mlinks,
.m-mobile-menu-set-glass .ws-gcard, .m-mobile-menu-set-glass .ws-btn,
.m-mobile-menu-set-glass .ws-mnote { position:relative; z-index:1; }
.m-mobile-menu-set-glass .ws-mhead { padding:2px 2px 13px; border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.m-mobile-menu-set-glass .ws-glinks { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:3px; margin:0 -4px; padding:2px 4px; }
.m-mobile-menu-set-glass .ws-glink { position:relative; display:flex; align-items:center; gap:12px; min-height:48px;
  padding:0 12px; border-radius:12px; cursor:pointer; text-decoration:none; border-bottom:none;
  color:color-mix(in srgb, var(--ink) 60%, transparent);
  opacity:0; transform:translateX(-10px);
  transition:opacity 260ms linear, transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)),
    background 160ms linear, color 160ms linear, box-shadow 160ms linear; transition-delay:0ms; }
.m-mobile-menu-set-glass.open .ws-glink { opacity:1; transform:none; transition-delay:calc(70ms + var(--i) * 46ms); }
.m-mobile-menu-set-glass .ws-glink:hover { background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); }
.m-mobile-menu-set-glass .ws-glink.on { color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.m-mobile-menu-set-glass .ws-glink.on::before { content:''; position:absolute; left:0; top:11px; bottom:11px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent); }
.m-mobile-menu-set-glass .ws-gico { width:19px; height:19px; flex:none; display:flex; align-items:center; justify-content:center;
  opacity:.7; transition:opacity 160ms linear; }
.m-mobile-menu-set-glass .ws-glink:hover .ws-gico, .m-mobile-menu-set-glass .ws-glink.on .ws-gico { opacity:1; }
.m-mobile-menu-set-glass .ws-gico svg { width:18px; height:18px; }
.m-mobile-menu-set-glass .ws-glink b { flex:1; font:500 14.5px var(--font); letter-spacing:-0.005em; }
.m-mobile-menu-set-glass .ws-glink.on b { font-weight:600; }
.m-mobile-menu-set-glass .ws-gchev { display:flex; color:color-mix(in srgb, var(--ink) 28%, transparent);
  transition:color 160ms linear, transform 180ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-glass .ws-glink:hover .ws-gchev { color:color-mix(in srgb, var(--ink) 52%, transparent); transform:translateX(2px); }
.m-mobile-menu-set-glass .ws-glink.on .ws-gchev { color:var(--accent); }
.m-mobile-menu-set-glass .ws-gchev svg { width:13px; height:13px; }
.m-mobile-menu-set-glass .ws-gcard { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:13px;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.m-mobile-menu-set-glass .ws-gav { width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font:700 13px var(--font); color:var(--accent-text, var(--bg)); background:var(--accent); }
.m-mobile-menu-set-glass .ws-gcard-t { display:flex; flex-direction:column; min-width:0; }
.m-mobile-menu-set-glass .ws-gcard-t b { font:600 13px var(--font); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-glass .ws-gcard-t i { font:400 11px var(--font); color:var(--faint); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-glass .ws-btn { justify-content:center; }
/* luxe drawer - couture black-and-gold side drawer, monogram crest + serif nav (SB_04 mobile-menu-set-luxury) */
.m-mobile-menu-set-luxury {
  --lux-gold:#d4af37;
  --lux-gold-soft:color-mix(in srgb, #d4af37 34%, transparent);
  --lux-gold-faint:color-mix(in srgb, #d4af37 14%, transparent);
  --lux-serif:Georgia, "Times New Roman", "Playfair Display", serif;
}
.m-mobile-menu-set-luxury .ws-mscrim { background:color-mix(in srgb, var(--bg) 64%, transparent); }
.m-mobile-menu-set-luxury .ws-mpanel { top:0; left:0; height:100cqh; width:min(322px, 88cqw);
  display:flex; flex-direction:column; box-sizing:border-box; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none);
  border-right:1px solid var(--lux-gold-soft);
  box-shadow:12px 0 60px -22px color-mix(in srgb, var(--bg-deep, #000) 85%, transparent);
  transform:translateX(-104%); transition:transform 380ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-luxury.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-luxury .lux-glow { position:absolute; top:0; right:0; width:120px; height:120px; pointer-events:none;
  background:radial-gradient(circle at top right, color-mix(in srgb, var(--lux-gold) 11%, transparent), transparent 70%); }
.m-mobile-menu-set-luxury .lux-head { position:relative; z-index:1; display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px; padding:30px 24px 18px; }
.m-mobile-menu-set-luxury .lux-headmain { display:flex; flex-direction:column; }
.m-mobile-menu-set-luxury .lux-mono { width:46px; height:46px; flex:none; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--lux-gold-soft); transition:border-color 300ms linear; }
.m-mobile-menu-set-luxury .lux-mono:hover { border-color:var(--lux-gold); }
.m-mobile-menu-set-luxury .lux-mono span { font:400 17px var(--lux-serif); letter-spacing:.06em; color:var(--lux-gold); }
.m-mobile-menu-set-luxury .lux-house { font:400 10px var(--mono); letter-spacing:.28em; text-transform:uppercase;
  color:color-mix(in srgb, var(--lux-gold) 68%, transparent); font-style:normal; margin-bottom:6px; }
.m-mobile-menu-set-luxury .lux-tag { font:italic 400 15px var(--lux-serif); color:var(--dim); }
.m-mobile-menu-set-luxury .lux-head .ws-mclose { flex:none; color:color-mix(in srgb, var(--lux-gold) 55%, transparent);
  border-color:var(--lux-gold-faint); border-radius:0; }
.m-mobile-menu-set-luxury .lux-head .ws-mclose:hover { color:var(--lux-gold); border-color:var(--lux-gold-soft);
  box-shadow:0 0 14px color-mix(in srgb, var(--lux-gold) 16%, transparent); }
.m-mobile-menu-set-luxury .lux-goldline { height:1px; margin:0 24px; transform-origin:left; opacity:.5;
  background:linear-gradient(to right, transparent, var(--lux-gold), transparent); }
.m-mobile-menu-set-luxury .lux-nav { flex:1; overflow-y:auto; padding:6px 0; gap:0; }
.m-mobile-menu-set-luxury .lux-item { position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height:56px; padding:15px 26px; text-decoration:none; cursor:pointer;
  border-bottom:1px solid var(--lux-gold-faint);
  transition:background 200ms linear, padding-left 200ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-luxury .lux-item:last-of-type { border-bottom:none; }
.m-mobile-menu-set-luxury .lux-item:hover { background:color-mix(in srgb, var(--lux-gold) 5%, transparent); padding-left:30px; }
.m-mobile-menu-set-luxury .lux-item.on { background:color-mix(in srgb, var(--lux-gold) 7%, transparent); }
.m-mobile-menu-set-luxury .lux-item.on::before { content:""; position:absolute; left:0; top:22%; bottom:22%; width:2px;
  background:linear-gradient(to bottom, transparent, var(--lux-gold), transparent); }
.m-mobile-menu-set-luxury .lux-itxt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.m-mobile-menu-set-luxury .lux-item b { font:400 17px var(--lux-serif); letter-spacing:.01em;
  color:color-mix(in srgb, var(--ink) 88%, transparent); transition:color 180ms linear; }
.m-mobile-menu-set-luxury .lux-item i { font:400 9.5px var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb, var(--lux-gold) 52%, transparent); font-style:normal; }
.m-mobile-menu-set-luxury .lux-item:hover b { color:var(--ink); }
.m-mobile-menu-set-luxury .lux-item.on b { color:var(--lux-gold); }
.m-mobile-menu-set-luxury .lux-arw { flex:none; display:flex; align-items:center;
  color:color-mix(in srgb, var(--lux-gold) 40%, transparent);
  transition:color 180ms linear, transform 200ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-luxury .lux-item:hover .lux-arw { transform:translateX(3px); color:var(--lux-gold); }
.m-mobile-menu-set-luxury .lux-item.on .lux-arw { color:var(--lux-gold); }
.m-mobile-menu-set-luxury .lux-foot { display:flex; flex-direction:column; gap:12px; padding:18px 24px 26px;
  border-top:1px solid var(--lux-gold-faint); }
.m-mobile-menu-set-luxury .ws-btn.primary { justify-content:center; gap:9px; border-radius:0; padding:14px 18px;
  background:transparent; background-image:none; color:var(--lux-gold);
  border:1px solid var(--lux-gold-soft); font:500 11px var(--mono); letter-spacing:.18em; text-transform:uppercase;
  transition:border-color 200ms linear, background 200ms linear, box-shadow 200ms linear; }
.m-mobile-menu-set-luxury .ws-btn.primary:hover { border-color:var(--lux-gold);
  background:color-mix(in srgb, var(--lux-gold) 8%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--lux-gold) 18%, transparent); }
.m-mobile-menu-set-luxury .ws-btn.primary svg { width:13px; height:13px; }
.m-mobile-menu-set-luxury .ws-mnote { text-align:center; color:var(--faint); font:400 10px var(--mono);
  letter-spacing:.14em; text-transform:uppercase; }
@container site (max-width:560px) {
  .m-mobile-menu-set-luxury .ws-mpanel { width:min(300px, 90cqw); }
  .m-mobile-menu-set-luxury .lux-head { padding:24px 20px 16px; }
  .m-mobile-menu-set-luxury .lux-goldline { margin:0 20px; }
  .m-mobile-menu-set-luxury .lux-item { padding:14px 20px; }
  .m-mobile-menu-set-luxury .lux-item:hover { padding-left:24px; }
  .m-mobile-menu-set-luxury .lux-foot { padding:16px 20px 22px; }
}
/* mega — a full-width store-style panel drops from the top; pages become icon
   cards in a responsive grid, plus a live featured preview tile (mount swaps it
   on hover). Top-drop like .m-drop; open rides transform/opacity only. */
.m-mobile-menu-set-mega .ws-mpanel { top:0; left:0; width:100%; max-height:100cqh; box-sizing:border-box;
  display:flex; flex-direction:column; gap:14px; padding:16px 22px 20px; overflow-y:auto;
  background:var(--panel); background-image:var(--surface-grad,none);
  border-bottom:var(--bw, 1px) solid var(--hair); border-radius:0 0 16px 16px;
  transform:translateY(-9%); opacity:0;
  transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), opacity 200ms linear; }
.m-mobile-menu-set-mega.open .ws-mpanel { transform:none; opacity:1; }
.m-mobile-menu-set-mega .ws-megacat { display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:4px; border-bottom:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-mega .ws-megacat-t { font:800 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); }
.m-mobile-menu-set-mega .ws-megacat-c { font:600 10.5px var(--mono); color:var(--faint); }
.m-mobile-menu-set-mega .ws-megagrid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.m-mobile-menu-set-mega .ws-megaitem { display:flex; align-items:center; gap:12px; padding:11px 12px;
  border:var(--bw, 1px) solid var(--hair); border-radius:12px; cursor:pointer; text-decoration:none;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  transition:border-color 140ms linear, transform 160ms var(--ease-pop, ease-out), background 140ms linear; }
.m-mobile-menu-set-mega .ws-megaitem:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); transform:translateY(-1px); }
.m-mobile-menu-set-mega .ws-megaitem.on { border-color:color-mix(in srgb, var(--accent) 50%, transparent); background:var(--accent-fill); }
.m-mobile-menu-set-mega .ws-megaico { width:40px; height:40px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  transition:transform 200ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-mega .ws-megaitem:hover .ws-megaico { transform:scale(1.08); }
.m-mobile-menu-set-mega .ws-megaico svg { width:18px; height:18px; }
.m-mobile-menu-set-mega .ws-megatext { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.m-mobile-menu-set-mega .ws-megatext b { font:600 14px var(--font); color:var(--ink); letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-mega .ws-megaitem.on .ws-megatext b { color:var(--accent); }
.m-mobile-menu-set-mega .ws-megatext i { font:600 9.5px var(--mono); color:var(--faint); font-style:normal; letter-spacing:0.06em; }
.m-mobile-menu-set-mega .ws-megaarrow { width:15px; height:15px; flex:none; color:var(--faint);
  transition:transform 160ms var(--ease-pop, ease-out), color 140ms linear; }
.m-mobile-menu-set-mega .ws-megaitem:hover .ws-megaarrow { color:var(--accent); transform:translateX(3px); }
.m-mobile-menu-set-mega .ws-megafeat { display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:14px; border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); background:var(--accent-fill); }
.m-mobile-menu-set-mega .ws-megafeat-ico { width:42px; height:42px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #04121a); }
.m-mobile-menu-set-mega .ws-megafeat-ico svg { width:20px; height:20px; }
.m-mobile-menu-set-mega .ws-megafeat-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.m-mobile-menu-set-mega .ws-megafeat-k { font:800 9px var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); font-style:normal; }
.m-mobile-menu-set-mega .ws-megafeat-t { font:700 14.5px var(--font); color:var(--ink); letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-mega .ws-megafeat .ws-btn { flex:none; }
@container site (max-width: 560px) {
  .m-mobile-menu-set-mega .ws-mpanel { padding:14px 16px 18px; }
  .m-mobile-menu-set-mega .ws-megagrid { grid-template-columns:1fr; }
}
/* minimal — a hushed full-screen takeover; centered links fade up in sequence, close spins (SB_04 mobile-menu-set-minimal, "Dot Menu") */
.m-mobile-menu-set-minimal .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; padding:18px max(20px, 7cqw) 26px; box-sizing:border-box;
  background:color-mix(in srgb, var(--bg) 98%, transparent);
  opacity:0; transform:scale(1.012); transition:opacity 220ms linear, transform 300ms ease-out; }
.m-mobile-menu-set-minimal.open .ws-mpanel { opacity:1; transform:none; }
.m-mobile-menu-set-minimal .ws-mhead { padding-bottom:4px; }
.m-mobile-menu-set-minimal .ws-mclose { border-radius:50%;
  transition:color 140ms linear, border-color 140ms linear, transform 260ms var(--ease-pop, cubic-bezier(.32,1.2,.58,1)); }
.m-mobile-menu-set-minimal .ws-mclose:hover { transform:rotate(90deg); }
.m-mobile-menu-set-minimal .ws-mbig { align-items:center; justify-content:center; gap:4px; text-align:center; }
.m-mobile-menu-set-minimal .ws-mbiglink { justify-content:center; align-items:center; gap:0; padding:11px 0;
  opacity:0; transform:translateY(12px); transition:opacity 240ms linear, transform 320ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-minimal.open .ws-mbiglink { opacity:1; transform:none; transition-delay:calc(70ms + var(--i) * 55ms); }
.m-mobile-menu-set-minimal .ws-mbiglink i { display:none; }
.m-mobile-menu-set-minimal .ws-mbiglink b { font:500 clamp(24px, 7cqw, 38px)/1.12 var(--font);
  letter-spacing:-0.02em; color:var(--dim); transition:color 160ms linear; }
.m-mobile-menu-set-minimal .ws-mbiglink:hover b,
.m-mobile-menu-set-minimal .ws-mbiglink.hl b { color:var(--ink); }
.m-mobile-menu-set-minimal .ws-mbiglink.on b { color:var(--accent); font-weight:800; }
.m-mobile-menu-set-minimal .ws-mfoot { flex-direction:column; align-items:center; gap:12px; }
.m-mobile-menu-set-minimal .ws-mfoot .ws-btn { min-width:180px; justify-content:center; }
.m-mobile-menu-set-minimal .ws-mnote { text-align:center; }
@container site (max-width: 560px) {
  .m-mobile-menu-set-minimal .ws-mbiglink b { font-size:clamp(22px, 9cqw, 32px); }
}
/* notch frame (SB_04 mobile-menu-set-notch) — an iOS notch-framed sheet drops from
   the top edge: signature status bar + camera notch, a live clock, and a chevroned
   page list. Self-contained dark surface (accent-tinted) so it reads on any theme. */
.m-mobile-menu-set-notch {
  --nf-base:#141519; --nf-ink:#f5f6f9; --nf-notch:#05060a;
  --nf-panel:color-mix(in srgb, var(--nf-base) 92%, var(--accent) 8%);
  --nf-bar:color-mix(in srgb, var(--nf-base) 74%, #000 26%);
  --nf-dim:color-mix(in srgb, var(--nf-ink) 55%, transparent);
  --nf-faint:color-mix(in srgb, var(--nf-ink) 32%, transparent);
  --nf-hair:color-mix(in srgb, var(--nf-ink) 12%, transparent);
  --nf-fill:color-mix(in srgb, var(--nf-ink) 6%, transparent);
  --nf-acc-fill:color-mix(in srgb, var(--accent) 16%, transparent);
  --nf-acc-soft:color-mix(in srgb, var(--accent) 26%, transparent);
}
.m-mobile-menu-set-notch .ws-mscrim { background:color-mix(in srgb, #000 66%, transparent); }
.m-mobile-menu-set-notch .ws-mpanel { top:0; left:0; width:100%; max-height:100cqh; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px; padding:0 0 20px; box-sizing:border-box;
  background:var(--nf-panel); color:var(--nf-ink); border-bottom:1px solid var(--nf-hair);
  border-radius:0 0 26px 26px;
  box-shadow:0 26px 60px -18px color-mix(in srgb, #000 70%, transparent);
  transform:translateY(-102%); transition:transform 440ms cubic-bezier(.32,1.42,.5,1); }
.m-mobile-menu-set-notch.open .ws-mpanel { transform:translateY(0); }
/* the signature camera notch descending from the top-center */
.m-mobile-menu-set-notch .ws-mpanel::before { content:''; position:absolute; top:0; left:50%; z-index:3;
  transform:translateX(-50%); width:132px; height:26px; background:var(--nf-notch); border-radius:0 0 20px 20px; }
/* status bar flanking the notch */
.m-mobile-menu-set-notch .nf-status { display:flex; align-items:center; justify-content:space-between;
  padding:11px 24px 8px; background:var(--nf-bar); color:var(--nf-ink); }
.m-mobile-menu-set-notch .nf-time { font:600 13px var(--font); letter-spacing:0.01em; }
.m-mobile-menu-set-notch .nf-sig { display:flex; align-items:center; gap:6px; color:var(--nf-ink); }
.m-mobile-menu-set-notch .nf-bars { width:17px; height:11px; }
.m-mobile-menu-set-notch .nf-batt { width:24px; height:11px; }
/* nav bar (brand + close) */
.m-mobile-menu-set-notch .nf-bar { padding:12px 18px; background:var(--nf-bar); border-bottom:1px solid var(--nf-hair); }
.m-mobile-menu-set-notch .ws-logo b { color:var(--nf-ink); }
.m-mobile-menu-set-notch .ws-mclose { color:var(--nf-dim); border-color:var(--nf-hair); }
.m-mobile-menu-set-notch .ws-mclose:hover { color:var(--accent); border-color:var(--nf-acc-soft); }
/* the chevroned settings list */
.m-mobile-menu-set-notch .nf-list { padding:2px 12px 0; gap:2px; }
.m-mobile-menu-set-notch .nf-row { display:flex; align-items:center; gap:13px; padding:0 12px; min-height:52px;
  border-bottom:1px solid var(--nf-hair); border-radius:12px; cursor:pointer; text-decoration:none; color:var(--nf-dim);
  transition:background 150ms linear, color 150ms linear, transform 150ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-notch.open .nf-row { animation:nf-row-in 420ms cubic-bezier(.32,1.42,.5,1) backwards;
  animation-delay:calc(120ms + var(--i) * 55ms); }
@keyframes nf-row-in { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
.m-mobile-menu-set-notch .nf-row:last-child { border-bottom:none; }
.m-mobile-menu-set-notch .nf-row b { flex:1; font:500 16px var(--font); color:inherit; letter-spacing:-0.01em; }
.m-mobile-menu-set-notch .nf-row:hover, .m-mobile-menu-set-notch .nf-row.hl { background:var(--nf-fill); color:var(--nf-ink); }
.m-mobile-menu-set-notch .nf-row.on { background:var(--nf-acc-fill); color:var(--accent); }
.m-mobile-menu-set-notch .nf-row.on b { font-weight:600; }
.m-mobile-menu-set-notch .nf-dot { width:8px; height:8px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--nf-ink) 34%, transparent); transition:background 150ms linear, box-shadow 150ms linear; }
.m-mobile-menu-set-notch .nf-row:hover .nf-dot, .m-mobile-menu-set-notch .nf-row.hl .nf-dot { background:var(--nf-ink); }
.m-mobile-menu-set-notch .nf-row.on .nf-dot { background:var(--accent); box-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.m-mobile-menu-set-notch .nf-chev { display:flex; align-items:center; flex:none; color:var(--nf-faint);
  transition:transform 160ms var(--ease-pop, ease-out), color 150ms linear; }
.m-mobile-menu-set-notch .nf-chev svg { width:17px; height:17px; }
.m-mobile-menu-set-notch .nf-row:hover .nf-chev, .m-mobile-menu-set-notch .nf-row.hl .nf-chev { transform:translateX(3px); color:var(--nf-dim); }
.m-mobile-menu-set-notch .nf-row.on .nf-chev { color:var(--accent); }
.m-mobile-menu-set-notch .ws-btn { justify-content:center; margin:2px 16px 0; }
.m-mobile-menu-set-notch .ws-mnote { color:var(--nf-faint); text-align:center; }
@container site (max-width:560px) {
  .m-mobile-menu-set-notch .nf-row { min-height:50px; }
  .m-mobile-menu-set-notch .ws-mpanel { border-radius:0 0 22px 22px; }
}
/* neon terminal (SB_04 mobile-menu-set-neon) — full-screen cyberpunk takeover; giant MONO
   links DECODE in (mount() scrambles the text live) over faint scanlines and a pulsing glow.
   Full-veil layout; open rides opacity/transform only. Dark terminal backdrop is the neon
   SIGNATURE (tinted by --bg); the acid-green is themed to --accent so the glow tracks the site. */
.m-mobile-menu-set-neon .ws-mpanel { top:0; left:0; width:100%; height:100cqh; box-sizing:border-box;
  display:flex; flex-direction:column; padding:18px max(20px, 6cqw) 24px; overflow:hidden;
  background:color-mix(in srgb, var(--bg) 32%, #05070f);
  opacity:0; transform:scale(1.02); transition:opacity 220ms linear, transform 260ms ease-out; }
.m-mobile-menu-set-neon.open .ws-mpanel { opacity:1; transform:none; }
.m-mobile-menu-set-neon .ws-neonglow { position:absolute; top:50%; left:50%; width:300px; height:300px;
  border-radius:50%; pointer-events:none; z-index:0; transform:translate(-50%, -50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
  animation:neon-glow-pulse 4s ease-in-out infinite; }
@keyframes neon-glow-pulse { 0%, 100% { opacity:.55; transform:translate(-50%, -50%) scale(1); }
  50% { opacity:1; transform:translate(-50%, -50%) scale(1.12); } }
.m-mobile-menu-set-neon .ws-neonscan { position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.6;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px,
    color-mix(in srgb, var(--accent) 7%, transparent) 2px, color-mix(in srgb, var(--accent) 7%, transparent) 4px); }
.m-mobile-menu-set-neon .ws-mhead, .m-mobile-menu-set-neon .ws-mbig, .m-mobile-menu-set-neon .ws-mfoot { position:relative; z-index:2; }
.m-mobile-menu-set-neon .ws-mbig { gap:0; justify-content:center; }
.m-mobile-menu-set-neon .ws-mbiglink { align-items:baseline; gap:14px; padding:13px 0;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  opacity:0; transform:translateY(14px); transition:opacity 240ms linear, transform 300ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-neon.open .ws-mbiglink { opacity:1; transform:none; transition-delay:calc(70ms + var(--i) * 55ms); }
.m-mobile-menu-set-neon .ws-mbiglink:last-child { border-bottom:none; }
.m-mobile-menu-set-neon .ws-mbiglink i { font:400 11px var(--mono); letter-spacing:1px;
  color:color-mix(in srgb, var(--accent) 60%, var(--faint)); }
.m-mobile-menu-set-neon .ws-mbiglink b { font:700 clamp(26px, 7.4cqw, 44px)/1.08 var(--mono); text-transform:uppercase;
  letter-spacing:-0.01em; color:color-mix(in srgb, var(--ink) 66%, transparent);
  transition:color 180ms linear, text-shadow 180ms linear; }
.m-mobile-menu-set-neon .ws-mbiglink:hover b { color:var(--accent);
  text-shadow:0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.m-mobile-menu-set-neon .ws-mbiglink.on { position:relative; }
.m-mobile-menu-set-neon .ws-mbiglink.on b { color:var(--accent);
  text-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 26%, transparent); }
.m-mobile-menu-set-neon .ws-mbiglink.on::before { content:''; position:absolute; left:-13px; top:50%;
  width:5px; height:5px; border-radius:50%; transform:translateY(-50%); background:var(--accent);
  box-shadow:0 0 8px var(--accent), 0 0 16px var(--accent); animation:neon-blink 1s step-end infinite; }
@keyframes neon-blink { 0%, 100% { opacity:1; } 50% { opacity:0; } }
.m-mobile-menu-set-neon .ws-mfoot { margin-top:14px; padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--accent) 14%, var(--hair)); }
.m-mobile-menu-set-neon .ws-neonstat { color:color-mix(in srgb, var(--accent) 62%, var(--faint)); letter-spacing:1.2px; }
@container site (max-width: 560px) {
  .m-mobile-menu-set-neon .ws-mpanel { padding:16px 18px 20px; }
  .m-mobile-menu-set-neon .ws-neonglow { width:220px; height:220px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-mobile-menu-set-neon .ws-neonglow, .m-mobile-menu-set-neon .ws-mbiglink.on::before { animation:none; }
}
/* music dock — a now-playing mini-player + live equalizer over icon nav tabs (SB_04 · mobile-menu-set-music) */
.m-mobile-menu-set-music .ws-mpanel { top:100cqh; left:8px; right:8px;
  display:flex; flex-direction:column; gap:12px; padding:8px 14px 16px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:20px 20px 0 0;
  box-shadow:0 -14px 44px color-mix(in srgb, var(--ink) 22%, transparent);
  transform:translateY(4%); opacity:0;
  transition:transform 280ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), opacity 200ms linear; }
.m-mobile-menu-set-music.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.m-mobile-menu-set-music .ws-mgrab { margin-bottom:2px; }
/* mini player */
.m-mobile-menu-set-music .mm-player { display:flex; align-items:center; gap:10px;
  padding:6px 4px 10px; border-bottom:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-music .mm-album { width:40px; height:40px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #04121a);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.m-mobile-menu-set-music .mm-album svg { width:20px; height:20px; }
.m-mobile-menu-set-music .mm-track { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.m-mobile-menu-set-music .mm-tname { font:700 13px var(--font); color:var(--ink); font-style:normal;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-music .mm-tartist { font:500 11px var(--font); color:var(--faint); font-style:normal;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* live equalizer */
.m-mobile-menu-set-music .mm-wave { display:flex; align-items:flex-end; gap:2px; height:22px; flex:none; }
.m-mobile-menu-set-music .mm-wave i { width:3px; border-radius:2px; background:var(--accent);
  transform-origin:bottom center; animation:mmWave .85s ease-in-out infinite alternate;
  box-shadow:0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); }
.m-mobile-menu-set-music .mm-wave i:nth-child(1){ height:8px;  animation-delay:0s; }
.m-mobile-menu-set-music .mm-wave i:nth-child(2){ height:16px; animation-delay:.12s; }
.m-mobile-menu-set-music .mm-wave i:nth-child(3){ height:22px; animation-delay:.24s; }
.m-mobile-menu-set-music .mm-wave i:nth-child(4){ height:12px; animation-delay:.36s; }
.m-mobile-menu-set-music .mm-wave i:nth-child(5){ height:18px; animation-delay:.18s; }
@keyframes mmWave { from { opacity:.4; transform:scaleY(.35); } to { opacity:1; transform:scaleY(1); } }
.m-mobile-menu-set-music.mm-paused .mm-wave i { animation-play-state:paused; }
/* controls */
.m-mobile-menu-set-music .mm-ctrls { display:flex; align-items:center; gap:1px; flex:none; }
.m-mobile-menu-set-music .mm-ctrl { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:none; border-radius:9px; color:var(--dim); cursor:pointer;
  transition:color 140ms linear, background 140ms linear, transform 120ms ease; }
.m-mobile-menu-set-music .mm-ctrl:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.m-mobile-menu-set-music .mm-ctrl:active { transform:scale(.9); }
.m-mobile-menu-set-music .mm-ctrl svg { width:19px; height:19px; }
.m-mobile-menu-set-music .mm-play svg { width:20px; height:20px; }
.m-mobile-menu-set-music .mm-ic { display:inline-flex; }
.m-mobile-menu-set-music .mm-ic-play { display:none; }
.m-mobile-menu-set-music.mm-paused .mm-ic-pause { display:none; }
.m-mobile-menu-set-music.mm-paused .mm-ic-play { display:inline-flex; }
.m-mobile-menu-set-music .mm-heart { color:var(--dim); }
.m-mobile-menu-set-music .mm-heart.liked { color:var(--accent); animation:mmPop 360ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-music .mm-heart.liked svg { fill:var(--accent); }
@keyframes mmPop { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }
.m-mobile-menu-set-music .ws-mclose { width:36px; height:36px; border:none; border-radius:9px; color:var(--dim); }
.m-mobile-menu-set-music .ws-mclose:hover { color:var(--accent); border-color:transparent; background:color-mix(in srgb, var(--ink) 7%, transparent); }
/* progress */
.m-mobile-menu-set-music .mm-progress { height:3px; border-radius:99px; position:relative;
  background:color-mix(in srgb, var(--ink) 10%, transparent); }
.m-mobile-menu-set-music .mm-progress-fill { position:absolute; left:0; top:0; height:100%; width:38%;
  border-radius:99px; background:var(--accent);
  box-shadow:0 0 6px color-mix(in srgb, var(--accent) 55%, transparent); }
.m-mobile-menu-set-music .mm-progress-fill::after { content:''; position:absolute; right:-3px; top:50%;
  width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
/* nav tabs */
.m-mobile-menu-set-music .mm-tabs { display:flex; align-items:stretch; gap:2px; }
.m-mobile-menu-set-music .mm-tab { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:10px 3px 9px; position:relative; cursor:pointer;
  opacity:0; transform:translateY(8px);
  transition:opacity 260ms linear, transform 300ms var(--ease-pop, ease-out); transition-delay:0ms; }
.m-mobile-menu-set-music.open .mm-tab { opacity:1; transform:none; transition-delay:calc(120ms + var(--i) * 45ms); }
.m-mobile-menu-set-music .mm-tab-ic { display:flex; color:var(--faint);
  transition:color 200ms ease, transform 280ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-music .mm-tab-ic svg { width:21px; height:21px; display:block; }
.m-mobile-menu-set-music .mm-tab-lb { font:600 10px var(--font); color:var(--faint); letter-spacing:.01em;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color 180ms ease; }
.m-mobile-menu-set-music .mm-tab::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2px; border-radius:2px 2px 0 0; background:var(--accent);
  box-shadow:0 -1px 6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:width 280ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-music .mm-tab.on::after { width:20px; }
.m-mobile-menu-set-music .mm-tab:hover .mm-tab-ic { color:var(--ink); }
.m-mobile-menu-set-music .mm-tab.on .mm-tab-ic { color:var(--accent); transform:translateY(-1px); }
.m-mobile-menu-set-music .mm-tab.on .mm-tab-lb { color:var(--accent); font-weight:700; }
.m-mobile-menu-set-music .ws-btn { justify-content:center; }
.m-mobile-menu-set-music .ws-mnote { text-align:center; }
@container site (max-width: 560px) {
  .m-mobile-menu-set-music .ws-mpanel { left:6px; right:6px; padding:8px 10px 14px; }
  .m-mobile-menu-set-music .mm-player { gap:8px; }
  .m-mobile-menu-set-music .mm-tab-lb { font-size:9.5px; }
  .m-mobile-menu-set-music .mm-ctrl { width:34px; height:34px; }
}
/* notification center (SB_04 mobile-menu-set-notification) — a notification shade pulls down from the top-right;
   pages arrive as unread cards, "Mark all read" clears the dots live (mount()). glass/blur reinterpreted as a
   translucent color-mix on --panel (no backdrop-filter); the origin's per-app brand swatches dropped for accent/ink tints. */
.m-mobile-menu-set-notification .ws-mpanel { top:8px; right:8px; width:min(340px, 92cqw); max-height:calc(100cqh - 16px);
  display:flex; flex-direction:column; gap:11px; padding:14px 14px 16px; box-sizing:border-box;
  background:color-mix(in srgb, var(--panel) 94%, transparent); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:16px;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.22);
  transform-origin:top right; transform:translateY(-116%); opacity:0;
  transition:transform 360ms var(--ease-pop, cubic-bezier(.32,1.3,.5,1)), opacity 220ms linear; }
.m-mobile-menu-set-notification.open .ws-mpanel { transform:none; opacity:1; }
.m-mobile-menu-set-notification .ws-mhead { padding:2px 2px 0; }
/* the Notifications bar */
.m-mobile-menu-set-notification .ws-mnbar { display:flex; align-items:center; gap:9px;
  padding:2px 4px 10px; border-bottom:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-notification .ws-mnbell { display:flex; color:var(--accent); }
.m-mobile-menu-set-notification .ws-mnbell svg { width:15px; height:15px; }
.m-mobile-menu-set-notification .ws-mnbar-t { flex:1; font:700 14px var(--font); color:var(--ink); letter-spacing:-0.01em; }
.m-mobile-menu-set-notification .ws-mnmark { border:none; background:none; cursor:pointer;
  font:600 11.5px var(--font); color:var(--accent); padding:6px 2px;
  transition:opacity 140ms linear; -webkit-tap-highlight-color:transparent; }
.m-mobile-menu-set-notification .ws-mnmark:hover { opacity:.7; }
.m-mobile-menu-set-notification .ws-mnmark:active { opacity:.5; }
/* the notification list — pages as cards */
.m-mobile-menu-set-notification .ws-mnlist { flex:1; overflow-y:auto; gap:2px; }
.m-mobile-menu-set-notification .ws-mnrow { display:flex; align-items:flex-start; gap:11px; padding:11px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--hair) 70%, transparent); border-radius:12px; cursor:pointer;
  position:relative; transition:background 130ms linear; -webkit-tap-highlight-color:transparent; }
.m-mobile-menu-set-notification .ws-mnrow:last-child { border-bottom:none; }
.m-mobile-menu-set-notification .ws-mnrow:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.m-mobile-menu-set-notification .ws-mnrow.on { background:var(--accent-fill); }
.m-mobile-menu-set-notification .ws-mnav { width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; font:700 13px var(--font); color:var(--dim);
  background:color-mix(in srgb, var(--ink) 9%, transparent); }
.m-mobile-menu-set-notification .ws-mnrow.on .ws-mnav { color:var(--accent);
  background:color-mix(in srgb, var(--accent) 20%, transparent); }
.m-mobile-menu-set-notification .ws-mnbody { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.m-mobile-menu-set-notification .ws-mnrt { font:600 13.5px var(--font); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-notification .ws-mnrow.on .ws-mnrt { color:var(--accent); font-weight:700; }
.m-mobile-menu-set-notification .ws-mnrx { font:400 12px var(--font); color:var(--faint); font-style:normal;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-notification .ws-mnmeta { display:flex; flex-direction:column; align-items:flex-end;
  gap:6px; flex:none; padding-top:1px; }
.m-mobile-menu-set-notification .ws-mnrtime { font:600 10px var(--mono); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-notification .ws-mndot { width:7px; height:7px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--ink) 28%, transparent);
  transition:opacity 200ms linear, transform 200ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-notification .ws-mnrow.on .ws-mndot { background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.m-mobile-menu-set-notification .ws-mnlist.read .ws-mndot { opacity:0; transform:scale(0); }
/* cascade-in (mount() drives it live; this keyframe is the no-JS floor) */
.m-mobile-menu-set-notification.open .ws-mnrow { animation:mset-notif-in 380ms var(--ease-pop, cubic-bezier(.32,1.4,.56,1)) backwards;
  animation-delay:calc(70ms + var(--i) * 55ms); }
@keyframes mset-notif-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.m-mobile-menu-set-notification .ws-btn { justify-content:center; }
.m-mobile-menu-set-notification .ws-mnote { text-align:center; }
@container site (max-width:560px) {
  .m-mobile-menu-set-notification .ws-mpanel { top:6px; right:6px; padding:12px 12px 14px; }
  .m-mobile-menu-set-notification .ws-mnrx { font-size:11.5px; }
}
/* persistent — an app-style bottom tab bar docks up from the floor; the live tab lifts on an accent spring (SB_04 mobile-menu-set-persistent, "Persistent Tab Bar") */
.m-mobile-menu-set-persistent .ws-mpanel { top:100cqh; left:0; right:0; margin-inline:auto; max-width:560px;
  display:flex; flex-direction:column; gap:10px; padding:12px 14px 16px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:20px 20px 0 0;
  box-shadow:0 -10px 48px color-mix(in srgb, var(--bg) 60%, transparent);
  transform:translateY(6%); opacity:0;
  transition:transform 300ms cubic-bezier(.32,1.22,.58,1), opacity 200ms linear; }
.m-mobile-menu-set-persistent.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.m-mobile-menu-set-persistent .pst-head { gap:10px; padding-bottom:2px; }
.m-mobile-menu-set-persistent .pst-tools { display:flex; align-items:center; gap:8px; flex:none; }
.m-mobile-menu-set-persistent .pst-tools .ws-btn { white-space:nowrap; }
.m-mobile-menu-set-persistent .pst-strip { display:flex; gap:4px; align-items:stretch;
  border-top:var(--bw, 1px) solid var(--hair); padding-top:10px; overflow-x:auto; scrollbar-width:none; }
.m-mobile-menu-set-persistent .pst-strip::-webkit-scrollbar { display:none; }
.m-mobile-menu-set-persistent .pst-tab { flex:1 1 auto; min-width:54px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:5px; padding:8px 6px 6px; border-radius:12px;
  cursor:pointer; text-decoration:none; position:relative; opacity:0; transform:translateY(10px);
  transition:opacity 220ms linear, transform 220ms cubic-bezier(.2,.9,.25,1), background 140ms linear; }
.m-mobile-menu-set-persistent.open .pst-tab { opacity:1; transform:none; transition-delay:calc(80ms + var(--i) * 45ms); }
.m-mobile-menu-set-persistent .pst-tab:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.m-mobile-menu-set-persistent .pst-tab:active { transform:scale(.94); }
.m-mobile-menu-set-persistent .pst-tab.on { background:var(--accent-fill); }
.m-mobile-menu-set-persistent .pst-ic { width:26px; height:24px; display:flex; align-items:center; justify-content:center;
  color:var(--dim); transition:color 150ms linear, transform 260ms cubic-bezier(.34,1.56,.64,1); }
.m-mobile-menu-set-persistent .pst-ic svg { width:22px; height:22px; }
.m-mobile-menu-set-persistent .pst-tab b { font:600 10.5px var(--font); color:var(--dim); letter-spacing:.01em;
  max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color 150ms linear; }
.m-mobile-menu-set-persistent .pst-tab.on .pst-ic { color:var(--accent); transform:translateY(-3px); }
.m-mobile-menu-set-persistent .pst-tab.on b { color:var(--accent); font-weight:700; }
.m-mobile-menu-set-persistent .ws-mnote { text-align:center; margin-top:2px; }
@container site (max-width:560px) {
  .m-mobile-menu-set-persistent .pst-tab b { font-size:10px; }
}
/* pastel drawer — a self-contained candy-pastel side drawer (lavender/pink gradient
   surface, per-page tinted icon tiles); reads pastel on ANY site theme, slides from the
   left. Pastel tints kept literal as the signature (SB_04 mobile-menu-set-pastel) */
.m-mobile-menu-set-pastel {
  --ps-ink:#3b0764; --ps-head:#581c87; --ps-accent:#7c3aed; --ps-accent-2:#a855f7;
  --ps-hair:color-mix(in srgb, #c084fc 26%, transparent);
  --ps-acc-fill:color-mix(in srgb, #a855f7 14%, transparent);
}
.m-mobile-menu-set-pastel .ws-mscrim { background:color-mix(in srgb, #7c3aed 30%, transparent); }
.m-mobile-menu-set-pastel .ws-mpanel { top:0; left:0; height:100cqh; width:min(300px, 88cqw);
  display:flex; flex-direction:column; gap:16px; padding:20px 16px; box-sizing:border-box;
  background:linear-gradient(160deg, #f3e8ff 0%, #fce7f3 100%); color:var(--ps-ink);
  border-radius:0 26px 26px 0; box-shadow:6px 0 40px color-mix(in srgb, #c084fc 32%, transparent);
  transform:translateX(-106%); transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-pastel.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-pastel .ws-mhead { padding-bottom:14px; border-bottom:1.5px solid var(--ps-hair); }
.m-mobile-menu-set-pastel .ws-logo b { color:var(--ps-head); }
.m-mobile-menu-set-pastel .ws-logodot { background:linear-gradient(135deg, #e879f9, #a855f7); }
.m-mobile-menu-set-pastel .ws-mclose { color:var(--ps-accent); border-radius:50%;
  border-color:transparent; background:color-mix(in srgb, #a855f7 12%, transparent); }
.m-mobile-menu-set-pastel .ws-mclose:hover { color:#fff; border-color:transparent; background:var(--ps-accent-2); }
.m-mobile-menu-set-pastel .ps-nav { flex:1; overflow-y:auto; gap:4px; }
.m-mobile-menu-set-pastel .ps-link { display:flex; align-items:center; gap:13px; padding:0 12px;
  min-height:50px; border-radius:15px; border-bottom:none; cursor:pointer; text-decoration:none;
  color:var(--ps-ink); font:600 15px var(--font); letter-spacing:-0.01em;
  transition:background 160ms linear, transform 150ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-pastel .ps-link:hover { background:color-mix(in srgb, #a855f7 9%, transparent); }
.m-mobile-menu-set-pastel .ps-link.on { background:var(--ps-acc-fill); }
.m-mobile-menu-set-pastel .ps-link.on b { color:var(--ps-accent); }
.m-mobile-menu-set-pastel .ps-link.press { transform:scale(.97); }
.m-mobile-menu-set-pastel .ps-link b { flex:1; font:inherit; }
.m-mobile-menu-set-pastel .ps-ico { width:36px; height:36px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; }
.m-mobile-menu-set-pastel .ps-ico svg { width:18px; height:18px; }
.m-mobile-menu-set-pastel .ps-link:nth-child(5n+1) .ps-ico { background:#fce7f3; color:#db2777; }
.m-mobile-menu-set-pastel .ps-link:nth-child(5n+2) .ps-ico { background:#fef3c7; color:#d97706; }
.m-mobile-menu-set-pastel .ps-link:nth-child(5n+3) .ps-ico { background:#dcfce7; color:#16a34a; }
.m-mobile-menu-set-pastel .ps-link:nth-child(5n+4) .ps-ico { background:#dbeafe; color:#2563eb; }
.m-mobile-menu-set-pastel .ps-link:nth-child(5n+5) .ps-ico { background:#f3e8ff; color:#7c3aed; }
.m-mobile-menu-set-pastel .ps-badge { margin-left:auto; flex:none; padding:3px 9px; border-radius:10px;
  font:700 9px var(--mono); letter-spacing:0.06em; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg, #e879f9, #c084fc);
  box-shadow:0 2px 6px color-mix(in srgb, #a855f7 30%, transparent); }
.m-mobile-menu-set-pastel .ws-btn.primary { justify-content:center; border:none; color:#fff;
  background:linear-gradient(135deg, #c084fc, #a855f7);
  box-shadow:0 6px 18px color-mix(in srgb, #a855f7 34%, transparent); }
.m-mobile-menu-set-pastel .ws-btn.primary i { color:#fff; }
.m-mobile-menu-set-pastel .ws-mnote { color:var(--ps-accent-2); text-align:center; }
@container site (max-width:560px) {
  .m-mobile-menu-set-pastel .ws-mpanel { width:min(300px, 90cqw); }
  .m-mobile-menu-set-pastel .ps-link { min-height:48px; }
}
/* overlay - full-screen takeover; the screen fades + scales in, numbered links rise in sequence, close spins (SB_04 mobile-menu-set-overlay, "Fullscreen Overlay") */
.m-mobile-menu-set-overlay .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:16px max(20px, 6cqw) 24px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none);
  opacity:0; transform:scale(.965) translateY(18px);
  transition:opacity 300ms cubic-bezier(.4,0,.2,1), transform 380ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-overlay.open .ws-mpanel { opacity:1; transform:none; }
.m-mobile-menu-set-overlay .ws-mhead { position:absolute; top:14px; left:max(20px, 6cqw); right:16px; }
.m-mobile-menu-set-overlay .ws-mclose { border-radius:50%;
  transition:color 140ms linear, border-color 140ms linear, transform 280ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-overlay .ws-mclose:hover { transform:rotate(90deg); }
.m-mobile-menu-set-overlay .ws-mtag { font:700 10px/1 var(--mono); letter-spacing:0.24em;
  text-transform:uppercase; color:var(--faint); font-style:normal; }
.m-mobile-menu-set-overlay .ws-mbig { flex:none; width:100%; max-width:440px; gap:2px; overflow:visible; }
.m-mobile-menu-set-overlay .ws-mbiglink { position:relative; }
.m-mobile-menu-set-overlay.open .ws-mbiglink { opacity:1; transform:none;
  transition-delay:calc(80ms + var(--i) * 55ms); }
.m-mobile-menu-set-overlay .ws-mbiglink b { transition:color 140ms linear, transform 250ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-overlay .ws-mbiglink:hover b { transform:translateX(8px); }
.m-mobile-menu-set-overlay .ws-mbiglink:hover i, .m-mobile-menu-set-overlay .ws-mbiglink.on i { color:var(--accent); }
.m-mobile-menu-set-overlay .ws-mbiglink.on::after { content:''; position:absolute; left:34px; bottom:2px;
  width:30px; height:3px; border-radius:2px; background:var(--accent); }
.m-mobile-menu-set-overlay .ws-mfoot { position:absolute; left:20px; right:20px; bottom:26px;
  flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.m-mobile-menu-set-overlay .ws-mnote { text-align:center; }
/* playful — a candy-bright slide-in drawer (from the left): a gradient greeting
   banner, pastel emoji chips that spring in one by one, and a bouncy star on the
   live page. The pink->purple banner + pastel chip tints are the set's signature
   (kept literal); everything else rides theme tokens; open motion is transform only. */
.m-mobile-menu-set-playful .ws-mpanel { top:0; left:0; height:100cqh; width:min(310px, 87cqw);
  display:flex; flex-direction:column; gap:14px; padding:0 0 18px; box-sizing:border-box; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none);
  border-right:var(--bw, 1px) solid var(--hair); border-radius:0 26px 26px 0;
  box-shadow:8px 0 44px color-mix(in srgb, var(--ink) 16%, transparent);
  transform:translateX(-106%); transition:transform 320ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-playful.open .ws-mpanel { transform:translateX(0); }
/* gradient greeting banner — signature */
.m-mobile-menu-set-playful .pf-head { position:relative; overflow:hidden; padding:22px 18px 18px;
  background:linear-gradient(135deg, #ff6b9d, #c44dff); }
.m-mobile-menu-set-playful .pf-head::after { content:""; position:absolute; top:-24px; right:-18px;
  width:82px; height:82px; border-radius:50%; background:rgba(255,255,255,.14); pointer-events:none; }
.m-mobile-menu-set-playful .pf-head .ws-logo { position:relative; z-index:1; }
.m-mobile-menu-set-playful .pf-head .ws-logo b { color:#fff; font-weight:800; letter-spacing:-.2px; }
.m-mobile-menu-set-playful .pf-head .ws-logodot { background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.22); }
.m-mobile-menu-set-playful .pf-head .ws-mclose { position:relative; z-index:1; color:#fff;
  border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.14); }
.m-mobile-menu-set-playful .pf-head .ws-mclose:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.26); }
/* nav rows */
.m-mobile-menu-set-playful .pf-nav { flex:1; overflow-y:auto; gap:4px; padding:6px 12px; }
.m-mobile-menu-set-playful .pf-link { display:flex; align-items:center; gap:12px; padding:9px 11px;
  border-radius:16px; cursor:pointer; text-decoration:none; border:2px solid transparent; min-height:50px;
  transition:background 150ms linear, transform 150ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-playful .pf-link:hover { transform:translateX(4px); }
.m-mobile-menu-set-playful .pf-link:active { transform:scale(.96); }
.m-mobile-menu-set-playful .pf-link b { font:700 16px var(--font); color:var(--ink); flex:1; }
.m-mobile-menu-set-playful .pf-link.on { background:var(--accent-fill);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.m-mobile-menu-set-playful .pf-link.on b { color:var(--accent); }
/* pastel emoji chips — signature tints */
.m-mobile-menu-set-playful .pf-emoji { width:42px; height:42px; border-radius:14px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1;
  transition:transform 200ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-playful .pf-link:hover .pf-emoji { transform:scale(1.12) rotate(-6deg); }
.m-mobile-menu-set-playful .pf-emoji.p0 { background:#fef3c7; }
.m-mobile-menu-set-playful .pf-emoji.p1 { background:#ede9fe; }
.m-mobile-menu-set-playful .pf-emoji.p2 { background:#dcfce7; }
.m-mobile-menu-set-playful .pf-emoji.p3 { background:#fce7f3; }
.m-mobile-menu-set-playful .pf-emoji.p4 { background:#fff7ed; }
.m-mobile-menu-set-playful .pf-emoji.p5 { background:#e0f2fe; }
.m-mobile-menu-set-playful .pf-link.on .pf-emoji { box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
/* bouncy star badge on the live page */
.m-mobile-menu-set-playful .pf-badge { flex:none; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--accent);
  animation:pf-pop .6s var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-playful .pf-badge::after { content:"\2605"; font-size:12px; line-height:1; color:var(--accent-text, #fff); }
@keyframes pf-pop { 0% { transform:scale(0); } 60% { transform:scale(1.25); } 100% { transform:scale(1); } }
/* CTA + dashed footer note with a sparkle */
.m-mobile-menu-set-playful .ws-btn { margin:0 16px; justify-content:center; border-radius:14px; }
.m-mobile-menu-set-playful .pf-note { margin:2px 16px 0; padding-top:14px; text-align:center;
  border-top:2px dashed var(--hair); color:var(--accent); font:700 12px var(--font); }
.m-mobile-menu-set-playful .pf-note::before { content:"\2728  "; }
@container site (max-width:560px) {
  .m-mobile-menu-set-playful .ws-mpanel { width:min(300px, 90cqw); }
  .m-mobile-menu-set-playful .pf-link { min-height:48px; }
}
/* quick-actions — a right drawer capped by a live tap-to-toggle action strip (SB_04 mobile-menu-set-quick-actions) */
.m-mobile-menu-set-quick-actions .ws-mpanel { top:0; right:0; height:100cqh; width:min(320px, 86cqw);
  display:flex; flex-direction:column; gap:16px; padding:18px 20px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-left:var(--bw, 1px) solid var(--hair);
  transform:translateX(105%); transition:transform 260ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-quick-actions.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-quick-actions .ws-mlinks { flex:1; overflow-y:auto; }
.m-mobile-menu-set-quick-actions .ws-btn { justify-content:center; }
.m-mobile-menu-set-quick-actions .qa-bar { display:flex; align-items:stretch; flex:none;
  border:var(--bw, 1px) solid var(--hair); border-radius:13px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 3%, transparent); }
.m-mobile-menu-set-quick-actions .qa-act { flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; padding:11px 2px; min-height:44px; cursor:pointer;
  background:none; border:none; border-right:var(--bw, 1px) solid var(--hair); color:var(--dim);
  transition:background 140ms linear, color 140ms linear, transform 140ms var(--ease-pop, ease-out);
  -webkit-tap-highlight-color:transparent; }
.m-mobile-menu-set-quick-actions .qa-act:last-child { border-right:none; }
.m-mobile-menu-set-quick-actions .qa-act svg { width:18px; height:18px; }
.m-mobile-menu-set-quick-actions .qa-act span { font:700 8.5px var(--mono); letter-spacing:.03em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.m-mobile-menu-set-quick-actions .qa-act:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.m-mobile-menu-set-quick-actions .qa-act:active { transform:scale(0.94); }
.m-mobile-menu-set-quick-actions .qa-act.on { color:var(--accent); background:var(--accent-fill); }
.m-mobile-menu-set-quick-actions .qa-act.on span { color:var(--accent); }
/* slide-left drawer — left-docked panel springs in (transform only); chevron rows, active accent rail */
.m-mobile-menu-set-slide-left .ws-mpanel { top:0; left:0; height:100cqh; width:min(300px, 86cqw);
  display:flex; flex-direction:column; gap:16px; padding:18px 18px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-right:var(--bw, 1px) solid var(--hair);
  box-shadow:10px 0 50px color-mix(in srgb, var(--ink) 16%, transparent);
  transform:translateX(-105%); transition:transform 380ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-slide-left.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-slide-left .sl-head { align-items:flex-start; }
.m-mobile-menu-set-slide-left .sl-brand { display:flex; flex-direction:column; gap:4px; }
.m-mobile-menu-set-slide-left .sl-tag { font:500 11px var(--mono); color:var(--faint); font-style:normal; letter-spacing:.3px; }
.m-mobile-menu-set-slide-left .ws-mlinks { flex:1; overflow-y:auto; gap:2px; padding:2px 0; }
.m-mobile-menu-set-slide-left .sl-link { position:relative; align-items:center; border-bottom:none;
  padding:11px 12px; border-radius:10px; text-decoration:none;
  transition:background 160ms linear, transform 150ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-slide-left .sl-link:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); transform:translateX(2px); }
.m-mobile-menu-set-slide-left .sl-link b { flex:1; }
.m-mobile-menu-set-slide-left .sl-link.on { background:var(--accent-fill); }
.m-mobile-menu-set-slide-left .sl-link.on::before { content:''; position:absolute; left:0; top:9px; bottom:9px;
  width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.m-mobile-menu-set-slide-left .sl-chev { display:flex; align-items:center; flex:none; color:var(--faint);
  transition:color 160ms linear, transform 160ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-slide-left .sl-chev svg { width:14px; height:14px; }
.m-mobile-menu-set-slide-left .sl-link:hover .sl-chev { color:var(--dim); transform:translateX(3px); }
.m-mobile-menu-set-slide-left .sl-link.on .sl-chev { color:var(--accent); }
.m-mobile-menu-set-slide-left .ws-btn { justify-content:center; }
@container site (max-width:560px) {
  .m-mobile-menu-set-slide-left .ws-mpanel { width:min(290px, 90cqw); }
}
/* settings panel — SB_04 mobile-menu-set-settings: iOS-style inset-grouped settings screen;
   pages are grouped rows with colored icon tiles + live preference toggles (flipped in mount()) */
.m-mobile-menu-set-settings .ws-mpanel { top:0; left:0; height:100cqh; width:min(360px, 90cqw);
  display:flex; flex-direction:column; gap:12px; padding:16px 16px 18px; box-sizing:border-box; overflow-y:auto;
  background:color-mix(in srgb, var(--ink) 4%, var(--bg)); border-right:var(--bw, 1px) solid var(--hair);
  transform:translateX(-104%); transition:transform 280ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-settings.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-settings .ws-mhead { padding:0 2px; }
.m-mobile-menu-set-settings .set-title { font:700 24px var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; padding:2px 4px 0; }
.m-mobile-menu-set-settings .set-label { font:600 11px var(--mono); letter-spacing:0.06em; text-transform:uppercase;
  color:var(--faint); font-style:normal; padding:4px 10px 0; }
.m-mobile-menu-set-settings .set-group { display:flex; flex-direction:column;
  background:var(--panel); background-image:var(--surface-grad,none); border:var(--bw, 1px) solid var(--hair);
  border-radius:14px; overflow:hidden; box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent); }
.m-mobile-menu-set-settings .set-row, .m-mobile-menu-set-settings .set-trow {
  display:flex; align-items:center; gap:12px; padding:9px 13px; min-height:50px; box-sizing:border-box;
  border-bottom:var(--bw, 1px) solid var(--hair); text-decoration:none; transition:background 120ms linear; }
.m-mobile-menu-set-settings .set-row { cursor:pointer; }
.m-mobile-menu-set-settings .set-row:last-child, .m-mobile-menu-set-settings .set-trow:last-child { border-bottom:none; }
.m-mobile-menu-set-settings .set-row:hover { background:color-mix(in srgb, var(--accent) 7%, transparent); }
.m-mobile-menu-set-settings .set-ic { width:30px; height:30px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; }
.m-mobile-menu-set-settings .set-ic svg { width:17px; height:17px; }
.m-mobile-menu-set-settings .set-row b, .m-mobile-menu-set-settings .set-trow b {
  flex:1; font:500 15px var(--font); color:var(--ink); letter-spacing:-0.01em; }
.m-mobile-menu-set-settings .set-row.on b { color:var(--accent); font-weight:600; }
.m-mobile-menu-set-settings .set-cur { font:600 10px var(--mono); color:var(--accent); font-style:normal;
  padding:2px 8px; border-radius:99px; background:var(--accent-fill); }
.m-mobile-menu-set-settings .set-chev { display:flex; color:var(--faint); }
.m-mobile-menu-set-settings .set-chev svg { width:15px; height:15px; }
.m-mobile-menu-set-settings .set-row.on .set-chev { color:var(--accent); }
/* iOS-signature colored icon tiles (literal hex = the set's flavor) */
.m-mobile-menu-set-settings .ic-blue { background:#0a84ff; }
.m-mobile-menu-set-settings .ic-orange { background:#ff9f0a; }
.m-mobile-menu-set-settings .ic-green { background:#30d158; }
.m-mobile-menu-set-settings .ic-red { background:#ff453a; }
.m-mobile-menu-set-settings .ic-indigo { background:#5e5ce6; }
.m-mobile-menu-set-settings .ic-teal { background:#40c8e0; }
.m-mobile-menu-set-settings .ic-purple { background:#bf5af2; }
.m-mobile-menu-set-settings .ic-gray { background:#8e8e93; }
/* iOS-style live toggle switch (mount() flips .on) */
.m-mobile-menu-set-settings .set-tog { position:relative; width:46px; height:28px; flex:none;
  border:0; border-radius:99px; padding:0; cursor:pointer;
  background:color-mix(in srgb, var(--ink) 22%, transparent); transition:background 220ms ease; }
.m-mobile-menu-set-settings .set-tog.on { background:#30d158; }
.m-mobile-menu-set-settings .set-knob { position:absolute; top:2px; left:2px; width:24px; height:24px;
  border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.32);
  transition:transform 240ms cubic-bezier(.34,1.2,.64,1); }
.m-mobile-menu-set-settings .set-tog.on .set-knob { transform:translateX(18px); }
.m-mobile-menu-set-settings .ws-btn { justify-content:center; }
.m-mobile-menu-set-settings .ws-mnote { text-align:center; padding-top:2px; }
/* radial bloom (SB_04 mobile-menu-set-radial) — page nodes fan out on a ring around a glowing
   center hub; mount() computes each node's angle from the page count + springs them out (360 radial).
   The origin's glass label chips + hardcoded per-icon colors drop to theme tokens; no backdrop-filter. */
.m-mobile-menu-set-radial .ws-mpanel { top:0; left:0; width:100%; height:100cqh;
  display:flex; flex-direction:column; padding:16px max(18px,5cqw) 22px; box-sizing:border-box;
  background:color-mix(in srgb, var(--bg) 94%, transparent); overflow:hidden;
  opacity:0; transition:opacity 240ms linear; }
.m-mobile-menu-set-radial.open .ws-mpanel { opacity:1; }
.m-mobile-menu-set-radial .ws-mhead { position:relative; z-index:4; }
.m-mobile-menu-set-radial .ws-mfoot { position:relative; z-index:4; display:flex; flex-direction:column;
  gap:12px; align-items:flex-start; }
/* the centered radial stage */
.m-mobile-menu-set-radial .ws-mradial { position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center; }
/* concentric rings bloom behind the nodes */
.m-mobile-menu-set-radial .ws-mring { position:absolute; top:50%; left:50%; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  transform:translate(-50%,-50%) scale(.7); opacity:0;
  transition:opacity 420ms linear, transform 620ms cubic-bezier(.2,.8,.25,1); pointer-events:none; z-index:0; }
.m-mobile-menu-set-radial .ws-mring.r1 { width:min(150px,42cqmin); height:min(150px,42cqmin); }
.m-mobile-menu-set-radial .ws-mring.r2 { width:min(250px,66cqmin); height:min(250px,66cqmin);
  border-color:color-mix(in srgb, var(--accent) 11%, transparent); }
.m-mobile-menu-set-radial .ws-mring.r3 { width:min(352px,90cqmin); height:min(352px,90cqmin);
  border-color:color-mix(in srgb, var(--accent) 7%, transparent); }
.m-mobile-menu-set-radial.open .ws-mring { opacity:1; transform:translate(-50%,-50%) scale(1); }
.m-mobile-menu-set-radial.open .ws-mring.r2 { transition-delay:80ms; }
.m-mobile-menu-set-radial.open .ws-mring.r3 { transition-delay:160ms; }
/* the glowing center hub — the bloom origin (origin's center FAB, reinterpreted on --accent) */
.m-mobile-menu-set-radial .ws-mhub { position:absolute; top:50%; left:50%; width:58px; height:58px;
  border-radius:50%; transform:translate(-50%,-50%) scale(.4); opacity:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--accent) 78%, #fff 22%), var(--accent) 72%);
  box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 20%, transparent);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 300ms linear, transform 520ms cubic-bezier(.32,1.5,.58,1); }
.m-mobile-menu-set-radial .ws-mhub::after { content:""; width:15px; height:15px; border-radius:50%;
  background:color-mix(in srgb, var(--accent-text, #fff) 85%, transparent); }
.m-mobile-menu-set-radial.open .ws-mhub { opacity:1; transform:translate(-50%,-50%) scale(1); }
/* the radial nav — nodes absolutely centered; mount() sets --x/--y + springs each out from the hub */
.m-mobile-menu-set-radial .ws-mlinks.radial { position:absolute; inset:0; display:block; z-index:2; }
.m-mobile-menu-set-radial .ws-mlink { position:absolute; top:50%; left:50%; width:74px;
  flex-direction:column; align-items:center; gap:6px; padding:0; border:0; text-align:center;
  transform:translate(-50%,-50%) translate(var(--x,0px), var(--y,0px)); }
.m-mobile-menu-set-radial .ws-mlink i { display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--panel) 92%, transparent); border:var(--bw, 1px) solid var(--hair);
  color:var(--ink); font:700 12px var(--mono); font-style:normal; letter-spacing:0.02em;
  transition:transform 200ms cubic-bezier(.32,1.5,.58,1), background 160ms linear,
    border-color 160ms linear, box-shadow 200ms linear, color 160ms linear; }
.m-mobile-menu-set-radial .ws-mlink b { max-width:80px; font:600 10px var(--font); color:var(--dim);
  letter-spacing:0.02em; white-space:nowrap; transition:color 160ms linear; }
.m-mobile-menu-set-radial .ws-mlink:hover i { transform:scale(1.12);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.m-mobile-menu-set-radial .ws-mlink:hover b { color:var(--ink); }
.m-mobile-menu-set-radial .ws-mlink.on i { background:var(--accent); border-color:var(--accent);
  color:var(--accent-text, #fff);
  box-shadow:0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.m-mobile-menu-set-radial .ws-mlink.on b { color:var(--accent); }
@container site (max-width: 560px) {
  .m-mobile-menu-set-radial .ws-mpanel { padding:14px 16px 18px; }
  .m-mobile-menu-set-radial .ws-mlink { width:66px; }
  .m-mobile-menu-set-radial .ws-mlink i { width:42px; height:42px; }
}
/* search-first — a right drawer led by a live search bar; typing filters the pages (suggestion rows with a match highlight). SB_04 mobile-menu-set-search-first. Dropped V2 dark full-screen overlay. */
.m-mobile-menu-set-search-first .ws-mpanel { top:0; right:0; height:100cqh; width:min(340px, 88cqw);
  display:flex; flex-direction:column; gap:14px; padding:16px 18px 18px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-left:var(--bw, 1px) solid var(--hair);
  transform:translateX(105%); transition:transform 260ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-search-first.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-search-first .ws-mhead { flex:none; }
/* the leading search bar — the signature */
.m-mobile-menu-set-search-first .sf-bar { flex:none; display:flex; align-items:center; gap:9px;
  padding:11px 13px; border-radius:13px; border:1.5px solid var(--hair);
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  transition:border-color 150ms linear, background 150ms linear, box-shadow 150ms linear; }
.m-mobile-menu-set-search-first .sf-bar:focus-within { border-color:var(--accent);
  background:color-mix(in srgb, var(--ink) 2%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.m-mobile-menu-set-search-first .sf-mag { display:flex; flex:none; color:var(--faint); }
.m-mobile-menu-set-search-first .sf-mag svg { width:15px; height:15px; }
.m-mobile-menu-set-search-first .sf-input { flex:1; min-width:0; border:none; background:none; outline:none;
  font:500 14px var(--font); color:var(--ink); }
.m-mobile-menu-set-search-first .sf-input::placeholder { color:var(--faint); }
.m-mobile-menu-set-search-first .sf-clear { flex:none; width:22px; height:22px; display:flex; align-items:center;
  justify-content:center; padding:0; border:none; border-radius:50%; background:color-mix(in srgb, var(--ink) 10%, transparent);
  color:var(--dim); cursor:pointer; transition:color 130ms linear, background 130ms linear, transform 130ms linear; }
.m-mobile-menu-set-search-first .sf-clear:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 16%, transparent); }
.m-mobile-menu-set-search-first .sf-clear:active { transform:scale(.86); }
.m-mobile-menu-set-search-first .sf-clear svg { width:11px; height:11px; }
.m-mobile-menu-set-search-first .sf-clear[hidden] { display:none; }
.m-mobile-menu-set-search-first .sf-title { flex:none; margin:2px 2px -2px; font:700 10px var(--mono); font-style:normal;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--faint); }
/* suggestion rows — the filtered pages */
.m-mobile-menu-set-search-first .sf-list { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.m-mobile-menu-set-search-first .sf-sug { display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:11px;
  cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:background 140ms linear, transform 140ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-search-first .sf-sug:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.m-mobile-menu-set-search-first .sf-sug:active { transform:scale(.98); }
.m-mobile-menu-set-search-first .sf-ico { display:flex; flex:none; color:var(--faint); opacity:.7; }
.m-mobile-menu-set-search-first .sf-ico svg { width:14px; height:14px; }
.m-mobile-menu-set-search-first .sf-sugtext { flex:1; min-width:0; font:500 14px var(--font); color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-mobile-menu-set-search-first .sf-hit { background:none; color:var(--accent); font-weight:700; }
.m-mobile-menu-set-search-first .sf-go { display:flex; flex:none; color:var(--accent); opacity:.4;
  transition:opacity 140ms linear, transform 140ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-search-first .sf-go svg { width:15px; height:15px; }
.m-mobile-menu-set-search-first .sf-sug:hover .sf-go { opacity:.9; transform:translate(1px,-1px); }
.m-mobile-menu-set-search-first .sf-sug:hover .sf-sugtext { color:var(--ink); }
.m-mobile-menu-set-search-first .sf-sug.on { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.m-mobile-menu-set-search-first .sf-sug.on .sf-sugtext { color:var(--accent); font-weight:600; }
.m-mobile-menu-set-search-first .sf-sug.on .sf-ico, .m-mobile-menu-set-search-first .sf-sug.on .sf-go { color:var(--accent); opacity:1; }
.m-mobile-menu-set-search-first .sf-sug.sf-off { display:none; }
.m-mobile-menu-set-search-first .sf-empty { padding:18px 4px; text-align:center; font:500 13px var(--font); color:var(--faint); }
.m-mobile-menu-set-search-first .sf-empty[hidden] { display:none; }
/* rows rise in on open (transform/opacity only) */
.m-mobile-menu-set-search-first .sf-sug { opacity:0; transform:translateY(7px); }
.m-mobile-menu-set-search-first.open .sf-sug { opacity:1; transform:none;
  transition:opacity 320ms ease, transform 380ms var(--ease-pop, cubic-bezier(.32,1.3,.58,1)), background 140ms linear;
  transition-delay:calc(90ms + var(--i, 0) * 45ms); }
.m-mobile-menu-set-search-first .ws-btn { flex:none; width:100%; justify-content:center; }
.m-mobile-menu-set-search-first .ws-mnote { flex:none; text-align:center; }
@container site (max-width: 560px) {
  .m-mobile-menu-set-search-first .ws-mpanel { width:min(340px, 92cqw); padding:14px 15px 16px; gap:12px; }
  .m-mobile-menu-set-search-first .sf-sugtext { font-size:15px; }
}
/* profile menu (SB_04 mobile-menu-set-profile) — an account dropdown that springs from the top-right: user card, colored icon-tile rows, keyboard roving, destructive sign-out */
.m-mobile-menu-set-profile .ws-mpanel { top:10px; right:10px; width:min(300px, 86cqw);
  display:flex; flex-direction:column; gap:0; padding:6px; box-sizing:border-box;
  background:color-mix(in srgb, var(--panel) 94%, transparent); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:18px;
  box-shadow:0 24px 54px -18px color-mix(in srgb, var(--bg-deep, #000) 88%, transparent), 0 2px 8px rgba(0,0,0,.22);
  transform-origin:top right; transform:scale(.9); opacity:0;
  transition:transform 260ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)), opacity 160ms linear; }
.m-mobile-menu-set-profile.open .ws-mpanel { transform:none; opacity:1; }
.m-mobile-menu-set-profile .ws-mpanel::after { content:''; position:absolute; top:-6px; right:20px;
  width:12px; height:12px; background:color-mix(in srgb, var(--panel) 94%, transparent);
  border-left:var(--bw, 1px) solid var(--hair); border-top:var(--bw, 1px) solid var(--hair); border-radius:4px 0 0 0; transform:rotate(45deg); }
/* account card header */
.m-mobile-menu-set-profile .pr-card { display:flex; align-items:center; gap:11px; padding:11px 11px 12px; margin-bottom:5px;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-profile .pr-avatar { width:42px; height:42px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #fff);
  font:700 16px var(--font-head, var(--font)); letter-spacing:-0.01em;
  box-shadow:0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent); }
.m-mobile-menu-set-profile .pr-id { min-width:0; }
.m-mobile-menu-set-profile .pr-id b { display:block; font:700 14px var(--font); color:var(--ink); letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-profile .pr-id i { display:block; margin-top:1px; font:400 12px var(--font); color:var(--faint); font-style:normal;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* page rows */
.m-mobile-menu-set-profile .pr-list { gap:1px; max-height:52cqh; overflow-y:auto; }
.m-mobile-menu-set-profile .pr-item { display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px;
  border:none; border-bottom:none; border-radius:11px; background:none; cursor:pointer; text-align:left; text-decoration:none;
  font:inherit; transition:background 120ms linear, transform 120ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-profile.open .pr-item { animation:prrow-in 300ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)) both;
  animation-delay:calc(80ms + var(--i) * 34ms); }
@keyframes prrow-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.m-mobile-menu-set-profile .pr-item:hover, .m-mobile-menu-set-profile .pr-item.hl { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.m-mobile-menu-set-profile .pr-item:active { transform:scale(.98); }
.m-mobile-menu-set-profile .pr-item.on { background:var(--accent-fill); }
.m-mobile-menu-set-profile .pr-item b { flex:1; min-width:0; font:600 14.5px var(--font); color:var(--ink); letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-profile .pr-item.on b { color:var(--accent); }
.m-mobile-menu-set-profile .pr-ic { width:34px; height:34px; flex:none; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--c, var(--accent)); background:color-mix(in srgb, var(--c, var(--accent)) 15%, transparent); }
.m-mobile-menu-set-profile .pr-ic svg { width:17px; height:17px; }
.m-mobile-menu-set-profile .pr-ic.c0 { --c:#7c3aed; }
.m-mobile-menu-set-profile .pr-ic.c1 { --c:#0ea5e9; }
.m-mobile-menu-set-profile .pr-ic.c2 { --c:#d97706; }
.m-mobile-menu-set-profile .pr-ic.c3 { --c:#16a34a; }
.m-mobile-menu-set-profile .pr-ic.c4 { --c:#ec4899; }
.m-mobile-menu-set-profile .pr-ic.c5 { --c:#0d9488; }
.m-mobile-menu-set-profile .pr-arrow { display:flex; align-items:center; flex:none; color:var(--faint);
  transition:transform 150ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-profile .pr-arrow svg { width:15px; height:15px; }
.m-mobile-menu-set-profile .pr-item:hover .pr-arrow, .m-mobile-menu-set-profile .pr-item.hl .pr-arrow { transform:translateX(3px); }
.m-mobile-menu-set-profile .pr-item.on .pr-arrow { color:var(--accent); }
/* divider + footer */
.m-mobile-menu-set-profile .pr-div { height:1px; margin:6px 8px; background:var(--hair); }
.m-mobile-menu-set-profile .ws-btn { justify-content:center; margin:0 4px; }
.m-mobile-menu-set-profile .pr-signout { margin-top:3px; }
.m-mobile-menu-set-profile .pr-ic.bad { --c:#ef4444; }
.m-mobile-menu-set-profile .pr-signout b { color:#ef4444; }
.m-mobile-menu-set-profile .pr-signout:hover { background:color-mix(in srgb, #ef4444 10%, transparent); }
.m-mobile-menu-set-profile .pr-signout .pr-arrow { display:none; }
.m-mobile-menu-set-profile .ws-mnote { text-align:center; padding:6px 8px 3px; }
@container site (max-width:560px) {
  .m-mobile-menu-set-profile .ws-mpanel { width:min(300px, 90cqw); }
}
/* scroll-nav — a horizontally scrolling tab bar drops under the header; the active underline glides,
   tabs snap + fade at the overflow edge (SB_04 mobile-menu-set-scroll-nav) */
.m-mobile-menu-set-scroll-nav .ws-mpanel { top:0; left:0; width:100%;
  display:flex; flex-direction:column; gap:13px; padding:16px 18px 18px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-bottom:var(--bw, 1px) solid var(--hair);
  transform:translateY(-10%); opacity:0; transition:transform 240ms var(--ease-pop, ease-out), opacity 200ms linear; }
.m-mobile-menu-set-scroll-nav.open .ws-mpanel { transform:none; opacity:1; }
.m-mobile-menu-set-scroll-nav .sn-barwrap { position:relative; margin:2px 0 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-scroll-nav .sn-barwrap::after { content:''; position:absolute; right:0; top:0; bottom:1px; width:38px;
  background:linear-gradient(to right, color-mix(in srgb, var(--panel) 0%, transparent), var(--panel)); pointer-events:none; z-index:2; }
.m-mobile-menu-set-scroll-nav .sn-tabs { position:relative; display:flex; gap:4px; overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.m-mobile-menu-set-scroll-nav .sn-tabs::-webkit-scrollbar { display:none; }
.m-mobile-menu-set-scroll-nav .sn-tab { flex:none; display:flex; align-items:center; height:44px; padding:0 14px;
  cursor:pointer; white-space:nowrap; scroll-snap-align:start; border-radius:8px 8px 0 0; -webkit-tap-highlight-color:transparent; }
.m-mobile-menu-set-scroll-nav .sn-tab b { font:600 13.5px var(--font); color:var(--dim); transition:color 150ms linear; }
.m-mobile-menu-set-scroll-nav .sn-tab:hover b { color:var(--ink); }
.m-mobile-menu-set-scroll-nav .sn-tab.on b { color:var(--accent); font-weight:700; }
.m-mobile-menu-set-scroll-nav .sn-ink { position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent);
  border-radius:2px 2px 0 0; transform:translateX(0); pointer-events:none;
  transition:transform 260ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), width 200ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-scroll-nav .sn-preview { font:500 12px var(--font); color:var(--faint); padding:0 2px; }
.m-mobile-menu-set-scroll-nav .sn-preview b { color:var(--ink); font-weight:600; }
.m-mobile-menu-set-scroll-nav .ws-btn { justify-content:center; }
@container site (max-width:560px) {
  .m-mobile-menu-set-scroll-nav .sn-tab { min-height:46px; }
}
/* slide-right (SB_04) — right drawer, grouped section, dot rail + Current pill */
.m-mobile-menu-set-slide-right .ws-mpanel { top:0; right:0; height:100cqh; width:min(320px, 86cqw);
  display:flex; flex-direction:column; gap:14px; padding:18px 18px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-left:var(--bw, 1px) solid var(--hair);
  box-shadow:-8px 0 48px color-mix(in srgb, var(--ink) 12%, transparent);
  transform:translateX(105%); transition:transform 380ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-slide-right.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-slide-right .ws-mlinks { flex:1; overflow-y:auto; gap:2px; }
.m-mobile-menu-set-slide-right .ws-btn { justify-content:center;
  box-shadow:0 4px 20px color-mix(in srgb, var(--accent) 26%, transparent); }
/* circular close that rotates on hover */
.m-mobile-menu-set-slide-right .ws-mclose { width:34px; height:34px; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  transition:color 140ms linear, background 140ms linear, border-color 140ms linear, transform 220ms ease; }
.m-mobile-menu-set-slide-right .ws-mclose:hover { transform:rotate(90deg);
  background:color-mix(in srgb, var(--ink) 10%, transparent); }
/* section label */
.m-mobile-menu-set-slide-right .sr-sec { font:700 10px var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); padding:8px 6px 4px; }
/* links: dot rail, tinted active, right-edge bar */
.m-mobile-menu-set-slide-right .sr-link { position:relative; align-items:center; gap:12px;
  padding:0 12px; height:48px; border-bottom:none; border-radius:11px;
  transition:background 160ms linear, color 160ms linear, transform 140ms ease; }
.m-mobile-menu-set-slide-right .sr-link:hover { transform:translateX(-2px);
  background:color-mix(in srgb, var(--ink) 5%, transparent); }
.m-mobile-menu-set-slide-right .sr-link b { font:600 15px var(--font); color:var(--dim); }
.m-mobile-menu-set-slide-right .sr-link:hover b { color:var(--ink); }
.m-mobile-menu-set-slide-right .sr-link.on { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.m-mobile-menu-set-slide-right .sr-link.on b { color:var(--accent); font-weight:700; }
.m-mobile-menu-set-slide-right .sr-link.on::after { content:''; position:absolute; right:0; top:12px; bottom:12px;
  width:3px; border-radius:3px 0 0 3px; background:var(--accent); }
/* dot marker */
.m-mobile-menu-set-slide-right .sr-dot { display:block; width:8px; height:8px; border-radius:50%; flex:none;
  box-sizing:border-box; border:1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  transition:transform 180ms ease, border-color 140ms linear, background 140ms linear; }
.m-mobile-menu-set-slide-right .sr-link:hover .sr-dot { border-color:var(--accent); transform:scale(1.3); }
.m-mobile-menu-set-slide-right .sr-link.on .sr-dot { background:var(--accent); border-color:var(--accent); }
/* Current pill */
.m-mobile-menu-set-slide-right .sr-badge { margin-left:auto; font:700 10px var(--mono); font-style:normal;
  padding:3px 8px; border-radius:10px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); }
.m-mobile-menu-set-slide-right .sr-note { text-align:center; }
/* social bottom nav (SB_04 mobile-menu-set-social) — an Instagram-style dock rises from the
   floor: a gradient-ringed story strip, icon tabs, and a floating gradient create FAB.
   The multi-stop gradient + pink are the set's signature flavour (kept literal). */
.m-mobile-menu-set-social { --soc-accent:#e1306c; --soc-grad:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.m-mobile-menu-set-social .ws-mpanel { top:100cqh; left:0; right:0; margin-inline:auto; max-width:560px; box-sizing:border-box;
  display:flex; flex-direction:column; gap:12px; padding:8px 14px 16px;
  background:var(--panel); background-image:var(--surface-grad,none);
  border-top:var(--bw, 1px) solid var(--hair); border-radius:22px 22px 0 0;
  box-shadow:0 -14px 48px color-mix(in srgb, var(--ink) 16%, transparent);
  transform:translateY(4%); opacity:0;
  transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)), opacity 200ms linear; }
.m-mobile-menu-set-social.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.m-mobile-menu-set-social .ws-mhead { padding:0 2px; }
/* stories strip — signature social flourish, drawn from the pages */
.m-mobile-menu-set-social .soc-stories { display:flex; gap:13px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; }
.m-mobile-menu-set-social .soc-stories::-webkit-scrollbar { display:none; }
.m-mobile-menu-set-social .soc-story { flex:none; width:60px; display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer; opacity:0; transform:scale(.5);
  transition:opacity 240ms linear, transform 320ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-social.open .soc-story { opacity:1; transform:none; transition-delay:calc(40ms + var(--si,0) * 45ms); }
.m-mobile-menu-set-social .soc-story.press .soc-ring { transform:scale(.9); }
.m-mobile-menu-set-social .soc-ring { position:relative; width:54px; height:54px; border-radius:50%; padding:3px;
  display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--ink) 18%, transparent);
  transition:transform 200ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-social .soc-ring.live { background:var(--soc-grad); }
.m-mobile-menu-set-social .soc-story.seen .soc-ring { background:color-mix(in srgb, var(--ink) 24%, transparent); }
.m-mobile-menu-set-social .soc-av { width:100%; height:100%; border-radius:50%; border:2px solid var(--panel); background:var(--panel-2, var(--panel));
  display:flex; align-items:center; justify-content:center; font:700 17px var(--font-head, var(--font)); color:var(--dim); }
.m-mobile-menu-set-social .soc-add { position:absolute; right:-1px; bottom:-1px; width:20px; height:20px; border-radius:50%;
  background:var(--soc-accent); color:#fff; border:2px solid var(--panel); display:flex; align-items:center; justify-content:center;
  font:700 14px/1 var(--font); }
.m-mobile-menu-set-social .soc-story b { font:500 10px var(--font); color:var(--dim); max-width:60px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-mobile-menu-set-social .soc-story.soc-you b { color:var(--faint); }
/* dock — the tab bar + the floating create FAB */
.m-mobile-menu-set-social .soc-dock { position:relative; margin-top:6px; padding-top:24px; }
.m-mobile-menu-set-social .soc-bar { display:flex; align-items:stretch; border-top:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-social .soc-tab { flex:1; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; padding:11px 3px 5px; min-height:44px;
  text-decoration:none; cursor:pointer; opacity:0; transform:translateY(10px);
  transition:opacity 220ms linear, transform 220ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-social.open .soc-tab { opacity:1; transform:none; transition-delay:calc(120ms + var(--i) * 42ms); }
.m-mobile-menu-set-social .soc-tab.press { transform:scale(.9); }
.m-mobile-menu-set-social .soc-ic { width:26px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--dim);
  transition:color 160ms linear, transform 260ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-social .soc-ic svg { width:23px; height:23px; }
.m-mobile-menu-set-social .soc-tab b { font:600 10px var(--font); color:var(--dim); letter-spacing:.01em; max-width:64px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color 160ms linear; }
.m-mobile-menu-set-social .soc-tab:hover .soc-ic { color:var(--soc-accent); }
.m-mobile-menu-set-social .soc-tab.on .soc-ic { color:var(--soc-accent); transform:translateY(-2px); }
.m-mobile-menu-set-social .soc-tab.on b { color:var(--soc-accent); font-weight:700; }
.m-mobile-menu-set-social .soc-badge { position:absolute; top:8px; right:calc(50% - 16px); width:9px; height:9px; border-radius:50%;
  background:var(--soc-accent); border:2px solid var(--panel); }
.m-mobile-menu-set-social .soc-fab { position:absolute; top:-14px; left:50%; z-index:2; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none; background:var(--soc-grad);
  box-shadow:0 8px 22px color-mix(in srgb, var(--soc-accent) 45%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 22%, transparent);
  transition:box-shadow 180ms linear, transform 160ms var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); }
.m-mobile-menu-set-social .soc-fab-ic { display:flex; color:#fff; }
.m-mobile-menu-set-social .soc-fab-ic svg { width:24px; height:24px; stroke-width:2.6; }
.m-mobile-menu-set-social .soc-fab:hover { box-shadow:0 12px 30px color-mix(in srgb, var(--soc-accent) 60%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 22%, transparent); }
.m-mobile-menu-set-social .soc-fab.press { transform:translateX(-50%) scale(.9); }
.m-mobile-menu-set-social .ws-mnote { text-align:center; margin-top:2px; }
@container site (max-width:560px) {
  .m-mobile-menu-set-social .soc-tab b { font-size:9px; }
  .m-mobile-menu-set-social .soc-story { width:56px; }
  .m-mobile-menu-set-social .soc-ring { width:50px; height:50px; }
}
/* tab bar dock — a compact app tab bar docks up from the floor; an accent pip rides the active
   tab, its icon springs, a raised gradient + button floats near center (SB_04 mobile-menu-set-tab-bar,
   "Tab Bar Dock"). Light + dark demos unified to theme tokens; glass reinterpreted as translucent
   --panel (NO backdrop-filter); origin purple gradient dropped for --accent-grad. */
.m-mobile-menu-set-tab-bar .ws-mpanel { top:100cqh; left:0; right:0; margin-inline:auto; max-width:560px;
  display:flex; flex-direction:column; gap:6px; padding:12px 10px 14px; box-sizing:border-box;
  background:color-mix(in srgb, var(--panel) 92%, transparent); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:22px 22px 0 0;
  box-shadow:0 -12px 44px color-mix(in srgb, var(--bg) 58%, transparent);
  transform:translateY(8%); opacity:0;
  transition:transform 320ms cubic-bezier(.32,1.2,.58,1), opacity 200ms linear; }
.m-mobile-menu-set-tab-bar.open .ws-mpanel { transform:translateY(-100%); opacity:1; }
.m-mobile-menu-set-tab-bar .ws-mclose { position:absolute; top:-50px; right:8px; width:38px; height:38px;
  border-radius:50%; background:var(--panel);
  box-shadow:0 6px 20px color-mix(in srgb, var(--bg) 50%, transparent); }
.m-mobile-menu-set-tab-bar .tbf-strip { display:flex; align-items:flex-end; justify-content:space-around;
  gap:2px; padding-top:9px; }
.m-mobile-menu-set-tab-bar .tbf-tab { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:4px; padding:9px 2px 4px; border-radius:12px;
  position:relative; cursor:pointer; text-decoration:none; opacity:0; transform:translateY(9px);
  transition:opacity 200ms linear, transform 240ms cubic-bezier(.32,1.2,.58,1), background 140ms linear; }
.m-mobile-menu-set-tab-bar.open .tbf-tab { opacity:1; transform:none; transition-delay:calc(70ms + var(--i) * 40ms); }
.m-mobile-menu-set-tab-bar .tbf-tab:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.m-mobile-menu-set-tab-bar .tbf-tab:active { transform:scale(.93); }
.m-mobile-menu-set-tab-bar .tbf-pip { position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:0; height:3px; border-radius:0 0 4px 4px; background:var(--accent);
  transition:width 260ms cubic-bezier(.32,1.2,.58,1); }
.m-mobile-menu-set-tab-bar .tbf-tab.on .tbf-pip { width:26px; }
.m-mobile-menu-set-tab-bar .tbf-ic { width:26px; height:24px; display:flex; align-items:center;
  justify-content:center; color:var(--dim);
  transition:color 160ms linear, transform 260ms cubic-bezier(.34,1.56,.64,1); }
.m-mobile-menu-set-tab-bar .tbf-ic svg { width:22px; height:22px; }
.m-mobile-menu-set-tab-bar .tbf-tab b { font:600 10px var(--font); color:var(--dim); letter-spacing:.01em;
  max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color 160ms linear; }
.m-mobile-menu-set-tab-bar .tbf-tab.on .tbf-ic { color:var(--accent); transform:scale(1.14) translateY(-1px); }
.m-mobile-menu-set-tab-bar .tbf-tab.on b { color:var(--accent); font-weight:700; }
.m-mobile-menu-set-tab-bar .tbf-fab { flex:none; margin:0 5px; width:50px; height:50px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; color:var(--accent-text, #fff);
  text-decoration:none; cursor:pointer; background:var(--accent-grad, var(--accent));
  box-shadow:0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent);
  transform:translateY(-16px);
  transition:transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms linear; }
.m-mobile-menu-set-tab-bar .tbf-fab svg { width:24px; height:24px; }
.m-mobile-menu-set-tab-bar .tbf-fab:hover { transform:translateY(-20px) scale(1.05);
  box-shadow:0 9px 28px color-mix(in srgb, var(--accent) 58%, transparent); }
.m-mobile-menu-set-tab-bar .tbf-fab:active { transform:translateY(-13px) scale(.97); }
.m-mobile-menu-set-tab-bar .ws-mnote { text-align:center; margin-top:2px; }
@container site (max-width:560px) {
  .m-mobile-menu-set-tab-bar .tbf-tab b { font-size:9.5px; }
  .m-mobile-menu-set-tab-bar .tbf-fab { width:46px; height:46px; }
}
/* split-tab — master-detail drawer with a tabbed detail pane (SB_04 mobile-menu-set-split-tab) */
.m-mobile-menu-set-split-tab .ws-mpanel { top:0; right:0; height:100cqh; width:min(360px, 92cqw);
  display:flex; flex-direction:column; gap:12px; padding:16px 16px 18px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-left:var(--bw, 1px) solid var(--hair);
  transform:translateX(105%); transition:transform 280ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-split-tab.open .ws-mpanel { transform:translateX(0); }
/* tab bar — full width, underline-accent active (origin .split-tab) */
.m-mobile-menu-set-split-tab .stb-tabs { display:flex; flex:none; border:var(--bw, 1px) solid var(--hair);
  border-radius:11px; overflow:hidden; background:color-mix(in srgb, var(--ink) 3%, transparent); }
.m-mobile-menu-set-split-tab .stb-tab { flex:1; min-height:40px; padding:0 8px; border:none; background:none;
  font:600 12px var(--font); color:var(--dim); cursor:pointer; border-bottom:2px solid transparent;
  transition:color 160ms linear, border-color 160ms linear, background 140ms linear; }
.m-mobile-menu-set-split-tab .stb-tab + .stb-tab { border-left:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-split-tab .stb-tab:hover { color:var(--ink); }
.m-mobile-menu-set-split-tab .stb-tab.on { color:var(--accent); border-bottom-color:var(--accent);
  background:var(--accent-fill); }
/* 50/50 split body — master | detail */
.m-mobile-menu-set-split-tab .stb-split { flex:1; min-height:0; display:flex;
  border:var(--bw, 1px) solid var(--hair); border-radius:12px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 2%, transparent); }
.m-mobile-menu-set-split-tab .stb-pane { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.m-mobile-menu-set-split-tab .stb-master { border-right:var(--bw, 1px) solid var(--hair); }
.m-mobile-menu-set-split-tab .stb-phead { flex:none; padding:8px 11px; font:700 10px var(--mono);
  letter-spacing:.06em; text-transform:uppercase; color:var(--dim);
  border-bottom:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 3%, transparent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* master nav list (menuLinks -> .stb-link) */
.m-mobile-menu-set-split-tab .stb-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.m-mobile-menu-set-split-tab .stb-link { display:flex; align-items:center; gap:8px; padding:9px 10px;
  cursor:pointer; border-bottom:var(--bw, 1px) solid var(--hair-soft, var(--hair)); border-left:3px solid transparent;
  min-height:44px; transition:background 130ms linear, border-color 130ms linear; }
.m-mobile-menu-set-split-tab .stb-link:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.m-mobile-menu-set-split-tab .stb-link i { flex:none; font:600 9px var(--mono); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-split-tab .stb-link b { font:600 12.5px var(--font); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-split-tab .stb-link.on { background:var(--accent-fill); border-left-color:var(--accent); }
.m-mobile-menu-set-split-tab .stb-link.on i, .m-mobile-menu-set-split-tab .stb-link.on b { color:var(--accent); }
/* detail pane — switchable views (tabs) */
.m-mobile-menu-set-split-tab .stb-view { display:none; flex-direction:column; min-height:0; }
.m-mobile-menu-set-split-tab .stb-view.on { display:flex; flex:1; }
.m-mobile-menu-set-split-tab .stb-vbody { flex:1; overflow-y:auto; padding:11px; display:flex;
  flex-direction:column; gap:7px; }
.m-mobile-menu-set-split-tab .stb-kicker, .m-mobile-menu-set-split-tab .stb-meta,
.m-mobile-menu-set-split-tab .stb-tag { font:500 10.5px var(--mono); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-split-tab .stb-kicker { text-transform:uppercase; letter-spacing:.06em; }
.m-mobile-menu-set-split-tab .stb-name { font:700 16px var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.01em; line-height:1.15; }
.m-mobile-menu-set-split-tab .stb-tag { line-height:1.5; }
/* signature accent bar strip (origin chart, abstracted onto tokens) */
.m-mobile-menu-set-split-tab .stb-bars { display:flex; align-items:flex-end; gap:4px; height:50px;
  margin-top:4px; padding-top:8px; border-top:var(--bw, 1px) solid var(--hair-soft, var(--hair)); }
.m-mobile-menu-set-split-tab .stb-bar { flex:1; min-height:4px; border-radius:3px 3px 0 0;
  background:color-mix(in srgb, var(--accent) 32%, transparent); }
.m-mobile-menu-set-split-tab .stb-bar.hi { background:var(--accent); }
/* compare list */
.m-mobile-menu-set-split-tab .stb-cmp { gap:0; padding:0; }
.m-mobile-menu-set-split-tab .stb-cmprow { display:flex; align-items:center; gap:8px; padding:8px 11px;
  min-height:38px; border-bottom:var(--bw, 1px) solid var(--hair-soft, var(--hair)); }
.m-mobile-menu-set-split-tab .stb-cmprow i { flex:none; font:600 9px var(--mono); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-split-tab .stb-cmprow b { font:600 12px var(--font); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-split-tab .stb-cmprow.on { background:var(--accent-fill); }
.m-mobile-menu-set-split-tab .stb-cmprow.on i, .m-mobile-menu-set-split-tab .stb-cmprow.on b { color:var(--accent); }
.m-mobile-menu-set-split-tab .ws-btn { justify-content:center; flex:none; }
/* travel planner (SB_04 mobile-menu-set-travel) — a left slide-in drawer under a signature
   blue itinerary banner; pages become numbered "stops" that unfold their own panel (mount()
   drives the accordion, one open at a time). Theme tokens throughout; the banner keeps travel's
   literal blue gradient as its signature flourish (white text always reads on it). */
.m-mobile-menu-set-travel .ws-mpanel { top:0; left:0; height:100cqh; width:min(340px, 90cqw);
  display:flex; flex-direction:column; box-sizing:border-box; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none); border-right:var(--bw, 1px) solid var(--hair);
  transform:translateX(-104%); transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-travel.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-travel .trv-head { position:relative; overflow:hidden; padding:16px 16px 15px;
  background:linear-gradient(145deg, #1058ae, #0c8fd8); }
.m-mobile-menu-set-travel .trv-head::after { content:''; position:absolute; top:-42px; right:-32px;
  width:120px; height:120px; background:rgba(255,255,255,.08); border-radius:50%; }
.m-mobile-menu-set-travel .trv-head .ws-mhead, .m-mobile-menu-set-travel .trv-sub,
.m-mobile-menu-set-travel .trv-meta { position:relative; z-index:1; }
.m-mobile-menu-set-travel .trv-head .ws-mhead { margin-bottom:9px; }
.m-mobile-menu-set-travel .trv-head .ws-logo b { color:#fff; }
.m-mobile-menu-set-travel .trv-head .ws-logodot { background:#fff; }
.m-mobile-menu-set-travel .trv-head .ws-mclose { color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.3); }
.m-mobile-menu-set-travel .trv-head .ws-mclose:hover { color:#fff; border-color:rgba(255,255,255,.6); }
.m-mobile-menu-set-travel .trv-sub { display:block; font:500 12px var(--font); color:rgba(255,255,255,.82); font-style:normal; }
.m-mobile-menu-set-travel .trv-meta { display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }
.m-mobile-menu-set-travel .trv-chip { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
  border-radius:8px; padding:5px 11px; font:600 11px var(--font); color:#fff; }
.m-mobile-menu-set-travel .trv-days { flex:1; overflow-y:auto; padding:12px 14px;
  display:flex; flex-direction:column; gap:8px; }
.m-mobile-menu-set-travel .trv-day { border:var(--bw, 1px) solid var(--hair); border-radius:12px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 3%, transparent); transition:border-color 160ms linear; }
.m-mobile-menu-set-travel .trv-day.exp { border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.m-mobile-menu-set-travel .trv-day-head { display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 12px; background:none; border:0; cursor:pointer; text-align:left; color:var(--ink); }
.m-mobile-menu-set-travel .trv-day-num { width:28px; height:28px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:800 11px var(--font);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, var(--bg));
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent); transition:transform 200ms var(--ease-pop, ease-out); }
.m-mobile-menu-set-travel .trv-day.exp .trv-day-num { transform:scale(1.08); }
.m-mobile-menu-set-travel .trv-day-info { flex:1; display:flex; flex-direction:column; min-width:0; }
.m-mobile-menu-set-travel .trv-day-info b { font:700 14px var(--font); color:var(--ink); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-mobile-menu-set-travel .trv-day-info i { font:500 10.5px var(--mono); color:var(--faint); font-style:normal; margin-top:2px; }
.m-mobile-menu-set-travel .trv-day.exp .trv-day-info b { color:var(--accent); }
.m-mobile-menu-set-travel .trv-day-arrow { display:flex; flex:none; color:var(--dim);
  transition:transform 260ms var(--ease-pop, ease-out), color 140ms linear; }
.m-mobile-menu-set-travel .trv-day-arrow svg { width:14px; height:14px; }
.m-mobile-menu-set-travel .trv-day.exp .trv-day-arrow { transform:rotate(90deg); color:var(--accent); }
.m-mobile-menu-set-travel .trv-day-sub { position:relative; max-height:0; opacity:0; overflow:hidden;
  transition:max-height 300ms var(--ease-pop, ease-out), opacity 220ms linear; }
.m-mobile-menu-set-travel .trv-day.exp .trv-day-sub { max-height:120px; opacity:1; }
.m-mobile-menu-set-travel .trv-day-sub::before { content:''; position:absolute; left:26px; top:2px; bottom:14px; width:1.5px;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.m-mobile-menu-set-travel .trv-subrow { display:flex; align-items:center; gap:10px; padding:10px 14px 5px 40px;
  cursor:pointer; text-decoration:none; }
.m-mobile-menu-set-travel .trv-subdot { position:relative; z-index:1; width:7px; height:7px; border-radius:99px; flex:none;
  background:color-mix(in srgb, var(--accent) 70%, transparent); box-shadow:0 0 0 3px var(--panel); }
.m-mobile-menu-set-travel .trv-subrow b { font:600 13px var(--font); color:var(--dim); flex:1; transition:color 140ms linear; }
.m-mobile-menu-set-travel .trv-subrow:hover b, .m-mobile-menu-set-travel .trv-subrow.on b { color:var(--accent); }
.m-mobile-menu-set-travel .trv-subrow em { display:flex; color:var(--faint); }
.m-mobile-menu-set-travel .trv-subrow em svg { width:13px; height:13px; }
.m-mobile-menu-set-travel .trv-submeta { display:block; padding:0 14px 12px 40px; font:500 10px var(--mono); color:var(--faint); font-style:normal; }
.m-mobile-menu-set-travel .ws-btn { justify-content:center; margin:4px 16px 4px; }
.m-mobile-menu-set-travel .ws-mnote { padding:2px 16px 16px; }
/* stepper — the site pages become a numbered progress journey (SB_04 mobile-menu-set-stepper) */
.m-mobile-menu-set-stepper .ws-mpanel { top:0; right:0; height:100cqh; width:min(340px, 88cqw);
  display:flex; flex-direction:column; gap:14px; padding:18px 20px 20px; box-sizing:border-box;
  background:var(--panel); background-image:var(--surface-grad,none); border-left:var(--bw, 1px) solid var(--hair);
  transform:translateX(105%); transition:transform 300ms var(--ease-pop, cubic-bezier(.2,.9,.25,1)); }
.m-mobile-menu-set-stepper.open .ws-mpanel { transform:translateX(0); }
.m-mobile-menu-set-stepper .mms-cap { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.m-mobile-menu-set-stepper .mms-cap b { font:600 13px var(--font); color:var(--ink); letter-spacing:-0.01em; }
.m-mobile-menu-set-stepper .mms-count { flex:none; font:600 10px var(--mono); font-style:normal;
  letter-spacing:.4px; color:var(--faint); white-space:nowrap; }
.m-mobile-menu-set-stepper .mms-prog { height:4px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 12%, transparent); }
.m-mobile-menu-set-stepper .mms-progfill { display:block; height:100%; border-radius:99px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  transition:width 420ms cubic-bezier(.4,0,.2,1); }
.m-mobile-menu-set-stepper .mms-track { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:0; padding-top:2px; }
.m-mobile-menu-set-stepper .mms-step { position:relative; display:flex; align-items:flex-start; gap:14px;
  padding:6px 2px 14px; cursor:pointer; text-decoration:none; }
.m-mobile-menu-set-stepper .mms-step:last-child { padding-bottom:2px; }
.m-mobile-menu-set-stepper .mms-step::before { content:''; position:absolute; left:16px; top:38px; bottom:0; width:2px;
  border-radius:2px; background:color-mix(in srgb, var(--ink) 12%, transparent); transition:background 300ms linear; }
.m-mobile-menu-set-stepper .mms-step:last-child::before { display:none; }
.m-mobile-menu-set-stepper .mms-step.done::before { background:var(--mms-done, #34c759); }
.m-mobile-menu-set-stepper .mms-node { position:relative; z-index:1; flex:none; width:30px; height:30px; border-radius:99px;
  display:grid; place-items:center; box-sizing:border-box; font:700 12px var(--mono);
  background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--faint);
  transition:background 300ms linear, color 300ms linear, box-shadow 300ms linear; }
.m-mobile-menu-set-stepper .mms-node svg { width:14px; height:14px; }
.m-mobile-menu-set-stepper .mms-step.on .mms-node { background:var(--accent); color:var(--accent-text, var(--bg));
  box-shadow:0 0 0 4px var(--accent-fill); animation:mms-pulse 2.2s ease-in-out infinite; }
.m-mobile-menu-set-stepper .mms-step.done .mms-node { background:var(--mms-done, #34c759); color:#fff; }
.m-mobile-menu-set-stepper .mms-txt { display:flex; flex-direction:column; gap:2px; padding-top:4px; min-width:0; }
.m-mobile-menu-set-stepper .mms-txt b { font:600 15px var(--font); color:var(--dim); letter-spacing:-0.01em;
  transition:color 200ms linear; }
.m-mobile-menu-set-stepper .mms-state { font:600 9px var(--mono); font-style:normal; letter-spacing:.7px;
  text-transform:uppercase; color:var(--faint); transition:color 200ms linear; }
.m-mobile-menu-set-stepper .mms-step.on .mms-txt b { color:var(--accent); font-weight:700; }
.m-mobile-menu-set-stepper .mms-step.done .mms-txt b { color:var(--ink); }
.m-mobile-menu-set-stepper .mms-step.on .mms-state { color:var(--accent); }
.m-mobile-menu-set-stepper .mms-step.done .mms-state { color:var(--mms-done, #34c759); }
.m-mobile-menu-set-stepper .ws-btn { justify-content:center; }
@keyframes mms-pulse {
  0%, 100% { box-shadow:0 0 0 4px var(--accent-fill); }
  50% { box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 9%, transparent); }
}
@container site (max-width: 560px) {
  .m-mobile-menu-set-stepper .ws-mpanel { width:min(340px, 92cqw); padding:16px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-mobile-menu-set-stepper .mms-step.on .mms-node { animation:none; }
}
/* @@SB04-MENU-PORT-CSS-SLOT@@  port-wave agents: replace THIS line with your `.m-<id> { ... }` block(s) then a fresh copy of this exact line. Nothing else here. */
/* command bar header */
.ws-head.h-cmdbar { position:sticky; }
.ws-cmdpill { display:inline-flex; align-items:center; gap:10px; margin-left:auto;
  padding:8px 12px 8px 14px; min-width:min(300px, 30cqw); border-radius:10px; cursor:pointer;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--bg) 60%, transparent);
  color:var(--faint); font:500 12px var(--font); transition:border-color 140ms linear; }
.ws-cmdpill:hover { border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-cmdpill svg { width:13px; height:13px; }
.ws-cmdpill span { flex:1; text-align:left; }
.ws-cmdpill kbd { padding:2px 7px; border-radius:5px; border:var(--bw, 1px) solid var(--hair);
  font:600 10px var(--mono); color:var(--dim); }
.ws-cmdpanel { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(430px, 88cqw); border-radius:14px; border:var(--bw, 1px) solid var(--hair); overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none); z-index:50;
  opacity:0; pointer-events:none; transition:opacity 180ms linear, transform 240ms cubic-bezier(.2,.8,.25,1); }
.h-cmdbar.cmdopen .ws-cmdpanel { opacity:1; pointer-events:auto; transform:translateX(-50%); }
.ws-cmdpanel input { width:100%; box-sizing:border-box; padding:14px 16px; border:none; outline:none;
  border-bottom:var(--bw, 1px) solid var(--hair); background:none; color:var(--ink); font:500 13.5px var(--font); }
.ws-cmdlist { padding:7px; max-height:250px; overflow-y:auto; }
.ws-cmditem { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px; cursor:pointer; }
.ws-cmditem i { font:600 9.5px var(--mono); color:var(--faint); font-style:normal; }
.ws-cmditem b { flex:1; font:600 13px var(--font); color:var(--ink); }
.ws-cmditem em { font:500 11px var(--mono); color:var(--faint); font-style:normal; opacity:0; }
.ws-cmditem.act { background:var(--accent-fill); }
.ws-cmditem.act b { color:var(--accent); }
.ws-cmditem.act em { opacity:1; }
/* waypoints header */
.ws-wayrail { display:inline-flex; align-items:center; gap:7px; margin-left:18px; }
.ws-wayrail i { width:8px; height:8px; border-radius:99px; cursor:pointer;
  background:color-mix(in srgb, var(--ink) 14%, transparent);
  transition:background 160ms linear, transform 160ms var(--ease-pop, ease-out); }
.ws-wayrail i:hover { transform:scale(1.35); }
.ws-wayrail i.on { background:var(--accent); transform:scale(1.25); }
.h-waypoints .ws-nav { margin-left:auto; }
/* fireflies footer */
.ws-foot.f-fireflies { position:relative; overflow:hidden; border-top:var(--bw, 1px) solid var(--hair);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, black),
    color-mix(in srgb, var(--bg) 65%, black)); }
.ws-flycv { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* launchpad footer */
.ws-foot.f-launch { overflow:hidden; }
.ws-rocketpad { position:relative; display:flex; flex-direction:column; align-items:center; margin:6px 0 2px; }
.ws-rocket { display:inline-block; font-size:44px; transform:rotate(-45deg); will-change:transform;
  filter:none; }
.ws-rocket.flying { animation:wsLiftoff 2s cubic-bezier(.55,.05,.6,.4) both; }
@keyframes wsLiftoff {
  0% { transform:rotate(-45deg) translate(0, 0); opacity:1; }
  12% { transform:rotate(-45deg) translate(2px, -2px); }
  100% { transform:rotate(-45deg) translate(640px, -640px); opacity:0; } }
.ws-padline { width:74px; height:3px; border-radius:99px; margin-top:8px;
  background:color-mix(in srgb, var(--ink) 22%, transparent); }
.f-launch .ws-fhero { padding-bottom:44px; }
/* worldtime footer — live per-office local clocks */
.ws-foot.f-world { position:relative; overflow:hidden; }
.ws-worldghost { position:absolute; left:0; right:0; bottom:-0.14em; margin:0;
  padding:0 max(24px, calc((100cqw - 1080px) / 2));
  font:800 clamp(64px, 22cqw, 240px)/0.8 var(--font-head, var(--font)); letter-spacing:-0.04em;
  color:color-mix(in srgb, var(--ink) 6%, transparent); white-space:nowrap; overflow:hidden;
  pointer-events:none; user-select:none; }
.ws-worldin { position:relative; z-index:1; }
.ws-worldtop { display:grid; grid-template-columns:0.9fr 1.35fr; gap:clamp(28px, 5cqw, 64px);
  align-items:start; margin-bottom:40px; }
.ws-worldbrand .ws-fnote { margin:12px 0 18px; max-width:34ch; }
.ws-worldfmt { display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  border:var(--bw, 1px) solid var(--hair); background:transparent; color:var(--dim); cursor:pointer;
  font:600 10.5px var(--mono); letter-spacing:1.5px; text-transform:uppercase; transition:color .2s ease; }
.ws-worldfmt:hover { color:var(--ink); }
.ws-worldfmt .on { color:var(--accent); }
.ws-worldoffices { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ws-woffice { display:grid; gap:11px; padding:16px 17px; border-radius:var(--radius);
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 3.5%, transparent); }
.ws-whead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ws-wcity { font:700 15px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.ws-wzone { font:600 10px var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--faint); }
.ws-wclock { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ws-wtime { font:700 clamp(24px, 3.2cqw, 30px)/1 var(--font-head, var(--font)); color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:0.01em; }
.ws-wampm { font-size:0.55em; font-weight:600; color:var(--dim); margin-left:6px; letter-spacing:1px; }
.ws-wstate { display:inline-flex; align-items:center; gap:6px; font:600 11.5px var(--font);
  color:var(--dim); white-space:nowrap; }
.ws-wglyph { width:15px; height:15px; flex:none; display:inline-flex; }
.ws-wglyph svg { width:100%; height:100%; }
.ws-woffice[data-day="1"] .ws-wglyph { color:var(--accent2, #f5b64a); }
.ws-woffice[data-day="0"] .ws-wglyph { color:var(--accent); }
.ws-wtrack { position:relative; height:6px; border-radius:999px;
  background:linear-gradient(to right,
    color-mix(in srgb, var(--accent) 16%, transparent) 0 25%,
    color-mix(in srgb, var(--accent2, #f5b64a) 24%, transparent) 32% 68%,
    color-mix(in srgb, var(--accent) 16%, transparent) 75% 100%); }
.ws-wmarker { position:absolute; top:50%; left:var(--wpos, 50%); width:12px; height:12px; border-radius:50%;
  transform:translate(-50%, -50%); background:var(--ink); border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--hair); transition:left .6s cubic-bezier(.22,1,.36,1); }
.ws-woffice[data-day="1"] .ws-wmarker { background:var(--accent2, #f5b64a); box-shadow:0 0 0 1px var(--hair); }
.f-world .ws-fbar { position:relative; z-index:1; }
@container site (max-width: 860px) { .ws-worldtop { grid-template-columns:1fr; gap:26px; } }
@container site (max-width: 560px) { .ws-worldoffices { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .ws-wmarker, .ws-worldfmt { transition:none; } }
/* transit footer — depot board: line-badge columns, a live service board, a
   rail lamp gliding the sleeper divider. A/B/C hues are semantic (kept literal). */
.ws-foot.f-transit { position:relative; overflow:hidden; border-top:none;
  background:var(--bg); color:var(--ink);
  --trn-amber:#ffb52e; --trn-green:#3ddc84; --trn-blue:#5aa7ff;
  --trn-rail:color-mix(in srgb, var(--ink) 22%, transparent); }
.f-transit .f-trn-track { position:absolute; top:0; left:0; right:0; height:16px; overflow:hidden;
  border-top:2px solid var(--trn-rail); border-bottom:2px solid var(--trn-rail);
  background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 14%, transparent) 0 3px, transparent 3px 18px); }
.f-transit .f-trn-lamp { position:absolute; top:50%; left:0; width:46px; height:8px; border-radius:4px;
  transform:translate(-60px,-50%); background:linear-gradient(90deg, transparent, var(--trn-amber));
  box-shadow:0 0 14px color-mix(in srgb, var(--trn-amber) 55%, transparent); animation:f-trn-lamp 9s linear infinite; }
@keyframes f-trn-lamp { 0% { transform:translate(-60px,-50%); } 55%,100% { transform:translate(calc(100cqw + 60px),-50%); } }
.f-trn-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4cqw,48px); }
/* intro */
.f-trn-brand { display:flex; align-items:center; gap:12px; margin:0; }
.f-trn-roundel { width:30px; height:30px; border-radius:50%; background:var(--trn-amber); color:#1a1206; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font:800 14px var(--font);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--trn-amber) 30%, transparent); }
.f-trn-word { display:flex; flex-direction:column; gap:2px; }
.f-trn-word strong { font:800 13px var(--font); letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); }
.f-trn-word small { font:500 9px var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--dim); }
.f-trn-tag { margin:20px 0 0; font:400 13px/1.65 var(--font); color:var(--dim); max-width:36ch; }
.f-trn-diagram { margin-top:22px; max-width:220px; }
.f-trn-diagram svg { display:block; width:100%; height:auto; opacity:0.9; }
.f-trn-diagram .f-trn-a { stroke:var(--trn-amber); }
.f-trn-diagram .f-trn-b { stroke:var(--trn-green); }
.f-trn-diagram .f-trn-c { stroke:var(--trn-blue); }
.f-trn-diagram circle { fill:var(--bg); }
.f-trn-diagram rect { fill:var(--bg); stroke:var(--ink); }
/* columns */
.f-trn-col { min-width:0; }
.f-trn-head { display:flex; align-items:center; gap:8px; margin:0 0 18px; padding-bottom:10px; position:relative;
  font:800 11px var(--font); letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); }
.f-trn-head::after { content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; border-radius:1px; background:var(--trn-rail); }
.f-trn-col.a .f-trn-head::after { background:var(--trn-amber); }
.f-trn-col.b .f-trn-head::after { background:var(--trn-green); }
.f-trn-col.c .f-trn-head::after { background:var(--trn-blue); }
.f-trn-cbadge { width:18px; height:18px; border-radius:50%; flex:none; display:inline-flex; align-items:center;
  justify-content:center; font:800 9px var(--font); color:#0a0d13; background:var(--dim); }
.f-trn-col.a .f-trn-cbadge { background:var(--trn-amber); color:#1a1206; }
.f-trn-col.b .f-trn-cbadge { background:var(--trn-green); color:#06180d; }
.f-trn-col.c .f-trn-cbadge { background:var(--trn-blue); color:#071120; }
.f-trn-links { display:grid; gap:6px; }
.f-trn-links .f-trn-link { display:inline-flex; align-items:center; gap:10px; width:fit-content; cursor:pointer;
  font:500 13px var(--font); color:var(--dim); padding:4px 0; transition:color .18s ease; }
.f-trn-link::before { content:""; width:7px; height:7px; border-radius:50%; border:2px solid var(--trn-rail);
  flex:none; transition:border-color .18s ease; }
.f-trn-link:hover, .f-trn-link.on { color:var(--ink); }
.f-trn-col.a .f-trn-link:hover::before, .f-trn-col.a .f-trn-link.on::before { border-color:var(--trn-amber); background:var(--trn-amber); }
.f-trn-col.b .f-trn-link:hover::before, .f-trn-col.b .f-trn-link.on::before { border-color:var(--trn-green); background:var(--trn-green); }
.f-trn-col.c .f-trn-link:hover::before { border-color:var(--trn-blue); background:var(--trn-blue); }
/* service column */
.f-trn-times { margin:0; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); background:var(--panel);
  padding:14px 16px; display:grid; gap:8px; }
.f-trn-time { display:flex; justify-content:space-between; gap:16px; font:500 9px var(--mono); letter-spacing:0.1em; text-transform:uppercase; }
.f-trn-time dt { color:var(--dim); }
.f-trn-time dd { color:var(--ink); font-variant-numeric:tabular-nums; }
.f-trn-works { margin:12px 0 0; font:500 9px var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--trn-amber); }
.f-trn-status { margin-top:14px; display:grid; gap:8px; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); background:var(--panel); padding:14px 16px; }
.f-trn-srow { display:flex; align-items:center; gap:10px; margin:0; font:600 9px var(--mono); letter-spacing:0.1em; text-transform:uppercase; }
.f-trn-sbadge { width:16px; height:16px; border-radius:50%; flex:none; display:inline-flex; align-items:center;
  justify-content:center; font:800 8px var(--font); background:var(--dim); color:#0a0d13; }
.f-trn-srow[data-line="a"] .f-trn-sbadge { background:var(--trn-amber); color:#1a1206; }
.f-trn-srow[data-line="b"] .f-trn-sbadge { background:var(--trn-green); color:#06180d; }
.f-trn-srow[data-line="c"] .f-trn-sbadge { background:var(--trn-blue); color:#071120; }
.f-trn-sname { color:var(--ink); flex:none; }
.f-trn-snote { margin-left:auto; text-align:right; color:var(--dim); }
.f-trn-snote.ok { color:var(--trn-green); }
.f-trn-snote.warn { color:var(--trn-amber); }
.f-trn-snote.bad { color:var(--bad, #ff6b6b); }
/* bottom bar */
.f-trn-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:16px 32px; margin-top:52px; padding-top:20px;
  border-top:var(--bw, 1px) solid var(--hair); font:500 9px var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); }
.f-trn-legal { display:inline-flex; flex-wrap:wrap; gap:20px; }
.f-trn-llink { color:var(--dim); cursor:pointer; transition:color .18s ease; }
.f-trn-llink:hover { color:var(--trn-amber); }
.f-trn-here { margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
.f-trn-here i { width:8px; height:8px; border-radius:50%; background:var(--trn-amber);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--trn-amber) 25%, transparent); animation:f-trn-here 2.4s ease-in-out infinite; }
@keyframes f-trn-here { 0%,100% { box-shadow:0 0 0 3px color-mix(in srgb, var(--trn-amber) 25%, transparent); } 50% { box-shadow:0 0 0 6px color-mix(in srgb, var(--trn-amber) 10%, transparent); } }
@container site (max-width: 860px) { .f-trn-grid { grid-template-columns:1fr 1fr; } }
@container site (max-width: 560px) { .f-trn-grid { grid-template-columns:1fr; } .f-trn-here { margin-left:0; } }
@media (prefers-reduced-motion: reduce) {
  .f-trn-lamp { animation:none; visibility:hidden; }
  .f-trn-here i { animation:none; }
  .f-trn-link, .f-trn-link::before, .f-trn-llink { transition:none; }
}
/* darkroom footer — a process-log footer: a full-bleed film-rebate marquee over
   sprocket strips, three chemistry-bath link columns and a pulsing safelight LED.
   Neutrals + decorative accents map to tokens (brand cascades); the safelight red
   (--dk-safe) is the one semantic status hue, and the rebate is an always-dark film
   material so it reads on light AND dark themes. Pure CSS, no JS. */
.ws-foot.f-dark { position:relative; overflow:hidden; border-top:none; padding:0;
  background:var(--bg); color:var(--ink); --dk-safe:#ff4b2e; --dk-film:#0b0908; --dk-onfilm:rgba(237,229,216,.6); }
/* film rebate ticker (full-bleed; the ::before/::after are the sprocket strips) */
.f-dark .f-drk-rebate { overflow:hidden; background:var(--dk-film); border-bottom:var(--bw, 1px) solid var(--hair); }
.f-dark .f-drk-rebate::before, .f-dark .f-drk-rebate::after { content:""; display:block; height:7px;
  background-image:repeating-linear-gradient(90deg, transparent 0 7px, rgba(237,229,216,.12) 7px 17px, transparent 17px 24px); }
.f-dark .f-drk-ticker { display:flex; width:max-content; animation:f-drk-tape 42s linear infinite; }
.f-dark .f-drk-rebate:hover .f-drk-ticker { animation-play-state:paused; }
.f-dark .f-drk-tape { display:flex; flex:none; align-items:center; gap:40px; margin-left:20px; padding:8px 20px 8px 0;
  font:500 9px var(--mono); letter-spacing:0.22em; text-transform:uppercase; color:var(--dk-onfilm); white-space:nowrap; }
.f-dark .f-drk-frame { color:var(--accent); }
@keyframes f-drk-tape { to { transform:translateX(-50%); } }
/* main grid (brand + 3 baths), self-centring so the ticker can go full-bleed */
.f-drk-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4cqw,48px);
  max-width:1080px; margin:0 auto; padding:clamp(48px,6cqw,76px) clamp(20px,5cqw,56px) 44px; }
.f-drk-brand { min-width:0; }
.f-drk-blurb { margin:16px 0 0; font:400 13px/1.65 var(--font); color:var(--dim); max-width:34ch; }
.f-drk-status { display:flex; align-items:center; gap:10px; margin:22px 0 0;
  font:600 9px var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); }
.f-drk-led { flex:none; width:8px; height:8px; border-radius:50%; background:var(--dk-safe);
  box-shadow:0 0 10px 2px color-mix(in srgb, var(--dk-safe) 55%, transparent); animation:f-drk-led 2.6s ease-in-out infinite; }
@keyframes f-drk-led { 50% { box-shadow:0 0 3px 0 color-mix(in srgb, var(--dk-safe) 30%, transparent); opacity:.6; } }
.f-drk-addr { margin:12px 0 0; font:500 9px/1.9 var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); }
/* chemistry columns */
.f-drk-bath { min-width:0; padding-top:2px; border-top:var(--bw, 1px) solid var(--hair); }
.f-drk-step { display:flex; justify-content:space-between; gap:16px; margin:0; padding-top:12px;
  font:600 9px var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.f-drk-bathname { margin:8px 0 0; font:700 12px var(--font); letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); }
.f-drk-links { margin-top:18px; display:grid; gap:11px; }
.f-drk-link { display:inline-flex; align-items:baseline; gap:8px; width:fit-content; cursor:pointer;
  font:500 13px var(--font); color:var(--dim); transition:color .18s ease; }
.f-drk-link::before { content:"▸"; font-size:.8em; color:transparent; transform:translateX(-4px);
  transition:color .18s ease, transform .18s ease; }
.f-drk-link:hover, .f-drk-link.on { color:var(--ink); }
.f-drk-link:hover::before, .f-drk-link.on::before { color:var(--accent); transform:none; }
/* process bottom bar */
.f-drk-bar { border-top:var(--bw, 1px) solid var(--hair); }
.f-drk-bar-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 32px;
  max-width:1080px; margin:0 auto; padding:20px clamp(20px,5cqw,56px);
  font:500 9px var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
@container site (max-width: 860px) { .f-drk-inner { grid-template-columns:1fr 1fr; } }
@container site (max-width: 560px) { .f-drk-inner { grid-template-columns:1fr; } .f-drk-brand { grid-column:1 / -1; } }
@media (prefers-reduced-motion: reduce) {
  .f-drk-ticker { animation:none; }
  .f-drk-led { animation:none; }
  .f-drk-link, .f-drk-link::before { transition:none; }
}
/* prize wheel */
.ws-wheelwrap { position:relative; width:min(380px, 82cqw); margin:0 auto; }
.ws-wheelcv { display:block; width:100%; aspect-ratio:1/1; }
.ws-wheelpin { position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:2;
  width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:18px solid var(--accent); }
.ws-spinbtn[disabled] { opacity:.55; pointer-events:none; }
.ws-wheelout { display:block; margin-top:18px; font:800 20px var(--font-head, var(--font));
  color:var(--accent); font-style:normal; }
.ws-wheelout.pop { animation:wsPop 420ms cubic-bezier(.2,.9,.3,1.4); }
/* launch clock */
.ws-clock { display:flex; align-items:flex-start; justify-content:center; gap:14px; margin:10px 0 20px; }
.ws-clockcell { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ws-clockcell b { display:grid; place-items:center; min-width:86px; padding:18px 10px;
  border-radius:14px; border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none);
  font:800 44px var(--mono); color:var(--ink); letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums; }
.ws-clockcell b.tick { animation:wsDigit 340ms cubic-bezier(.2,.8,.25,1); }
@keyframes wsDigit { 0% { transform:translateY(-8px) scaleY(.82); opacity:.4; } 100% { transform:none; opacity:1; } }
.ws-clockcell i { font:700 9.5px var(--mono); letter-spacing:2px; color:var(--faint);
  text-transform:uppercase; font-style:normal; }
.ws-clocksep { align-self:flex-start; padding-top:22px; font:800 34px var(--mono); color:var(--accent); font-style:normal; }
@container site (max-width: 560px) {
  .ws-clockcell b { min-width:56px; font-size:26px; padding:12px 6px; }
  .ws-clocksep { padding-top:14px; font-size:22px; }
  .ws-decktiles { grid-template-columns:1fr; }
  .ws-wayrail { display:none; }
}

/* ================= responsive additions (container) ================= */
@container site (max-width: 860px) {
  .ws-wall { columns:2; }
  .ws-stepgrid { grid-template-columns:1fr; }
  .ws-vsrow > span { padding:12px 14px; }
  .ws-lanes, .ws-comgrid { grid-template-columns:1fr; }
  .ws-tabpane { grid-template-columns:1fr; gap:26px; }
  .ws-logrow { grid-template-columns:110px 1fr; gap:16px; }
  .ws-pinstage { min-height:380px; }
  .ws-sparkgrid, .ws-artgrid, .ws-bkwrap, .ws-cogrid, .ws-pulsegrid { grid-template-columns:1fr; }
  .ws-tourgrid { grid-template-columns:1fr; gap:26px; }
  .ws-tourtrack { height:340cqh; }
  .ws-filmcap, .ws-filmcap.r { left:6cqw; right:6cqw; max-width:none; text-align:left; bottom:14cqh; }
  .ws-filmcap b { font-size:22px; }
  .ws-filmreel { display:none; }
  .ws-ringwrap { height:300px; }
  .ws-ringcard { width:240px; left:-120px; top:-100px; }
  .ws-clipgrid, .ws-citygrid, .ws-vaultgrid, .ws-shelf { grid-template-columns:1fr 1fr; }
  .ws-case { grid-template-columns:1fr; gap:18px; }
  .ws-casestats { gap:22px; }
  .ws-dishes { grid-template-columns:1fr; gap:2px; }
}
@container site (max-width: 560px) {
  .ws-menubtn { display:flex; }
  .ws-wall { columns:1; }
  .ws-year { grid-template-columns:60px 1fr; gap:14px; }
  .ws-prin { grid-template-columns:44px 1fr; gap:14px; }
  .ws-vsrow { grid-template-columns:1fr 1fr; }
  .ws-vsrow .f { grid-column:1 / -1; padding-bottom:4px; }
  .ws-vsrow .us { border-left:none; }
  .v-announce .ws-in { gap:10px; }
  .ws-tstop { gap:14px; }
  .ws-tstop::before { left:14px; }
  .ws-tdot { width:30px; height:30px; }
}

/* ================= wave-12: templates · admin · SaaS ================= */
/* in the builder preview the site needs no browser bar — the nb topbar
   already owns dragging and window controls */
.na.building .wr-bar { display:none; }
/* the admin rail — sticky at the top flow, floats right */
.ws-adminbar { position:sticky; top:0; height:0; z-index:70; display:block; }
.ws-adminbar > * { position:relative; }
.ws-adminbar .ws-adbadge { position:absolute; right:14px; top:12px; padding:3px 9px; border-radius:99px;
  background:var(--accent); color:var(--accent-text, #04121a); font:800 8px var(--mono);
  letter-spacing:1.6px; font-style:normal; }
.ws-adminbar button { position:absolute; right:14px; width:38px; height:38px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:color-mix(in srgb, var(--panel) 92%, transparent); color:var(--accent);
  font-size:15px; cursor:pointer; transition:background 140ms linear; }
.ws-adminbar button:hover { background:var(--accent-fill); }
.ws-adminbar [data-ad="edit"] { top:38px; }
.ws-adminbar [data-ad="shows"] { top:82px; }
.ws-adminbar [data-ad="out"] { top:126px; }
.ws-adminbar.editing [data-ad="edit"] { background:var(--accent); color:var(--accent-text, #04121a); }
.ws-adpanel { position:absolute; right:60px; top:38px; width:250px; padding:16px;
  border-radius:14px; border:var(--bw, 1px) solid var(--hair, rgba(255,255,255,.09)); display:flex; flex-direction:column; gap:9px;
  background:var(--panel, #15171c); background-image:var(--surface-grad,none);
  box-shadow:0 18px 44px rgba(0,0,0,.5); }
.ws-adpanel b { font:700 12px var(--font); color:var(--ink); }
.ws-adpanel input { padding:9px 11px; border-radius:8px; border:var(--bw, 1px) solid var(--hair, rgba(255,255,255,.09));
  background:var(--bg, #0d0e11); color:var(--ink, #eceef2); font:400 12px var(--font); outline:none; }
.ws-adpanel button { position:static; right:auto; top:auto; width:auto; height:auto; }
.ws-adlist { display:flex; flex-direction:column; gap:6px; max-height:150px; overflow-y:auto; }
.ws-adlist i { font:400 10.5px var(--font); color:var(--faint); font-style:normal; }
.ws-adrow { display:flex; align-items:center; gap:8px; font:500 11.5px var(--font); color:var(--dim); }
.ws-adrow span { flex:1; }
.ws-adrow button { position:static; width:22px; height:22px; border-radius:6px; font-size:11px; }
.ws-editable { outline:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset:4px; border-radius:4px; cursor:text; }
/* tour dates */
.ws-show { display:flex; align-items:center; gap:18px; padding:16px 18px;
  border-radius:calc(var(--radius, 12px) * .7); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-show + .ws-show { margin-top:9px; }
.ws-showdate { font:700 13px var(--mono); color:var(--accent); white-space:nowrap; }
.ws-showwho { flex:1; min-width:0; }
.ws-showwho b { display:block; font:600 14.5px var(--font); color:var(--ink); }
.ws-showwho i { display:block; margin-top:2px; font:400 11.5px var(--font); color:var(--faint); font-style:normal; }
/* plugin shelf */
.ws-plugrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-plug { position:relative; display:flex; flex-direction:column; gap:7px; padding:20px;
  border-radius:var(--radius, 12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none);
  transition:transform 160ms var(--ease-pop, ease-out), border-color 160ms linear; }
.ws-plug:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-plugface { display:flex; align-items:center; justify-content:space-between; padding:16px 14px;
  border-radius:10px; margin-bottom:8px;
  background:linear-gradient(135deg, var(--accent-fill), color-mix(in srgb, var(--accent2, var(--accent)) 10%, transparent));
  border:var(--bw, 1px) solid var(--hair); }
.ws-plugface > i { font:800 26px var(--font-head, var(--font)); color:var(--accent); font-style:normal; }
.ws-plugknobs { display:flex; gap:8px; }
.ws-plugknobs i { width:16px; height:16px; border-radius:99px; border:2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  background:conic-gradient(from 220deg, var(--accent) 0 20%, transparent 20%); }
.ws-plug > b { font:700 15px var(--font-head, var(--font)); color:var(--ink); }
.ws-plugver { font:600 9.5px var(--mono); letter-spacing:1.2px; color:var(--faint); font-style:normal; }
.ws-plug p { margin:0; font:400 12px/1.55 var(--font); color:var(--dim); flex:1; }
.ws-plugrow { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.ws-plugrow em { font:800 17px var(--mono); color:var(--ink); font-style:normal; }
/* customer library */
.ws-lic { display:flex; align-items:center; gap:16px; padding:15px 18px;
  border-radius:calc(var(--radius, 12px) * .7); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-lic + .ws-lic { margin-top:9px; }
.ws-licmain { flex:1; min-width:0; }
.ws-licmain b { display:block; font:600 14px var(--font); color:var(--ink); }
.ws-serial { display:inline-block; margin-top:5px; padding:3px 9px; border-radius:6px; cursor:copy;
  border:1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  font:600 11px var(--mono); color:var(--accent); letter-spacing:1px; font-style:normal;
  transition:background 140ms linear; }
.ws-serial.copied { background:var(--accent-fill); }
.ws-licver { text-align:right; font:700 11px var(--mono); color:var(--ink); }
.ws-licver i { display:block; margin-top:2px; font:500 9px var(--mono); color:var(--accent);
  letter-spacing:.8px; font-style:normal; text-transform:uppercase; }
/* embedded zenos app */
.ws-embedwrap { border-radius:16px; border:var(--bw, 1px) solid var(--hair); overflow:hidden;
  background:var(--panel); }
.ws-embedfr { display:block; width:100%; height:100%; border:none; }
@container site (max-width: 860px) { .ws-plugrid { grid-template-columns:1fr; } }

/* ================= wave-12b: photo covers · magazine · directory · classifieds ================= */
.v-cover { position:relative; overflow:hidden; padding:150px 0 120px; }
.ws-coverimg { position:absolute; inset:0; background-size:cover; background-position:center;
  background-color:color-mix(in srgb, var(--bg) 70%, black); }
.ws-coverimg.a0 { background-image:radial-gradient(80% 70% at 30% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.ws-coverscrim { position:absolute; inset:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 42%, transparent),
    color-mix(in srgb, var(--bg) 88%, transparent) 78%, var(--bg)); }
.v-cover .ws-in { position:relative; z-index:1; }
.v-cover .ws-sub { margin-top:16px; }
.ws-photo { display:block; background-size:cover; background-position:center; border-radius:12px;
  border:var(--bw, 1px) solid var(--hair); background-color:var(--panel); }
.ws-photo.a1 { background-image:linear-gradient(135deg, var(--accent-fill), color-mix(in srgb, var(--accent2, var(--accent)) 16%, transparent)); }
.ws-photo.a2 { background-image:radial-gradient(70% 70% at 30% 25%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%); }
.ws-photo.a3 { background-image:radial-gradient(80% 80% at 75% 80%, color-mix(in srgb, var(--accent2, var(--accent)) 18%, transparent), transparent 72%); }
.ws-photo.a4 { background-image:conic-gradient(from 200deg at 60% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%, color-mix(in srgb, var(--accent2, var(--accent)) 10%, transparent) 80%, transparent); }
/* magazine splash */
.ws-maggrid { display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:start; }
.ws-magfeat { display:block; cursor:pointer; }
.ws-magfeat .ws-photo { aspect-ratio:16/9; transition:transform 180ms var(--ease-pop, ease-out); }
.ws-magfeat:hover .ws-photo { transform:translateY(-4px); }
.ws-magmeta { padding:16px 4px 0; }
.ws-magmeta b { display:block; margin:9px 0 8px; font:800 24px/1.2 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.015em; }
.ws-magmeta p { margin:0 0 10px; font:400 13px/1.6 var(--font); color:var(--dim); }
.ws-magmeta i, .ws-magrowtxt i { font:500 10.5px var(--mono); color:var(--faint); font-style:normal; }
.ws-magcol { display:flex; flex-direction:column; gap:14px; }
.ws-magrow { display:grid; grid-template-columns:108px 1fr; gap:14px; align-items:center; cursor:pointer; }
.ws-magrow .ws-photo { aspect-ratio:4/3; }
.ws-magrowtxt b { display:block; margin:5px 0 5px; font:700 14.5px/1.3 var(--font-head, var(--font));
  color:var(--ink); transition:color 130ms linear; }
.ws-magrow:hover .ws-magrowtxt b { color:var(--accent); }
/* directory + classifieds shared bar */
.ws-dirbar { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.ws-dirchips { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.ws-chip.btn { cursor:pointer; transition:color 130ms linear, border-color 130ms linear, background 130ms linear; }
.ws-chip.btn.on { background:var(--accent-fill); color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-dirform { display:grid; grid-template-columns:repeat(2, 1fr); gap:9px; padding:16px;
  margin-bottom:16px; border-radius:var(--radius, 12px);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:var(--panel); background-image:var(--surface-grad,none); }
.ws-dirform .nb-in { padding:10px 12px; border-radius:8px; border:var(--bw, 1px) solid var(--hair);
  background:var(--bg); color:var(--ink); font:400 12.5px var(--font); outline:none; }
.ws-dirform [data-p="go"] { grid-column:1 / -1; justify-content:center; }
.ws-dirgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ws-dircard { display:flex; gap:13px; padding:18px; border-radius:var(--radius, 12px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad,none);
  cursor:pointer; transition:transform 160ms var(--ease-pop, ease-out), border-color 160ms linear; }
.ws-dircard:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-diravatar { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; flex:none;
  background:var(--accent-fill); color:var(--accent); font:800 19px var(--font-head, var(--font)); }
.ws-dircard.t-venue .ws-diravatar { border-radius:8px;
  background:color-mix(in srgb, var(--accent2, var(--accent)) 16%, transparent); color:var(--accent2, var(--accent)); }
.ws-dircard.t-band .ws-diravatar { border-radius:99px; }
.ws-dirmeta { min-width:0; }
.ws-dirmeta b { display:block; font:700 14.5px var(--font-head, var(--font)); color:var(--ink); }
.ws-dirtags { display:block; margin-top:2px; font:600 9.5px var(--mono); letter-spacing:.8px;
  color:var(--accent); font-style:normal; text-transform:uppercase; }
.ws-dirmeta p { margin:7px 0 8px; font:400 12px/1.5 var(--font); color:var(--dim); }
.ws-dirmeta em { font:500 10.5px var(--font); color:var(--faint); font-style:normal; }
.ws-dirtype { text-decoration:none; text-transform:capitalize; }
/* classifieds rows */
.ws-lst { display:flex; align-items:center; gap:14px; padding:15px 17px;
  border-radius:calc(var(--radius, 12px) * .7); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none); cursor:pointer;
  transition:border-color 150ms linear, transform 150ms var(--ease-pop, ease-out); }
.ws-lst + .ws-lst { margin-top:9px; }
.ws-lst:hover { border-color:color-mix(in srgb, var(--accent) 40%, transparent); transform:translateX(4px); }
.ws-lstcat { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex:none;
  font:800 14px var(--font-head, var(--font)); text-transform:uppercase;
  background:var(--accent-fill); color:var(--accent); }
.ws-lstcat.c-gear { background:color-mix(in srgb, var(--accent2, var(--accent)) 15%, transparent); color:var(--accent2, var(--accent)); }
.ws-lstcat.c-services { background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--dim); }
.ws-lstmain { flex:1; min-width:0; }
.ws-lstmain b { display:block; font:600 13.5px var(--font); color:var(--ink); }
.ws-lstmain i { display:block; margin-top:3px; font:400 11px var(--font); color:var(--faint); font-style:normal; }
.ws-lst > em { font:800 14px var(--mono); color:var(--accent); font-style:normal; }
.ws-autabs.solo button { cursor:default; }
@container site (max-width: 860px) {
  .ws-maggrid { grid-template-columns:1fr; }
  .ws-dirgrid { grid-template-columns:1fr 1fr; }
}
@container site (max-width: 560px) {
  .ws-dirgrid, .ws-dirform { grid-template-columns:1fr; }
}

/* ================= wave-13: editorial rails · pro · promos ================= */
.ws-railwrap { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:36px;
  width:min(1160px, 92cqw); margin:0 auto; align-items:start; }
.ws-railmain { min-width:0; }
.ws-railmain .ws-in, .ws-railmain .ws-in.narrow { width:100%; }
.ws-rail { position:sticky; top:76px; display:flex; flex-direction:column; gap:6px;
  padding-top:60px; }
.ws-rail .ws-sec { padding:16px 0; }
.ws-railh { margin:0 0 10px; font:700 9.5px var(--mono); letter-spacing:2px; color:var(--accent);
  text-transform:uppercase; }
.ws-railh.dim { color:var(--faint); }
.ws-railrow { display:block; padding:10px 2px; border-top:var(--bw, 1px) solid var(--hair); cursor:pointer; }
.ws-railrow b { display:block; margin-top:4px; font:600 12.5px/1.4 var(--font-head, var(--font));
  color:var(--ink); transition:color 130ms linear; }
.ws-railrow:hover b { color:var(--accent); }
.ws-railrow.gear { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ws-railrow.gear b { margin:0; }
.ws-railrow.gear em { font:700 11.5px var(--mono); color:var(--accent); font-style:normal; }
.ws-railrow.gig { display:grid; grid-template-columns:34px 1fr; gap:2px 10px; }
.ws-railrow.gig em { grid-row:span 2; font:700 10.5px var(--mono); color:var(--accent);
  font-style:normal; align-self:center; }
.ws-railrow.gig i { font:400 10.5px var(--font); color:var(--faint); font-style:normal; }
.ws-textlink.sm { font-size:11.5px; margin-top:10px; }
.ws-adslot { display:flex; flex-direction:column; gap:6px; padding:16px;
  border:1px dashed color-mix(in srgb, var(--accent) 40%, transparent); border-radius:12px;
  background:color-mix(in srgb, var(--accent) 5%, transparent); }
.ws-adslot b { font:600 12.5px/1.45 var(--font); color:var(--ink); }
.ws-adslot i { font:400 10.5px var(--font); color:var(--faint); font-style:normal; }
.ws-adslot .ws-btn { align-self:flex-start; margin-top:4px; }
/* pro */
.ws-procard { display:flex; flex-direction:column; gap:8px; padding:26px;
  border-radius:var(--radius, 12px); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%), var(--panel); }
.ws-probadge { align-self:flex-start; padding:3px 10px; border-radius:99px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #fff); font:800 9px var(--mono); letter-spacing:1.8px; }
.ws-probadge.sm { margin-left:7px; padding:1px 6px; font-size:7.5px; vertical-align:2px; text-decoration:none; }
.ws-verified { margin-left:6px; color:var(--accent); text-decoration:none; font-style:normal; font-weight:700; }
.ws-procard > b { font:800 20px var(--font-head, var(--font)); color:var(--ink); }
.ws-procard > i { font:400 12px var(--font); color:var(--faint); font-style:normal; }
.ws-procard ul { list-style:none; margin:8px 0 4px; padding:0; display:flex; flex-direction:column; gap:8px; }
.ws-procard li { display:flex; align-items:center; gap:9px; font:400 12.5px var(--font); color:var(--dim); }
.ws-procard li svg { width:13px; height:13px; color:var(--accent); flex:none; }
.ws-proactive { display:inline-flex; align-items:center; gap:8px; font:600 13px var(--font); color:var(--accent); }
.ws-proactive svg { width:14px; height:14px; }
.ws-progate { grid-column:1 / -1; font:500 11.5px var(--font); color:var(--faint); padding:4px 2px; }
.ws-progate b { color:var(--accent); }
.ws-diravatar.photo { background-size:cover; background-position:center; color:transparent; }
.ws-lst [data-boost] { flex:none; }
@container site (max-width: 900px) {
  .ws-railwrap { grid-template-columns:1fr; }
  .ws-rail { position:static; padding-top:0; flex-direction:row; flex-wrap:wrap; gap:20px; }
  .ws-rail .ws-sec { flex:1 1 240px; }
}

/* ================= Site Builder additions (rides the nb-* chrome) ================= */
/* section stack rows in the page editor */
.sb-secrow { display:flex; align-items:center; gap:8px; width:100%; padding:8px 8px 8px 12px;
  background:var(--panel-3); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius) * .55);
  color:var(--dim); cursor:pointer; text-align:left;
  transition:border-color var(--t-fast) linear, color var(--t-fast) linear; }
.sb-secrow:hover { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.sb-secrow + .sb-secrow { margin-top:5px; }
.sb-secrow.hl { border-color:var(--accent); }
.sb-secrow .sb-kind { font:600 8.5px var(--mono); letter-spacing:1.2px; color:var(--accent);
  text-transform:uppercase; display:block; }
.sb-secrow .sb-var { font:600 12px var(--font); color:var(--ink); display:block; }
.sb-secrow .sb-grab { display:flex; flex-direction:column; gap:2px; margin-left:auto; flex:none; }
.sb-mini { width:22px; height:18px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:4px; background:none; color:var(--faint); cursor:pointer; font:600 11px var(--mono);
  transition:color var(--t-fast) linear, background var(--t-fast) linear; }
.sb-mini:hover { color:var(--accent); background:var(--accent-fill); }
.sb-mini.del:hover { color:#e5484d; background:color-mix(in srgb, #e5484d 14%, transparent); }
/* page rows on the Pages section */
.sb-pgrow { display:flex; align-items:center; gap:9px; }
.sb-pgrow .nb-in { flex:1; }
/* select-mode section overlays live inside the scroll flow */
.wr-hit { position:absolute; left:6px; right:6px; z-index:30; border:1px dashed transparent; border-radius:10px;
  cursor:pointer; transition:border-color var(--t-fast) linear, background var(--t-fast) linear; }
.wr-hit span { position:absolute; top:8px; left:10px; padding:2px 8px; border-radius:5px; opacity:0;
  background:var(--accent); color:var(--accent-text,#04121a); font:700 10px var(--font); letter-spacing:.6px;
  transition:opacity var(--t-fast) linear; pointer-events:none; z-index:2; }
.wr-hit:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.wr-hit:hover span { opacity:1; }

/* ================= shell-import headers — lifted from the shell gallery ================= */
/* glow pill — aurora's gradient-lit active nav */
.ws-navlink.glow { border-radius:99px; padding:7px 14px; }
.ws-navlink.glow.on { background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #fff);
  box-shadow:0 8px 22px -8px color-mix(in srgb, var(--accent) 75%, transparent),
    0 4px 14px -6px color-mix(in srgb, var(--accent2, var(--accent)) 60%, transparent),
    inset 0 1px 0 rgb(255 255 255 / .22); }
.h-glowpill .ws-logodot { box-shadow:0 0 14px color-mix(in srgb, var(--accent) 80%, transparent); }
/* traffic lights — the three little dots, glyphs on approach */
.ws-head.h-traffic { background:color-mix(in srgb, var(--panel) 72%, var(--bg)); }
.ws-lights { display:inline-flex; align-items:center; gap:8px; flex:none; }
.ws-lights i { width:12px; height:12px; border-radius:50%; font:700 9px/1 var(--mono); font-style:normal;
  display:grid; place-items:center; color:transparent; transition:color 120ms linear;
  box-shadow:inset 0 0 0 .5px rgb(0 0 0 / .18); }
.ws-lights i.r { background:#ff5f57; }
.ws-lights i.y { background:#febc2e; }
.ws-lights i.g { background:#28c840; }
.ws-lights i.r::after { content:'×'; }
.ws-lights i.y::after { content:'−'; }
.ws-lights i.g::after { content:'+'; }
.h-traffic:hover .ws-lights i { color:rgb(0 0 0 / .48); }
.h-traffic .ws-nav.ctr { margin-inline:auto; }
/* soft touch — neumorphic: raised chrome, the active page pressed in */
.ws-head.h-soft { border-bottom:none; background:var(--bg);
  --nm-hi:color-mix(in srgb, white 32%, var(--bg)); --nm-sh:color-mix(in srgb, black 30%, var(--bg)); }
.ws-softmark { display:inline-flex; padding:8px 14px; border-radius:14px; background:var(--bg);
  box-shadow:-3px -3px 7px var(--nm-hi), 3px 3px 7px var(--nm-sh); }
.ws-navlink.soft { border-radius:12px; padding:8px 15px; }
.ws-navlink.soft:hover { background:none; color:var(--ink);
  box-shadow:-3px -3px 7px var(--nm-hi), 3px 3px 7px var(--nm-sh); }
.ws-navlink.soft.on { background:none; color:var(--accent);
  box-shadow:inset -2px -2px 5px var(--nm-hi), inset 2px 2px 5px var(--nm-sh); }
.h-soft .ws-btn.soft { border-color:transparent;
  box-shadow:-3px -3px 7px var(--nm-hi), 3px 3px 8px var(--nm-sh); }
.h-soft .ws-btn.soft:active { box-shadow:inset -2px -2px 5px var(--nm-hi), inset 2px 2px 6px var(--nm-sh); }
/* system 98 — title strip + menubar, accelerator underlines */
.ws-head.h-sys98 { flex-direction:column; align-items:stretch; gap:0; padding-block:8px 0;
  background:var(--panel); }
.ws-sysbar { display:flex; align-items:center; gap:12px; padding:5px 6px 5px 11px;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  border:1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.ws-sysbar .ws-logo b, .ws-sysbar > i { color:var(--accent-text, #fff); }
.ws-sysbar .ws-logo b { font-size:13px; }
.ws-sysbar .ws-logodot { background:var(--accent-text, #fff); opacity:.9; }
.ws-sysbar > i { font:600 11.5px var(--font); font-style:normal;
  opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-sysctls { display:flex; gap:3px; margin-left:auto; flex:none; }
.ws-sysctls b { width:19px; height:16px; display:grid; place-items:center;
  font:700 8px/1 var(--mono); color:var(--ink); background:var(--panel);
  border:1px solid; border-color:color-mix(in srgb, white 65%, var(--panel)) color-mix(in srgb, black 45%, var(--panel))
    color-mix(in srgb, black 45%, var(--panel)) color-mix(in srgb, white 65%, var(--panel)); }
.ws-sysrow { display:flex; align-items:center; gap:2px; padding:4px 0; }
.ws-navlink.sys { display:inline-block; border-radius:0; padding:5px 11px; font:500 12.5px var(--font); }
.ws-navlink.sys::first-letter { text-decoration:underline; text-underline-offset:2px; }
.ws-navlink.sys:hover, .ws-navlink.sys.on { background:var(--accent); color:var(--accent-text, #fff); }
.ws-btn.sys98 { margin-left:auto; border-radius:0; border:1px solid;
  border-color:color-mix(in srgb, white 65%, var(--panel)) color-mix(in srgb, black 45%, var(--panel))
    color-mix(in srgb, black 45%, var(--panel)) color-mix(in srgb, white 65%, var(--panel));
  box-shadow:1px 1px 0 color-mix(in srgb, black 35%, transparent); }
.ws-btn.sys98:active { box-shadow:none; transform:translate(1px, 1px); }
.h-sys98 .ws-nav { margin-left:0; }
/* side rail — icon rail at rest, labels arrive on approach */
.ws-site:has(> .ws-head.h-rail) { padding-left:58px; }
.ws-head.h-rail { position:absolute; left:0; top:0; bottom:0; width:58px; z-index:30;
  display:block; padding:0; border-bottom:none; border-right:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 82%, var(--bg));
  overflow:hidden; transition:width 200ms var(--ease-out, ease), box-shadow 200ms linear; }
.ws-head.h-rail:hover { width:212px; box-shadow:18px 0 40px -28px rgb(0 0 0 / .4); }
.ws-railin { position:sticky; top:0; height:100cqh; display:flex; flex-direction:column;
  gap:4px; padding:14px 11px; }
.ws-raillogo { display:flex; align-items:center; min-height:30px; padding:0 5px; margin-bottom:10px; }
.ws-raillogo .ws-logo b, .ws-raillink b { opacity:0; transform:translateX(-4px); white-space:nowrap;
  transition:opacity 160ms linear, transform 200ms var(--ease-out, ease); }
.h-rail:hover .ws-raillogo .ws-logo b, .h-rail:hover .ws-raillink b { opacity:1; transform:none; }
.ws-railnav { display:flex; flex-direction:column; gap:4px; }
.ws-raillink { display:flex; align-items:center; gap:10px; padding:4px; border-radius:9px;
  cursor:pointer; color:var(--dim); font:500 13px var(--font);
  transition:background 120ms linear, color 120ms linear; }
.ws-raillink i { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:8px;
  font:700 11.5px var(--font); font-style:normal; background:color-mix(in srgb, var(--ink) 6%, transparent); }
.ws-raillink:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ws-raillink.on { color:var(--accent); }
.ws-raillink.on i { background:var(--accent-fill); color:var(--accent); }
.h-rail:hover .ws-raillink.on { background:var(--accent-fill); }
.ws-railfoot { margin-top:auto; display:flex; justify-content:center; padding:8px 0 2px; opacity:.5; }
.h-rail .ws-menubtn { display:none; }

/* ================= shell-import sections ================= */
/* instrument console — cockpit's right rail, grown into a section */
.ws-congrid { display:grid; grid-template-columns:1.1fr 1.3fr 1fr; gap:14px; margin-top:34px; }
.ws-conpanel { border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); padding:16px 16px 14px;
  background:var(--panel); background-image:var(--surface-grad, none); display:flex; flex-direction:column; gap:12px;
  min-width:0; }
.ws-conhead { display:flex; align-items:baseline; gap:10px; }
.ws-conhead b { font:600 9.5px var(--mono); letter-spacing:2px; color:var(--faint); }
.ws-conval { margin-left:auto; font:600 13px var(--mono); color:var(--accent); font-style:normal; }
.ws-conlive { margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font:600 8.5px var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--faint); font-style:normal; }
.ws-conlive span { width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
.ws-gauge { display:flex; flex-direction:column; gap:6px; }
.ws-glabel { display:flex; align-items:baseline; }
.ws-glabel b { font:500 11.5px var(--font); color:var(--dim); }
.ws-gval { margin-left:auto; font:600 11px var(--mono); color:var(--ink); font-style:normal;
  font-variant-numeric:tabular-nums; }
.ws-gtrack { height:5px; border-radius:3px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
.ws-gfill { display:block; height:100%; width:100%; transform:scaleX(var(--gw, .4)); transform-origin:left;
  border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--panel)), var(--accent));
  transition:transform 900ms var(--ease-out, ease); }
.ws-gauge.b .ws-gfill { background:linear-gradient(90deg, color-mix(in srgb, var(--accent2, var(--accent)) 70%, var(--panel)), var(--accent2, var(--accent))); }
.ws-contrace { width:100%; flex:1; min-height:96px; display:block; }
.ws-ledrow { display:flex; align-items:center; gap:9px; font:500 11.5px var(--font); color:var(--dim); }
.ws-ledrow b { font-weight:500; color:var(--dim); }
.ws-ledrow > span { margin-left:auto; font:600 10px var(--mono); color:var(--faint); }
.ws-led { width:7px; height:7px; border-radius:50%; flex:none; background:var(--faint); opacity:.5; }
.ws-led.on { background:var(--accent); opacity:1;
  box-shadow:0 0 7px color-mix(in srgb, var(--accent) 65%, transparent); }
.ws-led.warn { background:var(--accent2, var(--accent)); opacity:1;
  box-shadow:0 0 7px color-mix(in srgb, var(--accent2, var(--accent)) 65%, transparent);
  transition:opacity 300ms linear; }
.ws-led.warn.dim { opacity:.35; box-shadow:none; }
/* edge glow stats — aurora's per-card lit edge + corner bloom */
.ws-edgegrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:34px; }
.ws-edgestat { --edge:var(--accent); position:relative; overflow:hidden; padding:22px 18px 18px;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); background:var(--panel);
  background-image:var(--surface-grad, none); }
.ws-edgestat:nth-child(2) { --edge:var(--accent2, var(--accent)); }
.ws-edgestat:nth-child(3) { --edge:color-mix(in srgb, var(--accent) 45%, var(--accent2, var(--accent))); }
.ws-edgestat:nth-child(4) { --edge:color-mix(in srgb, var(--accent2, var(--accent)) 55%, var(--ink)); }
.ws-edgestat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--edge); box-shadow:0 0 18px var(--edge); }
.ws-edgestat::after { content:''; position:absolute; right:-38px; top:-48px; width:130px; height:130px;
  border-radius:50%; background:radial-gradient(circle, var(--edge), transparent 70%); opacity:.14; }
.ws-edgestat b { display:block; font:800 30px var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.ws-edgestat i { display:block; margin-top:4px; font:500 11px var(--font); color:var(--dim); font-style:normal; }
/* reticle features — chamfered target cards with corner ticks */
.ws-retgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:34px; }
.ws-ret { position:relative; padding:20px 18px 16px; border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad, none);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition:border-color 140ms linear, background-color 140ms linear; }
.ws-ret:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--hair));
  background-color:color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.ws-ret .tk { position:absolute; width:9px; height:9px; border:1px solid var(--accent); opacity:.7; }
.ws-ret .tk.tr { top:7px; right:7px; border-left:none; border-bottom:none; }
.ws-ret .tk.bl { bottom:7px; left:7px; border-right:none; border-top:none; }
.ws-ret .ws-fico { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center;
  border-radius:7px; background:var(--accent-fill); color:var(--accent); }
.ws-ret .ws-fico svg { width:16px; height:16px; }
.ws-ret b { display:block; margin-top:12px; font:700 11px var(--mono); letter-spacing:1.6px;
  text-transform:uppercase; color:var(--ink); }
.ws-ret p { margin:7px 0 0; font:400 12px/1.55 var(--font); color:var(--dim); }
.ws-retmeter { display:block; margin-top:14px; height:3px; border-radius:2px;
  background:color-mix(in srgb, var(--ink) 9%, transparent); overflow:hidden; }
.ws-retmeter span { display:block; height:100%; width:var(--mw, 60%);
  background:var(--accent-grad, var(--accent)); }

/* ================= FX overlays — a pack's texture channel =================
   packs carry `fx: scanlines|crt|grain|grid|dots`; the runner stamps it as
   data-fx on the window root (realm) or <html> (exported bundles). All
   static paint — no animation, pointer-events:none, GPU-cheap. */
.na-app[data-fx]::after, :root[data-fx] body::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:80; }
:root[data-fx] body::after { position:fixed; }
.na-app[data-fx="scanlines"]::after, :root[data-fx="scanlines"] body::after {
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / .13) 2px 3px);
  mix-blend-mode:multiply; opacity:.55; }
.na-app[data-fx="crt"]::after, :root[data-fx="crt"] body::after {
  background:radial-gradient(130% 130% at 50% 0%, transparent 60%, rgb(0 0 0 / .42) 100%),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / .02) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen; opacity:.6; }
.na-app[data-fx="grain"]::after, :root[data-fx="grain"] body::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.05; }
.na-app[data-fx="grid"]::after, :root[data-fx="grid"] body::after {
  background:linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size:26px 26px; }
.na-app[data-fx="dots"]::after, :root[data-fx="dots"] body::after {
  background:radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 0.5px, transparent 0.5px);
  background-size:4px 4px; }

/* ================= wave-16: the band kit — release hero + merch ================= */
/* RELEASE DROP — the new single owns the fold; the admin app's Release
   module rewrites copy/art live through release.* content keys */
.ws-hero.v-release { position:relative; padding:64px 0 74px; overflow:hidden; }
.ws-relglow { position:absolute; inset:-20% -10%; pointer-events:none;
  background:radial-gradient(46% 60% at 72% 46%, var(--accent-glow, color-mix(in srgb, var(--accent) 16%, transparent)), transparent 70%); }
.ws-relgrid { position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.ws-relbadge { align-self:flex-start; }
.ws-relcopy { display:flex; flex-direction:column; gap:18px; min-width:0; }
.ws-relcopy .ws-h1 { font-size:clamp(40px, 7.4cqw, 84px); line-height:.98; }
.ws-relmeta i { font:500 11px var(--mono); letter-spacing:1.2px; color:var(--faint); font-style:normal; }
.ws-relart { position:relative; display:flex; justify-content:center; }
.ws-relsleeve { position:relative; width:min(380px, 36cqw); aspect-ratio:1; border-radius:10px;
  background:var(--panel) center/cover no-repeat; background-image:var(--surface-grad, none);
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  transition:transform 260ms cubic-bezier(.22,.8,.3,1); will-change:transform; overflow:hidden; }
.ws-relsheen { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, color-mix(in srgb, #fff 12%, transparent) 50%, transparent 58%); }
.ws-relshadow { position:absolute; left:12%; right:12%; bottom:-26px; height:30px; border-radius:50%;
  background:radial-gradient(50% 100% at 50% 0%, color-mix(in srgb, var(--bg, #000) 70%, #000), transparent 75%);
  filter:none; opacity:.7; }
@container site (max-width: 860px) {
  .ws-relgrid { grid-template-columns:1fr; gap:30px; }
  .ws-relart { order:-1; }
  .ws-relsleeve { width:min(300px, 62cqw); }
}
/* MERCH RACK */
.ws-merchgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:18px; margin-top:34px; }
.ws-merchcard { display:flex; flex-direction:column; gap:8px; text-decoration:none; cursor:pointer; min-width:0; }
.ws-merchimg { position:relative; aspect-ratio:1; border-radius:calc(var(--radius, 12px) * .8); overflow:hidden;
  background:var(--panel) center/cover no-repeat; background-image:var(--surface-grad, none);
  border:var(--bw, 1px) solid var(--hair); display:grid; place-items:center;
  transition:transform 200ms cubic-bezier(.22,.8,.3,1); }
.ws-merchcard:hover .ws-merchimg { transform:translateY(-4px); }
.ws-merchimg > b { font:800 42px var(--font-head, var(--font)); color:color-mix(in srgb, var(--ink) 22%, transparent); }
.ws-merchtag { position:absolute; top:10px; left:10px; padding:3px 8px; border-radius:99px;
  background:var(--accent); color:var(--accent-text, #04121a);
  font:800 8.5px var(--mono); letter-spacing:1.4px; font-style:normal; }
.ws-merchtag.solo { position:static; align-self:flex-start; display:inline-block; }
.ws-merchcard > b { font:600 13.5px var(--font); color:var(--ink); }
.ws-merchcard > em { font:600 12px var(--mono); color:var(--accent); font-style:normal; }
/* PRODUCT PAGE */
.ws-merch.v-detail .ws-in { max-width:960px; }
.ws-merchback { display:inline-block; margin-bottom:18px; }
.ws-mdgrid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.ws-mdimg { aspect-ratio:1; border-radius:var(--radius, 12px); overflow:hidden;
  background:var(--panel) center/cover no-repeat; background-image:var(--surface-grad, none);
  border:var(--bw, 1px) solid var(--hair); display:grid; place-items:center; }
.ws-mdimg > b { font:800 64px var(--font-head, var(--font)); color:color-mix(in srgb, var(--ink) 22%, transparent); }
.ws-mdinfo { display:flex; flex-direction:column; gap:14px; min-width:0; }
.ws-mdprice { font:700 19px var(--mono); color:var(--accent); font-style:normal; }
.ws-mdopt { display:flex; align-items:center; gap:10px; font:500 12px var(--font); color:var(--dim); }
.ws-mdopt select { padding:8px 11px; border-radius:8px; border:var(--bw, 1px) solid var(--hair);
  background:var(--panel, #15171c); color:var(--ink); font:500 12.5px var(--font); outline:none; }
.ws-mdrow { display:flex; align-items:center; gap:14px; }
.ws-mdqty { display:inline-flex; align-items:center; gap:2px; border:var(--bw, 1px) solid var(--hair);
  border-radius:99px; padding:4px 6px; }
.ws-mdqty button { width:26px; height:26px; border:none; border-radius:50%; background:transparent;
  color:var(--ink); font-size:15px; cursor:pointer; }
.ws-mdqty button:hover { background:var(--accent-fill); }
.ws-mdqty b { min-width:22px; text-align:center; font:600 13px var(--mono); color:var(--ink); }
.ws-mdbag a { font-weight:600; }
@container site (max-width: 700px) { .ws-mdgrid { grid-template-columns:1fr; gap:22px; } }

/* ── Select✱ (site builder) — element-level editing affordances ── */
.wr-hit.plus { pointer-events:none; border-color:transparent; background:none; }
.wr-hit.plus span { pointer-events:auto; }
.ws-site.sbxplus :is(.ws-h1, .ws-h2, .ws-sub, .ws-kick, .ws-badge, .ws-slabline, p, blockquote, li, h3, h4):hover {
  outline:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:3px; cursor:text; }
.ws-site.sbxplus .ws-btn:hover { outline:2px dashed var(--accent); outline-offset:4px; cursor:pointer; }
.sbx-editing { outline:2px solid var(--accent) !important; outline-offset:4px;
  background:color-mix(in srgb, var(--accent) 8%, transparent); cursor:text; }

/* ============================================================================
   SB_04 hero ports - batch 2 (51-100). Each porter replaces its own unique
   CSSSLOT marker line below with its .v-<slug> block. Unique markers mean
   no shared anchor and no parallel-write collisions.
   ============================================================================ */
/* real-estate — ported from SB_04 drafts/real-estate-hero (a full-bleed property-search opener:
   headline + subtext over a cover photo, a search bar and an agency-stats rail, centered on the
   fold). Origin --reh-* vars map to theme tokens: bg->--bg, heading->--ink, body->--dim/--faint,
   accent->--accent, search surface->--panel, dividers/border->--hair, font->--font. The origin's
   full-viewport dark photo + rgba overlay become a theme-portable cover: an optional img prop paints
   the bg layer (a diagonal-hatch + accent-glow placeholder when unset — the ws-hpanel.ph idiom) under
   a veil that mixes toward --bg so --ink copy stays legible in any theme. The origin's FAKE search
   (dead input + two selects + button, and its backdrop blur) becomes a REAL role="search" form: native
   selects and a submit that composes an announced (aria-live) query summary counting the first stat.
   Backgrounds switch instantly, entrance motion belongs to the reveal system, reduced-motion honored.
   Container queries only. */
.ws-hero.v-real-estate { position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(520px, 88cqh, 900px); padding-block:clamp(80px, 12cqh, 130px); overflow:hidden;
  isolation:isolate; background-color:var(--bg); }
.v-real-estate .reh-bg { position:absolute; inset:0; z-index:0; background-color:var(--panel);
  background-size:cover; background-position:center; }
.v-real-estate .reh-bg.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%);
  background-size:64px 64px; background-position:0 0, 0 32px, 32px -32px, 32px 0; }
.v-real-estate .reh-bg.ph::after { content:''; position:absolute; inset:0;
  background:
    radial-gradient(92% 66% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 66%),
    radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--accent2, var(--accent)) 10%, transparent), transparent 72%); }
.v-real-estate .reh-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 60%, transparent), color-mix(in srgb, var(--bg) 82%, transparent)),
    radial-gradient(120% 92% at 50% 42%, transparent 30%, color-mix(in srgb, var(--bg) 55%, transparent) 100%); }
.v-real-estate .reh-in { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  gap:clamp(28px, 4cqw, 44px); }
.v-real-estate .reh-copy { display:flex; flex-direction:column; align-items:center; }
.v-real-estate .reh-h { max-width:16ch; letter-spacing:-0.03em; text-wrap:balance; }
.v-real-estate .reh-sub { margin-top:clamp(14px, 1.8cqw, 18px); max-width:52ch; }
/* search bar — the origin's fake row, now a real role="search" form (no backdrop blur) */
.v-real-estate .reh-search { width:100%; max-width:820px; display:flex; align-items:stretch; text-align:left;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); background:var(--panel);
  box-shadow:var(--elev, 0 0 #0000); }
.v-real-estate .reh-cell { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;
  gap:5px; padding:13px 18px; border-right:var(--bw, 1px) solid var(--hair); }
.v-real-estate .reh-label { font:600 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.v-real-estate .reh-input, .v-real-estate .reh-select { width:100%; border:0; background:none; outline:none;
  color:var(--ink); font:500 clamp(13px, 1.4cqw, 14px) var(--font); padding:0; }
.v-real-estate .reh-input::placeholder { color:var(--faint); }
.v-real-estate .reh-selwrap { position:relative; display:flex; align-items:center; }
.v-real-estate .reh-select { appearance:none; -webkit-appearance:none; padding-right:20px; cursor:pointer; }
.v-real-estate .reh-select option { background:var(--panel); color:var(--ink); }
.v-real-estate .reh-chev { position:absolute; right:0; width:14px; height:14px; color:var(--faint); pointer-events:none; }
.v-real-estate .reh-input:focus-visible, .v-real-estate .reh-select:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.v-real-estate .reh-go { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 clamp(20px, 2.4cqw, 26px); border:0; cursor:pointer; white-space:nowrap;
  border-radius:0 calc(var(--radius, 12px) - 1px) calc(var(--radius, 12px) - 1px) 0;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #04121a);
  font:600 clamp(13px, 1.4cqw, 14px) var(--font); transition:transform 140ms var(--ease-pop, ease-out); }
.v-real-estate .reh-go svg { width:15px; height:15px; }
.v-real-estate .reh-go:hover { transform:translateY(-1px); }
.v-real-estate .reh-go:active { transform:translateY(0); }
.v-real-estate .reh-go:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-real-estate .reh-status { min-height:1.3em; margin:0; text-align:center; letter-spacing:.01em;
  font:500 clamp(12.5px, 1.4cqw, 13.5px)/1.5 var(--font); color:var(--faint); transition:color 160ms linear; }
.v-real-estate .reh-status.on { color:var(--accent); }
/* stats rail — reuses ws-herostats/ws-hstat (built-in dividers) */
.v-real-estate .reh-stats { margin-top:0; flex-wrap:wrap; }
@container site (max-width: 860px) {
  .v-real-estate .reh-search { flex-direction:column; align-items:stretch; max-width:460px; }
  .v-real-estate .reh-cell { border-right:0; border-bottom:var(--bw, 1px) solid var(--hair); }
  .v-real-estate .reh-go { padding:15px 24px;
    border-radius:0 0 calc(var(--radius, 12px) - 1px) calc(var(--radius, 12px) - 1px); }
}
@container site (max-width: 560px) {
  .ws-hero.v-real-estate { min-height:clamp(480px, 84cqh, 680px); padding-block:clamp(64px, 12cqh, 92px); }
  .v-real-estate .reh-stats { row-gap:18px; }
  .v-real-estate .reh-stats .ws-hstat { padding:0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-real-estate .reh-go { transition:none; }
}
/* ===== Hero / Property (v-property) — ported SB_04 drafts/property-hero.
   A real-estate listing opener: a breadcrumb trail, a full-bleed hero photo and a
   floating detail card (address · accent price · a bed/bath/car/land stat row · actions).
   Origin --prp-* vars map to theme tokens: bg->--bg, card->--panel, heading->--ink,
   body->--dim/--faint, borders/dividers->--hair, accent->--accent, font->--font. The origin
   photo becomes the ws-hpanel .ph placeholder pattern until an image URL is set; a bottom scrim
   lets the card float over either. The two DEAD buttons are made real in mount(): Save is a
   genuine aria-pressed toggle (the heart fills) and Book-a-Tour writes a live confirmation into
   an aria-live status line — nothing posts. Full-bleed, so the base .ws-hero padding is zeroed.
   Baked entrance keyframes dropped (anims.js owns entrances); only hover/press transform + color
   move, and the selected background flips instantly. Container queries only, no blur. */
.ws-hero.v-property { padding:0; }
.v-property .prp-crumbs { padding:clamp(16px, 2.2cqw, 22px) clamp(20px, 4cqw, 40px) 0; }
.v-property .prp-crumb-list { display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.v-property .prp-crumb { font:500 clamp(12px, 1.3cqw, 13px) var(--font); color:var(--dim); }
.v-property .prp-crumb--cur { color:var(--ink); }
.v-property .prp-crumb-x { color:var(--dim); }
.v-property .prp-crumb-link { color:var(--dim); text-decoration:none; transition:color 160ms linear; }
.v-property .prp-crumb-link:hover { color:var(--ink); }
.v-property .prp-crumb-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.v-property .prp-crumb-sep { color:var(--faint); font-size:clamp(11px, 1.2cqw, 12px); }
/* full-bleed banner — real photo when set, themed hatch placeholder otherwise */
.v-property .prp-media { position:relative; width:100%; height:clamp(260px, 40cqw, 440px);
  margin-top:clamp(14px, 2cqw, 20px); background-color:var(--panel); background-size:cover; background-position:center; }
.v-property .prp-media::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 42%, color-mix(in srgb, var(--bg) 80%, transparent) 100%); }
.v-property .prp-media.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, transparent 25%);
  background-size:60px 60px; background-position:0 0, 0 30px, 30px -30px, 30px 0; }
.v-property .prp-media.ph::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(64% 72% at 50% 28%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); }
/* floating detail card overlaps the banner */
.v-property .prp-cardwrap { padding:0 clamp(20px, 4cqw, 40px) clamp(40px, 6cqw, 60px); }
.v-property .prp-card { position:relative; width:min(920px, 100%); margin:-72px auto 0; display:flex; flex-direction:column;
  gap:clamp(20px, 2.6cqw, 24px); padding:clamp(22px, 3cqw, 32px); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); background:var(--panel); background-image:var(--surface-grad, none);
  box-shadow:var(--elev, 0 0 #0000); }
.v-property .prp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(16px, 2.4cqw, 24px); }
.v-property .prp-identity { display:flex; flex-direction:column; gap:7px; min-width:0; }
.v-property .prp-name { margin:0; font:700 clamp(22px, 3cqw, 32px)/1.1 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.025em; text-wrap:balance; }
.v-property .prp-loc { display:inline-flex; align-items:center; gap:6px; margin:0;
  font:400 clamp(13px, 1.4cqw, 14px) var(--font); color:var(--dim); }
.v-property .prp-loc svg { width:14px; height:14px; flex-shrink:0; color:var(--accent); }
.v-property .prp-price { flex-shrink:0; font:700 clamp(22px, 3cqw, 32px) var(--font-head, var(--font));
  color:var(--accent); letter-spacing:-0.02em; white-space:nowrap; }
/* stat row — bed/bath/car/land, hairline-boxed with vertical dividers */
.v-property .prp-stats { display:flex; align-items:stretch; border-top:var(--bw, 1px) solid var(--hair);
  border-bottom:var(--bw, 1px) solid var(--hair); padding:clamp(14px, 1.8cqw, 18px) 0; }
.v-property .prp-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:0 clamp(10px, 1.6cqw, 16px); text-align:center; min-width:0; }
.v-property .prp-stat + .prp-stat { border-left:var(--bw, 1px) solid var(--hair); }
.v-property .prp-stat-v { font:700 clamp(17px, 2cqw, 21px) var(--font); color:var(--ink); }
.v-property .prp-stat-l { font:600 clamp(9.5px, 1cqw, 10.5px) var(--mono); letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint); }
/* actions — real Book-a-Tour + Save toggle */
.v-property .prp-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.v-property .prp-save { display:inline-flex; align-items:center; gap:8px; appearance:none; -webkit-appearance:none;
  margin:0; padding:12px 20px; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .75);
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--dim); cursor:pointer; font:600 13.5px var(--font);
  transition:color 160ms linear, border-color 160ms linear, transform 140ms var(--ease-pop, ease-out); }
.v-property .prp-save:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 40%, transparent); transform:translateY(-1px); }
.v-property .prp-save:active { transform:translateY(0); }
.v-property .prp-save:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-property .prp-save .prp-heart { width:16px; height:16px; flex-shrink:0; }
.v-property .prp-save.is-saved { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:var(--accent-fill); }
.v-property .prp-save.is-saved .prp-heart path { fill:currentColor; }
.v-property .prp-note { min-height:1.2em; margin:0; font:500 12.5px/1.5 var(--font); color:var(--faint); letter-spacing:.01em; }
.v-property .prp-note.ok { color:var(--accent); }
@container site (max-width: 560px) {
  .v-property .prp-media { height:clamp(200px, 46cqw, 280px); }
  .v-property .prp-card { margin-top:-48px; }
  .v-property .prp-head { flex-direction:column; align-items:flex-start; gap:10px; }
  .v-property .prp-price { font-size:clamp(24px, 8cqw, 30px); }
  .v-property .prp-stats { display:grid; grid-template-columns:1fr 1fr; padding:6px 0; }
  .v-property .prp-stat { padding:12px; }
  .v-property .prp-stat + .prp-stat { border-left:none; }
  .v-property .prp-stat:nth-child(even) { border-left:var(--bw, 1px) solid var(--hair); }
  .v-property .prp-actions { flex-direction:column; align-items:stretch; }
  .v-property .prp-actions .ws-btn, .v-property .prp-save { justify-content:center; }
}
/* rental — ported from SB_04 drafts/rental-hero (short-stay booking opener: a headline + search card
   beside a five-tile property collage, closed by a trust bar). The origin's DEAD search bar becomes
   REAL in mount(): two native <input type=date> pickers (check-out clamped to check-in), a working guest
   stepper (buttons disable at the 1–16 bounds, the value is aria-live) and a Search that writes a
   client-side trip summary into an aria-live status line — nothing posts. Origin --rnh-* vars map to
   tokens: bg->--bg, card/tiles->--panel/--panel-2, heading->--ink, body->--dim/--faint, accent->--accent
   (text-on-accent->--accent-text), borders/dividers->--hair, font->--font. Collage tiles wear the ws-hpanel
   ph placeholder look until an images[] URL fills them. Baked entrance fades are dropped (anims.js owns
   entrances); only hover/focus + a decorative tile lift move, and hover/focus backgrounds flip instantly
   (never transitioned). Container queries only, no blur; reduced-motion drops the interaction transitions. */
.v-rental .rnt-main { align-items:center; }
.v-rental .rnt-copy { display:flex; flex-direction:column; justify-content:center; }
.v-rental .rnt-h { max-width:16ch; line-height:1.08; letter-spacing:-0.03em; text-wrap:balance; }
.v-rental .rnt-sub { max-width:46ch; }
/* search card — the origin's static bar, now a real search affordance */
.v-rental .rnt-form { margin-top:clamp(24px, 3.2cqw, 34px); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); background:var(--panel); background-image:var(--surface-grad, none);
  overflow:hidden; }
.v-rental .rnt-form, .v-rental .rnt-form * { box-sizing:border-box; }
.v-rental .rnt-dates { display:flex; align-items:stretch; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-rental .rnt-date { position:relative; flex:1; display:flex; flex-direction:column; gap:4px;
  padding:14px 18px; cursor:pointer; }
.v-rental .rnt-date:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-rental .rnt-date:focus-within { background:color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.v-rental .rnt-ddiv { width:1px; align-self:stretch; flex-shrink:0; background:var(--hair); }
.v-rental .rnt-flabel { font:600 10.5px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.v-rental .rnt-fvalue { font:500 clamp(13px, 1.4cqw, 14.5px) var(--font); color:var(--ink); }
.v-rental .rnt-fvalue[data-empty] { color:var(--faint); font-weight:400; }
.v-rental .rnt-dinput { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0;
  opacity:0; cursor:pointer; font:inherit; color-scheme:light dark; }
/* guests row — a real stepper */
.v-rental .rnt-guests { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 18px; border-bottom:var(--bw, 1px) solid var(--hair); }
.v-rental .rnt-counter { display:flex; align-items:center; gap:16px; }
.v-rental .rnt-cbtn { width:30px; height:30px; border-radius:50%; border:var(--bw, 1px) solid var(--hair);
  background:transparent; color:var(--ink); font:400 18px/1 var(--font); cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  transition:color 160ms linear, border-color 160ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-rental .rnt-cbtn:hover:not(:disabled) { border-color:color-mix(in srgb, var(--ink) 35%, transparent);
  background:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-rental .rnt-cbtn:active:not(:disabled) { transform:scale(0.92); }
.v-rental .rnt-cbtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-rental .rnt-cbtn:disabled { opacity:.4; cursor:not-allowed; }
.v-rental .rnt-cval { min-width:20px; text-align:center; font:600 15px var(--font); color:var(--ink);
  font-variant-numeric:tabular-nums; }
/* search button — full-width accent bar */
.v-rental .rnt-search { display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:14px 20px; border:0; background:var(--accent); color:var(--accent-text, #fff);
  font:600 clamp(13px, 1.5cqw, 14px) var(--font); letter-spacing:.01em; cursor:pointer;
  transition:transform 160ms var(--ease-pop, ease-out); }
.v-rental .rnt-search:hover { background:color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.v-rental .rnt-search:active { transform:translateY(1px); }
.v-rental .rnt-search:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-rental .rnt-sico { width:15px; height:15px; flex-shrink:0; }
.v-rental .rnt-status { min-height:1.1em; margin:12px 2px 0; padding:0 4px; font:500 12px/1.5 var(--font);
  color:var(--faint); letter-spacing:.01em; transition:color 160ms linear; }
.v-rental .rnt-status.on { color:var(--accent); }
/* property collage */
.v-rental .rnt-visual { align-self:center; }
.v-rental .rnt-collage { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, 1fr);
  gap:6px; min-height:clamp(340px, 42cqw, 460px); padding:6px; border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 14px); background:var(--panel); overflow:hidden; }
.v-rental .rnt-cell { position:relative; border-radius:8px; overflow:hidden;
  background-color:var(--panel-2, var(--panel)); background-size:cover; background-position:center;
  transition:transform 300ms var(--ease-pop, ease-out); }
.v-rental .rnt-cell--tall { grid-row:span 2; }
.v-rental .rnt-cell:hover { transform:scale(1.03); z-index:1; }
.v-rental .rnt-cell.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%);
  background-size:44px 44px; background-position:0 0, 0 22px, 22px -22px, 22px 0; }
.v-rental .rnt-cell.ph::after { content:''; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%); }
/* trust bar */
.v-rental .rnt-trust { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
  margin-top:clamp(34px, 4.5cqw, 56px); }
.v-rental .rnt-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border:var(--bw, 1px) solid var(--hair); border-radius:100px; font:500 clamp(12px, 1.3cqw, 13px) var(--font);
  color:var(--dim); letter-spacing:.01em; }
.v-rental .rnt-chip-i { display:inline-flex; width:14px; height:14px; color:var(--accent); flex-shrink:0; }
.v-rental .rnt-chip-i svg { width:14px; height:14px; }
@container site (max-width: 860px) {
  .v-rental .rnt-visual { order:-1; }
  .v-rental .rnt-collage { min-height:300px; }
}
@container site (max-width: 560px) {
  .v-rental .rnt-collage { min-height:240px; }
  .v-rental .rnt-trust { gap:8px; }
  .v-rental .rnt-chip { padding:7px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-rental .rnt-cell, .v-rental .rnt-cbtn, .v-rental .rnt-search { transition:none; }
}
/* health — ported from SB_04 drafts/health-hero (a telehealth opener: headline + subtext and a
   quick-booking widget beside a doctor photo, over a three-up platform stats bar). Origin --hlh-*
   vars map to theme tokens: bg->--bg, heading->--ink, body->--dim/--faint, accent->--accent,
   border/divider->--hair, widget/input surface->--panel, font->--font. The widget reuses the shared
   .ws-bkform / .ws-bkfield / .ws-bkinput family (themed select arrow + calendar icon, no native
   blue); the origin's dead "Book Now" button becomes a REAL client-side request that echoes the
   chosen specialty + date through an aria-live status line (the booking-form / clinic idiom). The
   photo is the ws-hpanel placeholder pattern with an optional img prop; the stats reuse the ws-hstat
   atom on a full-width grid. Baked fade-up/fade-in entrance keyframes are dropped (anims.js owns
   entrances); only focus/hover move. Split narrow-stacks via the global 860px rule
   (.ws-hero .ws-in.split); container queries only. */
.v-health .hlh-main { align-items:stretch; }
.v-health .hlh-copy { display:flex; flex-direction:column; justify-content:center; }
.v-health .hlh-h { max-width:14ch; line-height:1.05; letter-spacing:-0.03em; text-wrap:balance; }
.v-health .ws-sub { max-width:42ch; }
.v-health .hlh-widget { max-width:420px; margin-top:clamp(22px, 2.8cqw, 30px); padding:clamp(18px, 2cqw, 24px);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); background:var(--panel);
  background-image:var(--surface-grad, none); gap:12px; }
.v-health .hlh-widget .ws-bkinput:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.v-health .hlh-book { width:100%; justify-content:center; margin-top:4px; border:none; }
.v-health .hlh-note { margin:2px 0 0; min-height:1.2em; font:400 12.5px/1.5 var(--font); color:var(--faint);
  letter-spacing:.01em; }
.v-health .hlh-note.ok { color:var(--accent); font-weight:500; padding:10px 13px;
  border-radius:calc(var(--radius, 12px) * .7); background:var(--accent-fill); }
.v-health .hlh-note.err { color:#e0a341; font-weight:500; }
.v-health .hlh-visual { align-self:stretch; min-height:clamp(340px, 44cqw, 520px); }
/* stats bar — the origin's three-up platform strip, reusing the ws-hstat atom on a full-width grid */
.v-health .hlh-statrow { margin-top:clamp(30px, 4cqw, 52px); padding-top:clamp(22px, 2.8cqw, 30px);
  border-top:var(--bw, 1px) solid var(--hair); }
.v-health .hlh-stats { display:grid; grid-template-columns:repeat(3, 1fr); }
.v-health .hlh-stats .ws-hstat { align-items:center; text-align:center; gap:7px; padding:clamp(6px, 1.4cqw, 14px) 12px; }
.v-health .hlh-stats .ws-hstat b { font-size:clamp(20px, 3.2cqw, 30px); }
.v-health .hlh-stats .ws-hstat i { text-transform:uppercase; letter-spacing:.06em; }
@container site (max-width: 860px) {
  .v-health .hlh-visual { min-height:clamp(240px, 52cqw, 340px); }
}
@container site (max-width: 560px) {
  .v-health .hlh-widget { max-width:100%; }
  .v-health .hlh-stats .ws-hstat { padding:2px 8px; }
  .v-health .hlh-stats .ws-hstat b { font-size:clamp(17px, 5.2cqw, 22px); }
}
/* wellness — ported from SB_04 drafts/wellness-hero (a full-bleed, centered studio opener: an italic
   light headline + subheading over an atmospheric photo, a soft CTA and a row of "session type" chips).
   The origin's full-viewport image backdrop becomes the cinematic full-bleed idiom rather than a bordered
   ws-hpanel: a CSS atmospheric wash (accent radial glows over --bg) by default, or an optional cover
   image behind a token-portable readability veil (the origin's black gradient overlay mapped to color-mix
   toward --bg). The origin's STATIC session chips are made REAL in mount(): a single-select radiogroup
   (roving tabindex, Arrow/Home/End, Enter/Space, aria-checked) that reads each session's detail into an
   aria-live line below. Origin --wlh-* vars map to tokens: bg->--bg, heading->--ink, body->--dim/--faint,
   accent->--accent (+ --accent2 for the lower glow), chip border->an --ink tint, font->--font (+
   --font-head for the display headline). Baked fade-up entrances are dropped (anims.js owns entrances);
   the origin's banned chip backdrop-filter blur is dropped. Only a slow ambient "breath" glow moves at
   rest (opacity/scale, guarded by reduced-motion); chip hover/selected backgrounds switch instantly.
   Container queries only. */
.ws-hero.v-wellness { position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(460px, 82cqh, 800px); padding-block:clamp(72px, 12cqh, 128px); overflow:hidden;
  isolation:isolate; text-align:center; background-color:var(--bg); background-size:cover; background-position:center; }
.v-wellness .wel-atmos { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(92% 72% at 50% 2%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(72% 62% at 50% 104%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent), transparent 66%); }
.v-wellness .wel-atmos::after { content:''; position:absolute; inset:0;
  background:radial-gradient(44% 40% at 50% 42%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  transform-origin:50% 42%; animation:welBreathe 9s ease-in-out infinite; }
.v-wellness.wel-img .wel-atmos { background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, transparent),
      color-mix(in srgb, var(--bg) 26%, transparent) 44%, color-mix(in srgb, var(--bg) 82%, transparent)),
    radial-gradient(100% 82% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); }
.v-wellness.wel-img .wel-atmos::after { display:none; }
.v-wellness .wel-in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.v-wellness .wel-kick { margin-bottom:clamp(14px, 1.8cqw, 18px); }
.v-wellness .wel-h { font-style:italic; font-weight:300; font-size:clamp(38px, 8cqw, 82px); line-height:1.08;
  letter-spacing:-0.02em; max-width:16ch; margin-inline:auto; text-wrap:balance; color:var(--ink); }
.v-wellness .wel-sub { margin-top:clamp(16px, 2cqw, 22px); max-width:46ch; }
.v-wellness .wel-actions { margin-top:clamp(24px, 3cqw, 32px); }
.v-wellness .wel-sessions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:clamp(26px, 3.4cqw, 38px); }
.v-wellness .wel-chip { font:500 clamp(12px, 1.3cqw, 13px) var(--font); letter-spacing:.04em; color:var(--dim);
  white-space:nowrap; padding:8px 16px; border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius:100px; background:transparent; cursor:pointer;
  transition:color 160ms linear, border-color 160ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-wellness .wel-chip:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 42%, transparent); }
.v-wellness .wel-chip:active { transform:scale(0.97); }
.v-wellness .wel-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-wellness .wel-chip.on { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:var(--accent-fill); }
.v-wellness .wel-detail { min-height:1.25em; margin-top:clamp(16px, 2cqw, 20px);
  font:500 clamp(12.5px, 1.4cqw, 13.5px)/1.5 var(--font); letter-spacing:.01em; color:var(--faint); transition:color 160ms linear; }
.v-wellness .wel-detail.on { color:var(--accent); }
@keyframes welBreathe { 0%, 100% { opacity:.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
@container site (max-width: 860px) {
  .v-wellness .wel-h { font-size:clamp(34px, 9.5cqw, 62px); }
}
@container site (max-width: 560px) {
  .ws-hero.v-wellness { min-height:clamp(420px, 74cqh, 620px); padding-block:clamp(56px, 12cqh, 92px); }
  .v-wellness .wel-sub { max-width:100%; }
  .v-wellness .wel-sessions { gap:8px; }
  .v-wellness .wel-chip { padding:7px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-wellness .wel-atmos::after { animation:none; }
}
/* finance — ported from SB_04 drafts/finance-hero (a fintech split opener: a "your money, smarter"
   headline, subcopy, a REAL email signup and a row of trust chips beside a premium bank-card visual).
   Origin --fnh-* vars map to theme tokens: page bg -> --bg (ws-hero owns it), heading -> --ink, body ->
   --dim/--faint, accent -> --accent, input surface -> an --ink tint, borders -> --hair. The card is a
   deliberately dark, accent-tinted artifact — a physical object, the way cinematic keeps a dark mood
   theme-portably — built from color-mix(var(--accent) … black) so it re-hues with the theme accent while
   staying a rich card; its white-on-dark micro-text is color-mix(white … transparent) and the EMV chip
   keeps a gold material literal (like the ok-green / warn-amber semantics). The origin's dead email form
   (onsubmit=return false) becomes a real, validated signup that confirms via aria-live in mount(). Baked
   holographic/entrance keyframes are dropped; one soft sheen sweeps at rest (transform-only, hidden under
   reduced-motion). Split narrow-stacks on the global 860px rule; form + chips reflow via container queries. */
.v-finance .fin-copy { display:flex; flex-direction:column; justify-content:center; }
.v-finance .fin-h { max-width:14ch; line-height:1.08; letter-spacing:-0.02em; text-wrap:balance; }
.v-finance .fin-sub { margin-top:clamp(14px, 1.8cqw, 20px); max-width:44ch; }
.v-finance .fin-form { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px, 3cqw, 32px); width:min(460px, 100%); }
.v-finance .fin-input { flex:1; min-width:190px; padding:12px 16px; border-radius:10px;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 4%, transparent);
  color:var(--ink); font:400 clamp(13px, 1.4cqw, 14.5px) var(--font); outline:none;
  transition:border-color 160ms linear; }
.v-finance .fin-input::placeholder { color:var(--faint); }
.v-finance .fin-input:focus-visible { border-color:color-mix(in srgb, var(--accent) 60%, var(--hair)); }
.v-finance .fin-input[aria-invalid="true"] { border-color:#e5484d; }
.v-finance .fin-btn { flex:none; padding:12px 24px; border:none; border-radius:10px; cursor:pointer;
  white-space:nowrap; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); font:600 clamp(13px, 1.4cqw, 14.5px) var(--font);
  transition:opacity 140ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-finance .fin-btn:hover { opacity:.9; }
.v-finance .fin-btn:active { transform:translateY(1px); }
.v-finance .fin-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-finance .fin-note { min-height:1.25em; margin-top:12px; font:500 12.5px var(--font); color:var(--dim); }
.v-finance .fin-note.fin-ok { color:var(--accent); }
.v-finance .fin-note.fin-err { color:#e5484d; }
.v-finance .fin-trust { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:clamp(22px, 3cqw, 30px); }
.v-finance .fin-chip { font:500 11.5px var(--font); letter-spacing:.01em; color:var(--dim);
  padding:5px 12px; border-radius:100px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 3%, transparent); }
.v-finance .fin-cdot { width:3px; height:3px; border-radius:50%; background:var(--faint); opacity:.55; flex:none; }
/* the bank card — a deliberately dark, accent-tinted artifact (re-hues with --accent) */
.v-finance .fin-stage { display:flex; align-items:center; justify-content:center; min-width:0; }
.v-finance .fin-card { position:relative; width:min(400px, 100%); aspect-ratio:1.6 / 1; border-radius:16px;
  padding:clamp(20px, 3cqw, 30px); display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; isolation:isolate; color:color-mix(in srgb, white 90%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, black), color-mix(in srgb, var(--accent) 11%, black));
  box-shadow:0 26px 52px color-mix(in srgb, var(--accent) 16%, transparent),
    0 12px 26px color-mix(in srgb, black 34%, transparent),
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent); }
.v-finance .fin-glow { position:absolute; top:-46%; right:-24%; width:72%; height:128%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 66%); }
.v-finance .fin-sheen { position:absolute; top:0; left:0; z-index:1; width:58%; height:100%; pointer-events:none;
  background:linear-gradient(105deg, transparent, color-mix(in srgb, white 15%, transparent), transparent);
  transform:translateX(-170%); animation:finSheen 6s ease-in-out infinite; }
.v-finance .fin-card-top, .v-finance .fin-num, .v-finance .fin-card-bot { position:relative; z-index:2; }
.v-finance .fin-card-top { display:flex; align-items:flex-start; justify-content:space-between; }
.v-finance .fin-brand { font:700 clamp(14px, 1.6cqw, 16px) var(--font-head, var(--font)); letter-spacing:.04em;
  color:color-mix(in srgb, white 92%, transparent); }
.v-finance .fin-chipx { position:relative; width:38px; height:29px; border-radius:5px; flex:none; overflow:hidden;
  background:linear-gradient(135deg, #c8a84b, #f0d080, #a87c2a); }
.v-finance .fin-chipx::before { content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, transparent 47%, color-mix(in srgb, black 42%, transparent) 47% 53%, transparent 53%),
    linear-gradient(to bottom, transparent 47%, color-mix(in srgb, black 42%, transparent) 47% 53%, transparent 53%); }
.v-finance .fin-num { display:flex; align-items:center; gap:clamp(9px, 1.5cqw, 15px);
  font:500 clamp(15px, 2cqw, 19px) var(--mono); letter-spacing:.14em;
  color:color-mix(in srgb, white 88%, transparent); }
.v-finance .fin-grp { white-space:nowrap; }
.v-finance .fin-card-bot { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.v-finance .fin-meta { display:flex; flex-direction:column; gap:3px; min-width:0; }
.v-finance .fin-mlabel { font:600 8.5px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, white 50%, transparent); }
.v-finance .fin-mval { font:500 clamp(11px, 1.4cqw, 13px) var(--font); letter-spacing:.04em; white-space:nowrap;
  color:color-mix(in srgb, white 88%, transparent); }
.v-finance .fin-net { font:800 clamp(15px, 1.9cqw, 19px) var(--font); font-style:italic; letter-spacing:.02em;
  color:color-mix(in srgb, white 92%, transparent); }
@keyframes finSheen { 0% { transform:translateX(-170%); } 55%, 100% { transform:translateX(340%); } }
@container site (max-width: 560px) {
  .v-finance .fin-form { flex-direction:column; align-items:stretch; }
  .v-finance .fin-btn { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .v-finance .fin-sheen { animation:none; opacity:0; }
  .v-finance .fin-btn { transition:opacity 140ms linear; }
}
/* food — ported from SB_04 drafts/food-hero (a two-column food-delivery opener: an
   "order from your favourites" headline + subtext, an address search bar, a cuisine
   chip row and a delivery-stats rail on the left; a fan of three stacked, rotated
   restaurant cards with name overlays on the right). Origin --fdh-* vars map to theme
   tokens: --fdh-bg -> --bg (section inherits), heading -> --ink, body -> --dim/--faint,
   --fdh-accent/-dark -> --accent (+ color-mix), borders -> --hair, chip tint -> --accent-fill.
   Reuses ws-in.split / ws-hcopy / ws-h1 + gradLast / ws-sub / ws-herostats + ws-hstat and
   the ws-hpanel.ph checker for card placeholders. The origin's DEAD search form and static
   chip row become REAL (mount): the search validates + reports through an aria-live status,
   and the chips are a real single-select cuisine radiogroup (roving tabindex, Arrow/Home/End,
   Enter/Space, aria-checked, click-to-clear) that dims non-matching cards — a graceful no-op
   when nothing matches. Entrance motion is dropped (the reveal system owns it); only a hover
   lift + color transition move, selection/dim backgrounds flip instantly, no blur. Container
   queries only (860/560); reduced-motion drops the hover lift. */
.v-food .fdh-main { align-items:center; }
.v-food .fdh-copy { display:flex; flex-direction:column; align-items:flex-start; }
.v-food .fdh-h { max-width:15ch; line-height:1.08; letter-spacing:-0.02em; text-wrap:balance; }
.v-food .fdh-sub { margin-top:clamp(14px, 1.8cqw, 18px); max-width:42ch; }
/* address search — the origin's dead form, now a real submit with aria-live feedback */
.v-food .fdh-search { display:flex; align-items:stretch; width:100%; max-width:440px;
  margin-top:clamp(22px, 3cqw, 30px); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .7);
  overflow:hidden; background:color-mix(in srgb, var(--ink) 4%, transparent); transition:border-color 160ms linear; }
.v-food .fdh-search:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.v-food .fdh-search-wrap { flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:0 14px; }
.v-food .fdh-sico { width:16px; height:16px; flex-shrink:0; color:var(--faint); }
.v-food .fdh-input { flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--ink);
  font:400 clamp(13px, 1.4cqw, 14px) var(--font); padding:13px 0; }
.v-food .fdh-input::placeholder { color:var(--faint); }
.v-food .fdh-go { flex-shrink:0; margin:0; border:0; cursor:pointer; padding:0 clamp(16px, 2.2cqw, 22px);
  background:var(--accent); color:var(--accent-text, #04121a); white-space:nowrap;
  font:600 clamp(12.5px, 1.4cqw, 13.5px) var(--font); }
.v-food .fdh-go:hover { background:color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.v-food .fdh-go:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-food .fdh-status { min-height:1.2em; margin-top:11px; letter-spacing:.01em;
  font:500 clamp(12px, 1.3cqw, 13px)/1.5 var(--font); color:var(--faint); transition:color 160ms linear; }
.v-food .fdh-status.is-ok { color:var(--accent); }
.v-food .fdh-status.is-err { color:#e0654f; }
/* cuisine chips — the origin's static tag row, now a real single-select filter */
.v-food .fdh-chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(18px, 2.4cqw, 24px); }
.v-food .fdh-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:100px;
  border:var(--bw, 1px) solid var(--hair); background:transparent; color:var(--dim); cursor:pointer; white-space:nowrap;
  font:500 clamp(12px, 1.3cqw, 13px) var(--font); letter-spacing:.01em;
  transition:color 160ms linear, border-color 160ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-food .fdh-chip-e { font-size:1.05em; line-height:1; }
.v-food .fdh-chip:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 32%, transparent); }
.v-food .fdh-chip:active { transform:scale(0.97); }
.v-food .fdh-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-food .fdh-chip.on { color:var(--accent); background:var(--accent-fill);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
/* delivery stats — reuse ws-herostats / ws-hstat, tuned down with a top rule (origin) */
.v-food .fdh-stats { align-self:stretch; display:flex; flex-flow:row nowrap; justify-content:flex-start;
  gap:0; margin-top:clamp(28px, 3.6cqw, 40px); padding-top:clamp(18px, 2.4cqw, 24px); border-top:var(--bw, 1px) solid var(--hair); }
.v-food .fdh-stats .ws-hstat { flex:0 1 auto; min-width:0; align-items:flex-start; padding:0 clamp(14px, 2cqw, 24px); gap:3px; }
.v-food .fdh-stats .ws-hstat b { font:800 clamp(17px, 2.1cqw, 21px) var(--font-head, var(--font)); letter-spacing:-0.01em; }
.v-food .fdh-stats .ws-hstat i { font-size:clamp(10.5px, 1.1cqw, 11.5px); white-space:nowrap; }
/* right: fanned restaurant cards (name overlay); ph reuses the house placeholder checker */
.v-food .fdh-cards { position:relative; width:100%; align-self:center; min-height:clamp(360px, 42cqw, 520px); }
.v-food .fdh-card { position:absolute; width:72%; aspect-ratio:4 / 3; border-radius:var(--radius, 14px);
  overflow:hidden; border:var(--bw, 1px) solid var(--hair); background-color:var(--panel);
  background-size:cover; background-position:center; box-shadow:0 16px 34px -12px rgba(0,0,0,0.6);
  transition:transform 200ms var(--ease-pop, ease-out), opacity 180ms linear; }
.v-food .fdh-card.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%);
  background-size:44px 44px; background-position:0 0, 0 22px, 22px -22px, 22px 0; }
.v-food .fdh-back { top:0; right:0; transform:rotate(4deg); z-index:1; opacity:.72; }
.v-food .fdh-mid { top:58px; right:36px; transform:rotate(-2.5deg); z-index:2; opacity:.88; }
.v-food .fdh-front { top:116px; right:72px; transform:rotate(1deg); z-index:3; }
.v-food .fdh-card.is-dim { opacity:.26; }
.v-food .fdh-card:hover { transform:translateY(-6px) rotate(0deg); opacity:1; z-index:4; }
.v-food .fdh-card-cap { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:2px;
  padding:26px 14px 12px; background:linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0) 74%); }
.v-food .fdh-card-name { font:600 clamp(12px, 1.4cqw, 13.5px) var(--font); color:#fff; letter-spacing:.01em; }
.v-food .fdh-card-cui { font:500 10.5px var(--font); font-style:normal; color:rgba(255,255,255,.72); }
@container site (max-width: 860px) {
  .v-food .fdh-cards { min-height:clamp(300px, 64cqw, 400px); }
  .v-food .fdh-card { width:60%; }
  .v-food .fdh-mid { top:52px; right:30px; }
  .v-food .fdh-front { top:104px; right:60px; }
}
@container site (max-width: 560px) {
  .v-food .fdh-search { flex-direction:column; align-items:stretch; max-width:none; }
  .v-food .fdh-search-wrap { padding:11px 14px; border-bottom:var(--bw, 1px) solid var(--hair); }
  .v-food .fdh-go { padding:11px 14px; }
  .v-food .fdh-stats .ws-hstat { padding:0 12px; }
  .v-food .fdh-cards { min-height:clamp(240px, 72cqw, 320px); }
  .v-food .fdh-card { width:68%; }
}
@media (prefers-reduced-motion: reduce) {
  .v-food .fdh-card { transition:opacity 180ms linear; }
  .v-food .fdh-card:hover { transform:none; }
}
/* restaurant — ported from SB_04 drafts/restaurant-hero (a full-bleed atmospheric restaurant opener:
   a cuisine overline, a large display name with a gradient-accent last word, an italic tagline and
   Reserve / Menu CTAs anchored lower-left over a darkened photo, closed by a full-width contact strip
   — address · hours · phone). Reuses ws-in + ws-kick / ws-h1+gradLast / ws-sub / ws-ctarow + btn and the
   ws-hpanel ph-placeholder for the photo. Origin --rsth-* vars map to theme tokens: bg->--bg, heading->
   --ink, body(secondary)->--dim/--faint, accent->--accent, strip border->--hair, panel->--panel,
   font->--font. The origin's baked black overlay is rebuilt theme-portably — the scrim deepens toward
   --bg (never a baked hex) so light text reads over a dark photo AND dark text reads in a light theme;
   the origin's backdrop-blur strip becomes a solid --panel band (no blur, no backdrop-filter). Full-
   viewport 100vh becomes a container-relative min-height. Baked entrance keyframes are dropped (anims.js
   owns entrances); only hover/selection colour transitions, backgrounds flip instantly. The dead
   "Reserve a table" link + static phone become REAL in mount() (Reserve confirms via an aria-live line;
   phone is a real tel: anchor). Container queries only; the strip stacks at 560. */
.ws-hero.v-restaurant { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(520px, 86cqh, 880px); display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--bg); }
.v-restaurant .rst-photo { position:absolute; inset:0; z-index:0; min-height:0; border:0; border-radius:0; }
.v-restaurant .rst-photo.ph { background-repeat:no-repeat; background-size:cover; background-position:center;
  background-image:radial-gradient(ellipse 66% 82% at 62% 26%, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg) 72%); }
.v-restaurant .rst-photo.ph::after { display:none; }
.v-restaurant .rst-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 22%,
      color-mix(in srgb, var(--bg) 42%, transparent) 55%, transparent 82%),
    radial-gradient(130% 92% at 50% 4%, transparent 42%, color-mix(in srgb, var(--bg) 34%, transparent)); }
.v-restaurant .rst-content { position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:flex-start; padding-bottom:clamp(30px, 5cqw, 60px); }
.v-restaurant .rst-cuisine { margin:0 0 clamp(14px, 1.8cqw, 20px); color:var(--dim);
  text-transform:uppercase; letter-spacing:2.5px; }
.v-restaurant .rst-name { max-width:14ch; line-height:0.98; letter-spacing:-0.03em; text-wrap:balance; }
.v-restaurant .rst-tagline { margin-top:clamp(14px, 1.8cqw, 20px); max-width:44ch; font-style:italic;
  font-weight:300; color:color-mix(in srgb, var(--ink) 76%, transparent); }
.v-restaurant .rst-actions { margin-top:clamp(22px, 3cqw, 32px); }
.v-restaurant .rst-book { appearance:none; -webkit-appearance:none; cursor:pointer; }
.v-restaurant .rst-note { min-height:1.25em; margin-top:clamp(14px, 1.8cqw, 18px);
  font:500 12px/1.5 var(--font); color:var(--faint); letter-spacing:.01em; transition:color 160ms linear; }
.v-restaurant .rst-note.ok { color:#22c55e; }
/* contact strip — origin's backdrop-blur band, rebuilt as a solid panel (no blur) */
.v-restaurant .rst-strip { position:relative; z-index:2; border-top:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 78%, transparent); }
.v-restaurant .rst-striprow { display:flex; flex-wrap:wrap; align-items:center; padding-block:clamp(14px, 1.8cqw, 18px); }
.v-restaurant .rst-item { display:inline-flex; align-items:center; gap:9px;
  font:500 clamp(12px, 1.3cqw, 13px) var(--font); color:var(--dim); text-decoration:none; }
.v-restaurant .rst-ico { display:inline-flex; flex-shrink:0; width:15px; height:15px; color:var(--faint); }
.v-restaurant .rst-ico svg { width:15px; height:15px; }
.v-restaurant a.rst-link { transition:color 160ms linear; }
.v-restaurant a.rst-link:hover { color:var(--ink); }
.v-restaurant a.rst-link:hover .rst-ico { color:var(--accent); }
.v-restaurant a.rst-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.v-restaurant .rst-div { width:1px; height:15px; margin:0 clamp(16px, 2cqw, 26px); background:var(--hair); flex-shrink:0; }
@container site (max-width: 560px) {
  .v-restaurant .rst-striprow { flex-direction:column; align-items:flex-start; gap:10px; }
  .v-restaurant .rst-div { display:none; }
  .v-restaurant .rst-name { max-width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .v-restaurant .rst-note, .v-restaurant a.rst-link { transition:none; }
}
/* ===== Hero / Menu (v-menu) — ported SB_04 drafts/menu-hero. A restaurant-menu opener: headline +
   subtext over a category tablist and item rows (thumb · name/description · price). The origin's
   CSS/JS tab switch becomes a REAL roving-tabindex tablist (arrow/Home/End keys, aria-selected,
   tab<->tabpanel wiring) driven in mount(); panels toggle via the hidden attribute. Origin --mnh-*
   vars map to theme tokens: bg->--bg, heading->--ink, body->--dim, accent->--accent, border->--hair,
   row-hover->an --ink tint, font->--font. Each item thumbnail is an optional real image over the
   ws-hpanel ph placeholder motif. Entrance motion is the reveal system's; hover/selected backgrounds
   flip instantly (never transitioned). Container queries only, no blur. */
.v-menu .mnu-in { width:min(880px, 88cqw); }
.v-menu .mnu-h { max-width:20ch; line-height:1.08; letter-spacing:-0.02em; text-wrap:balance; }
.v-menu .mnu-sub { margin-top:12px; }
/* tab strip — the origin's CSS/JS tabs, now a real roving-tabindex tablist */
.v-menu .mnu-tabs { display:flex; gap:2px; margin-top:clamp(28px, 4cqw, 44px);
  border-bottom:var(--bw, 1px) solid var(--hair); max-width:100%; }
.v-menu .mnu-tab { appearance:none; -webkit-appearance:none; background:transparent; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px; padding:11px 18px; cursor:pointer;
  font:500 clamp(12.5px, 1.4cqw, 14px) var(--font); letter-spacing:.01em; color:var(--dim);
  white-space:nowrap; transition:color 160ms linear; }
.v-menu .mnu-tab:hover { color:var(--ink); }
.v-menu .mnu-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.v-menu .mnu-tab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); }
/* panels + item rows */
.v-menu .mnu-panels { margin-top:8px; }
.v-menu .mnu-panel { list-style:none; margin:0; padding:0; }
.v-menu .mnu-panel[hidden] { display:none; }
.v-menu .mnu-panel:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:8px; }
.v-menu .mnu-item { display:flex; align-items:center; gap:clamp(12px, 1.6cqw, 18px);
  padding:15px 12px; margin-inline:-12px; border-bottom:var(--bw, 1px) solid var(--hair); border-radius:8px; }
.v-menu .mnu-panel .mnu-item:last-child { border-bottom:0; }
.v-menu .mnu-item:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.v-menu .mnu-thumb { flex-shrink:0; width:56px; height:56px; border-radius:9px; overflow:hidden;
  background-color:var(--panel); background-size:cover; background-position:center; border:var(--bw, 1px) solid var(--hair); }
.v-menu .mnu-thumb.ph { background-image:
    radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 7%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 7%, transparent) 25%, transparent 25%);
  background-size:100% 100%, 22px 22px, 22px 22px; background-position:center, 0 0, 11px 11px; }
.v-menu .mnu-info { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.v-menu .mnu-name { font:600 clamp(13.5px, 1.5cqw, 15px) var(--font); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-menu .mnu-desc { font:400 clamp(12px, 1.3cqw, 13px)/1.45 var(--font); color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.v-menu .mnu-price { flex-shrink:0; padding-left:14px; font:600 clamp(13px, 1.5cqw, 14.5px) var(--font);
  color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
@container site (max-width: 560px) {
  .v-menu .mnu-tabs { overflow-x:auto; scrollbar-width:none; }
  .v-menu .mnu-tabs::-webkit-scrollbar { display:none; }
  .v-menu .mnu-tab { padding:11px 14px; }
  .v-menu .mnu-thumb { width:46px; height:46px; }
  .v-menu .mnu-desc { -webkit-line-clamp:3; }
}
@media (prefers-reduced-motion: reduce) {
  .v-menu .mnu-tab { transition:none; }
}
/* travel — ported from SB_04 drafts/travel-hero (a full-bleed photo opener: headline + subhead over a
   scenic background, a destination/departure/return search bar and a row of quick-pick destination tiles).
   Origin --tvh-* vars map to theme tokens: bg->--bg, surface->--panel, heading->--ink, body->--dim/--faint,
   border->--hair, accent->--accent; the origin's baked dark overlay becomes a token-driven veil that fades
   toward --bg, so the hero stays legible AND theme-portable (dark theme darkens the photo, light theme
   lightens it — the atmospheric-portrait / cinematic idiom) instead of a hardcoded rgba(0,0,0,.55). With no
   image the section wears a themed placeholder "sky" (accent->--bg radials, the ws-hpanel.ph idea for a
   full-bleed area). The origin's DEAD search + static tiles are made REAL in mount(): the bar assembles a
   live query from the destination text + native date pickers and announces it via an aria-live status;
   Enter submits; each quick-pick is a real button that fills the destination and marks itself pressed, and
   typing clears the selection. Entrance motion belongs to the reveal system — only hover moves
   (transform/border-color); the selected tile switches instantly. Container queries only; the bar stacks and
   the tiles reflow on narrow. */
.ws-sec.ws-hero.v-travel { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(520px, 88cqh, 860px); display:flex; align-items:center;
  background-color:var(--bg); background-size:cover; background-position:center; }
.v-travel:not(.tvl-img) { background-image:
    radial-gradient(84% 62% at 50% 6%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(64% 58% at 84% 26%, color-mix(in srgb, var(--accent2, var(--accent)) 18%, transparent), transparent 62%),
    radial-gradient(58% 60% at 12% 88%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--bg)), var(--bg) 72%); }
.v-travel .tvl-veil { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 42%, transparent), transparent 32%,
    transparent 58%, color-mix(in srgb, var(--bg) 52%, transparent)); }
.v-travel.tvl-img .tvl-veil { background:
    radial-gradient(128% 96% at 50% 42%, color-mix(in srgb, var(--bg) 42%, transparent), color-mix(in srgb, var(--bg) 80%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 44%, transparent), transparent 34%, transparent 56%, color-mix(in srgb, var(--bg) 64%, transparent)); }
.v-travel .tvl-in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:clamp(26px, 3.6cqw, 46px); padding-block:clamp(64px, 10cqh, 120px); }
.v-travel .tvl-copy { display:flex; flex-direction:column; align-items:center; gap:clamp(12px, 1.5cqw, 18px); }
.v-travel .tvl-h { max-width:16ch; line-height:1.06; letter-spacing:-0.02em; text-wrap:balance; }
.v-travel .tvl-copy .tvl-sub { margin-top:0; max-width:52ch; }
/* search bar — the origin's dead 3-field form + button, now a real submit form */
.v-travel .tvl-searchwrap { width:100%; max-width:760px; }
.v-travel .tvl-search { display:flex; align-items:stretch; width:100%; text-align:left;
  background:var(--panel); background-image:var(--surface-grad, none); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); overflow:hidden; box-shadow:var(--elev, 0 0 #0000); }
.v-travel .tvl-field { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:5px; padding:13px 18px; }
.v-travel .tvl-field:focus-within { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.v-travel .tvl-flabel { font:600 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.v-travel .tvl-input { width:100%; padding:0; border:0; outline:none; background:transparent; color:var(--ink);
  font:500 clamp(13px, 1.4cqw, 14.5px) var(--font); font-family:inherit; min-width:0; }
.v-travel .tvl-input::placeholder { color:var(--faint); opacity:1; }
.v-travel .tvl-input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(0.5); opacity:.75; cursor:pointer; }
.v-travel .tvl-div { flex:none; width:1px; align-self:stretch; margin:11px 0; background:var(--hair); }
.v-travel .tvl-go { flex:none; align-self:stretch; border-radius:0; padding-inline:clamp(20px, 2.6cqw, 32px); }
.v-travel .tvl-go:hover { transform:none; }
.v-travel .tvl-status { min-height:1.25em; margin-top:13px; text-align:center; letter-spacing:.01em;
  font:500 clamp(12px, 1.3cqw, 13px)/1.5 var(--font); color:var(--faint); transition:color 160ms linear; }
.v-travel .tvl-status.on { color:var(--accent); }
/* quick picks — the origin's static thumbnails, now real "fill the search" buttons */
.v-travel .tvl-picks { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(10px, 1.2cqw, 14px); }
.v-travel .tvl-pick { position:relative; width:clamp(122px, 15cqw, 152px); aspect-ratio:7 / 5; padding:0;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .72); overflow:hidden; cursor:pointer;
  color:var(--ink); background-color:var(--panel); background-size:cover; background-position:center;
  transition:transform 160ms var(--ease-pop, ease-out), border-color 160ms ease-out; }
.v-travel .tvl-pick.ph { background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%),
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 20%, var(--panel)), var(--panel) 74%);
  background-size:52px 52px, 52px 52px, 52px 52px, 52px 52px, 100% 100%;
  background-position:0 0, 0 26px, 26px -26px, 26px 0, 0 0; }
.v-travel .tvl-pick:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.v-travel .tvl-pick:active { transform:translateY(0); }
.v-travel .tvl-pick:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-travel .tvl-pick.on { border-color:color-mix(in srgb, var(--accent) 62%, transparent); }
.v-travel .tvl-pick-scrim { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, color-mix(in srgb, var(--bg) 84%, transparent), transparent 58%); }
.v-travel .tvl-pick-name { position:absolute; left:0; right:0; bottom:0; padding:8px 10px 9px; text-align:center;
  font:600 clamp(12px, 1.3cqw, 13px) var(--font); color:var(--ink); letter-spacing:.01em; }
.v-travel .tvl-pick.on .tvl-pick-name { color:var(--accent); }
@container site (max-width: 860px) {
  .ws-sec.ws-hero.v-travel { min-height:clamp(480px, 82cqh, 700px); }
}
@container site (max-width: 560px) {
  .v-travel .tvl-search { flex-direction:column; align-items:stretch; }
  .v-travel .tvl-div { width:auto; height:1px; align-self:stretch; margin:0 16px; }
  .v-travel .tvl-go { align-self:stretch; padding-block:14px; }
  .v-travel .tvl-pick { width:clamp(122px, 40cqw, 152px); }
}
@media (prefers-reduced-motion: reduce) {
  .v-travel .tvl-pick { transition:none; }
  .v-travel .tvl-status { transition:none; }
}
/* ===== Hero / Nonprofit (v-nonprofit) — ported SB_04 drafts/nonprofit-hero.
   Split: mission copy + a real donation affordance beside a full-height image panel, closed by a
   full-width impact-stat bar. Origin --nph-* vars map to theme tokens: bg->--bg, heading->--ink,
   body->--dim/--faint, accent->--accent, accent-warm rides as the headline's gradient accent word
   (gradLast), border/divider->--hair, font->--font. The origin's dead "Donate Now" link becomes
   REAL: a single-select amount radiogroup (roving tabindex, Arrow/Home/End, Enter/Space) whose
   Donate button writes a live client-side confirmation into an aria-live status line — nothing
   posts; the confirmation green is a fixed semantic hue, kept literal. Baked fade-up entrance
   keyframes are dropped (anims.js owns entrances) — only hover/selection move, and selection/hover
   backgrounds flip instantly (never transitioned). The image is the shared ws-hpanel ph-placeholder
   (a real photo only when img is set). Split narrow-stacks via the global 860px rule; the
   ws-herostats bar stacks via the global 560px rule. Container queries only, no blur. */
.v-nonprofit .nph-copy { display:flex; flex-direction:column; justify-content:center; }
.v-nonprofit .nph-h { line-height:1.08; letter-spacing:-0.03em; text-wrap:balance; }
.v-nonprofit .nph-sub { max-width:52ch; }
/* donation amount picker — the origin's dead Donate link, now a real single-select radiogroup */
.v-nonprofit .nph-amounts { display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:clamp(24px, 3cqw, 34px); }
.v-nonprofit .nph-alabel { font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:var(--faint); margin-right:6px; }
.v-nonprofit .nph-amt { font:600 clamp(13px, 1.4cqw, 14px) var(--font); color:var(--dim); white-space:nowrap;
  padding:9px 17px; border:var(--bw, 1px) solid var(--hair); border-radius:100px; background:transparent; cursor:pointer;
  letter-spacing:.01em; transition:color 160ms linear, border-color 160ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-nonprofit .nph-amt:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 35%, transparent); }
.v-nonprofit .nph-amt:active { transform:scale(0.97); }
.v-nonprofit .nph-amt:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-nonprofit .nph-amt.on { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:var(--accent-fill); }
.v-nonprofit .nph-actions { margin-top:clamp(22px, 2.8cqw, 30px); }
.v-nonprofit .nph-note { min-height:1.25em; margin-top:14px; font:500 12px/1.5 var(--font); color:var(--faint);
  letter-spacing:.01em; transition:color 160ms linear; }
.v-nonprofit .nph-note.ok { color:#22c55e; }
/* image panel — reuses the shared ws-hpanel placeholder */
.v-nonprofit .nph-visual { align-self:stretch; min-height:clamp(300px, 46cqw, 520px); }
/* impact-stat bar — the origin's full-width stats row (ws-herostats/ws-hstat atoms) */
.v-nonprofit .nph-stats { margin-top:clamp(40px, 5cqw, 64px); padding-top:clamp(30px, 3.6cqw, 44px);
  border-top:var(--bw, 1px) solid var(--hair); justify-content:space-between; }
.v-nonprofit .nph-stats .ws-hstat { flex:1; align-items:center; text-align:center; padding:0 clamp(16px, 2cqw, 30px); }
.v-nonprofit .nph-stats .ws-hstat b { font-size:clamp(30px, 4.4cqw, 46px); line-height:1; }
.v-nonprofit .nph-stats .ws-hstat i { text-transform:uppercase; letter-spacing:.06em; }
@container site (max-width: 560px) {
  .v-nonprofit .nph-visual { min-height:240px; }
  .v-nonprofit .nph-alabel { width:100%; margin:0 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-nonprofit .nph-amt { transition:none; }
}
/* fundraising — ported from SB_04 drafts/fundraising-hero (a centered campaign opener: headline, story, a
   percent-funded progress meter, a raised / goal / donors / days stat band and Donate + Share actions).
   Centered column reuses ws-in.center + ws-h1/gradLast + ws-sub + ws-btn.primary. Origin --frh-* vars map to
   theme tokens: bg->--bg, heading->--ink, body->--dim/--faint, accent (meter fill + percent)->--accent /
   --accent-grad / --accent-fill, border + divider->--hair, font->--font; the success green is a fixed
   semantic hue, kept literal. The origin's baked fade-up + fill-grow ENTRANCE keyframes are dropped
   (anims.js owns entrances) — the meter renders at its computed width and only moves on interaction. The
   static 68% bar becomes REAL: the fill and every figure are computed from raised/goal/donors, and the
   origin's dead "Donate Now" link becomes a genuine single-select amount picker (role=radiogroup, roving
   tabindex, Arrow/Home/End/Space) whose Donate button pledges live — the bar advances (transform only), the
   raised total + percent count up, the donor count ticks and an aria-live line confirms; Share best-effort
   copies the link. Selection/hover backgrounds flip instantly (never transitioned); no blur. Container
   queries only. */
.v-fundraising .frn-wrap { display:flex; flex-direction:column; align-items:center; width:100%; max-width:660px; margin-inline:auto; }
.v-fundraising .frn-h { max-width:16ch; line-height:1.08; letter-spacing:-0.02em; text-wrap:balance; }
.v-fundraising .frn-story { margin-top:clamp(16px, 2cqw, 20px); max-width:58ch; }
/* progress meter — the origin's static 68% bar, now computed from raised/goal and advanced on donation */
.v-fundraising .frn-progress { width:100%; margin-top:clamp(30px, 4cqw, 44px); }
.v-fundraising .frn-phead { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:10px; }
.v-fundraising .frn-pct { font:700 clamp(13px, 1.5cqw, 14px) var(--font); letter-spacing:.01em; color:var(--accent); font-variant-numeric:tabular-nums; }
.v-fundraising .frn-goal { font:500 clamp(12px, 1.4cqw, 13px) var(--font); color:var(--faint); font-variant-numeric:tabular-nums; }
.v-fundraising .frn-track { width:100%; height:12px; border-radius:100px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 10%, transparent); }
.v-fundraising .frn-fill { height:100%; border-radius:100px; transform:scaleX(0); transform-origin:left center;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  transition:transform 560ms cubic-bezier(.4, 0, .2, 1); will-change:transform; }
/* stat band */
.v-fundraising .frn-stats { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%;
  margin-top:clamp(26px, 3.2cqw, 34px); padding:clamp(20px, 2.6cqw, 28px) 0; border-block:var(--bw, 1px) solid var(--hair); }
.v-fundraising .frn-stat { display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:6px clamp(18px, 2.6cqw, 30px); text-align:center; }
.v-fundraising .frn-snum { font:800 clamp(22px, 3cqw, 30px)/1 var(--font-head, var(--font)); letter-spacing:-0.02em;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.v-fundraising .frn-slabel { font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.v-fundraising .frn-sdiv { width:1px; height:34px; background:var(--hair); flex-shrink:0; }
/* amount picker — the origin's single dead CTA, now a real single-select radiogroup */
.v-fundraising .frn-give { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:clamp(26px, 3.2cqw, 34px); }
.v-fundraising .frn-give-label { font:600 10px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-right:4px; }
.v-fundraising .frn-chip { font:600 clamp(13px, 1.4cqw, 14px) var(--font); letter-spacing:.01em; color:var(--ink);
  padding:9px 18px; border:var(--bw, 1px) solid var(--hair); border-radius:100px; background:transparent; cursor:pointer;
  font-variant-numeric:tabular-nums; transition:color 160ms linear, border-color 160ms linear, transform 120ms var(--ease-pop, ease-out); }
.v-fundraising .frn-chip:hover { border-color:color-mix(in srgb, var(--ink) 35%, transparent); }
.v-fundraising .frn-chip:active { transform:scale(0.97); }
.v-fundraising .frn-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v-fundraising .frn-chip.on { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:var(--accent-fill); }
/* actions */
.v-fundraising .frn-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(16px, 2cqw, 22px); margin-top:clamp(26px, 3.2cqw, 34px); }
.v-fundraising .frn-donate { font-variant-numeric:tabular-nums; }
.v-fundraising .frn-share { display:inline-flex; align-items:center; gap:6px; padding:6px 4px; border:0; background:none; cursor:pointer;
  font:500 clamp(13px, 1.4cqw, 14px) var(--font); letter-spacing:.01em; color:var(--dim); transition:color 160ms linear; }
.v-fundraising .frn-share:hover { color:var(--ink); }
.v-fundraising .frn-share:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
.v-fundraising .frn-arrow { transition:transform 140ms ease-out; }
.v-fundraising .frn-share:hover .frn-arrow { transform:translateX(3px); }
/* live confirmation line */
.v-fundraising .frn-note { min-height:1.2em; margin-top:14px; text-align:center;
  font:500 clamp(12px, 1.3cqw, 13px)/1.5 var(--font); letter-spacing:.01em; color:var(--faint); transition:color 160ms linear; }
.v-fundraising .frn-note.ok { color:#22c55e; }
@container site (max-width: 560px) {
  .v-fundraising .frn-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px 0; padding-block:22px; }
  .v-fundraising .frn-sdiv { display:none; }
  .v-fundraising .frn-give-label { width:100%; margin:0 0 2px; }
  .v-fundraising .frn-actions { flex-direction:column; align-items:stretch; }
  .v-fundraising .frn-donate { justify-content:center; }
  .v-fundraising .frn-share { justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .v-fundraising .frn-fill { transition:none; }
}
/*CSSSLOT:impact*/
/*CSSSLOT:university*/
/*CSSSLOT:saas*/
/*CSSSLOT:music*/
/*CSSSLOT:sports*/
/*CSSSLOT:fitness*/
/*CSSSLOT:legal*/
/*CSSSLOT:maintenance*/
/*CSSSLOT:error*/
/*CSSSLOT:photography*/
/*CSSSLOT:video*/
/*CSSSLOT:illustration*/
/*CSSSLOT:interior*/
/*CSSSLOT:fashion*/
/*CSSSLOT:luxury*/
/*CSSSLOT:startup*/
/*CSSSLOT:investor*/
/*CSSSLOT:pitch*/
/*CSSSLOT:service*/
/*CSSSLOT:quote*/
/*CSSSLOT:timeline*/

/* ================================================================
   NEPTUNE — retail storefront set (lib/modules/web_components/neptune.js)
   PreSonus anatomy in dark-water skin. Scope: .ws-np, .h-neptune, .f-neptune
   ================================================================ */

/* ---- shared bits ---- */
.ws-np { padding:0; }
.np-dash { display:block; width:34px; height:3px; border-radius:2px; background:var(--accent); margin:0 auto 22px; }
.np-h2 { font:800 clamp(30px, 4cqw, 46px)/1.12 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; margin:0 0 10px; }
.np-quiet { font:500 13.5px/1.6 var(--font); color:var(--dim); margin:0 0 22px; }
.np-pill { display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius:999px; cursor:pointer;
  font:700 13.5px var(--font); letter-spacing:0.01em; transition:transform .18s ease, opacity .18s ease, background .18s ease;
  user-select:none; white-space:nowrap; }
.np-pill:hover { transform:translateY(-1px); }
.np-pill.light { background:#fff; color:#0a0f18; }
.np-pill.dark { background:#0c1016; color:#fff; }
.np-pill.accent { background:var(--accent); color:var(--accent-text, #06121f); }
.np-pill.ghost { background:transparent; color:var(--ink); border:1px solid color-mix(in srgb, var(--ink) 38%, transparent); }
.np-pill.ghost:hover { border-color:var(--ink); }
.np-pill.inkghost { color:#10141b; border-color:rgba(10,15,24,0.4); }
.np-pill.sm { padding:10px 20px; font-size:12.5px; }

/* ---- np-hero · sale splash ---- */
.np-hero.v-sale { position:relative; overflow:hidden; min-height:clamp(340px, 34cqw, 500px); display:flex; align-items:center;
  background:linear-gradient(105deg, var(--np-g1) 0%, var(--np-g2) 100%); }
.np-heroimg { position:absolute; top:0; right:0; bottom:0; width:60%;
  background-size:cover; background-position:center right; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%); mask-image:linear-gradient(90deg, transparent 0%, #000 26%); }
.np-herocopy { position:relative; z-index:1; padding-inline:max(28px, calc((100cqw - 1180px) / 2)) 0; max-width:52%; }
.np-kick { display:block; font:700 12px var(--mono); letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.85); margin-bottom:14px; }
.np-display { font:italic 900 clamp(42px, 6.4cqw, 92px)/0.94 var(--font-head, var(--font)); color:#fff;
  letter-spacing:-0.02em; text-transform:uppercase; margin:0 0 14px; text-shadow:0 2px 26px rgba(0,0,0,0.25); }
.np-herosub { font:500 14px/1.55 var(--font); color:rgba(255,255,255,0.88); margin:0 0 24px; max-width:380px; }

/* ---- np-duo · feature pair ---- */
.np-duo { padding:18px 0 0; }
.np-duo .ws-in.wide, .np-mosaic .ws-in.wide, .np-watch .ws-in.wide { width:min(1180px, 94cqw); }
.np-duogrid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.np-card { position:relative; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; min-height:520px;
  text-align:center; padding-top:48px; border:var(--bw, 1px) solid var(--hair-soft); }
.np-card.t-panel { background:linear-gradient(180deg, var(--panel-2), var(--panel)); }
.np-card.t-deep { background:#07080b; }
.np-card.t-light { background:#e9edf3; }
.np-card.t-light .np-cardtitle { color:#10141b; }
.np-card.t-light .np-cardsub { color:#4d5a6e; }
.np-cardcopy { position:relative; z-index:1; padding:0 34px; }
.np-cardkick { display:block; font:700 11.5px var(--mono); letter-spacing:0.2em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; }
.np-cardtitle { font:800 clamp(22px, 2.4cqw, 30px)/1.16 var(--font-head, var(--font)); color:var(--ink); margin:0 0 10px; letter-spacing:-0.015em; }
.np-cardsub { font:500 13px/1.6 var(--font); color:var(--dim); margin:0 auto 20px; max-width:400px; }
.np-cardbtns { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.np-cardimg { display:block; flex:1; min-height:290px; margin-top:28px;
  background-size:cover; background-position:center; }

/* ---- np-family ---- */
.np-family { padding:92px 0 72px; }
.np-familyimg { margin:40px auto 0; width:min(880px, 100%); aspect-ratio:16/9; border-radius:18px;
  background-size:cover; background-position:center; box-shadow:0 30px 80px -30px rgba(0,0,0,0.55); }

/* ---- np-mosaic ---- */
.np-mosaic { padding:10px 0 26px; }
.np-mosaicgrid { display:grid; grid-template-columns:1.02fr 1fr; gap:16px; }
.np-mosaicright { display:grid; gap:16px; grid-template-rows:1fr auto; }
.np-mosaichalves { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.np-tile { position:relative; display:block; border-radius:16px; overflow:hidden; background:var(--panel); cursor:pointer; }
.np-tile.tall { min-height:568px; }
.np-tile.wide { min-height:272px; }
.np-tile.half { min-height:276px; }
.np-tileimg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.np-tile:hover .np-tileimg { transform:scale(1.045); }
.np-tile::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55)); }
.np-tilelabel { position:absolute; z-index:1; left:22px; bottom:18px; color:#fff; font:700 15px var(--font);
  padding-bottom:3px; border-bottom:2px solid #fff; letter-spacing:0.01em; }

/* ---- np-watch · video row ---- */
.np-watch { background:#0a0b0e; padding:78px 0 58px; margin-top:56px; }
.np-watch .np-h2 { margin-bottom:20px; }
.np-watchrow { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:36px; }
.np-watchcard { position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; cursor:pointer; background:var(--panel-2); }
.np-watchimg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.np-watchcard:hover .np-watchimg { transform:scale(1.04); }
.np-watchscrim { position:absolute; inset:0; background:linear-gradient(180deg, transparent 38%, rgba(0,0,0,0.74)); }
.np-watchcopy { position:absolute; left:16px; right:16px; bottom:13px; text-align:left; }
.np-watchcopy b { display:block; font:700 15px/1.25 var(--font-head, var(--font)); color:#fff; }
.np-watchcopy i { display:block; font:500 11px var(--font); color:rgba(255,255,255,0.72); margin-top:3px; }
.np-dots { display:flex; justify-content:center; gap:7px; margin-top:26px; }
.np-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.22); }
.np-dots i.on { background:rgba(255,255,255,0.85); }

/* ---- np-statement ---- */
.np-statement { padding:112px 0 118px; }
.np-mark { height:36px; margin:0 auto 26px; display:block; border-radius:9px; }
.np-statementtype { font:800 clamp(30px, 4.6cqw, 60px)/1.1 var(--font-head, var(--font)); letter-spacing:-0.02em;
  -webkit-background-clip:text; background-clip:text; color:transparent; margin:0; }

/* ---- h-neptune · storefront masthead ---- */
.ws-head.h-neptune { display:block; padding:0; gap:0; }
.np-strip { background:var(--accent); color:var(--accent-text, #04101d); text-align:center;
  font:600 12px/1 var(--font); padding:9px 14px; }
.np-strip .np-striplink { color:inherit; font-weight:800; text-decoration:underline; cursor:pointer; }
.np-mainrow { display:flex; align-items:center; gap:22px;
  padding:14px max(24px, calc((100cqw - 1180px) / 2)); }
.np-nav { margin-left:6px; margin-right:auto; }
.ws-navlink.np { font-weight:600; color:var(--ink); }
.np-tools { display:flex; align-items:center; gap:14px; }
.np-search { display:inline-flex; align-items:center; gap:9px; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:999px; padding:8px 16px; min-width:190px; cursor:text; }
.np-search svg { width:14px; height:14px; color:var(--dim); flex:none; }
.np-search i { font:500 12.5px var(--font); color:var(--faint); }
.np-acct { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%;
  color:var(--dim); cursor:pointer; }
.np-acct:hover { color:var(--ink); background:var(--panel); }
.np-acct svg { width:18px; height:18px; }
.np-catrow { border-top:var(--bw, 1px) solid var(--hair-soft); border-bottom:var(--bw, 1px) solid var(--hair);
  padding:0 max(24px, calc((100cqw - 1180px) / 2)); overflow-x:auto; scrollbar-width:none; }
.np-catrow::-webkit-scrollbar { display:none; }
.np-cats { display:flex; gap:26px; }
.np-cat { flex:none; font:600 12.5px var(--font); color:var(--dim); padding:11px 0; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease; }
.np-cat:hover { color:var(--ink); border-bottom-color:var(--accent); }

/* ---- f-neptune · storefront basement ---- */
.ws-foot.f-neptune { display:block; background:#060709; border-top:var(--bw, 1px) solid var(--hair); padding:0; }
.np-fin { width:min(1180px, 92cqw); margin:0 auto; padding:52px 0 22px; }
.np-fnews { display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.np-fnewscopy b { display:block; font:800 22px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.np-fnewscopy i { display:block; font:500 12.5px/1.5 var(--font); color:var(--dim); margin-top:6px; max-width:340px; }
.np-fnewsform { display:flex; gap:10px; align-items:center; }
.np-finput { background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:10px; color:var(--ink);
  font:500 13px var(--font); padding:12px 14px; width:min(340px, 56cqw); outline:none; }
.np-finput:focus { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.np-finput::placeholder { color:var(--faint); }
.np-fcols { display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; margin-top:46px; }
.np-fcol b { display:block; font:700 13px var(--font); color:var(--ink); margin-bottom:12px; }
.np-flink { display:block; font:500 12.5px var(--font); color:var(--dim); padding:5px 0; cursor:pointer; }
.np-flink:hover { color:var(--ink); }
.np-fmeta { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:44px; }
.np-fpills { display:flex; gap:10px; flex-wrap:wrap; }
.np-fpill { display:inline-flex; align-items:center; gap:8px; border:var(--bw, 1px) solid var(--hair); border-radius:999px;
  padding:8px 15px; font:600 12px var(--font); color:var(--dim); cursor:pointer; }
.np-fpill:hover { color:var(--ink); border-color:var(--dim); }
.np-fpill svg { width:14px; height:14px; }
.np-fpill i { color:var(--faint); font-style:normal; }
.np-fsocials { display:flex; gap:6px; }
.np-flegal { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-top:var(--bw, 1px) solid var(--hair-soft); margin-top:26px; padding-top:16px; padding-bottom:6px; }
.np-flegallink { font:500 11px var(--font); color:var(--faint); margin-right:16px; cursor:pointer; }
.np-flegallink:hover { color:var(--dim); }
.np-flegal > i { font:500 11px var(--font); color:var(--faint); font-style:normal; }

/* ---- responsive ---- */
@container site (max-width: 860px) {
  .np-duogrid, .np-mosaicgrid, .np-watchrow, .np-mosaichalves { grid-template-columns:1fr; }
  .np-tile.tall { min-height:380px; }
  .np-hero.v-sale { min-height:440px; align-items:flex-end; padding-bottom:40px; }
  .np-heroimg { width:100%; -webkit-mask-image:linear-gradient(180deg, #000 30%, transparent 92%); mask-image:linear-gradient(180deg, #000 30%, transparent 92%); opacity:0.8; }
  .np-herocopy { max-width:min(520px, 92%); }
  .np-search { min-width:0; }
  .np-search i { display:none; }
  .np-fcols { grid-template-columns:1fr 1fr; }
  .np-fnews { flex-direction:column; align-items:flex-start; }
}
@container site (max-width: 560px) {
  .np-fcols { grid-template-columns:1fr; }
  .np-card { min-height:440px; }
  .np-display { font-size:clamp(38px, 11cqw, 54px); }
}

/* ---- NEPTUNE patch 2 — hero alignment fix + np-launch (overrides earlier block) ---- */

/* hero copy now rides the standard .ws-in container (same column as every
   other section) instead of a computed padding formula — the calc drifted
   in the shell where the site container is wider than the preview stage. */
.np-herin { position:relative; z-index:1; }
.np-herocopy { position:relative; z-index:1; padding:56px 0; max-width:46%; }

/* launch-sale finale */
.np-launch { position:relative; overflow:hidden; padding:100px 0 84px;
  background:radial-gradient(130% 100% at 50% -10%, #14357e 0%, #0a1434 44%, #06080f 100%); }
.np-launch::before { content:''; position:absolute; left:50%; top:-180px; transform:translateX(-50%);
  width:720px; height:340px; border-radius:50%; background:color-mix(in srgb, var(--accent) 26%, transparent);
  filter:blur(110px); pointer-events:none; }
.np-lkick { display:block; font:700 12px var(--mono); letter-spacing:0.26em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px; }
.np-ldisplay { font-size:clamp(38px, 5.6cqw, 74px); margin-bottom:12px; }
.np-lsub { max-width:520px; margin:0 auto 44px; }
.np-offers { display:grid; grid-template-columns:1fr 1fr; gap:18px; width:min(920px, 100%); margin:0 auto; }
.np-offer { position:relative; border-radius:20px; padding:44px 34px 40px; text-align:center;
  background:rgba(9, 14, 26, 0.78); border:var(--bw, 1px) solid var(--hair); }
.np-offer.featured { border-color:color-mix(in srgb, var(--accent) 62%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(9,14,26,0.85));
  box-shadow:0 24px 90px -32px color-mix(in srgb, var(--accent) 55%, transparent); }
.np-offbadge { position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:var(--accent-text, #04101d); border-radius:999px;
  font:800 10.5px var(--mono); letter-spacing:0.18em; padding:6px 14px; white-space:nowrap; }
.np-offpct { display:block; font:italic 900 clamp(52px, 5.4cqw, 76px)/1 var(--font-head, var(--font));
  color:#fff; letter-spacing:-0.02em; }
.np-offpct i { font:800 14px var(--mono); font-style:normal; letter-spacing:0.22em; color:var(--accent);
  margin-left:8px; vertical-align:super; }
.np-offer.featured .np-offpct i { color:#fff; }
.np-offtitle { font:800 19px var(--font-head, var(--font)); color:var(--ink); margin:12px 0 6px; }
.np-offsub { font:500 12.5px/1.6 var(--font); color:var(--dim); margin:0 auto 18px; max-width:300px; }
.np-offprice { display:flex; justify-content:center; align-items:baseline; gap:12px; margin-bottom:22px; }
.np-offprice s { font:600 15px var(--font); color:var(--faint); text-decoration-color:color-mix(in srgb, var(--faint) 70%, transparent); }
.np-offprice b { font:800 30px var(--font-head, var(--font)); color:#fff; letter-spacing:-0.01em; }
.np-lnote { display:block; font:500 12px var(--mono); color:var(--faint); margin-top:30px; letter-spacing:0.04em; }

@container site (max-width: 860px) {
  .np-offers { grid-template-columns:1fr; }
  .np-offer.featured { order:-1; }
  .np-herocopy { padding:44px 0; }
}

/* hero rides the same 1180 column as the rest of the retail set */
.np-hero .ws-in.wide { width:min(1180px, 94cqw); }

/* ============================================================
   SB_04 navigation port (task tsk_mrj94pu43zz) — ported .h-<slug> header CSS.
   Each ported header inserts its own block ABOVE the slot marker below.
   ============================================================ */
/* nav-minimal — SB_04 · transparent bar that frosts on scroll (no blur); wordmark left, whisper-quiet centered nav, accent CTA pill */
.ws-head.h-nav-minimal { background:transparent; border-bottom-color:transparent;
  position:sticky; isolation:isolate; gap:18px; }
.h-nav-minimal::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  border-bottom:var(--bw, 1px) solid var(--hair);
  opacity:0; transition:opacity 240ms linear; }
.h-nav-minimal.scrolled::before { opacity:1; }
.h-nav-minimal .ws-nav.nmin { margin-inline:auto; gap:6px; }
.h-nav-minimal .ws-navlink.nmin { font:500 12px var(--font); color:var(--faint);
  letter-spacing:0.04em; padding:6px 10px; }
.h-nav-minimal .ws-navlink.nmin:hover { color:var(--ink); }
.h-nav-minimal .ws-navlink.nmin.on { color:var(--accent); background:var(--accent-fill); }
.h-nav-minimal .ws-btn { border-radius:99px; }
@container site (max-width: 560px) {
  .h-nav-minimal .ws-btn { margin-left:auto; }
}
/* nav-logo-center — SB_04 editorial split nav: links flank a centred wordmark, live page-search on the right */
.ws-head.h-nav-logo-center { gap:16px; }
.h-nav-logo-center .hnlc-side { flex:1 1 0; display:flex; align-items:center; min-width:0; }
.h-nav-logo-center .hnlc-side.l { justify-content:flex-start; }
.h-nav-logo-center .hnlc-side.r { justify-content:flex-end; gap:8px; }
.h-nav-logo-center .ws-nav { margin:0; gap:2px; }
.h-nav-logo-center .hnlc-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; white-space:nowrap; }
.h-nav-logo-center .hnlc-logo .ws-logo b { font-weight:800; letter-spacing:-0.03em; }
.h-nav-logo-center .hnlc-search { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  flex:none; border:var(--bw, 1px) solid var(--hair); border-radius:9px; background:none; color:var(--dim); cursor:pointer;
  transition:color 140ms linear, border-color 140ms linear; }
.h-nav-logo-center .hnlc-search:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.h-nav-logo-center .hnlc-search svg { width:15px; height:15px; }
.h-nav-logo-center .hnlc-searchpanel { position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(-6px); width:min(430px, 88cqw); z-index:50;
  border-radius:14px; border:var(--bw, 1px) solid var(--hair); overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none);
  opacity:0; pointer-events:none; transition:opacity 180ms linear, transform 240ms cubic-bezier(.2,.8,.25,1); }
.h-nav-logo-center.hnlc-open .hnlc-searchpanel { opacity:1; pointer-events:auto; transform:translateX(-50%); }
.h-nav-logo-center .hnlc-searchpanel input { width:100%; box-sizing:border-box; padding:14px 16px; border:none; outline:none;
  border-bottom:var(--bw, 1px) solid var(--hair); background:none; color:var(--ink); font:500 13.5px var(--font); }
.h-nav-logo-center .hnlc-searchlist { padding:7px; max-height:250px; overflow-y:auto; }
.h-nav-logo-center .hnlc-searchitem { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px; cursor:pointer; }
.h-nav-logo-center .hnlc-searchitem b { flex:1; font:600 13px var(--font); color:var(--ink); }
.h-nav-logo-center .hnlc-searchitem em { font:500 11px var(--mono); color:var(--faint); font-style:normal; opacity:0; }
.h-nav-logo-center .hnlc-searchitem:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.h-nav-logo-center .hnlc-searchitem.act { background:var(--accent-fill); }
.h-nav-logo-center .hnlc-searchitem.act b { color:var(--accent); }
.h-nav-logo-center .hnlc-searchitem.act em { opacity:1; }
@container site (max-width: 560px) {
  .h-nav-logo-center .ws-nav { display:none; }
  .h-nav-logo-center .hnlc-search { display:none; }
}
/* nav-standard (SB_04 · drafts/nav-standard) — the classic corporate bar: bold logo left, centered text links, solid CTA far right, soft separation shadow */
.h-nav-standard { box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 7%, transparent); }
.h-nav-standard .ws-nav { margin:0 auto; gap:12px; }
.h-nav-standard .ws-navlink { color:var(--dim); }
.h-nav-standard .ws-navlink:hover { color:var(--ink); background:none; }
.h-nav-standard .ws-navlink.on { color:var(--accent); background:none; }
@container site (max-width: 560px) { .h-nav-standard > .ws-btn { margin-left:auto; } }
/* nav-sticky — ported from SB_04 drafts/nav-sticky (sticky-on-scroll-up header).
   Signature is LIVE in mount(): the bar hides on scroll-down, reveals on scroll-up
   (env.scroll + whenVisible, 5px dead zone, past a 60px threshold). Base .ws-head already
   supplies the translucent bar + hairline (origin --nav-bg / --nav-border, now token-driven);
   here we keep the origin's mono-uppercase nav voice and the translateY reveal. Dropped:
   backdrop blur (house rule), the light/transparent brand variants, and baked entrance motion
   (anims.js owns entrances). Only transition is transform. Mobile hamburger rides the global
   560px rule (.ws-nav hides, .ws-menubtn shows) + the site menu system, like every native header. */
.ws-head.h-nav-sticky { transition:transform 260ms cubic-bezier(.2,.8,.25,1); will-change:transform; }
.ws-head.h-nav-sticky.hide { transform:translateY(-100%); }
.h-nav-sticky .ws-nav.sticky { gap:24px; margin-left:auto; }
.h-nav-sticky .ws-navlink.sticky { padding:8px 3px; border-radius:4px;
  font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.h-nav-sticky .ws-navlink.sticky:hover { color:var(--accent); background:none; }
.h-nav-sticky .ws-navlink.sticky.on { color:var(--accent); background:none; }
.h-nav-sticky .ws-navlink.sticky:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.h-nav-sticky .ws-logo b { font-weight:600; letter-spacing:-.01em; transition:color 140ms linear; }
.h-nav-sticky .ws-logo:hover b { color:var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .ws-head.h-nav-sticky { transition:none; }
}
/* nav-transparent - ported from SB_04 drafts/nav-transparent (transparent overlay nav).
   Signature is LIVE in mount(): rides transparent over the hero, then a solid --panel
   layer fades in past 56px of scroll. The origin's backdrop-filter/blur bar is rebuilt the
   ZenOS way - a token panel layer whose OPACITY transitions (never the background, no blur). */
.ws-head.h-nav-transparent { position:sticky; top:0; background:transparent; border-bottom:none; isolation:isolate; }
.h-nav-transparent::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--panel); border-bottom:var(--bw, 1px) solid var(--hair); box-shadow:var(--elev);
  opacity:0; transition:opacity 300ms linear; }
.h-nav-transparent.scrolled::before { opacity:1; }
@media (prefers-reduced-motion: reduce) { .h-nav-transparent::before { transition:none; } }
/* nav-centered — ported from SB_04 drafts/nav-centered: editorial masthead — a centered
   brand over a symmetric uppercase nav row on a sticky hairline bar, the action tucked
   top-right. Origin --nav-* vars -> theme tokens (no baked hex); the baked hamburger-rotate
   and slide-down panel give way to the paved menuBtn + shared .ws-menu overlay; entrances
   belong to anims.js (dropped here); a container query — not viewport media — swaps the nav
   and CTA for the hamburger at 560. */
.ws-head.h-nav-centered { flex-direction:column; align-items:center; gap:11px;
  padding-top:20px; padding-bottom:13px; }
.h-nav-centered .ws-logo { justify-content:center; }
.h-nav-centered .ws-nav { margin:0; width:100%; justify-content:center; flex-wrap:wrap;
  gap:clamp(14px, 3cqw, 30px); }
.h-nav-centered .ws-navlink.hnc { padding:4px 2px; border-radius:0; font-size:11.5px;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--dim); }
.h-nav-centered .ws-navlink.hnc:hover { color:var(--ink); background:none; }
.h-nav-centered .ws-navlink.hnc.on { color:var(--accent); background:none; }
.h-nav-centered > .ws-btn { position:absolute; top:18px; right:max(24px, calc((100cqw - 1080px) / 2)); }
.h-nav-centered .ws-menubtn { position:absolute; top:16px; right:16px; }
@container site (max-width: 560px) {
  .h-nav-centered .ws-nav { display:none; }
  .h-nav-centered > .ws-btn { display:none; }
}
/* nav-liquid — SB_04/drafts/nav-liquid — gooey liquid indicator pours between links (SVG goo filter; no backdrop blur) */
.h-nav-liquid .h-nlq-goo { position:absolute; width:0; height:0; overflow:hidden; }
.h-nav-liquid .ws-nav.nlq { position:relative; }
.h-nav-liquid .ws-navlink.nlq { position:relative; z-index:2; }
.h-nav-liquid .ws-navlink.nlq:hover, .h-nav-liquid .ws-navlink.nlq.on { background:none; color:var(--ink); }
.h-nav-liquid .h-nlq-track { position:absolute; inset:0; z-index:1; pointer-events:none; filter:url(#h-nlq-goo-f); }
.h-nav-liquid .h-nlq-pill, .h-nav-liquid .h-nlq-drop { position:absolute; top:50%; left:0; width:0;
  height:30px; margin-top:-15px; border-radius:99px;
  background:color-mix(in srgb, var(--accent) 34%, var(--panel)); will-change:transform, width; }
.h-nav-liquid .h-nlq-drop { height:20px; margin-top:-10px; opacity:.9; }
@media (prefers-reduced-motion: reduce) { .h-nav-liquid .h-nlq-drop { opacity:0; } }
/* nav sticky shrink — ported from SB_04 drafts/nav-sticky-shrink. Two-state sticky nav: a tall
   bar with a stacked tagline that condenses to a compact bar once scrolled (mount() toggles .cond
   past 80px of stage scroll). Reuses .ws-shrinkrow + the shrink-family condense pattern; theme
   tokens throughout. Entrance motion is the reveal system's job — only the scroll condense, the
   tagline collapse and the CTA fill-on-scroll move here. */
.ws-head.h-nav-sticky-shrink { display:block; padding-block:26px;
  background:color-mix(in srgb, var(--bg) 90%, transparent); border-bottom:1px solid transparent;
  transition:padding 300ms cubic-bezier(.2,.8,.25,1), background 220ms linear, border-color 220ms linear; }
.h-nav-sticky-shrink .hnss-brand { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; }
.h-nav-sticky-shrink .ws-logo b { font-size:20px; transition:font-size 300ms cubic-bezier(.2,.8,.25,1); }
.h-nav-sticky-shrink .ws-logodot { width:11px; height:11px;
  transition:width 300ms cubic-bezier(.2,.8,.25,1), height 300ms cubic-bezier(.2,.8,.25,1); }
.h-nav-sticky-shrink .hnss-tag { font:500 11px var(--font); font-style:normal; color:var(--dim); letter-spacing:.02em;
  line-height:1; max-height:16px; opacity:1; overflow:hidden; white-space:nowrap;
  transition:opacity 240ms linear, color 240ms linear, max-height 300ms cubic-bezier(.2,.8,.25,1); }
.h-nav-sticky-shrink .ws-btn.ghost { transition:transform 140ms var(--ease-pop, ease-out), opacity 140ms linear,
  color 220ms linear, border-color 220ms linear, background-color 220ms linear; }
/* condensed state — mount() adds .cond once the stage is scrolled past 80px */
.ws-head.h-nav-sticky-shrink.cond { padding-block:9px;
  background:color-mix(in srgb, var(--panel) 90%, transparent); border-bottom-color:var(--hair); }
.h-nav-sticky-shrink.cond .ws-logo b { font-size:15px; }
.h-nav-sticky-shrink.cond .ws-logodot { width:9px; height:9px; }
.h-nav-sticky-shrink.cond .hnss-tag { opacity:0; max-height:0; }
.h-nav-sticky-shrink.cond .ws-btn.ghost { background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  color:var(--accent-text, #04121a); border-color:transparent; }
@container site (max-width: 560px) {
  .h-nav-sticky-shrink .ws-btn { display:none; }
}
/* nav-pill - SB_04 drafts/nav-pill - floating centered capsule; a soft highlight glides
   behind the pointed link (wired in mount()), an accent dot marks the active page. Origin
   scroll-frost + backdrop-blur dropped (no backdrop-filter per house rules). */
.ws-head.h-nav-pill { background:none; border-bottom:none; padding:16px 18px; }
.h-nav-pill .np-bar { width:min(880px, 94cqw); gap:0; padding:6px 6px 6px 20px;
  border-radius:99px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow:0 10px 30px -18px color-mix(in srgb, #000 55%, transparent); }
.h-nav-pill .ws-logo { padding-right:18px; flex:none; }
.h-nav-pill .np-sep { width:1px; height:20px; flex:none; margin-right:6px; background:var(--hair); }
.h-nav-pill .np-nav { position:relative; gap:2px; margin-left:0; }
.h-nav-pill .np-glide { position:absolute; left:0; top:50%; translate:0 -50%; height:30px; width:0;
  border-radius:99px; pointer-events:none; opacity:0; transition:opacity 160ms linear;
  background:color-mix(in srgb, var(--ink) 9%, transparent); }
.h-nav-pill .np-link { position:relative; z-index:1; padding:7px 14px; border-radius:99px; color:var(--dim); }
.h-nav-pill .np-link:hover, .h-nav-pill .np-link.on { background:none; color:var(--ink); }
.h-nav-pill .np-link.on::after { content:''; display:inline-block; width:4px; height:4px; margin-left:6px;
  border-radius:50%; background:var(--accent); vertical-align:middle; position:relative; top:-1px; }
.h-nav-pill .np-cta { margin-left:auto; border-radius:99px; }
@container site (max-width: 560px) { .h-nav-pill .np-sep { display:none; } .h-nav-pill .np-bar { padding-left:16px; } }
/* nav-floating — a centered glass capsule floating over the page (SB_04 drafts/nav-floating).
   Glass = translucent panel + a light hairline edge + token elevation; origin's backdrop-blur
   and padding-shrink-on-scroll dropped per port rules. Reuses ws-logo / ws-nav / ws-navlink /
   ws-btn / ws-menubtn atoms; nav auto-hides & the hamburger auto-shows at 560cqw. */
.ws-head.h-nav-floating { background:none; border-bottom:none; padding:14px 18px; }
.h-nav-floating .nflpill { display:flex; align-items:center; gap:6px; margin:0 auto; width:fit-content; max-width:96cqw;
  padding:7px 8px 7px 18px; border-radius:99px; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background:color-mix(in srgb, var(--panel) 84%, transparent);
  box-shadow:var(--elev), var(--inset-hi); }
.h-nav-floating .ws-logo { margin-right:6px; }
.h-nav-floating .ws-nav { margin-left:0; gap:2px; }
.h-nav-floating .ws-navlink { padding:7px 14px; border-radius:99px; }
.h-nav-floating .ws-btn { margin-left:4px; border-radius:99px; }
.h-nav-floating .ws-menubtn { margin-left:2px; border-radius:50%; }
@container site (max-width: 560px) {
  .h-nav-floating .nflpill { padding:6px 7px 6px 16px; }
  .h-nav-floating .ws-logo { margin-right:auto; }
  .h-nav-floating .ws-btn { display:none; }
}
/* ===== SB_04 nav-split-header - utility status strip over a centred nav row ===== */
.ws-head.h-nav-split-header { flex-direction:column; align-items:stretch; gap:0; padding-block:0; }
.h-nav-split-header .hnsh-strip { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:7px 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.h-nav-split-header .hnsh-side { display:flex; align-items:center; gap:13px; min-width:0; }
.h-nav-split-header .hnsh-util { font:500 11.5px var(--font); color:var(--dim); cursor:pointer; white-space:nowrap;
  transition:color 120ms linear; }
.h-nav-split-header .hnsh-util:hover { color:var(--ink); }
.h-nav-split-header .hnsh-sep { width:1px; height:11px; background:var(--hair); flex:none; }
.h-nav-split-header .hnsh-status { display:inline-flex; align-items:center; gap:7px; min-width:0;
  font:500 11.5px var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h-nav-split-header .hnsh-dot { width:6px; height:6px; border-radius:50%; flex:none; background:var(--ok, #22c55e);
  box-shadow:0 0 8px color-mix(in srgb, var(--ok, #22c55e) 60%, transparent); animation:hnshPulse 2.4s ease-in-out infinite; }
@keyframes hnshPulse { 0%, 100% { opacity:1; } 50% { opacity:.5; } }
.h-nav-split-header .hnsh-main { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:12px 0; }
.h-nav-split-header .hnsh-main .ws-logo { justify-self:start; }
.h-nav-split-header .hnsh-nav { justify-self:center; margin:0; }
.h-nav-split-header .hnsh-actions { justify-self:end; display:flex; align-items:center; gap:12px; }
@container site (max-width: 560px) {
  .h-nav-split-header .hnsh-strip { display:none; }
  .h-nav-split-header .hnsh-nav { display:none; }
  .h-nav-split-header .hnsh-actions .ws-quietlink,
  .h-nav-split-header .hnsh-actions .ws-btn { display:none; }
}
/* nav-dots — ported from SB_04 drafts/nav-dots. Pages become minimalist pips; the active dot fills
   with accent and shows its label, and any dot reveals its label tooltip on hover (mount() moves .on
   to the clicked dot for live feedback). Dots ride the shared .ws-nav, so they auto-hide under 560cqw
   and the hamburger takes over. Theme-tokened; pip fill snaps (no bg transition per house rule), the
   label reveal animates opacity + transform only. */
.h-nav-dots .ws-nav.nd { gap:15px; margin-right:6px; }
.h-nav-dots .nd-dot { position:relative; display:flex; align-items:center; justify-content:center;
  padding:6px 3px; border-radius:0; background:none; }
.h-nav-dots .nd-dot:hover { background:none; }
.h-nav-dots .nd-pip { display:block; width:10px; height:10px; border-radius:50%; flex:none;
  border:2px solid var(--faint); background:transparent;
  transition:border-color 160ms linear, transform 160ms ease; }
.h-nav-dots .nd-dot:hover .nd-pip { border-color:var(--accent); transform:scale(1.25); }
.h-nav-dots .nd-dot.on .nd-pip { border-color:var(--accent); background:var(--accent); }
.h-nav-dots .nd-label { position:absolute; top:calc(100% + 8px); left:50%;
  padding:4px 8px; border-radius:6px; white-space:nowrap; pointer-events:none;
  font:600 10px var(--font); letter-spacing:.02em; color:var(--ink);
  background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  opacity:0; transform:translate(-50%, -4px);
  transition:opacity 160ms linear, transform 160ms ease; }
.h-nav-dots .nd-dot:hover .nd-label,
.h-nav-dots .nd-dot.on .nd-label { opacity:1; transform:translate(-50%, 0); }
/* nav-progress — reading-progress nav: a top rail fills with scroll while a marker walks the nav (SB_04 drafts/nav-progress) */
.ws-head.h-nav-progress { position:sticky; }
.h-nav-progress .ws-nprog { position:absolute; left:0; right:0; top:0; height:3px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 7%, transparent); }
.h-nav-progress .ws-nprog b { display:block; width:0%; height:100%;
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); }
.h-nav-progress .ws-navlink { position:relative; }
.h-nav-progress .ws-navlink::after { content:''; position:absolute; left:11px; right:11px; bottom:3px; height:2px;
  border-radius:2px; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  transform:scaleX(0); transform-origin:left center; transition:transform 220ms cubic-bezier(.2,.8,.25,1); }
.h-nav-progress .ws-navlink.reading:not(.on) { color:var(--ink); }
.h-nav-progress .ws-navlink.reading::after { transform:scaleX(1); }
/* nav-tabs — ported from SB_04 drafts/nav-tabs: a sticky in-page tab bar. The pages become a
   row of tabs sitting on the header baseline; a sliding underline (wired in mount()) glides to
   the active page and follows the pointer, snapping back on leave. A right actions slot (divider
   + CTA) echoes the origin's Share slot. Origin --ntabs-* vars -> theme tokens (no baked hex);
   backdrop-blur + baked entrance dropped (house rules); only transform/opacity/color/width move;
   the tab row + actions hide and the hamburger shows at 560cqw. */
.ws-head.h-nav-tabs { align-items:stretch; gap:20px; padding-block:0; min-height:56px; }
.h-nav-tabs .ws-logo { align-self:center; flex:none; }
.h-nav-tabs .ws-nav.tabs { position:relative; align-items:stretch; gap:0; margin-left:0;
  align-self:stretch; overflow-x:auto; scrollbar-width:none; }
.h-nav-tabs .ws-nav.tabs::-webkit-scrollbar { display:none; }
.h-nav-tabs .ws-navlink.tab { display:inline-flex; align-items:center; gap:7px; height:100%;
  padding:0 16px; border-radius:0; color:var(--dim); font-weight:500; white-space:nowrap;
  transition:color 140ms linear; }
.h-nav-tabs .ws-navlink.tab:hover, .h-nav-tabs .ws-navlink.tab.on { background:none; color:var(--ink); }
.h-nav-tabs .ws-navlink.tab:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:3px; }
.h-nav-tabs .ws-tabink { position:absolute; left:0; bottom:0; height:2px; width:0; opacity:0;
  border-radius:99px; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  pointer-events:none; }
.h-nav-tabs .ws-tabacts { display:inline-flex; align-items:center; gap:10px; align-self:center;
  margin-left:auto; padding-left:18px; border-left:var(--bw, 1px) solid var(--hair); }
.h-nav-tabs .ws-menubtn { align-self:center; }
@container site (max-width: 560px) {
  .h-nav-tabs .ws-nav.tabs { display:none; }
  .h-nav-tabs .ws-tabacts { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .h-nav-tabs .ws-navlink.tab { transition:none; }
}
/* nav-contextual — a dot+label trail on a connector rail; the active page glows, a live scroll-fill threads the dots (SB_04 drafts/nav-contextual) */
.ws-head.h-nav-contextual { position:sticky; }
.h-nav-contextual .ws-nav.hnctx { gap:20px; margin-right:8px; }
.h-nav-contextual .hnctx-item { position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:6px 2px; border-radius:0; background:none; transition:none; }
.h-nav-contextual .hnctx-item:hover, .h-nav-contextual .hnctx-item.on { background:none; }
/* connector tick, sitting in the gap — the origin's item::before line, turned horizontal; fills accent as the trail advances */
.h-nav-contextual .hnctx-item::before { content:''; position:absolute; right:100%; top:50%; margin-right:5px;
  width:11px; height:1px; transform:translateY(-50%); background:var(--hair); }
.h-nav-contextual .hnctx-item:first-child::before { display:none; }
.h-nav-contextual .hnctx-item.past::before,
.h-nav-contextual .hnctx-item.viewing::before { background:var(--accent-dim, var(--accent)); }
/* dot — hollow by default, fills + rings on the active page */
.h-nav-contextual .hnctx-dot { position:relative; display:block; width:8px; height:8px; border-radius:50%; flex:none;
  border:1.5px solid var(--faint); background:transparent;
  transition:border-color 160ms linear, transform 160ms ease; }
.h-nav-contextual .hnctx-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--accent); opacity:0; transform:scale(.55);
  transition:opacity 200ms linear, transform 200ms ease; }
.h-nav-contextual .hnctx-item:hover .hnctx-dot { border-color:var(--ink); transform:scale(1.15); }
.h-nav-contextual .hnctx-item.past .hnctx-dot { border-color:var(--accent-dim, var(--accent)); background:var(--accent-dim, var(--accent)); }
.h-nav-contextual .hnctx-item.viewing .hnctx-dot { border-color:var(--accent); }
.h-nav-contextual .hnctx-item.viewing .hnctx-dot::after { opacity:.55; transform:scale(1); }
.h-nav-contextual .hnctx-item.on .hnctx-dot { width:10px; height:10px; border-color:var(--accent); background:var(--accent); }
.h-nav-contextual .hnctx-item.on .hnctx-dot::after { opacity:.5; transform:scale(1); }
/* label — dim until you approach; the origin's reveal, kept as a brighten + slide */
.h-nav-contextual .hnctx-label { font:500 12px var(--font); letter-spacing:.03em; color:var(--dim);
  white-space:nowrap; transition:color 160ms linear, transform 160ms ease; }
.h-nav-contextual .hnctx-item:hover .hnctx-label { color:var(--ink); transform:translateX(1px); }
.h-nav-contextual .hnctx-item.viewing .hnctx-label { color:var(--ink); }
.h-nav-contextual .hnctx-item.on .hnctx-label { color:var(--accent); font-weight:600; }
/* nav-breadcrumb (SB_04) — a location trail: muted crumbs, chevron separators, a bold current page.
   mount() collapses the middle to an ellipsis when the trail overflows its space. */
.ws-head.h-nav-breadcrumb { gap:0; padding-block:11px; }
.h-nav-breadcrumb .ws-logo { margin-right:18px; flex:none; }
.h-nav-breadcrumb .ws-nav.ws-crumbnav { margin:0 auto 0 0; min-width:0; flex:0 1 auto; }
.h-nav-breadcrumb .ws-crumbs { display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0;
  min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.h-nav-breadcrumb .ws-crumbs::-webkit-scrollbar { width:0; height:0; }
.h-nav-breadcrumb .ws-crumb { display:flex; align-items:center; flex:none; }
.h-nav-breadcrumb .ws-crumb:not(:last-child)::after { content:"\203A"; color:var(--faint);
  font-size:0.9em; line-height:1; margin:0 0.5rem; flex:none; }
.h-nav-breadcrumb .ws-navlink.crumb { padding:6px 3px; border-radius:0; font-weight:500;
  color:var(--dim); white-space:nowrap; }
.h-nav-breadcrumb .ws-navlink.crumb:hover { background:none; color:var(--ink); }
.h-nav-breadcrumb .ws-crumbcur { padding:6px 3px; font:600 13px var(--font); color:var(--ink); white-space:nowrap; }
.h-nav-breadcrumb .ws-crumb-ell { display:none; }
.h-nav-breadcrumb .ws-crumbmore { border:none; background:none; cursor:pointer; padding:2px 3px;
  font:600 14px var(--font); color:var(--faint); line-height:1; transition:color 120ms linear; }
.h-nav-breadcrumb .ws-crumbmore:hover { color:var(--ink); }
.h-nav-breadcrumb .ws-crumbs.collapsed .ws-crumb { display:none; }
.h-nav-breadcrumb .ws-crumbs.collapsed .ws-crumb:first-child,
.h-nav-breadcrumb .ws-crumbs.collapsed .ws-crumb.on,
.h-nav-breadcrumb .ws-crumbs.collapsed .ws-crumb:last-child,
.h-nav-breadcrumb .ws-crumbs.collapsed .ws-crumb-ell { display:flex; }
@container site (max-width: 560px) {
  .ws-head.h-nav-breadcrumb { gap:12px; }
  .h-nav-breadcrumb .ws-btn { display:none; }
  .h-nav-breadcrumb .ws-menubtn { margin-left:auto; }
}
/* nav-sidebar — full-height left sidebar; collapsible to an icon rail, off-canvas on small containers */
.ws-site:has(> .ws-head.h-nav-sidebar) { padding-left:240px; }
.ws-site:has(> .ws-head.h-nav-sidebar.hnsb-collapsed) { padding-left:64px; }
.ws-head.h-nav-sidebar { position:absolute; inset:0; z-index:30; display:block; padding:0; padding-inline:0;
  gap:0; background:none; border-bottom:none; pointer-events:none; }
.h-nav-sidebar .hnsb-side, .h-nav-sidebar .hnsb-bar, .h-nav-sidebar .hnsb-scrim { pointer-events:auto; }
.h-nav-sidebar .hnsb-side { position:sticky; top:0; height:100cqh; width:240px; display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--panel) 82%, var(--bg)); border-right:var(--bw, 1px) solid var(--hair);
  overflow:hidden; transition:width 220ms var(--ease-out, ease); }
.h-nav-sidebar.hnsb-collapsed .hnsb-side { width:64px; }
.h-nav-sidebar .hnsb-top { display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:56px; padding:0 12px 0 16px; border-bottom:var(--bw, 1px) solid var(--hair); flex:none; }
.h-nav-sidebar .hnsb-top .ws-logo { min-width:0; overflow:hidden; }
.h-nav-sidebar .hnsb-top .ws-logo b { white-space:nowrap; transition:opacity 160ms linear; }
.h-nav-sidebar.hnsb-collapsed .hnsb-top { padding:0; justify-content:center; }
.h-nav-sidebar.hnsb-collapsed .hnsb-top .ws-logo { display:none; }
.h-nav-sidebar .hnsb-toggle { flex:none; width:28px; height:28px; display:grid; place-items:center; border:none;
  border-radius:8px; cursor:pointer; color:var(--dim); background:none;
  transition:color 120ms linear, background 120ms linear; }
.h-nav-sidebar .hnsb-toggle:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.h-nav-sidebar .hnsb-toggle svg { width:16px; height:16px; transition:transform 220ms var(--ease-out, ease); }
.h-nav-sidebar.hnsb-collapsed .hnsb-toggle svg { transform:rotate(180deg); }
.h-nav-sidebar .hnsb-nav { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:14px 0; min-height:0; }
.h-nav-sidebar .hnsb-glabel { display:block; padding:0 18px 8px; font:600 10px var(--font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; transition:opacity 160ms linear; }
.h-nav-sidebar.hnsb-collapsed .hnsb-glabel { opacity:0; }
.h-nav-sidebar .hnsb-list { display:flex; flex-direction:column; gap:2px; padding:0 10px; }
.h-nav-sidebar .hnsb-link { display:flex; align-items:center; gap:11px; padding:8px; border-radius:9px;
  cursor:pointer; color:var(--dim); font:500 13.5px var(--font); text-decoration:none; white-space:nowrap; overflow:hidden;
  transition:color 120ms linear, background 120ms linear; }
.h-nav-sidebar .hnsb-ico { flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  font:700 12px var(--font); font-style:normal; background:color-mix(in srgb, var(--ink) 6%, transparent);
  transition:color 120ms linear, background 120ms linear; }
.h-nav-sidebar .hnsb-lbl { min-width:0; overflow:hidden; transition:opacity 160ms linear; }
.h-nav-sidebar .hnsb-link:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.h-nav-sidebar .hnsb-link.on { color:var(--accent); background:var(--accent-fill); }
.h-nav-sidebar .hnsb-link.on .hnsb-ico { background:var(--accent-fill2, var(--accent-fill)); color:var(--accent); }
.h-nav-sidebar.hnsb-collapsed .hnsb-link { justify-content:center; padding:8px 0; }
.h-nav-sidebar.hnsb-collapsed .hnsb-lbl { opacity:0; }
.h-nav-sidebar .hnsb-foot { flex:none; display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-top:var(--bw, 1px) solid var(--hair); }
.h-nav-sidebar .hnsb-avatar { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font:700 11px var(--font); font-style:normal; color:var(--accent); background:var(--accent-fill);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.h-nav-sidebar .hnsb-who { display:flex; flex-direction:column; min-width:0; overflow:hidden; transition:opacity 160ms linear; }
.h-nav-sidebar .hnsb-who b { font:600 12.5px var(--font); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h-nav-sidebar .hnsb-who em { font:500 11px var(--font); font-style:normal; color:var(--dim); white-space:nowrap; }
.h-nav-sidebar.hnsb-collapsed .hnsb-foot { justify-content:center; padding:12px 0; }
.h-nav-sidebar.hnsb-collapsed .hnsb-who { opacity:0; max-width:0; }
.h-nav-sidebar .hnsb-bar { position:absolute; left:0; right:0; top:0; height:52px; z-index:3; display:none;
  align-items:center; gap:12px; padding:0 14px; background:color-mix(in srgb, var(--panel) 88%, var(--bg));
  border-bottom:var(--bw, 1px) solid var(--hair); }
.h-nav-sidebar .hnsb-burger { flex:none; width:36px; height:36px; display:grid; place-items:center; border:none;
  border-radius:8px; cursor:pointer; color:var(--ink); background:none; transition:color 120ms linear, background 120ms linear; }
.h-nav-sidebar .hnsb-burger:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.h-nav-sidebar .hnsb-burger svg { width:20px; height:20px; }
.h-nav-sidebar .hnsb-scrim { position:absolute; inset:0; z-index:1; display:none; opacity:0; pointer-events:none;
  background:color-mix(in srgb, var(--bg-deep) 60%, transparent); transition:opacity 220ms linear; }
@container site (max-width:560px) {
  .ws-site:has(> .ws-head.h-nav-sidebar) { padding-left:0; }
  .h-nav-sidebar .hnsb-bar { display:flex; }
  .h-nav-sidebar .hnsb-side, .h-nav-sidebar.hnsb-collapsed .hnsb-side { position:absolute; left:0; top:0; bottom:0;
    height:100cqh; width:min(280px, 82%); transform:translateX(-100%); box-shadow:none; z-index:2;
    transition:transform 240ms var(--ease-out, ease); }
  .h-nav-sidebar.hnsb-open .hnsb-side { transform:translateX(0); box-shadow:10px 0 44px -20px rgb(0 0 0 / .55); }
  .h-nav-sidebar.hnsb-collapsed .hnsb-top { padding:0 12px 0 16px; justify-content:space-between; }
  .h-nav-sidebar.hnsb-collapsed .hnsb-top .ws-logo { display:flex; }
  .h-nav-sidebar.hnsb-collapsed .hnsb-top .ws-logo b, .h-nav-sidebar.hnsb-collapsed .hnsb-glabel,
  .h-nav-sidebar.hnsb-collapsed .hnsb-lbl, .h-nav-sidebar.hnsb-collapsed .hnsb-who { opacity:1; max-width:none; }
  .h-nav-sidebar.hnsb-collapsed .hnsb-link { justify-content:flex-start; padding:8px; }
  .h-nav-sidebar .hnsb-toggle { display:none; }
  .h-nav-sidebar .hnsb-scrim { display:block; }
  .h-nav-sidebar.hnsb-open .hnsb-scrim { opacity:1; pointer-events:auto; }
}
/* nav-tabs-page - Page Tabs - editor/browser-style file tabs (SB_04 drafts/nav-tabs-page).
   Pages read as tabs on the header rule; the current page rides a filled panel tab with an accent
   underline, inactive tabs wash on hover. Active state is CSS .on (tracks ctx.activePage); mount()
   syncs aria-selected and auto-centers the active tab when the strip overflows. Theme tokens only;
   transitions limited to color/transform/opacity. Nav auto-hides under 560cqw (shared menubtn rule). */
.h-nav-tabs-page .ws-nav.tabspage { gap:4px; margin-left:auto; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none; }
.h-nav-tabs-page .ws-nav.tabspage::-webkit-scrollbar { display:none; }
.h-nav-tabs-page .ws-navlink.tabpage { position:relative; flex:none; padding:8px 15px; border-radius:8px;
  background:transparent; color:var(--dim); font:500 13px var(--font); white-space:nowrap;
  transition:color 140ms linear; }
.h-nav-tabs-page .ws-navlink.tabpage:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.h-nav-tabs-page .ws-navlink.tabpage.on { color:var(--ink); background:color-mix(in srgb, var(--panel) 88%, transparent); }
.h-nav-tabs-page .ws-navlink.tabpage::after { content:''; position:absolute; left:12px; right:12px; bottom:4px;
  height:2px; border-radius:2px; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  transform:scaleX(0); transform-origin:50% 50%; opacity:0;
  transition:transform 180ms cubic-bezier(.2,.8,.25,1), opacity 160ms linear; pointer-events:none; }
.h-nav-tabs-page .ws-navlink.tabpage.on::after { transform:scaleX(1); opacity:1; }
@container site (max-width: 860px) {
  .h-nav-tabs-page .ws-navlink.tabpage { padding:8px 12px; }
}
/* nav-mega (SB_04 · drafts/nav-mega) — full-width mega-menu dropdown ported to the page-driven builder.
   Each page is a hover-intent trigger (wired in mount()); opening slides a wide panel: a two-column
   page directory beside a featured card whose title/desc/CTA are rebuilt live for the hovered page.
   Dropped from origin: backdrop blur (house rule), fixed positioning, baked entrance + max-height
   animations. Panel now animates on opacity + transform only; all --nmega-* hex swapped for tokens.
   Mobile: nav + panel hide, the global hamburger takes over via the shared 560px rule. */
.ws-head.h-nav-mega { position:sticky; }
.h-nav-mega .hnmg-nav { margin-left:24px; margin-right:auto; gap:2px; }
.h-nav-mega .hnmg-trigger { display:inline-flex; align-items:center; gap:5px; }
.h-nav-mega .hnmg-chev { width:13px; height:13px; opacity:.7;
  transition:transform 200ms cubic-bezier(.2,.8,.25,1), color 120ms linear; }
.h-nav-mega .hnmg-trigger.hnmg-active { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.h-nav-mega .hnmg-trigger.hnmg-active .hnmg-chev { transform:rotate(180deg); opacity:1; }
/* mega panel — anchored to the header content box, animates open on interaction */
.h-nav-mega .hnmg-panelwrap { position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:50;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity 180ms linear, transform 240ms cubic-bezier(.2,.8,.25,1); }
.h-nav-mega.hnmg-open .hnmg-panelwrap { opacity:1; pointer-events:auto; transform:translateY(0); }
.h-nav-mega .hnmg-panel { display:grid; grid-template-columns:1fr 262px; gap:26px; padding:22px;
  border-radius:14px; border:var(--bw, 1px) solid var(--hair); overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none);
  box-shadow:0 24px 64px color-mix(in srgb, var(--bg) 55%, transparent); }
.h-nav-mega .hnmg-col-head { font:600 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px; padding-bottom:10px; border-bottom:var(--bw, 1px) solid var(--hair); }
.h-nav-mega .hnmg-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
.h-nav-mega .hnmg-item { display:flex; align-items:flex-start; gap:11px; padding:9px 10px; border-radius:9px;
  cursor:pointer; text-decoration:none; transition:transform 140ms var(--ease-pop, ease-out); }
.h-nav-mega .hnmg-item:hover { transform:translateX(2px); }
.h-nav-mega .hnmg-item:hover .hnmg-item-title { color:var(--accent); }
.h-nav-mega .hnmg-item-ic { width:30px; height:30px; flex:none; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center; font:700 13px var(--font); color:var(--accent);
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.h-nav-mega .hnmg-item-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.h-nav-mega .hnmg-item-title { font:600 13px var(--font); color:var(--ink); transition:color 120ms linear; }
.h-nav-mega .hnmg-item-desc { font:400 11.5px var(--font); color:var(--faint); font-style:normal; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* featured card — spotlights the hovered page (content set live in mount) */
.h-nav-mega .hnmg-featured { display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:12px;
  cursor:pointer; text-decoration:none; border:1px solid color-mix(in srgb, var(--accent) 15%, var(--hair));
  background:color-mix(in srgb, var(--accent) 6%, var(--panel));
  transition:transform 160ms cubic-bezier(.2,.8,.25,1); }
.h-nav-mega .hnmg-featured:hover { transform:translateY(-2px); }
.h-nav-mega .hnmg-feat-badge { align-self:flex-start; font:600 9px var(--mono); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--accent); background:var(--accent-fill);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); padding:3px 9px; border-radius:99px; }
.h-nav-mega .hnmg-feat-title { font:800 17px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.h-nav-mega .hnmg-feat-desc { font:400 12.5px var(--font); color:var(--dim); line-height:1.5; flex:1; }
.h-nav-mega .hnmg-feat-cta { display:inline-flex; align-items:center; gap:6px; margin-top:auto;
  font:600 12.5px var(--font); color:var(--accent); }
.h-nav-mega .hnmg-feat-cta i { font-style:normal; }
.h-nav-mega .hnmg-feat-cta svg { width:14px; height:14px; transition:transform 160ms ease; }
.h-nav-mega .hnmg-featured:hover .hnmg-feat-cta svg { transform:translateX(3px); }
@container site (max-width: 860px) {
  .h-nav-mega .hnmg-panel { grid-template-columns:1fr; }
  .h-nav-mega .hnmg-featured { display:none; }
}
@container site (max-width: 560px) {
  .h-nav-mega .hnmg-nav { display:none; }
  .h-nav-mega .hnmg-panelwrap { display:none; }
  .h-nav-mega > .ws-btn { margin-left:auto; }
}
/* nav-bottom-bar — ported from SB_04 drafts/nav-bottom-bar: a mobile-app tab bar
   anchored to the FOOT of the preview stage (absolute within .ws-site, not fixed to the
   real viewport). Icon-over-label tabs; the active tab lights in accent, lifts its icon
   and drops a short indicator dash. The bar IS ctx.pages so it stays visible at every
   width — the higher-specificity .ws-nav rule overrides the global 560cqw hide. */
.ws-head.h-nav-bottom-bar {
  position:absolute; left:0; right:0; bottom:0; top:auto; z-index:20;
  display:flex; align-items:stretch; gap:0; min-height:60px; padding:0;
  border-bottom:none; border-top:var(--bw, 1px) solid var(--hair);
  background:var(--panel); box-shadow:0 -12px 30px -26px rgb(0 0 0 / .55); }
.ws-head.h-nav-bottom-bar .ws-nav { display:flex; width:100%; margin:0; gap:0; align-items:stretch; }
.h-nav-bottom-bar .nbb-tab {
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:9px 4px 10px; border-radius:0; background:none; color:var(--dim);
  white-space:nowrap; position:relative; transition:color 160ms linear; }
.h-nav-bottom-bar .nbb-tab:hover { color:var(--ink); background:none; }
.h-nav-bottom-bar .nbb-tab.on { color:var(--accent); background:none; }
.h-nav-bottom-bar .nbb-ico {
  width:24px; height:24px; display:grid; place-items:center;
  transition:transform 170ms cubic-bezier(.2,.8,.25,1); }
.h-nav-bottom-bar .nbb-ico svg {
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; display:block; }
.h-nav-bottom-bar .nbb-tab.on .nbb-ico { transform:translateY(-2px); }
.h-nav-bottom-bar .nbb-lbl { font:600 10px/1 var(--font); letter-spacing:.02em; }
.h-nav-bottom-bar .nbb-dash {
  position:absolute; top:0; left:50%; width:26px; height:2px; margin-left:-13px;
  border-radius:0 0 3px 3px; background:var(--accent);
  opacity:0; transform:scaleX(.35);
  transition:transform 190ms cubic-bezier(.2,.8,.25,1), opacity 190ms linear; }
.h-nav-bottom-bar .nbb-tab.on .nbb-dash { opacity:1; transform:scaleX(1); }
@container site (max-width: 560px) {
  .ws-head.h-nav-bottom-bar .ws-nav { display:flex; }
  .h-nav-bottom-bar .nbb-tab { padding:8px 3px 9px; gap:4px; }
  .h-nav-bottom-bar .nbb-lbl { font-size:9.5px; }
}
/* ===== nav-departures — split-flap departures-board menu (SB_04) ===== */
.ws-head.h-nav-departures { display:block; padding:0; font-family:var(--mono); }
.h-nav-departures .hnd-bar { display:flex; align-items:center; gap:16px; min-height:56px;
  padding:10px max(24px, calc((100cqw - 1080px) / 2)); }
.h-nav-departures .ws-logo b { font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; }
.h-nav-departures .hnd-clock { margin-left:auto; font:500 11.5px var(--mono); letter-spacing:.16em;
  color:var(--dim); font-variant-numeric:tabular-nums; }
.h-nav-departures .hnd-toggle { display:inline-flex; align-items:center; gap:9px; padding:8px 15px;
  background:none; border:var(--bw, 1px) solid var(--hair); border-radius:6px; cursor:pointer; color:var(--ink);
  font:600 11px var(--mono); letter-spacing:.2em; text-transform:uppercase;
  transition:color 140ms linear, border-color 140ms linear; }
.h-nav-departures .hnd-toggle:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.h-nav-departures .hnd-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.h-nav-departures .hnd-flaps { display:inline-flex; flex-direction:column; gap:2px; }
.h-nav-departures .hnd-flaps i { width:13px; height:3px; background:currentColor; border-radius:1px; opacity:.85; }

/* board overlay — sticky/absolute + cqh, never position:fixed (mirrors .ws-menu) */
.h-nav-departures .hnd-board { position:absolute; top:0; left:0; width:100cqw; height:100cqh; z-index:30;
  display:flex; flex-direction:column; overflow:hidden; color:var(--ink); background:var(--bg);
  padding:clamp(14px,3cqh,30px) max(22px, calc((100cqw - 1080px) / 2)) clamp(14px,2.4cqh,26px);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity 280ms ease, transform 280ms ease; }
.h-nav-departures .hnd-board::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 1px, transparent 1px 3px); }
.h-nav-departures .hnd-board > * { position:relative; z-index:1; }
.h-nav-departures .hnd-board.is-open { opacity:1; transform:none; pointer-events:auto; }

.h-nav-departures .hnd-board-head { display:flex; align-items:baseline; gap:18px;
  padding-bottom:clamp(10px,2cqh,18px); border-bottom:2px solid var(--accent); }
.h-nav-departures .hnd-board-title { margin:0; flex:1; min-width:0; color:var(--ink);
  font:800 clamp(17px,3.2cqw,27px)/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; }
.h-nav-departures .hnd-board-title em { display:block; margin-top:.5em; font:400 10px var(--mono);
  letter-spacing:.22em; color:var(--dim); font-style:normal; text-transform:none; }
.h-nav-departures .hnd-board-clock { font:500 clamp(13px,2.4cqw,17px) var(--mono); letter-spacing:.14em;
  color:var(--accent); font-variant-numeric:tabular-nums; }
.h-nav-departures .hnd-close { padding:8px 14px; background:none; border:var(--bw, 1px) solid var(--hair); border-radius:6px;
  cursor:pointer; color:var(--ink); font:600 10.5px var(--mono); letter-spacing:.2em; text-transform:uppercase;
  transition:color 140ms linear, border-color 140ms linear; }
.h-nav-departures .hnd-close:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.h-nav-departures .hnd-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.h-nav-departures .hnd-cols, .h-nav-departures .hnd-row { display:grid;
  grid-template-columns:88px minmax(0,1fr) 92px 150px; gap:clamp(10px,2.4cqw,26px); align-items:center; }
.h-nav-departures .hnd-cols { padding:14px 0 9px; border-bottom:var(--bw, 1px) solid var(--hair);
  font:500 9.5px var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--dim); }
.h-nav-departures .hnd-nav { flex:1; overflow-y:auto; overscroll-behavior:contain; }
.h-nav-departures .hnd-row { position:relative; padding:clamp(14px,2.6cqh,24px) 0;
  border-bottom:var(--bw, 1px) solid var(--hair); text-decoration:none; color:var(--ink); cursor:pointer; }
.h-nav-departures .hnd-row::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%);
  transition:opacity 180ms linear; }
.h-nav-departures .hnd-row.is-hot::before, .h-nav-departures .hnd-row.on::before { opacity:1; }
.h-nav-departures .hnd-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.h-nav-departures .hnd-time, .h-nav-departures .hnd-gate { font:500 clamp(12px,2.2cqw,15px) var(--mono);
  letter-spacing:.12em; color:var(--dim); font-variant-numeric:tabular-nums; }
.h-nav-departures .hnd-row.is-hot .hnd-time, .h-nav-departures .hnd-row.on .hnd-time { color:var(--ink); }
.h-nav-departures .hnd-dest { display:flex; flex-wrap:wrap; gap:3px; perspective:620px; line-height:1;
  font-weight:700; font-size:clamp(20px,4.4cqw,36px); letter-spacing:.05em; text-transform:uppercase; }
.h-nav-departures .hnd-sp { width:.5em; }
.h-nav-departures .hnd-tile { position:relative; display:inline-grid; place-items:center;
  min-width:1.16em; height:1.4em; padding:0 .06em; border-radius:3px; color:var(--ink);
  background:linear-gradient(180deg, var(--panel-2) 0 49%, var(--panel) 51% 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, black 40%, transparent); transition:color 160ms linear; }
.h-nav-departures .hnd-tile::after { content:''; position:absolute; left:0; right:0; top:calc(50% - .5px);
  height:1px; background:var(--bg-deep); }
.h-nav-departures .hnd-row.is-hot .hnd-tile, .h-nav-departures .hnd-row.on .hnd-tile { color:var(--accent); }
.h-nav-departures .hnd-row.is-hot .hnd-tile { animation:hnd-flip .42s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d,0ms); }
@keyframes hnd-flip { 0% { transform:rotateX(92deg); opacity:0; } 55% { transform:rotateX(-14deg); opacity:1; } 100% { transform:rotateX(0); opacity:1; } }
.h-nav-departures .hnd-status { font:500 clamp(9.5px,1.8cqw,11.5px) var(--mono); letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.h-nav-departures .hnd-row.is-hot .hnd-status, .h-nav-departures .hnd-row.on .hnd-status { color:var(--accent); }
.h-nav-departures .hnd-foot { margin:14px 0 0; font:500 9.5px var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); }
@container site (max-width: 640px) {
  .h-nav-departures .hnd-cols, .h-nav-departures .hnd-row { grid-template-columns:72px minmax(0,1fr) 108px; }
  .h-nav-departures .hnd-gate, .h-nav-departures .hnd-c-gate { display:none; }
}
@container site (max-width: 460px) {
  .h-nav-departures .hnd-cols, .h-nav-departures .hnd-row { grid-template-columns:minmax(0,1fr) 98px; }
  .h-nav-departures .hnd-time, .h-nav-departures .hnd-c-time { display:none; }
  .h-nav-departures .hnd-clock { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .h-nav-departures .hnd-board { transition:none; transform:none; }
  .h-nav-departures .hnd-row.is-hot .hnd-tile { animation:none; }
  .h-nav-departures .hnd-row::before, .h-nav-departures .hnd-tile,
  .h-nav-departures .hnd-toggle, .h-nav-departures .hnd-close { transition:none; }
}
/* nav-multicolumn — ported from SB_04 drafts/nav-multicolumn (mega / multi-column nav).
   Signature is LIVE in mount(): a Browse trigger inside the nav drops a full-width mega panel —
   a brand-blurb promo column beside a two-column directory of the site's real pages. Origin
   --nmc-* vars -> theme tokens (no baked hex); the origin's hover-reveal + blue bar become a
   click-to-open panel with an --accent top edge. Transitions ride transform/opacity/color only
   (no background/blur per house rules); baked entrance motion dropped (anims.js owns entrances).
   Nav + trigger live in the shared .ws-nav, so they auto-hide and the hamburger auto-shows at
   560cqw — the mega is a desktop affordance, forced shut on small containers. */
.h-nav-multicolumn .ws-nav.nmc { margin-left:clamp(14px, 3cqw, 26px); margin-right:auto; gap:2px; }
.h-nav-multicolumn .nmc-trig { display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border:none; border-radius:8px; background:none; cursor:pointer; white-space:nowrap;
  font:500 13px var(--font); color:var(--dim); transition:color 120ms linear; }
.h-nav-multicolumn .nmc-trig:hover,
.h-nav-multicolumn.nmc-open .nmc-trig { color:var(--ink); }
.h-nav-multicolumn .nmc-chev { display:inline-flex; align-items:center;
  transition:transform 200ms cubic-bezier(.2, .8, .25, 1); }
.h-nav-multicolumn .nmc-chev svg { width:12px; height:12px; }
.h-nav-multicolumn.nmc-open .nmc-chev { transform:rotate(180deg); }
/* mega panel — absolute under the sticky bar; left/right:0 spans the header padding box, the
   inline padding re-insets the card to the 1080 content column (matches .ws-head). visibility
   is a discrete a11y/hit-test toggle (0s step), not motion. */
.h-nav-multicolumn .nmc-mega { position:absolute; top:100%; left:0; right:0; z-index:30;
  padding:8px max(24px, calc((100cqw - 1080px) / 2)) 0;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity 180ms linear, transform 220ms cubic-bezier(.2, .8, .25, 1), visibility 0s linear 220ms; }
.h-nav-multicolumn.nmc-open .nmc-mega { opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity 180ms linear, transform 220ms cubic-bezier(.2, .8, .25, 1), visibility 0s linear 0s; }
.h-nav-multicolumn .nmc-mega-inner { display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.55fr);
  gap:clamp(22px, 4cqw, 52px); padding:24px clamp(20px, 3cqw, 32px);
  background:var(--panel); background-image:var(--surface-grad, none);
  border:var(--bw, 1px) solid var(--hair); border-top:2px solid var(--accent);
  border-radius:0 0 var(--radius, 12px) var(--radius, 12px); box-shadow:var(--elev); }
.h-nav-multicolumn .nmc-promo { display:flex; flex-direction:column; align-items:flex-start; gap:13px;
  padding-right:clamp(18px, 3cqw, 32px); border-right:var(--bw, 1px) solid var(--hair); }
.h-nav-multicolumn .nmc-promo-mark { font:700 clamp(18px, 2.2cqw, 23px) var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.02em; line-height:1.1; }
.h-nav-multicolumn .nmc-promo-tag { margin:0; font:400 13px/1.55 var(--font); color:var(--dim); max-width:32ch; }
.h-nav-multicolumn .nmc-promo .ws-btn { margin-top:auto; }
.h-nav-multicolumn .nmc-cols { display:flex; flex-direction:column; gap:12px; min-width:0; }
.h-nav-multicolumn .nmc-cols-label { margin:0; font:600 10px var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); }
.h-nav-multicolumn .nmc-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px clamp(14px, 2cqw, 26px); }
.h-nav-multicolumn .nmc-link { display:flex; align-items:center; gap:11px; padding:9px 10px;
  border-radius:8px; cursor:pointer; text-decoration:none; color:var(--dim); min-width:0;
  transition:color 120ms linear, transform 140ms cubic-bezier(.2, .8, .25, 1); }
.h-nav-multicolumn .nmc-link:hover { color:var(--ink);
  background:color-mix(in srgb, var(--ink) 6%, transparent); transform:translateX(2px); }
.h-nav-multicolumn .nmc-link.on { color:var(--accent); background:var(--accent-fill); }
.h-nav-multicolumn .nmc-link-idx { flex:none; min-width:17px; font:600 10px var(--mono); color:var(--faint); }
.h-nav-multicolumn .nmc-link:hover .nmc-link-idx,
.h-nav-multicolumn .nmc-link.on .nmc-link-idx { color:var(--accent); }
.h-nav-multicolumn .nmc-link-name { font:500 13.5px var(--font); color:inherit;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@container site (max-width: 860px) {
  .h-nav-multicolumn .nmc-mega-inner { grid-template-columns:1fr; gap:18px; }
  .h-nav-multicolumn .nmc-promo { padding-right:0; padding-bottom:16px;
    border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
}
@container site (max-width: 560px) {
  .h-nav-multicolumn .nmc-mega { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .h-nav-multicolumn .nmc-chev,
  .h-nav-multicolumn .nmc-link { transition:color 120ms linear; }
}
/* nav-command - ported from SB_04 drafts/nav-command: a docked command palette. A centered
   search-trigger pill in a sticky bar opens a full overlay palette whose Navigation group IS
   ctx.pages (real data-page switches) over a Quick actions group; type-to-filter, arrow keys,
   enter and Esc are all LIVE in mount(). Origin --ncmd-* vars -> theme tokens (no baked hex);
   the origin's backdrop-filter blur bar and blurred scrim are dropped (house rule) for solid
   token panels; entrances belong to anims.js; a container query (not viewport media) drops the
   util cluster + footer at 560. Palette width/offset are cq-relative so they track the stage. */
.ws-head.h-nav-command { position:sticky; top:0; gap:12px; }
.h-nav-command .ws-ncmd-mid { flex:1 1 auto; min-width:0; display:flex; justify-content:center; }
.ws-ncmd-trigger { display:inline-flex; align-items:center; gap:9px; width:min(340px, 100%);
  height:36px; padding:0 12px; border-radius:9px; cursor:pointer; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--dim); font:500 12.5px var(--font);
  transition:border-color 160ms linear, color 160ms linear; }
.ws-ncmd-trigger:hover { border-color:color-mix(in srgb, var(--accent) 42%, transparent); color:var(--ink); }
.ws-ncmd-trigger svg { width:14px; height:14px; flex:none; }
.ws-ncmd-trigger span { flex:1; min-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-ncmd-trigger kbd { flex:none; padding:2px 6px; border-radius:5px; border:var(--bw, 1px) solid var(--hair);
  font:600 10px var(--mono); color:var(--faint); }
.ws-ncmd-util { display:inline-flex; align-items:center; gap:9px; flex:none; }
.ws-ncmd-overlay { position:fixed; inset:0; z-index:120; display:flex; justify-content:center;
  align-items:flex-start; padding:9cqh 16px 20px; }
.ws-ncmd-overlay[hidden] { display:none; }
.ws-ncmd-backdrop { position:absolute; inset:0; background:color-mix(in srgb, var(--bg-deep, var(--bg)) 76%, transparent); }
.ws-ncmd-palette { position:relative; z-index:1; width:min(520px, 88cqw); max-height:74cqh;
  display:flex; flex-direction:column; overflow:hidden; border-radius:14px; border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad, none); box-shadow:var(--elev); }
.ws-ncmd-search { display:flex; align-items:center; gap:11px; padding:0 15px; flex:none; border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-ncmd-search svg { width:16px; height:16px; flex:none; color:var(--faint); }
.ws-ncmd-search input { flex:1; min-width:0; height:52px; border:none; outline:none; background:none;
  color:var(--ink); font:500 14.5px var(--font); caret-color:var(--accent); }
.ws-ncmd-search input::placeholder { color:var(--faint); }
.ws-ncmd-search kbd { flex:none; padding:2px 6px; border-radius:5px; border:var(--bw, 1px) solid var(--hair);
  font:600 10px var(--mono); color:var(--faint); }
.ws-ncmd-list { flex:1; overflow-y:auto; padding:7px; }
.ws-ncmd-grouplabel { padding:9px 10px 5px; font:600 10px var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
.ws-ncmd-item { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  cursor:pointer; text-decoration:none; color:var(--ink); transition:color 130ms linear; }
.ws-ncmd-item:hover, .ws-ncmd-item.sel { background:var(--accent-fill); }
.ws-ncmd-item.sel b, .ws-ncmd-item.on b { color:var(--accent); }
.ws-ncmd-ic { width:28px; height:28px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:7px; font:600 12px var(--font); color:var(--dim); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-ncmd-ic.hi { color:var(--accent); background:var(--accent-fill); }
.ws-ncmd-item b { flex:1; min-width:0; font:600 13.5px var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-ncmd-item em { flex:none; font:600 10.5px var(--mono); font-style:normal; color:var(--faint); }
.ws-ncmd-foot { display:flex; align-items:center; gap:16px; padding:10px 15px; flex:none; border-top:var(--bw, 1px) solid var(--hair); }
.ws-ncmd-foot span { display:inline-flex; align-items:center; gap:6px; font:500 11px var(--font); color:var(--faint); }
.ws-ncmd-foot kbd { padding:1px 5px; border-radius:4px; border:var(--bw, 1px) solid var(--hair); font:600 10px var(--mono); color:var(--dim); }
@container site (max-width: 560px) {
  .h-nav-command .ws-ncmd-util { display:none; }
  .h-nav-command .ws-ncmd-foot { display:none; }
}
/* nav-mega-simple (SB_04 · drafts/nav-mega-simple) — simplified full-width mega menu.
   LIVE in mount(): a trigger button drops a token-driven mega card that lays the site pages out as an
   icon grid beside a featured tile; click / Escape / click-away close it, and the preview auto-opens it
   so the panel is visible. The nav IS ctx.pages (page-driven, data-page links) — the origin's fabricated
   Product/Use-Case marketing copy and its placeholder <img> were rebuilt as the page grid + a
   CSS-gradient featured tile (no external image). Dropped per house rules: backdrop blur, background
   transitions, baked entrance motion (anims.js owns entrances), and the origin's viewport media query +
   bespoke mobile accordion — the global 560px rule hides .ws-nav and the site menu owns mobile. Only
   transform/opacity/color transition; the mega drops from the sticky .ws-head (its containing block). */
.h-nav-mega-simple .ws-nav { margin-left:22px; margin-right:auto; gap:2px; }
.h-nav-mega-simple .h-nms-trigger { display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border:none; border-radius:8px; background:none; cursor:pointer; font:500 13px var(--font); color:var(--dim);
  transition:color 120ms linear; }
.h-nav-mega-simple .h-nms-trigger:hover,
.h-nav-mega-simple.h-nms-open .h-nms-trigger { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.h-nav-mega-simple .h-nms-chev { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex:none; transition:transform 200ms cubic-bezier(.2,.8,.25,1); }
.h-nav-mega-simple.h-nms-open .h-nms-chev { transform:rotate(180deg); }
/* the mega card — drops as a detached rounded panel under the bar */
.h-nav-mega-simple .h-nms-mega { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  border:var(--bw, 1px) solid var(--hair); border-radius:14px; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none); box-shadow:var(--elev);
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity 180ms linear, transform 220ms cubic-bezier(.2,.8,.25,1); }
.h-nav-mega-simple.h-nms-open .h-nms-mega { opacity:1; pointer-events:auto; transform:translateY(0); }
.h-nav-mega-simple .h-nms-mega-in { display:grid; grid-template-columns:1.7fr 240px; gap:0; padding:22px; }
.h-nav-mega-simple .h-nms-head { margin:0 0 14px; padding-bottom:10px; border-bottom:var(--bw, 1px) solid var(--hair);
  font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.h-nav-mega-simple .h-nms-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding-right:22px; }
.h-nav-mega-simple .h-nms-plink { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px;
  text-decoration:none; cursor:pointer; }
.h-nav-mega-simple .h-nms-plink:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.h-nav-mega-simple .h-nms-pico { width:34px; height:34px; flex:none; display:inline-flex; align-items:center;
  justify-content:center; border-radius:8px; color:var(--accent); background:var(--accent-fill); }
.h-nav-mega-simple .h-nms-plink:hover .h-nms-pico { background:var(--accent-fill2); }
.h-nav-mega-simple .h-nms-pico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.h-nav-mega-simple .h-nms-plink b { font:600 13.5px var(--font); color:var(--ink); transition:color 120ms linear; }
.h-nav-mega-simple .h-nms-plink:hover b { color:var(--accent); }
/* featured tile — token gradient stands in for the origin's placeholder image */
.h-nav-mega-simple .h-nms-featured { display:flex; flex-direction:column; gap:11px; padding-left:22px;
  border-left:var(--bw, 1px) solid var(--hair); text-decoration:none; cursor:pointer; }
.h-nav-mega-simple .h-nms-fthumb { display:block; width:100%; height:100px; border-radius:10px; border:var(--bw, 1px) solid var(--hair);
  background:linear-gradient(135deg, var(--accent-fill2), color-mix(in srgb, var(--accent) 26%, var(--panel-2))); }
.h-nav-mega-simple .h-nms-ftitle { font:600 14px var(--font-head, var(--font)); line-height:1.3; letter-spacing:-.01em; color:var(--ink); }
.h-nav-mega-simple .h-nms-flink { display:inline-flex; align-items:center; gap:5px; margin-top:auto;
  font:600 12px var(--font); color:var(--accent); }
.h-nav-mega-simple .h-nms-flink svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform 140ms ease; }
.h-nav-mega-simple .h-nms-featured:hover .h-nms-flink svg { transform:translateX(3px); }
@container site (max-width: 860px) {
  .h-nav-mega-simple .h-nms-mega-in { grid-template-columns:1fr; gap:18px; }
  .h-nav-mega-simple .h-nms-grid { padding-right:0; }
  .h-nav-mega-simple .h-nms-featured { padding-left:0; padding-top:18px; border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
}
@container site (max-width: 560px) {
  .h-nav-mega-simple .h-nms-mega { display:none; }
}
/* nav-hover-dropdown — ported from SB_04 drafts/nav-hover-dropdown. A standard bar whose
   lead nav item reveals a rich icon+label+desc panel on hover / focus / click (mount()
   toggles .open for touch; rows navigate via data-page). Origin --nhd-* vars -> theme tokens;
   baked entrance + backdrop blur dropped (anims own entrances, no backdrop-filter); only
   hover/open motion, on transform+opacity+color. The nav rides the shared .ws-nav atom so it
   auto-hides and the hamburger auto-shows at 560cqw; the panel lives inside it and hides too. */
.h-nav-hover-dropdown .hnhd-nav { gap:2px; }
.h-nav-hover-dropdown .hnhd-item { position:relative; display:inline-flex; align-items:center; }
.h-nav-hover-dropdown .hnhd-trigger { display:inline-flex; align-items:center; gap:5px; border:none; background:none; }
.h-nav-hover-dropdown .hnhd-chev { width:13px; height:13px; flex:none; transition:transform 200ms cubic-bezier(.4,0,.2,1); }
.h-nav-hover-dropdown .hnhd-item:hover .hnhd-chev,
.h-nav-hover-dropdown .hnhd-item:focus-within .hnhd-chev,
.h-nav-hover-dropdown .hnhd-item.open .hnhd-chev { transform:rotate(180deg); }
.h-nav-hover-dropdown .hnhd-drop { position:absolute; top:calc(100% + 11px); left:0; width:288px; padding:7px; z-index:40;
  display:flex; flex-direction:column; gap:2px; background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * .85); box-shadow:var(--elev, 0 16px 40px rgba(0,0,0,.28));
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity 180ms cubic-bezier(.4,0,.2,1), transform 180ms cubic-bezier(.4,0,.2,1); }
.h-nav-hover-dropdown .hnhd-item:hover .hnhd-drop,
.h-nav-hover-dropdown .hnhd-item:focus-within .hnhd-drop,
.h-nav-hover-dropdown .hnhd-item.open .hnhd-drop { opacity:1; pointer-events:auto; transform:translateY(0); }
.h-nav-hover-dropdown .hnhd-drop::before { content:''; position:absolute; top:-5px; left:24px; width:10px; height:10px;
  background:var(--panel-2, var(--panel)); border-top:var(--bw, 1px) solid var(--hair); border-left:var(--bw, 1px) solid var(--hair); transform:rotate(45deg); }
.h-nav-hover-dropdown .hnhd-drop::after { content:''; position:absolute; top:-11px; left:0; right:0; height:11px; }
.h-nav-hover-dropdown .hnhd-row { display:flex; align-items:flex-start; gap:11px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.h-nav-hover-dropdown .hnhd-row:hover,
.h-nav-hover-dropdown .hnhd-row.on { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.h-nav-hover-dropdown .hnhd-ic { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:8px;
  background:var(--accent-fill); color:var(--accent); }
.h-nav-hover-dropdown .hnhd-ic svg { width:16px; height:16px; }
.h-nav-hover-dropdown .hnhd-rowbody { display:flex; flex-direction:column; gap:2px; min-width:0; }
.h-nav-hover-dropdown .hnhd-rowlabel { font:600 13px var(--font); color:var(--ink); line-height:1.2; transition:color 120ms linear; }
.h-nav-hover-dropdown .hnhd-row:hover .hnhd-rowlabel,
.h-nav-hover-dropdown .hnhd-row.on .hnhd-rowlabel { color:var(--accent); }
.h-nav-hover-dropdown .hnhd-rowdesc { font:400 11.5px/1.4 var(--font); color:var(--dim); }
@media (prefers-reduced-motion: reduce) {
  .h-nav-hover-dropdown .hnhd-chev, .h-nav-hover-dropdown .hnhd-drop { transition:none; }
}
/* nav-overlay - SB_04 drafts/nav-overlay: fullscreen overlay menu. A slim bar (logo + an
   always-visible animated hamburger) reveals a stage-filling panel of oversized numbered
   links over a social/tagline footer; open/close is LIVE in mount() (hamburger toggle,
   Escape, close-on-navigate, focus trap) and rendered open in preview so the signature
   reads. Contained to the stage (absolute + 100cqw/100cqh, never fixed to the viewport).
   Origin --nov-* -> theme tokens; backdrop-blur bar + clip-path reveal dropped per house
   rules -> an opacity/transform reveal; entrances belong to anims.js. The hamburger is
   always visible by design (the overlay IS the nav at every width), so it does not ride
   the 560-only .ws-menubtn. The staggered link reveal is open-interaction motion, kept. */
.ws-head.h-nav-overlay { justify-content:space-between; position:sticky; top:0; z-index:20; }
.ws-head.h-nav-overlay.open { z-index:50; }
/* always-visible animated hamburger trigger */
.h-nav-overlay .nov-trigger { display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border:none; border-radius:8px; background:none;
  color:var(--ink); cursor:pointer; position:relative; z-index:40; transition:color 140ms linear; }
.h-nav-overlay .nov-trigger:hover { color:var(--accent); }
.h-nav-overlay .nov-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.h-nav-overlay .nov-lines { display:flex; flex-direction:column; gap:5px; width:22px; }
.h-nav-overlay .nov-lines i { display:block; height:2px; border-radius:1px; background:currentColor;
  transform-origin:center; transition:transform 300ms cubic-bezier(.76,0,.24,1), opacity 200ms linear; }
.h-nav-overlay.open .nov-lines i:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.h-nav-overlay.open .nov-lines i:nth-child(2) { opacity:0; }
.h-nav-overlay.open .nov-lines i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* stage-filling overlay panel - contained (absolute), never fixed */
.h-nav-overlay .nov-menu { position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100cqw; height:100cqh; z-index:20; overflow:hidden auto; background:var(--bg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 380ms cubic-bezier(.76,0,.24,1), visibility 0s linear 380ms; }
.h-nav-overlay.open .nov-menu { opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity 380ms cubic-bezier(.76,0,.24,1); }
.h-nav-overlay .nov-inner { min-height:100cqh; display:flex; flex-direction:column;
  padding:0 clamp(22px, 8cqw, 72px); }
.h-nav-overlay .nov-top { height:60px; display:flex; align-items:center; justify-content:space-between; flex:none; }
.h-nav-overlay .nov-top .ws-logo { opacity:.5; }
/* nav - ctx.pages as oversized numbered links */
.h-nav-overlay .ws-nav.nov-links { display:flex; flex:1; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:2px; margin:0; padding:32px 0; }
.h-nav-overlay .ws-navlink.nov-link { display:inline-flex; align-items:baseline; gap:16px;
  padding:6px 0; border-radius:0; background:none; color:var(--ink);
  font:800 clamp(34px, 7cqw, 68px)/1.02 var(--font-head, var(--font)); letter-spacing:-.03em;
  opacity:0; transform:translateY(26px);
  transition:color 160ms linear, transform 380ms ease-out, opacity 380ms ease-out; }
.h-nav-overlay .ws-navlink.nov-link:hover { background:none; color:var(--accent); }
.h-nav-overlay .ws-navlink.nov-link.on { color:var(--accent); }
.h-nav-overlay .ws-navlink.nov-link:focus-visible { outline:none; text-decoration:underline; text-underline-offset:8px; }
.h-nav-overlay .nov-num { font:600 clamp(11px, 1.4cqw, 14px) var(--mono); color:var(--faint);
  letter-spacing:.06em; flex:none; align-self:flex-start; margin-top:.35em; }
.h-nav-overlay .nov-arrow { font-size:.42em; color:var(--accent); flex:none;
  opacity:0; transform:translateX(-8px); transition:opacity 200ms linear, transform 200ms ease; }
.h-nav-overlay .ws-navlink.nov-link:hover .nov-arrow,
.h-nav-overlay .ws-navlink.nov-link:focus-visible .nov-arrow { opacity:1; transform:translateX(0); }
/* staggered open reveal (interaction motion, keyed off .open) */
.h-nav-overlay.open .ws-navlink.nov-link { opacity:1; transform:translateY(0); }
.h-nav-overlay.open .ws-navlink.nov-link:nth-child(1) { transition-delay:120ms; }
.h-nav-overlay.open .ws-navlink.nov-link:nth-child(2) { transition-delay:170ms; }
.h-nav-overlay.open .ws-navlink.nov-link:nth-child(3) { transition-delay:220ms; }
.h-nav-overlay.open .ws-navlink.nov-link:nth-child(4) { transition-delay:270ms; }
.h-nav-overlay.open .ws-navlink.nov-link:nth-child(5) { transition-delay:320ms; }
.h-nav-overlay.open .ws-navlink.nov-link:nth-child(6) { transition-delay:370ms; }
/* footer */
.h-nav-overlay .nov-foot { flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:26px 0 34px; border-top:var(--bw, 1px) solid var(--hair);
  opacity:0; transform:translateY(12px);
  transition:opacity 380ms ease-out 360ms, transform 380ms ease-out 360ms; }
.h-nav-overlay.open .nov-foot { opacity:1; transform:translateY(0); }
.h-nav-overlay .nov-social { display:flex; gap:22px; flex-wrap:wrap; }
.h-nav-overlay .nov-soc { font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); cursor:pointer; transition:color 140ms linear; }
.h-nav-overlay .nov-soc:hover { color:var(--ink); }
.h-nav-overlay .nov-tag { font:400 12px var(--font); color:var(--faint); letter-spacing:.02em; }
/* reduced motion - kill the reveal choreography, keep content visible */
@media (prefers-reduced-motion: reduce) {
  .h-nav-overlay .nov-menu, .h-nav-overlay .nov-lines i, .h-nav-overlay .nov-arrow,
  .h-nav-overlay .ws-navlink.nov-link, .h-nav-overlay .nov-foot { transition-duration:1ms; transition-delay:0ms; }
  .h-nav-overlay.open .ws-navlink.nov-link, .h-nav-overlay.open .nov-foot { transform:none; }
}
/* container query - not viewport media - tightens the panel on a narrow stage */
@container site (max-width: 560px) {
  .h-nav-overlay .ws-navlink.nov-link { font-size:clamp(30px, 12cqw, 46px); gap:12px; }
  .h-nav-overlay .nov-inner { padding-inline:clamp(18px, 7cqw, 34px); }
  .h-nav-overlay .nov-foot { flex-direction:column; align-items:flex-start; gap:12px; }
}
/* header-announce — a dismissible promo strip over the nav row (SB_04 · drafts/header-announce) */
.ws-head.h-header-announce { flex-direction:column; align-items:stretch; gap:0; padding:0; }
.h-header-announce .ha-strip { position:relative; display:flex; align-items:center; justify-content:center;
  padding:7px max(40px, calc((100cqw - 1080px) / 2)); min-height:34px;
  background:var(--accent); color:var(--accent-text, #04121a); }
.h-header-announce .ha-strip-msg { display:inline-flex; align-items:center; flex-wrap:wrap;
  justify-content:center; gap:4px 8px; margin:0; font:600 12px var(--font); line-height:1.25; text-align:center; }
.h-header-announce .ha-strip-arrow { width:14px; height:14px; opacity:.8; flex:none; }
.h-header-announce .ha-strip-link { color:inherit; font-weight:700; text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px; cursor:pointer; transition:opacity 120ms linear; }
.h-header-announce .ha-strip-link:hover { opacity:.72; }
.h-header-announce .ha-strip-x { position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0;
  border:none; border-radius:6px; background:none; color:inherit; opacity:.72; cursor:pointer;
  transition:opacity 120ms linear, transform 120ms linear; }
.h-header-announce .ha-strip-x:hover { opacity:1; }
.h-header-announce .ha-strip-x:active { transform:translateY(-50%) scale(.9); }
.h-header-announce .ha-strip-x svg { width:12px; height:12px; }
.h-header-announce .ha-strip.gone { display:none; }
.h-header-announce .ha-row { display:flex; align-items:center; gap:26px;
  padding:14px max(24px, calc((100cqw - 1080px) / 2)); background:var(--panel, var(--bg)); }
.h-header-announce .ha-row .ws-nav { margin-left:auto; }
.h-header-announce .ha-row .ws-btn { margin-left:4px; }
@container site (max-width: 560px) {
  .h-header-announce .ha-strip { padding-left:16px; padding-right:38px; min-height:32px; }
  .h-header-announce .ha-strip-msg { font-size:11.5px; }
  .h-header-announce .ha-row { padding-inline:16px; gap:12px; }
  .h-header-announce .ha-row > .ws-logo { margin-right:auto; }
}
/* blueprint-nav — SB_04 · drafting-sheet header: crosshair mark, sheet-numbered links (A-1xx), a tick ruler with a live scroll carriage + W/Y coordinate readout; accent + ink on the theme grid */
.ws-head.h-blueprint-nav { flex-direction:column; align-items:stretch; gap:0; padding-block:0; font-family:var(--mono);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, var(--hair)); }
.h-blueprint-nav .blu-bar { display:flex; align-items:center; gap:24px; padding:12px 0; min-width:0; }
.h-blueprint-nav .blu-mark { display:inline-flex; align-items:center; gap:9px; flex:none;
  color:var(--ink); font:700 13px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap; }
.h-blueprint-nav .blu-cross { width:22px; height:22px; display:block; stroke:var(--accent); flex:none; }
.h-blueprint-nav .blu-nav { margin-left:auto; gap:22px; }
.h-blueprint-nav .ws-navlink.blu-link { display:inline-flex; align-items:baseline; gap:6px;
  color:var(--dim); font:400 11px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase;
  padding:7px 0; border-radius:0; border-bottom:1px solid transparent;
  transition:color 160ms linear, border-color 160ms linear; }
.h-blueprint-nav .ws-navlink.blu-link:hover { color:var(--ink); background:none; border-bottom-color:var(--accent); }
.h-blueprint-nav .ws-navlink.blu-link.on { color:var(--ink); background:none; border-bottom-color:var(--accent); }
.h-blueprint-nav .blu-ref { font-size:9px; letter-spacing:0.08em; color:var(--accent); opacity:0.75; font-style:normal; }
.h-blueprint-nav .blu-cta { display:inline-flex; align-items:center; gap:7px; flex:none; cursor:pointer;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:2px;
  font:700 11px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; padding:9px 15px; white-space:nowrap;
  transition:color 160ms linear, border-color 160ms linear; }
.h-blueprint-nav .blu-cta::before { content:"\2295"; font-size:0.95em; line-height:1; }
.h-blueprint-nav .blu-cta:hover { color:var(--ink); border-color:var(--accent); background:var(--accent-fill); }
.h-blueprint-nav .blu-readout { display:flex; gap:14px; flex:none; align-items:center;
  font:400 9px/1 var(--mono); letter-spacing:0.1em; color:var(--accent); opacity:0.85;
  font-variant-numeric:tabular-nums; white-space:nowrap; border-left:var(--bw, 1px) solid var(--hair); padding-left:16px; }
.h-blueprint-nav .blu-ruler { position:relative; height:14px; overflow:hidden;
  border-top:1px solid color-mix(in srgb, var(--accent) 9%, var(--hair)); }
.h-blueprint-nav .blu-ruler::before, .h-blueprint-nav .blu-ruler::after { content:""; position:absolute; left:0; right:0; bottom:0; }
.h-blueprint-nav .blu-ruler::before { height:5px;
  background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 32%, transparent) 0 1px, transparent 1px 8px); }
.h-blueprint-nav .blu-ruler::after { height:10px;
  background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 32%, transparent) 0 1px, transparent 1px 40px); }
.h-blueprint-nav .blu-carriage { position:absolute; top:0; left:0; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid var(--accent); z-index:1; }
@container site (max-width: 560px) {
  .h-blueprint-nav .blu-readout { display:none; }
  .h-blueprint-nav .blu-cta { display:none; }
  .h-blueprint-nav .ws-menubtn { margin-left:auto; }
}
/* transit-nav (SB_04 drafts/transit-nav) - night-service wayfinding header. The nav is a route
   line: every page is a station on a rail and a lit "train" glides to the active (or hovered)
   station, driven in mount() like the ink-bar. Origin --trn-* palette mapped to theme tokens
   (amber accent -> --accent); the bespoke mobile strip-map drawer is dropped for the standard
   560cqw hamburger + site menu system, like every native header. Only transform/opacity ride a
   transition; the semantic "good service" dot pulses opacity, reduced-motion guarded. */
.ws-head.h-transit-nav { gap:20px; }
.h-transit-nav .tn-brand { display:inline-flex; align-items:center; gap:11px; white-space:nowrap; }
.h-transit-nav .tn-roundel { width:28px; height:28px; flex:none; border-radius:50%; display:inline-grid;
  place-items:center; background:var(--accent); color:var(--accent-text, var(--bg));
  font:800 13px var(--font-head, var(--font));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.h-transit-nav .tn-word { display:flex; flex-direction:column; gap:1px; line-height:1.12; }
.h-transit-nav .tn-word b { font:800 13px var(--font-head, var(--font)); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink); }
.h-transit-nav .tn-word i { font:600 9px var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); font-style:normal; }
/* route line + stations */
.h-transit-nav .tn-route { height:52px; margin-left:auto; }
.h-transit-nav .tn-stations { position:relative; display:flex; align-items:center; gap:32px; height:100%; }
.h-transit-nav .tn-stations::before { content:''; position:absolute; left:-6px; right:-6px; bottom:13px;
  height:2px; border-radius:1px; background:var(--hair); }
.h-transit-nav .tn-station { position:relative; display:flex; align-items:center; height:100%;
  padding:0 2px 22px; font:700 11px var(--font); letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); cursor:pointer; white-space:nowrap; transition:color 140ms linear; }
.h-transit-nav .tn-station:hover { color:var(--ink); }
.h-transit-nav .tn-station.on { color:var(--accent); }
.h-transit-nav .tn-dot { position:absolute; left:50%; bottom:9px; width:10px; height:10px; margin-left:-5px;
  border-radius:50%; background:var(--bg); border:2px solid var(--hair); z-index:1;
  transition:border-color 140ms linear; }
.h-transit-nav .tn-station:hover .tn-dot { border-color:var(--accent); }
.h-transit-nav .tn-station.on .tn-dot { border-color:var(--accent); background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.h-transit-nav .tn-train { position:absolute; left:0; bottom:8px; width:26px; height:12px; border-radius:6px;
  background:
    radial-gradient(circle at 8px 50%, var(--bg) 1.6px, transparent 2.1px),
    radial-gradient(circle at 15px 50%, var(--bg) 1.6px, transparent 2.1px),
    var(--accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity:0; z-index:2; pointer-events:none;
  transition:transform 480ms cubic-bezier(.22,.9,.28,1), opacity 300ms linear; }
.h-transit-nav .tn-train.placed { opacity:1; }
/* live-service status pill (semantic ok green stays literal) */
.h-transit-nav .tn-status { display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:6px 13px; border:var(--bw, 1px) solid var(--hair); border-radius:999px;
  font:600 9px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.h-transit-nav .tn-status i { width:7px; height:7px; flex:none; border-radius:50%;
  background:#3ddc84; box-shadow:0 0 8px color-mix(in srgb, #3ddc84 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .h-transit-nav .tn-status i { animation:tn-pulse 2.2s ease-in-out infinite; }
}
@keyframes tn-pulse { 0%, 100% { opacity:1; } 50% { opacity:.4; } }
/* mobile: fold the route line + status away; the 560cqw hamburger + site menu take over */
@container site (max-width: 860px) {
  .h-transit-nav .tn-status { display:none; }
}
@container site (max-width: 560px) {
  .ws-head.h-transit-nav { gap:14px; }
  .h-transit-nav .tn-route { display:none; }
  .h-transit-nav .ws-menubtn { margin-left:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .h-transit-nav .tn-train { transition:opacity 300ms linear; }
  .h-transit-nav .tn-station, .h-transit-nav .tn-dot { transition:none; }
}
/* sticky sidebar nav (SB_04) — full-height app rail; collapses to a top bar + slide-in drawer */
.ws-site:has(> .ws-head.h-sticky-sidebar-nav) { padding-left:220px; }
.ws-head.h-sticky-sidebar-nav { position:absolute; left:0; top:0; bottom:0; width:220px; z-index:30;
  display:block; padding:0; gap:0; border-bottom:none; border-right:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--panel) 86%, var(--bg)); overflow:hidden; }
.h-sticky-sidebar-nav .ssb-topbar { display:none; }
.h-sticky-sidebar-nav .ssb-scrim { display:none; }
.h-sticky-sidebar-nav .ssb-rail { position:sticky; top:0; height:100cqh; display:flex; flex-direction:column;
  padding:16px 12px; gap:6px; }
.h-sticky-sidebar-nav .ssb-brand { display:flex; align-items:center; min-height:32px;
  padding:2px 8px 13px; margin-bottom:4px; border-bottom:var(--bw, 1px) solid var(--hair); }
.h-sticky-sidebar-nav .ssb-nav { display:flex; flex-direction:column; gap:2px; flex:1;
  overflow-y:auto; margin:0 -4px; padding:4px; }
.h-sticky-sidebar-nav .ssb-link { position:relative; display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:9px; color:var(--dim); font:500 13.5px var(--font);
  cursor:pointer; text-decoration:none; transition:color 120ms linear; }
.h-sticky-sidebar-nav .ssb-link b { font-weight:inherit; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.h-sticky-sidebar-nav .ssb-ico { width:26px; height:26px; flex:none; display:grid; place-items:center;
  border-radius:7px; font:700 12px var(--font); font-style:normal; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 6%, transparent); transition:color 120ms linear; }
.h-sticky-sidebar-nav .ssb-link:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.h-sticky-sidebar-nav .ssb-link:hover .ssb-ico { color:var(--ink); }
.h-sticky-sidebar-nav .ssb-link.on { color:var(--accent); background:var(--accent-fill); font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent); }
.h-sticky-sidebar-nav .ssb-link.on .ssb-ico { color:var(--accent); background:var(--accent-fill); }
.h-sticky-sidebar-nav .ssb-foot { margin-top:auto; padding-top:12px; border-top:var(--bw, 1px) solid var(--hair); display:flex; }
.h-sticky-sidebar-nav .ssb-foot .ws-btn { width:100%; justify-content:center; }
@container site (max-width: 720px) {
  .ws-site:has(> .ws-head.h-sticky-sidebar-nav) { padding-left:0; }
  .ws-head.h-sticky-sidebar-nav { position:sticky; left:auto; bottom:auto; top:0; width:auto; height:auto;
    display:block; overflow:visible; border-right:none; border-bottom:var(--bw, 1px) solid var(--hair);
    background:color-mix(in srgb, var(--bg) 92%, transparent); }
  .h-sticky-sidebar-nav .ssb-topbar { display:flex; align-items:center; justify-content:space-between;
    gap:12px; position:relative; z-index:50; padding:12px 16px; }
  .h-sticky-sidebar-nav .ws-menubtn { display:flex; }
  .h-sticky-sidebar-nav .ssb-scrim { display:block; position:absolute; left:0; top:0; width:100cqw;
    height:100cqh; z-index:40; opacity:0; pointer-events:none;
    background:color-mix(in srgb, var(--bg) 55%, transparent); transition:opacity 200ms linear; }
  .h-sticky-sidebar-nav.ssb-open .ssb-scrim { opacity:1; pointer-events:auto; }
  .h-sticky-sidebar-nav .ssb-rail { position:absolute; left:0; top:0; height:100cqh; width:min(260px, 82cqw);
    z-index:60; transform:translateX(-101%); transition:transform 220ms var(--ease-out, ease);
    background:color-mix(in srgb, var(--panel) 92%, var(--bg)); border-right:var(--bw, 1px) solid var(--hair);
    box-shadow:22px 0 50px -30px rgb(0 0 0 / .5); }
  .h-sticky-sidebar-nav.ssb-open .ssb-rail { transform:none; }
}
/* darkroom-nav — SB_04 · film-strip header. Sprocket-perforated top/bottom edges (::before/::after),
   nav links numbered as frames (mono FR 0N over a label), a grease-pencil circle that rings the active
   frame, and a live mono "FR 0X/0N" counter. Active frame + counter are driven in mount() (origin's
   IntersectionObserver scrollspy reframed to the ZenOS page model — click/active-page lights the frame).
   Origin --dk-red -> --accent (brands cascade), --dk-ink/-dim -> --ink/--dim/--faint, film blacks -> ink
   mixes. Dropped: the CTA's shadow-glow transition + baked burger-span animation; mobile rides the native
   560 rule + ws-menu like every ported header. Transitions ride transform/opacity/color only, no blur. */
.ws-head.h-darkroom-nav { position:sticky; gap:22px; isolation:isolate; border-bottom:none; }
.h-darkroom-nav::before, .h-darkroom-nav::after { content:''; position:absolute; left:0; right:0; height:6px;
  pointer-events:none; z-index:1;
  background-color:color-mix(in srgb, var(--ink) 7%, transparent);
  background-image:repeating-linear-gradient(90deg, transparent 0 7px,
    color-mix(in srgb, var(--ink) 20%, transparent) 7px 17px, transparent 17px 24px); }
.h-darkroom-nav::before { top:0; }
.h-darkroom-nav::after { bottom:0; }
.h-darkroom-nav .ws-logo b { font:700 12.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.h-darkroom-nav .ws-logodot { border-radius:2px; }
/* frame links */
.h-darkroom-nav .ws-nav.hdrk-nav { gap:26px; margin-left:auto; }
.h-darkroom-nav .hdrk-link { position:relative; display:inline-flex; flex-direction:column; gap:3px;
  padding:4px 6px; border-radius:3px; cursor:pointer; }
.h-darkroom-nav .hdrk-fr { font:600 8.5px var(--mono); letter-spacing:.14em; color:var(--faint); opacity:.7;
  transition:color 160ms linear, opacity 160ms linear; }
.h-darkroom-nav .hdrk-lbl { font:700 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap; transition:color 160ms linear; }
.h-darkroom-nav .hdrk-link:hover .hdrk-lbl { color:var(--ink); }
.h-darkroom-nav .hdrk-link:hover .hdrk-fr { opacity:1; }
.h-darkroom-nav .hdrk-link.on .hdrk-lbl { color:var(--ink); }
.h-darkroom-nav .hdrk-link.on .hdrk-fr { color:var(--accent); opacity:1; }
.h-darkroom-nav .hdrk-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* grease-pencil circle on the active frame */
.h-darkroom-nav .hdrk-grease { position:absolute; inset:-7px -12px -9px; width:calc(100% + 24px);
  height:calc(100% + 16px); pointer-events:none; opacity:0; transform:rotate(-2deg) scale(.86);
  transition:opacity 220ms linear, transform 220ms cubic-bezier(.2,.9,.3,1.4); }
.h-darkroom-nav .hdrk-grease path { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; opacity:.9; }
.h-darkroom-nav .hdrk-link.on .hdrk-grease { opacity:1; transform:rotate(-2deg) scale(1); }
/* live frame counter */
.h-darkroom-nav .hdrk-counter { font:600 8.5px var(--mono); letter-spacing:.18em; color:var(--faint);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.h-darkroom-nav .hdrk-counter b { font-weight:700; color:var(--accent); }
/* CTA — outlined mono chip; fill flips instantly on hover, only color transitions */
.h-darkroom-nav .hdrk-cta { display:inline-flex; align-items:center; padding:9px 15px; border:1px solid var(--accent);
  border-radius:3px; color:var(--accent); cursor:pointer; white-space:nowrap;
  font:700 8.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; transition:color 180ms linear; }
.h-darkroom-nav .hdrk-cta:hover { background:var(--accent); color:var(--accent-text, var(--bg)); }
.h-darkroom-nav .hdrk-cta:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  .h-darkroom-nav .hdrk-grease, .h-darkroom-nav .hdrk-fr, .h-darkroom-nav .hdrk-lbl, .h-darkroom-nav .hdrk-cta { transition:none; }
}
@container site (max-width: 560px) {
  .h-darkroom-nav .hdrk-counter { display:none; }
  .h-darkroom-nav .hdrk-cta { margin-left:auto; }
}
/* app-dropdown-menu - SB_04 drafts/app-dropdown-menu: a panel-only context menu ported onto a
   header. It has no bar of its own, so it rides logoMark + the shared .ws-nav pages + a right-side
   Options trigger; that caret button drops a rich menu - icon rows, shortcut-hint kbd chips, a
   "Move to" submenu built from ctx.pages, dividers and a danger Delete. LIVE in mount() (toggle,
   submenu expand, outside-click + Escape close), shown open in preview. Origin --adm-* -> theme
   tokens; emoji glyphs -> inline stroke SVGs; the scale/opacity entrance is kept only as the open
   reveal (transform/opacity), heavy drop-shadow -> shared --elev; no transitioned backgrounds. */
.h-app-dropdown-menu .adm-wrap { position:relative; display:inline-flex; }
.h-app-dropdown-menu .adm-trigger { display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border:var(--bw, 1px) solid var(--hair); border-radius:9px; background:color-mix(in srgb, var(--ink) 4%, transparent);
  color:var(--ink); font:600 13px var(--font); cursor:pointer;
  transition:color 120ms linear, border-color 120ms linear; }
.h-app-dropdown-menu .adm-trigger:hover,
.h-app-dropdown-menu.adm-open .adm-trigger { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.h-app-dropdown-menu .adm-caret { width:12px; height:12px; flex:none; transition:transform 200ms cubic-bezier(.4,0,.2,1); }
.h-app-dropdown-menu.adm-open .adm-caret { transform:rotate(180deg); }
.h-app-dropdown-menu .adm-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:40; min-width:238px;
  display:flex; flex-direction:column; gap:1px; padding:7px;
  background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * .9); box-shadow:var(--elev, 0 16px 40px rgba(0,0,0,.28));
  transform-origin:top right; opacity:0; transform:scale(.97) translateY(-6px); pointer-events:none;
  transition:opacity 160ms cubic-bezier(.4,0,.2,1), transform 160ms cubic-bezier(.4,0,.2,1); }
.h-app-dropdown-menu.adm-open .adm-menu { opacity:1; transform:none; pointer-events:auto; }
.h-app-dropdown-menu .adm-menu::before { content:''; position:absolute; top:-5px; right:22px; width:10px; height:10px;
  background:var(--panel-2, var(--panel)); border-top:var(--bw, 1px) solid var(--hair); border-left:var(--bw, 1px) solid var(--hair);
  transform:rotate(45deg); }
.h-app-dropdown-menu .adm-item { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  border:none; border-radius:7px; background:none; color:var(--ink); font:500 13px var(--font);
  text-align:left; cursor:pointer; transition:color 120ms linear; }
.h-app-dropdown-menu .adm-item:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.h-app-dropdown-menu .adm-ic { width:20px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  color:var(--dim); transition:color 120ms linear; }
.h-app-dropdown-menu .adm-ic svg { width:16px; height:16px; }
.h-app-dropdown-menu .adm-item:hover .adm-ic { color:var(--accent); }
.h-app-dropdown-menu .adm-label { flex:1; min-width:0; white-space:nowrap; }
.h-app-dropdown-menu .adm-kbd { flex:none; font:600 10px var(--mono); color:var(--faint); padding:2px 6px;
  border-radius:5px; border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.h-app-dropdown-menu .adm-item.adm-danger { color:var(--bad, #e05a7a); }
.h-app-dropdown-menu .adm-item.adm-danger .adm-ic { color:var(--bad, #e05a7a); }
.h-app-dropdown-menu .adm-item.adm-danger:hover { background:color-mix(in srgb, var(--bad, #e05a7a) 13%, transparent); }
.h-app-dropdown-menu .adm-kbd.danger { color:var(--bad, #e05a7a);
  border-color:color-mix(in srgb, var(--bad, #e05a7a) 30%, transparent);
  background:color-mix(in srgb, var(--bad, #e05a7a) 10%, transparent); }
.h-app-dropdown-menu .adm-divider { height:1px; margin:5px 4px; background:var(--hair); }
.h-app-dropdown-menu .adm-sub-wrap { display:flex; flex-direction:column; }
.h-app-dropdown-menu .adm-subcaret { width:13px; height:13px; flex:none; color:var(--faint);
  transition:transform 200ms cubic-bezier(.4,0,.2,1); }
.h-app-dropdown-menu .adm-sub-wrap.open .adm-subcaret { transform:rotate(90deg); }
.h-app-dropdown-menu .adm-sub { display:none; flex-direction:column; gap:1px; padding:2px 0 3px 30px; }
.h-app-dropdown-menu .adm-sub-wrap.open .adm-sub { display:flex; }
.h-app-dropdown-menu .adm-subitem { display:block; padding:7px 10px; border-radius:6px; font:500 12.5px var(--font);
  color:var(--dim); cursor:pointer; transition:color 120ms linear; }
.h-app-dropdown-menu .adm-subitem:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); }
.h-app-dropdown-menu .adm-subitem.on { color:var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .h-app-dropdown-menu .adm-caret, .h-app-dropdown-menu .adm-subcaret, .h-app-dropdown-menu .adm-menu { transition:none; }
}
@container site (max-width: 560px) {
  .h-app-dropdown-menu .adm-trigger { padding:7px 11px; }
  .h-app-dropdown-menu .adm-menu { min-width:0; width:min(240px, 74cqw); }
}
/* app-user-menu - SB_04 drafts/app-user-menu: a panel-only account menu ported as a header
   whose right-side avatar button drops a floating user menu (profile header + grouped links +
   sign out). Open/close is LIVE in mount() (avatar toggle, outside-click + Escape close, item
   click closes); rendered OPEN in preview via env.project.id==='preview'. Origin --aum-* vars ->
   theme tokens; the baked opacity fade becomes an open-interaction transform+opacity reveal
   (never a background transition); avatar gradients derive from --accent so brands cascade.
   Site nav is ctx.pages; the account rows are the component's own anatomy (buttons, not page nav).
   Panel is contained (absolute under the trigger, never fixed); the 560 container query hides the
   site nav + trigger label and the global .ws-menubtn hamburger takes over. */
.h-app-user-menu .ws-nav { margin-left:0; }
.h-app-user-menu .aum-wrap { position:relative; display:inline-flex; align-items:center; margin-left:auto; }
/* trigger */
.h-app-user-menu .aum-trigger { display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 5px;
  border:var(--bw, 1px) solid var(--hair); border-radius:99px; background:none; color:var(--ink); cursor:pointer;
  font:600 12.5px var(--font); transition:color 140ms linear, border-color 140ms linear; }
.h-app-user-menu .aum-trigger:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.h-app-user-menu .aum-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.h-app-user-menu .aum-wrap.open .aum-trigger { border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--accent); }
.h-app-user-menu .aum-tav { width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  font:700 10px var(--font); letter-spacing:0.02em; color:var(--accent-text, #fff);
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }
.h-app-user-menu .aum-tname { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h-app-user-menu .aum-caret { width:12px; height:12px; flex:none; color:var(--dim);
  transition:transform 220ms cubic-bezier(.4,0,.2,1); }
.h-app-user-menu .aum-wrap.open .aum-caret { transform:rotate(180deg); }
/* floating panel - contained, never fixed */
.h-app-user-menu .aum-panel { position:absolute; top:calc(100% + 10px); right:0; z-index:50; width:264px;
  border:var(--bw, 1px) solid var(--hair); border-radius:14px; overflow:hidden;
  background:var(--panel); background-image:var(--surface-grad,none);
  box-shadow:0 20px 44px -22px color-mix(in srgb, var(--ink) 66%, transparent),
             0 2px 8px color-mix(in srgb, var(--ink) 14%, transparent);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px) scale(.985); transform-origin:top right;
  transition:opacity 170ms linear, transform 220ms cubic-bezier(.2,.8,.25,1), visibility 0s linear 210ms; }
.h-app-user-menu .aum-wrap.open .aum-panel { opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity 170ms linear, transform 220ms cubic-bezier(.2,.8,.25,1); }
/* panel header */
.h-app-user-menu .aum-head { display:flex; align-items:center; gap:11px; padding:14px 14px 12px; border-bottom:var(--bw, 1px) solid var(--hair); }
.h-app-user-menu .aum-avatar { width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  font:700 13px var(--font); color:var(--accent-text, #fff);
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }
.h-app-user-menu .aum-id { display:flex; flex-direction:column; gap:1px; min-width:0; }
.h-app-user-menu .aum-name { font:600 13px var(--font); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h-app-user-menu .aum-email { font:400 11px var(--font); color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h-app-user-menu .aum-badge { margin-left:auto; flex:none; font:700 9px var(--mono); letter-spacing:0.07em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-fill); padding:3px 7px; border-radius:99px; white-space:nowrap; }
/* groups + items */
.h-app-user-menu .aum-body { padding:6px; max-height:min(64cqh, 430px); overflow-y:auto; }
.h-app-user-menu .aum-group { padding:4px 0; }
.h-app-user-menu .aum-group + .aum-group { border-top:var(--bw, 1px) solid var(--hair); }
.h-app-user-menu .aum-glabel { font:700 10px var(--font); letter-spacing:0.08em; text-transform:uppercase;
  color:var(--faint); padding:6px 10px 4px; }
.h-app-user-menu .aum-item { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  padding:8px 10px; border:none; border-radius:8px; background:none; cursor:pointer; text-align:left;
  font:500 13px var(--font); color:var(--dim); transition:color 120ms linear; }
.h-app-user-menu .aum-item:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); }
.h-app-user-menu .aum-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.h-app-user-menu .aum-item.danger { color:#e05a7a; }
.h-app-user-menu .aum-item.danger:hover { background:color-mix(in srgb, #e05a7a 13%, transparent); color:#e05a7a; }
.h-app-user-menu .aum-ic { width:16px; height:16px; flex:none; opacity:0.82; }
.h-app-user-menu .aum-label { flex:1; min-width:0; }
.h-app-user-menu .aum-tag { flex:none; font:700 9px var(--mono); color:var(--dim);
  background:color-mix(in srgb, var(--ink) 9%, transparent); padding:1px 6px; border-radius:5px; }
.h-app-user-menu .aum-kbd { flex:none; font:500 10px var(--mono); color:var(--faint);
  background:color-mix(in srgb, var(--ink) 6%, transparent); padding:2px 6px; border-radius:5px; }
/* narrow stage - hide the site nav + trigger label; avatar-only trigger; global .ws-menubtn takes over */
@container site (max-width: 560px) {
  .h-app-user-menu .ws-nav { display:none; }
  .h-app-user-menu .aum-trigger { padding:4px; border-radius:50%; }
  .h-app-user-menu .aum-tname, .h-app-user-menu .aum-caret { display:none; }
  .h-app-user-menu .aum-panel { width:min(280px, 82cqw); }
}
@media (prefers-reduced-motion: reduce) {
  .h-app-user-menu .aum-panel, .h-app-user-menu .aum-caret { transition-duration:1ms; }
}
/* --- problemsection (SB_04 port) --- */
.wsp-problemsection .p-grid{ display:grid; grid-template-columns:repeat(3,1fr); width:min(960px,88cqw); margin:40px auto 0; }
.wsp-problemsection .p-card{ padding:24px clamp(20px,4cqw,44px); text-align:center; }
.wsp-problemsection .p-card:not(:last-child){ border-right:var(--bw, 1px) solid var(--hair); }
.wsp-problemsection .p-ico{ display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--accent); }
.wsp-problemsection .p-ico svg{ width:clamp(44px,7cqw,60px); height:clamp(44px,7cqw,60px); }
.wsp-problemsection .p-txt{ color:var(--dim); font-size:1.02rem; line-height:1.6; }
.wsp-problemsection .p-hint{ text-align:center; margin-top:34px; font-size:1.08rem; color:var(--ink); }
.wsp-problemsection .p-hint b{ color:var(--accent); font-weight:600; }
@container site (max-width:640px){
  .wsp-problemsection .p-grid{ grid-template-columns:1fr; }
  .wsp-problemsection .p-card{ padding:22px 0; }
  .wsp-problemsection .p-card:not(:last-child){ border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
}

/* --- solutionsection (SB_04 port) --- */
.wsp-solutionsection .s-grid{ display:grid; grid-template-columns:repeat(3,1fr); width:min(1000px,88cqw); margin:40px auto 0; }
.wsp-solutionsection .s-card{ padding:24px clamp(20px,4cqw,48px); text-align:center; }
.wsp-solutionsection .s-card:not(:last-child){ border-right:var(--bw, 1px) solid var(--hair); }
.wsp-solutionsection .s-ico{ display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent); }
.wsp-solutionsection .s-ico svg{ width:clamp(46px,7cqw,60px); height:clamp(46px,7cqw,60px); stroke-width:1.5; }
.wsp-solutionsection .s-txt{ color:var(--dim); font-size:1.04rem; line-height:1.6; }
@container site (max-width:640px){
  .wsp-solutionsection .s-grid{ grid-template-columns:1fr; }
  .wsp-solutionsection .s-card{ padding:22px 0; }
  .wsp-solutionsection .s-card:not(:last-child){ border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
}

/* --- pricingcard (SB_04 port) --- */
.wsp-pricingcard .pc-wrap{ display:flex; justify-content:center; margin-top:40px; }
.wsp-pricingcard .pc-card{ width:100%; max-width:400px; text-align:center; background:var(--panel);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) + 4px); padding:36px 30px 30px;
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent) inset, 0 24px 54px -34px rgba(0,0,0,.55); }
.wsp-pricingcard .pc-amount{ display:flex; align-items:baseline; justify-content:center; gap:8px; line-height:1; margin-bottom:4px; }
.wsp-pricingcard .pc-cur{ font:600 clamp(18px,2.4cqw,22px) var(--font-head, var(--font)); color:var(--dim); }
.wsp-pricingcard .pc-num{ font:800 clamp(40px,7cqw,52px) var(--font-head, var(--font)); color:var(--accent);
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.wsp-pricingcard .pc-per{ font:500 13px var(--font); color:var(--faint); }
.wsp-pricingcard .pc-feats{ list-style:none; margin:22px 0 26px; padding:0; text-align:left;
  display:flex; flex-direction:column; gap:11px; }
.wsp-pricingcard .pc-feat{ display:flex; align-items:flex-start; gap:10px; font:400 14px/1.5 var(--font); color:var(--dim); }
.wsp-pricingcard .pc-feat svg{ width:16px; height:16px; color:var(--accent); flex:none; margin-top:1px; }
.wsp-pricingcard .pc-card .ws-btn{ width:100%; justify-content:center; }
.wsp-pricingcard .pc-support{ margin-top:14px; font:400 13px var(--font); color:var(--faint); }
.wsp-pricingcard .pc-support a{ color:var(--accent); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); transition:color .2s; }
.wsp-pricingcard .pc-support a:hover{ color:var(--ink); }
@container site (max-width:520px){
  .wsp-pricingcard .pc-wrap{ margin-top:30px; }
  .wsp-pricingcard .pc-card{ padding:28px 20px 22px; }
}

/* --- articlegrid (SB_04 port) --- */
.wsp-articlegrid .ws-in{ width:min(1180px,92cqw); }
.wsp-articlegrid .ag-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.wsp-articlegrid .ag-card{ display:flex; flex-direction:column; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); overflow:hidden; transition:transform .3s ease, border-color .3s ease; }
.wsp-articlegrid .ag-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 32%, var(--hair)); }

.wsp-articlegrid .ag-card.feat{ grid-column:span 2; flex-direction:row; }
.wsp-articlegrid .ag-card.feat .ag-thumb{ flex:1; aspect-ratio:auto; min-height:280px; border-bottom:none; border-right:var(--bw, 1px) solid var(--hair); }
.wsp-articlegrid .ag-card.feat .ag-body{ flex:1; justify-content:center; padding:30px clamp(24px,3.4cqw,40px); }
.wsp-articlegrid .ag-card.feat .ag-title{ font-size:clamp(20px,2.2cqw,25px); }
.wsp-articlegrid .ag-card.feat .ag-excerpt{ -webkit-line-clamp:4; flex:0 1 auto; }

.wsp-articlegrid .ag-thumb{ position:relative; overflow:hidden; aspect-ratio:16/10; border-bottom:var(--bw, 1px) solid var(--hair); background:var(--panel-2); }
.wsp-articlegrid .ag-thumb::before{ content:''; position:absolute; inset:0; background:var(--panel-2); transition:transform .5s ease; }
.wsp-articlegrid .ag-card:hover .ag-thumb::before{ transform:scale(1.04); }
.wsp-articlegrid .ag-g0::before{ background:radial-gradient(80% 72% at 22% 16%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), var(--panel-2); }
.wsp-articlegrid .ag-g1::before{ background:linear-gradient(135deg, var(--accent-fill), color-mix(in srgb, var(--accent2, var(--accent)) 18%, transparent)), var(--panel-2); }
.wsp-articlegrid .ag-g2::before{ background:radial-gradient(75% 75% at 78% 24%, color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent), transparent 72%), var(--panel-2); }
.wsp-articlegrid .ag-g3::before{ background:conic-gradient(from 210deg at 62% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 44%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent) 80%, transparent), var(--panel-2); }
.wsp-articlegrid .ag-g4::before{ background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent) 0 2px, transparent 2px 17px), var(--panel-2); }

.wsp-articlegrid .ag-tag{ position:absolute; z-index:1; left:12px; bottom:12px; padding:4px 9px; border-radius:5px; font:700 9px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--panel) 84%, transparent); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); }

.wsp-articlegrid .ag-body{ display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.wsp-articlegrid .ag-meta{ display:flex; align-items:center; gap:10px; margin-bottom:11px; font:600 10.5px var(--mono); letter-spacing:.4px; text-transform:uppercase; color:var(--faint); }
.wsp-articlegrid .ag-sep{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; }
.wsp-articlegrid .ag-title{ margin:0 0 8px; font:600 clamp(16px,1.5cqw,18px)/1.35 var(--font-head, var(--font)); letter-spacing:-.01em; color:var(--ink); transition:color .2s ease; }
.wsp-articlegrid .ag-card:hover .ag-title{ color:var(--accent); }
.wsp-articlegrid .ag-excerpt{ margin:0; font:400 13.5px/1.6 var(--font); color:var(--dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }

.wsp-articlegrid .ag-link{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:16px; font:700 10.5px var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--accent); cursor:pointer; }
.wsp-articlegrid .ag-link::after{ content:''; width:6px; height:6px; border-right:1.6px solid currentColor; border-top:1.6px solid currentColor; transform:rotate(45deg); transition:transform .18s ease; }
.wsp-articlegrid .ag-link:hover::after{ transform:translateX(3px) rotate(45deg); }

.wsp-articlegrid .ag-author{ display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:var(--bw, 1px) solid var(--hair); }
.wsp-articlegrid .ag-avatar{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; flex-shrink:0; font:700 10px var(--mono); color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.wsp-articlegrid .ag-name{ font:600 12.5px var(--font); color:var(--ink); }

@container site (max-width:900px){
  .wsp-articlegrid .ag-grid{ grid-template-columns:repeat(2,1fr); }
  .wsp-articlegrid .ag-card.feat{ grid-column:span 2; }
}
@container site (max-width:600px){
  .wsp-articlegrid .ag-grid{ grid-template-columns:1fr; }
  .wsp-articlegrid .ag-card.feat{ grid-column:span 1; flex-direction:column; }
  .wsp-articlegrid .ag-card.feat .ag-thumb{ min-height:0; aspect-ratio:16/10; border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
  .wsp-articlegrid .ag-card.feat .ag-body{ justify-content:flex-start; padding:18px 20px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-articlegrid .ag-card, .wsp-articlegrid .ag-thumb::before, .wsp-articlegrid .ag-title, .wsp-articlegrid .ag-link::after{ transition:none; }
}

/* --- processtimeline (SB_04 port) --- */
.wsp-processtimeline{ --pt-num:48px; --pt-gap:3.4rem; }
.wsp-processtimeline .pt-steps{ position:relative; width:min(760px,88cqw); margin:44px auto 0; text-align:left;
  display:flex; flex-direction:column; gap:var(--pt-gap); }
.wsp-processtimeline .pt-line{ position:absolute; top:0; left:calc(var(--pt-num)/2); transform:translateX(-50%);
  width:1px; height:100%; background:var(--hair); overflow:hidden; }
.wsp-processtimeline .pt-fill{ position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(var(--accent), var(--accent2, var(--accent))); }
.wsp-processtimeline .pt-step{ position:relative; display:grid; grid-template-columns:var(--pt-num) 1fr; gap:1.5rem; align-items:start; }
.wsp-processtimeline .pt-num{ position:relative; z-index:1; width:var(--pt-num); height:var(--pt-num); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); color:var(--accent);
  font:600 .85rem/1 var(--mono); transition:border-color .3s ease, box-shadow .3s ease, color .3s ease; }
.wsp-processtimeline .pt-step:hover .pt-num,
.wsp-processtimeline .pt-num.is-on{ border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow:0 0 20px color-mix(in srgb, var(--accent) 20%, transparent); }
.wsp-processtimeline .pt-content{ padding-top:.55rem; min-width:0; }
.wsp-processtimeline .pt-label{ margin:0 0 .5rem; font:600 .66rem/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.wsp-processtimeline .pt-title{ margin:0 0 .5rem; font:600 clamp(1.05rem,2.1cqw,1.18rem)/1.3 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-processtimeline .pt-text{ margin:0; font-size:.96rem; line-height:1.7; color:var(--dim); max-width:56ch; }
.wsp-processtimeline .pt-details{ list-style:none; margin:.85rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.wsp-processtimeline .pt-details li{ position:relative; padding-left:1.25rem; font-size:.86rem; line-height:1.55; color:var(--faint); }
.wsp-processtimeline .pt-details li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--accent); opacity:.55; }
@media (prefers-reduced-motion: reduce){
  .wsp-processtimeline .pt-num{ transition:none; }
}
@container site (max-width:560px){
  .wsp-processtimeline{ --pt-num:40px; --pt-gap:2.4rem; }
  .wsp-processtimeline .pt-steps{ margin-top:34px; }
  .wsp-processtimeline .pt-step{ gap:1rem; }
  .wsp-processtimeline .pt-text{ font-size:.92rem; }
}

/* --- soundwavetestimonial (SB_04 port) --- */
.wsp-soundwavetestimonial{ display:flex; align-items:center; justify-content:center;
  min-height:clamp(420px,66cqh,640px); background:var(--bg); isolation:isolate; }
.wsp-soundwavetestimonial .swt-wave{ position:absolute; inset:0; z-index:0; display:flex;
  align-items:center; justify-content:space-between; padding:0 clamp(16px,4cqw,60px);
  pointer-events:none; opacity:.62; transform:scaleY(var(--amp,1)); transform-origin:center;
  transition:transform .9s cubic-bezier(.23,1,.32,1); }
.wsp-soundwavetestimonial .swt-bar{ flex:0 0 auto; width:3px; border-radius:2px; transform-origin:center;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--ink) 5%, transparent),
    color-mix(in srgb, var(--ink) 24%, transparent),
    color-mix(in srgb, var(--ink) 5%, transparent));
  animation:swt-pulse var(--dur,2s) ease-in-out infinite; animation-delay:var(--del,0s);
  will-change:transform; }
.wsp-soundwavetestimonial .swt-glow{ position:absolute; left:50%; top:50%; z-index:0;
  width:min(760px,90cqw); height:min(420px,60cqh); transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
.wsp-soundwavetestimonial .swt-content{ z-index:2; }
.wsp-soundwavetestimonial .swt-kick{ margin-bottom:26px; }
.wsp-soundwavetestimonial .swt-stage{ display:grid; }
.wsp-soundwavetestimonial .swt-slide{ grid-area:1 / 1; opacity:0; pointer-events:none;
  transition:opacity .6s ease; }
.wsp-soundwavetestimonial .swt-slide.on{ opacity:1; pointer-events:auto; }
.wsp-soundwavetestimonial .swt-quote{ margin:0 0 30px; color:var(--ink); letter-spacing:.01em;
  font:200 clamp(22px,4.2cqw,44px)/1.32 var(--font-head, var(--font)); }
.wsp-soundwavetestimonial .swt-word{ display:inline-block; opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--wi,0) * 45ms); }
.wsp-soundwavetestimonial .swt-slide.on .swt-word{ opacity:1; transform:none; }
.wsp-soundwavetestimonial .swt-who{ display:inline-flex; flex-direction:column; align-items:center; }
.wsp-soundwavetestimonial .swt-name{ color:var(--ink); font-weight:600; letter-spacing:.03em;
  font-size:clamp(14px,1.7cqw,18px); }
.wsp-soundwavetestimonial .swt-role{ margin-top:5px; color:var(--accent); font-style:italic;
  font-size:clamp(13px,1.5cqw,16px); }
.wsp-soundwavetestimonial .swt-rule{ width:46px; height:1px; margin-top:14px;
  background:color-mix(in srgb, var(--ink) 22%, transparent); }
.wsp-soundwavetestimonial .swt-dots{ display:flex; gap:11px; justify-content:center; margin-top:32px; }
.wsp-soundwavetestimonial .swt-dot{ width:8px; height:8px; padding:0; border:0; border-radius:50%;
  cursor:pointer; background:color-mix(in srgb, var(--ink) 22%, transparent);
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease; }
.wsp-soundwavetestimonial .swt-dot:hover{ background:color-mix(in srgb, var(--ink) 42%, transparent); }
.wsp-soundwavetestimonial .swt-dot.on{ background:var(--accent); transform:scale(1.5);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.wsp-soundwavetestimonial .swt-prog{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  overflow:hidden; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.wsp-soundwavetestimonial .swt-prog i{ display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left; }
@container site (max-width:640px){
  .wsp-soundwavetestimonial{ min-height:clamp(360px,78cqh,560px); }
  .wsp-soundwavetestimonial .swt-wave{ padding:0 12px; }
  .wsp-soundwavetestimonial .swt-quote{ font-size:clamp(20px,6cqw,30px); margin-bottom:26px; }
}
@container site (max-width:520px){
  .wsp-soundwavetestimonial .swt-bar:nth-child(2n){ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-soundwavetestimonial .swt-bar{ animation:none; }
  .wsp-soundwavetestimonial .swt-wave{ transition:none; }
  .wsp-soundwavetestimonial .swt-slide,
  .wsp-soundwavetestimonial .swt-word{ transition:none; }
}
@keyframes swt-pulse{ 0%,100%{ transform:scaleY(.7); } 50%{ transform:scaleY(1.35); } }

/* --- portfoliogrid (SB_04 port) --- */
.wsp-portfoliogrid .ws-shead{ margin-bottom:clamp(22px,2.8cqw,30px); }

.wsp-portfoliogrid .pg-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:clamp(26px,3.4cqw,40px); }
.wsp-portfoliogrid .pg-fbtn{ font:500 12.5px/1.4 var(--font); letter-spacing:.3px; color:var(--dim); background:transparent; border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:.5em 1.15em; cursor:pointer; appearance:none; -webkit-appearance:none; transition:color .25s ease, border-color .25s ease; }
.wsp-portfoliogrid .pg-fbtn:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.wsp-portfoliogrid .pg-fbtn.on{ color:var(--accent-text, var(--bg)); background:var(--accent); border-color:var(--accent); }
.wsp-portfoliogrid .pg-fbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wsp-portfoliogrid .pg-grid{ display:grid; grid-template-columns:1fr; gap:clamp(16px,2.2cqw,24px); }
.wsp-portfoliogrid .pg-card{ position:relative; display:flex; flex-direction:column; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; transition:transform .3s ease, border-color .25s ease; }
.wsp-portfoliogrid .pg-card:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.wsp-portfoliogrid .pg-card.is-hidden{ display:none; }

.wsp-portfoliogrid .pg-thumb{ position:relative; aspect-ratio:3 / 2; overflow:hidden; background:radial-gradient(120% 140% at 15% 12%, var(--accent-fill2, var(--accent-fill)) 0%, transparent 55%), var(--panel-2, var(--panel)); }
.wsp-portfoliogrid .pg-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.wsp-portfoliogrid .pg-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 clamp(30px,7cqw,52px)/1 var(--font-head, var(--font)); letter-spacing:2px; color:var(--faint); opacity:.55; transition:transform .4s ease; }
.wsp-portfoliogrid .pg-card:hover .pg-img,
.wsp-portfoliogrid .pg-card:hover .pg-ph{ transform:scale(1.04); }

.wsp-portfoliogrid .pg-ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(6,9,16,.66); opacity:0; transition:opacity .3s ease; }
.wsp-portfoliogrid .pg-card:hover .pg-ov,
.wsp-portfoliogrid .pg-card:focus-within .pg-ov{ opacity:1; }
.wsp-portfoliogrid .pg-view{ font:600 11px/1.4 var(--font); letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.92); text-decoration:none; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:.6em 1.5em; transition:color .25s ease, border-color .25s ease; }
.wsp-portfoliogrid a.pg-view:hover,
.wsp-portfoliogrid a.pg-view:focus-visible{ color:#fff; border-color:rgba(255,255,255,.75); outline:none; }

.wsp-portfoliogrid .pg-body{ padding:clamp(14px,2cqw,18px); display:flex; flex-direction:column; gap:8px; flex:1; }
.wsp-portfoliogrid .pg-tag{ align-self:flex-start; font:600 10px/1.3 var(--mono, var(--font)); letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); background:var(--accent-fill); border-radius:6px; padding:.42em .7em; }
.wsp-portfoliogrid .pg-title{ margin:0; font:600 clamp(15px,1.9cqw,18px)/1.3 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-portfoliogrid .pg-desc{ margin:0; font:400 clamp(13px,1.5cqw,14px)/1.55 var(--font); color:var(--dim); }

@container site (min-width:560px){
  .wsp-portfoliogrid .pg-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (min-width:900px){
  .wsp-portfoliogrid .pg-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-portfoliogrid .pg-img,
  .wsp-portfoliogrid .pg-ph,
  .wsp-portfoliogrid .pg-ov,
  .wsp-portfoliogrid .pg-view,
  .wsp-portfoliogrid .pg-fbtn,
  .wsp-portfoliogrid .pg-card{ transition:none; }
  .wsp-portfoliogrid .pg-card:hover .pg-img,
  .wsp-portfoliogrid .pg-card:hover .pg-ph{ transform:none; }
}

/* --- tickerband (SB_04 port) --- */
.ws-sec.wsp-tickerband{ padding:clamp(34px,5cqw,60px) 0; }
.wsp-tickerband .tb-stack{ width:100%; }

.wsp-tickerband .tb-band{ width:100%; overflow:hidden; white-space:nowrap; position:relative;
  padding:0.7rem 0; border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-tickerband .tb-band + .tb-band{ border-top:none; }

.wsp-tickerband .tb-track{ display:inline-flex; align-items:center; will-change:transform;
  animation:wsp-tb-marq var(--tb-dur,30s) linear infinite; animation-direction:var(--tb-dir,normal); }
.wsp-tickerband .tb-band:hover .tb-track{ animation-play-state:paused; }

.wsp-tickerband .tb-item{ display:inline-flex; align-items:center; gap:0.55em; padding:0 0.5em;
  flex-shrink:0; font-family:var(--font-head, var(--font)); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.02em; line-height:1; user-select:none;
  color:color-mix(in srgb, var(--ink) 15%, transparent); }
.wsp-tickerband .tb-item.acc{ color:color-mix(in srgb, var(--accent) 34%, transparent); }

.wsp-tickerband .tb-dot{ width:0.14em; height:0.14em; border-radius:50%; background:currentColor;
  opacity:0.55; flex-shrink:0; }
.wsp-tickerband .tb-item.acc .tb-dot{ background:var(--accent); opacity:0.6;
  box-shadow:0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); }

/* size cascade (cqw so it scales inside any pane) */
.wsp-tickerband .tb-lg{ font-size:clamp(2.4rem, 7cqw + 0.4rem, 6rem); padding:1.05rem 0; }
.wsp-tickerband .tb-md{ font-size:clamp(1.7rem, 5cqw + 0.4rem, 4rem); }
.wsp-tickerband .tb-sm{ font-size:clamp(1.15rem, 3cqw + 0.4rem, 2.6rem); padding:0.55rem 0; }
.wsp-tickerband .tb-xs{ font-size:clamp(0.85rem, 2cqw + 0.4rem, 1.4rem); padding:0.5rem 0; letter-spacing:0.02em; }

/* speed + direction (inherit --tb-dur/--tb-dir from band down to track) */
.wsp-tickerband .tb-band.spd-slow{ --tb-dur:45s; }
.wsp-tickerband .tb-band.spd-fast{ --tb-dur:20s; }
.wsp-tickerband .tb-band.spd-crawl{ --tb-dur:60s; }
.wsp-tickerband .tb-band.rev{ --tb-dir:reverse; }

@keyframes wsp-tb-marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@container site (max-width:560px){
  .ws-sec.wsp-tickerband{ padding:clamp(22px,6cqw,40px) 0; }
  .wsp-tickerband .tb-item{ gap:0.45em; padding:0 0.42em; }
  .wsp-tickerband .tb-lg{ padding:0.8rem 0; }
}

@media (prefers-reduced-motion:reduce){
  .wsp-tickerband .tb-track{ animation-play-state:paused; }
}

/* --- showcasegrid (SB_04 port) --- */
.wsp-showcasegrid .sg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8cqw,22px); margin-top:8px; text-align:left; }
.wsp-showcasegrid .sg-card{ display:block; cursor:pointer; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius) - 2px); overflow:hidden; text-decoration:none; color:inherit; transition:transform 200ms var(--ease-pop, ease-out), border-color 200ms ease; }
.wsp-showcasegrid .sg-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); }
.wsp-showcasegrid .sg-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-showcasegrid .sg-thumb{ position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--panel-2, var(--panel)); }
.wsp-showcasegrid .sg-art{ position:absolute; inset:0; transform:scale(1); transition:transform 320ms var(--ease-pop, ease-out); }
.wsp-showcasegrid .sg-card:hover .sg-art{ transform:scale(1.04); }
.wsp-showcasegrid .sg-a0{ background:radial-gradient(80% 70% at 20% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), var(--panel); }
.wsp-showcasegrid .sg-a1{ background:linear-gradient(135deg, var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent)), color-mix(in srgb, var(--accent2, var(--accent)) 16%, transparent)), var(--panel); }
.wsp-showcasegrid .sg-a2{ background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 2px, transparent 2px 18px), var(--panel); }
.wsp-showcasegrid .sg-a3{ background:radial-gradient(90% 80% at 82% 88%, color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent), transparent 72%), var(--panel); }
.wsp-showcasegrid .sg-a4{ background:conic-gradient(from 210deg at 60% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%, color-mix(in srgb, var(--accent2, var(--accent)) 12%, transparent) 78%, transparent), var(--panel); }
.wsp-showcasegrid .sg-a5{ background:repeating-linear-gradient(45deg, transparent 0 26px, color-mix(in srgb, var(--ink) 7%, transparent) 26px 27px), radial-gradient(60% 60% at 50% 30%, var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent)), transparent 75%), var(--panel); }
.wsp-showcasegrid .sg-num{ position:absolute; top:8px; left:10px; z-index:2; font:600 10px var(--mono); letter-spacing:1px; color:color-mix(in srgb, var(--ink) 72%, transparent); background:color-mix(in srgb, var(--bg) 55%, transparent); padding:2px 6px; border-radius:4px; }
.wsp-showcasegrid .sg-tag{ position:absolute; bottom:8px; right:10px; z-index:2; font:600 9px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--bg) 62%, transparent); padding:2px 6px; border-radius:4px; }
.wsp-showcasegrid .sg-body{ padding:14px 16px 16px; }
.wsp-showcasegrid .sg-name{ margin:0 0 5px; font:600 15px var(--font-head, var(--font)); line-height:1.3; color:var(--ink); }
.wsp-showcasegrid .sg-desc{ margin:0; font:400 12.5px/1.6 var(--font); color:var(--dim); }
.wsp-showcasegrid .sg-foot{ margin-top:clamp(26px,3.4cqw,40px); }
@container site (max-width:900px){ .wsp-showcasegrid .sg-grid{ grid-template-columns:repeat(2,1fr); } }
@container site (max-width:560px){ .wsp-showcasegrid .sg-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .wsp-showcasegrid .sg-card, .wsp-showcasegrid .sg-art{ transition:none; } }

/* --- contentblock (SB_04 port) --- */
.wsp-contentblock .cb-copy{ display:flex; flex-direction:column; align-items:flex-start; }
.wsp-contentblock .cb-copy .ws-kick{ margin-bottom:16px; }
.wsp-contentblock .cb-copy .ws-sub{ margin-top:14px; max-width:46ch; }
.wsp-contentblock .cb-list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.wsp-contentblock .cb-li{ display:flex; align-items:flex-start; gap:11px; font:500 14.5px/1.5 var(--font); color:var(--ink); }
.wsp-contentblock .cb-tick{ display:flex; flex:0 0 auto; margin-top:1px; color:var(--accent); }
.wsp-contentblock .cb-tick svg{ width:16px; height:16px; }
.wsp-contentblock .cb-cta{ margin-top:30px; }
.wsp-contentblock .cb-visual{ position:relative; }
.wsp-contentblock .cb-visual .ws-browser{ width:100%; transition:transform 240ms ease-out; }
.wsp-contentblock .cb-visual:hover .ws-browser{ transform:translateY(-5px); }
@container site (max-width:860px){
  .wsp-contentblock .cb-copy .ws-sub{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-contentblock .cb-visual .ws-browser,
  .wsp-contentblock .cb-visual:hover .ws-browser{ transition:none; transform:none; }
}

/* --- testimonialsection (SB_04 port) --- */
.wsp-testimonialsection .t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2cqw,28px); width:min(1080px,88cqw); margin:0 auto; }
.wsp-testimonialsection .t-card{ display:flex; flex-direction:column; gap:18px; padding:clamp(24px,2.6cqw,32px) clamp(22px,2.4cqw,28px);
  background:var(--panel); background-image:var(--surface-grad,none); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  transition:transform .2s ease, border-color .2s ease; }
.wsp-testimonialsection .t-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 38%, var(--hair)); }
.wsp-testimonialsection .t-stars{ display:inline-flex; gap:3px; color:var(--accent); font-size:.95rem; letter-spacing:.08em; line-height:1; }
.wsp-testimonialsection .t-stars i{ color:color-mix(in srgb, var(--faint) 55%, transparent); font-style:normal; }
.wsp-testimonialsection .t-quote{ margin:0; font:400 clamp(14px,1.6cqw,15.5px)/1.7 var(--font); color:var(--ink); }
.wsp-testimonialsection .t-quote::before{ content:"\\201C"; color:var(--accent); opacity:.4; font:400 1.5em/0 var(--font-head,var(--font)); vertical-align:-0.2em; margin-right:0.06em; }
.wsp-testimonialsection .t-author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.wsp-testimonialsection .t-avatar{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--accent-fill); color:var(--accent); font:700 13px var(--font); letter-spacing:.02em; }
.wsp-testimonialsection .t-who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wsp-testimonialsection .t-who b{ font:600 13.5px var(--font); color:var(--ink); }
.wsp-testimonialsection .t-who i{ font:400 12px var(--font); color:var(--dim); font-style:normal; }
@container site (max-width:820px){
  .wsp-testimonialsection .t-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-testimonialsection .t-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-testimonialsection .t-card{ transition:none; }
  .wsp-testimonialsection .t-card:hover{ transform:none; }
}

/* --- tabbedshowcase (SB_04 port) --- */
.wsp-tabbedshowcase .ts-nav{ display:flex; gap:2rem; position:relative; margin:0 0 2.4rem; border-bottom:var(--bw, 1px) solid var(--hair); overflow-x:auto; scrollbar-width:none; }
.wsp-tabbedshowcase .ts-nav::-webkit-scrollbar{ display:none; }
.wsp-tabbedshowcase .ts-tab{ appearance:none; -webkit-appearance:none; background:transparent; border:0; color:var(--faint); font:600 .95rem var(--font); padding:.85rem .1rem; margin-bottom:-1px; cursor:pointer; position:relative; white-space:nowrap; transition:color .2s ease; }
.wsp-tabbedshowcase .ts-tab:hover{ color:var(--dim); }
.wsp-tabbedshowcase .ts-tab.on{ color:var(--ink); }
.wsp-tabbedshowcase .ts-tab::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent); border-radius:2px; transform:scaleX(0); transform-origin:left center; transition:transform .25s ease; }
.wsp-tabbedshowcase .ts-tab.on::after{ transform:scaleX(1); }
.wsp-tabbedshowcase .ts-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }
.wsp-tabbedshowcase .ts-panels{ position:relative; }
.wsp-tabbedshowcase .ts-panel{ display:none; }
.wsp-tabbedshowcase .ts-panel.on{ display:block; }
.wsp-tabbedshowcase .ts-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5cqw,4rem); align-items:center; }
.wsp-tabbedshowcase .ts-copy{ display:flex; flex-direction:column; gap:.55rem; }
.wsp-tabbedshowcase .ts-label{ font:500 .9rem var(--mono); color:var(--accent); letter-spacing:.02em; }
.wsp-tabbedshowcase .ts-h3{ margin:0; font:600 clamp(1.35rem,3cqw,1.85rem)/1.25 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-tabbedshowcase .ts-desc{ margin:0; font-size:1.03rem; line-height:1.65; color:var(--dim); max-width:52ch; }
.wsp-tabbedshowcase .ts-link{ margin-top:.4rem; display:inline-flex; align-items:center; gap:.4rem; color:var(--accent); font-weight:600; font-size:.95rem; cursor:pointer; width:max-content; }
.wsp-tabbedshowcase .ts-link svg{ width:1em; height:1em; transition:transform .2s ease; }
.wsp-tabbedshowcase .ts-link:hover svg{ transform:translateX(3px); }
.wsp-tabbedshowcase .ts-media{ transition:transform .3s ease; }
.wsp-tabbedshowcase .ts-media:hover{ transform:translateY(-4px); }
.wsp-tabbedshowcase .ts-frame{ border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--panel); }
.wsp-tabbedshowcase .ts-img{ display:block; width:100%; height:auto; object-fit:cover; }
@container site (max-width:820px){
  .wsp-tabbedshowcase .ts-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .wsp-tabbedshowcase .ts-media{ max-width:560px; margin:0 auto; }
}
@container site (max-width:560px){
  .wsp-tabbedshowcase .ts-nav{ gap:1.25rem; }
  .wsp-tabbedshowcase .ts-tab{ font-size:.88rem; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-tabbedshowcase .ts-tab,
  .wsp-tabbedshowcase .ts-tab::after,
  .wsp-tabbedshowcase .ts-media,
  .wsp-tabbedshowcase .ts-link svg{ transition:none; }
}

/* --- seccasestudystrip (SB_04 port) --- */
.wsp-seccasestudystrip .ws-shead{ margin-bottom:clamp(30px,4cqw,46px); }
.wsp-seccasestudystrip .scs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2cqw,22px); }

.wsp-seccasestudystrip .scs-card{ position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  text-decoration:none; color:inherit; transition:transform .25s var(--ease-pop, ease-out), border-color .2s ease; }
.wsp-seccasestudystrip a.scs-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 42%, var(--hair)); }
.wsp-seccasestudystrip article.scs-card:hover{ border-color:color-mix(in srgb, var(--accent) 30%, var(--hair)); }
.wsp-seccasestudystrip a.scs-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wsp-seccasestudystrip .scs-bar{ height:3px; width:100%; flex:0 0 auto;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--ink))); }
.wsp-seccasestudystrip .scs-bar.c1{ filter:hue-rotate(48deg); }
.wsp-seccasestudystrip .scs-bar.c2{ filter:hue-rotate(-42deg); }

.wsp-seccasestudystrip .scs-body{ display:flex; flex-direction:column; gap:11px; flex:1; padding:clamp(15px,1.9cqw,20px); }
.wsp-seccasestudystrip .scs-company{ font:700 12px var(--mono, var(--font)); letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); }
.wsp-seccasestudystrip .scs-stat{ margin:0; font:800 clamp(21px,2.9cqw,30px)/1.1 var(--font-head, var(--font)); letter-spacing:-.02em; color:var(--ink); }
.wsp-seccasestudystrip .scs-context{ font:400 13px/1.6 var(--font); color:var(--dim); flex:1; }
.wsp-seccasestudystrip .scs-link{ display:inline-flex; align-items:center; gap:6px; margin-top:2px;
  font:700 13px var(--font); color:var(--accent); }
.wsp-seccasestudystrip .scs-link svg{ width:15px; height:15px; transition:transform .2s var(--ease-pop, ease-out); }
.wsp-seccasestudystrip a.scs-card:hover .scs-link svg{ transform:translateX(4px); }

@container site (max-width:860px){
  .wsp-seccasestudystrip .scs-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-seccasestudystrip .scs-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccasestudystrip .scs-card,
  .wsp-seccasestudystrip .scs-link svg{ transition:none; }
  .wsp-seccasestudystrip a.scs-card:hover{ transform:none; }
}

/* --- ctabanner (SB_04 port) --- */
.wsp-ctabanner.ws-sec{ padding-bottom:0; }
.wsp-ctabanner.ws-sec::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(52% 46% at 50% 20%, var(--accent-fill2), transparent 70%), radial-gradient(42% 42% at 82% 62%, var(--accent-fill), transparent 66%); }
.wsp-ctabanner .cbn-in{ position:relative; z-index:1; grid-template-columns:1.1fr 0.9fr; align-items:end; gap:clamp(32px,5cqw,64px); }
.wsp-ctabanner .cbn-copy{ align-self:center; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(20px,3cqw,28px); padding-bottom:clamp(40px,6cqw,74px); }
.wsp-ctabanner .cbn-title{ max-width:17ch; }
.wsp-ctabanner .cbn-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.wsp-ctabanner .cbn-actions .cbn-ctarow.ws-ctarow{ margin-top:0; }
.wsp-ctabanner .cbn-actions .ws-btn.primary i{ transition:transform .3s ease; }
.wsp-ctabanner .cbn-actions .ws-btn.primary:hover i{ transform:translateX(3px); }
.wsp-ctabanner .cbn-subtext{ margin:0; font:400 clamp(12.5px,1.4cqw,14px)/1.5 var(--font); color:var(--faint); }
.wsp-ctabanner .cbn-visual{ align-self:end; width:100%; }
.wsp-ctabanner .cbn-frame.ws-browser{ width:100%; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0; box-shadow:0 24px 60px -30px rgba(0,0,0,0.55); }
@container site (max-width:760px){
  .wsp-ctabanner .cbn-in{ grid-template-columns:1fr; align-items:stretch; gap:clamp(30px,6cqw,40px); }
  .wsp-ctabanner .cbn-copy{ align-self:auto; align-items:center; text-align:center; padding-bottom:0; }
  .wsp-ctabanner .cbn-title{ max-width:22ch; }
  .wsp-ctabanner .cbn-actions{ align-items:center; }
  .wsp-ctabanner .cbn-actions .cbn-ctarow.ws-ctarow{ justify-content:center; }
  .wsp-ctabanner .cbn-subtext{ text-align:center; }
  .wsp-ctabanner .cbn-visual{ align-self:auto; max-width:520px; margin-inline:auto; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-ctabanner .cbn-actions .ws-btn.primary i{ transition:none; }
}

/* --- featuredisplay (SB_04 port) --- */
.wsp-featuredisplay .fd-rows{ display:flex; flex-direction:column; gap:clamp(30px,4.6cqw,58px); margin-top:clamp(30px,4cqw,52px); }
.wsp-featuredisplay .fd-row{ display:grid; grid-template-columns:1.12fr 0.88fr; gap:clamp(32px,5cqw,72px); align-items:center; }
.wsp-featuredisplay .fd-row + .fd-row{ border-top:var(--bw, 1px) solid var(--hair); padding-top:clamp(30px,4.6cqw,58px); }
.wsp-featuredisplay .fd-row.flip{ grid-template-columns:0.88fr 1.12fr; }
.wsp-featuredisplay .fd-row.flip .fd-vis{ order:2; }
.wsp-featuredisplay .fd-row.flip .fd-text{ order:1; }

.wsp-featuredisplay .fd-vis{ display:flex; justify-content:center; min-width:0; }
.wsp-featuredisplay .fd-shot{ position:relative; width:100%; max-width:560px; border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,0.22); transform:perspective(1000px) rotateY(2deg);
  transition:transform 0.5s cubic-bezier(.2,.8,.25,1); }
.wsp-featuredisplay .fd-row.flip .fd-shot{ transform:perspective(1000px) rotateY(-2deg); }
.wsp-featuredisplay .fd-shot > .ws-browser{ width:100%; }
.wsp-featuredisplay .fd-shot.has-img{ aspect-ratio:4 / 3; background:var(--panel) center/cover no-repeat;
  border:var(--bw, 1px) solid var(--hair); overflow:hidden; }
.wsp-featuredisplay .fd-shot::after{ content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:linear-gradient(120deg, transparent 0%, var(--accent-fill) 50%, transparent 100%);
  opacity:0; transition:opacity 0.45s ease; pointer-events:none; }
.wsp-featuredisplay .fd-row:hover .fd-shot{ transform:perspective(1000px) rotateY(0deg) translateY(-4px); }
.wsp-featuredisplay .fd-row:hover .fd-shot::after{ opacity:1; }

.wsp-featuredisplay .fd-text{ display:flex; flex-direction:column; gap:clamp(12px,1.6cqw,18px); max-width:520px; min-width:0; }
.wsp-featuredisplay .fd-title{ margin:0; position:relative; padding-bottom:16px; width:fit-content; text-wrap:balance;
  font:700 clamp(20px,3cqw,30px)/1.18 var(--font-head, var(--font)); letter-spacing:-0.01em; color:var(--ink);
  background:linear-gradient(135deg, var(--accent), var(--accent2, var(--accent-dim, var(--accent))));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wsp-featuredisplay .fd-title::after{ content:''; position:absolute; left:0; bottom:0; width:56px; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent); opacity:0.6; }
.wsp-featuredisplay .fd-desc{ margin:0; font:400 clamp(14px,1.7cqw,16px)/1.7 var(--font); color:var(--dim); }

.wsp-featuredisplay .fd-cta{ display:inline-flex; align-items:center; gap:8px; width:fit-content; margin-top:6px;
  padding:11px 22px; border-radius:calc(var(--radius, 12px) * .6); cursor:pointer; text-decoration:none;
  font:600 clamp(13px,1.4cqw,14px) var(--font); color:var(--accent); position:relative; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  transition:color 0.25s ease, border-color 0.25s ease; }
.wsp-featuredisplay .fd-cta:hover{ border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 9%, transparent); }
.wsp-featuredisplay .fd-cta:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-featuredisplay .fd-cta svg{ width:14px; height:14px; }
.wsp-featuredisplay .fd-cta::before{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 12%, transparent), transparent);
  transition:transform 0.55s ease; pointer-events:none; }
.wsp-featuredisplay .fd-cta:hover::before{ transform:translateX(100%); }

@container site (max-width:720px){
  .wsp-featuredisplay .fd-row, .wsp-featuredisplay .fd-row.flip{ grid-template-columns:1fr; gap:24px; }
  .wsp-featuredisplay .fd-row.flip .fd-vis, .wsp-featuredisplay .fd-vis{ order:0; }
  .wsp-featuredisplay .fd-row.flip .fd-text, .wsp-featuredisplay .fd-text{ order:0; max-width:none; align-items:center; text-align:center; }
  .wsp-featuredisplay .fd-shot, .wsp-featuredisplay .fd-row.flip .fd-shot{ transform:none; max-width:100%; }
  .wsp-featuredisplay .fd-title{ margin-inline:auto; }
  .wsp-featuredisplay .fd-title::after{ left:50%; transform:translateX(-50%); width:72px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-featuredisplay .fd-shot, .wsp-featuredisplay .fd-row.flip .fd-shot,
  .wsp-featuredisplay .fd-row:hover .fd-shot{ transform:none; transition:none; }
  .wsp-featuredisplay .fd-shot::after, .wsp-featuredisplay .fd-cta, .wsp-featuredisplay .fd-cta::before{ transition:none; }
}

/* --- comparisontable (SB_04 port) --- */
.wsp-comparisontable .ct-tools{ display:flex; justify-content:center; margin:0 0 22px; }
.wsp-comparisontable .ct-diffbtn{ display:inline-flex; align-items:center; gap:9px; padding:8px 15px;
  font:600 12px var(--font); color:var(--dim); background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:999px; cursor:pointer; transition:color .16s ease, border-color .16s ease; }
.wsp-comparisontable .ct-diffbtn:hover{ color:var(--ink); border-color:var(--accent-dim); }
.wsp-comparisontable .ct-diffdot{ width:14px; height:14px; border-radius:5px; border:1.5px solid var(--faint);
  transition:background .16s ease, border-color .16s ease; }
.wsp-comparisontable .ct-diffbtn[aria-pressed="true"]{ color:var(--ink); border-color:var(--accent); }
.wsp-comparisontable .ct-diffbtn[aria-pressed="true"] .ct-diffdot{ background:var(--accent); border-color:var(--accent); }

.wsp-comparisontable .ct-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); background:var(--panel); }
.wsp-comparisontable .ct-table{ width:100%; min-width:600px; border-collapse:collapse; table-layout:fixed; }
.wsp-comparisontable .ct-hrow > *:not(:first-child),
.wsp-comparisontable .ct-row > *:not(:first-child){ border-left:var(--bw, 1px) solid var(--hair-soft); }

.wsp-comparisontable thead .ct-h{ padding:20px 16px; text-align:center; vertical-align:bottom;
  background:var(--panel-2); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-comparisontable .ct-hfeat{ text-align:left; width:26%; }
.wsp-comparisontable .ct-thlabel{ font:700 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.wsp-comparisontable .ct-plan{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.wsp-comparisontable .ct-pbadge,
.wsp-comparisontable .ct-cbadge{ display:inline-block; padding:3px 9px; border-radius:999px;
  background:var(--accent); color:var(--accent-text, var(--bg)); font:700 9px var(--mono);
  letter-spacing:1.2px; text-transform:uppercase; margin-bottom:2px; }
.wsp-comparisontable .ct-pname{ font:700 16px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-comparisontable .ct-pprice{ font:400 12px var(--font); color:var(--dim); }
.wsp-comparisontable .ct-pprice strong{ font:700 20px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.02em; }
.wsp-comparisontable .ct-pcta,
.wsp-comparisontable .ct-ccta{ margin-top:6px; display:inline-block; padding:7px 15px; border-radius:9px;
  font:600 12px var(--font); text-decoration:none; white-space:nowrap; cursor:pointer;
  background:var(--accent); color:var(--accent-text, var(--bg)); border:1px solid transparent;
  transition:opacity .15s ease, color .15s ease, border-color .15s ease; }
.wsp-comparisontable .ct-pcta:hover,
.wsp-comparisontable .ct-ccta:hover{ opacity:.88; }
.wsp-comparisontable .ct-pcta.ghost,
.wsp-comparisontable .ct-ccta.ghost{ background:transparent; color:var(--dim); border-color:var(--hair); }
.wsp-comparisontable .ct-pcta.ghost:hover,
.wsp-comparisontable .ct-ccta.ghost:hover{ color:var(--ink); border-color:var(--accent-dim); opacity:1; }

.wsp-comparisontable thead .ct-h.ct-feat{ background:color-mix(in srgb, var(--accent) 11%, var(--panel-2)); position:relative; }
.wsp-comparisontable thead .ct-h.ct-feat::before{ content:''; position:absolute; inset:0 0 auto 0; height:2px; background:var(--accent); }
.wsp-comparisontable .ct-c.ct-feat{ background:color-mix(in srgb, var(--accent) 6%, transparent); }

.wsp-comparisontable .ct-cat .ct-catcell{ text-align:left; padding:9px 16px; background:var(--panel);
  font:700 10px var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--accent);
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair-soft); }
.wsp-comparisontable tbody .ct-row{ transition:background .12s ease; }
.wsp-comparisontable tbody .ct-row + .ct-row,
.wsp-comparisontable tbody .ct-cat + .ct-row{ border-top:var(--bw, 1px) solid var(--hair-soft); }
.wsp-comparisontable tbody .ct-row:hover{ background:color-mix(in srgb, var(--accent) 4%, transparent); }
.wsp-comparisontable .ct-rowh{ text-align:left; padding:13px 16px; font:500 14px var(--font); color:var(--ink); }
.wsp-comparisontable .ct-c{ padding:13px 16px; text-align:center; vertical-align:middle; font:400 13.5px var(--font); color:var(--dim); }

.wsp-comparisontable .ct-cell{ display:inline-flex; align-items:center; justify-content:center; }
.wsp-comparisontable .ct-chk{ color:var(--accent); }
.wsp-comparisontable .ct-chk svg{ width:17px; height:17px; }
.wsp-comparisontable .ct-cross{ color:var(--faint); }
.wsp-comparisontable .ct-cross svg{ width:15px; height:15px; }
.wsp-comparisontable .ct-txt{ color:var(--ink); font-weight:500; }
.wsp-comparisontable .ct-badge{ padding:3px 10px; border-radius:999px; font:600 11px var(--font); letter-spacing:.3px;
  color:var(--accent); background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }

.wsp-comparisontable .ct-cards{ display:none; }
.wsp-comparisontable .ct-card{ border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden; background:var(--panel); }
.wsp-comparisontable .ct-cfeat{ border-color:var(--accent); }
.wsp-comparisontable .ct-chead{ padding:16px 18px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:4px; background:var(--panel-2); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-comparisontable .ct-cfeat .ct-chead{ background:color-mix(in srgb, var(--accent) 11%, var(--panel-2)); }
.wsp-comparisontable .ct-cname{ font:700 17px var(--font-head, var(--font)); color:var(--ink); }
.wsp-comparisontable .ct-cprice{ font:400 12px var(--font); color:var(--dim); }
.wsp-comparisontable .ct-cprice strong{ font:700 20px var(--font-head, var(--font)); color:var(--ink); }
.wsp-comparisontable .ct-ccta{ margin-top:8px; }
.wsp-comparisontable .ct-crows{ display:flex; flex-direction:column; }
.wsp-comparisontable .ct-mcat{ padding:8px 18px; font:700 10px var(--mono); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--accent); background:var(--panel-2); border-top:var(--bw, 1px) solid var(--hair-soft); }
.wsp-comparisontable .ct-mrow{ display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 18px; border-top:var(--bw, 1px) solid var(--hair-soft); }
.wsp-comparisontable .ct-mfeat{ font:400 13.5px var(--font); color:var(--dim); }
.wsp-comparisontable .ct-mval{ font:500 13.5px var(--font); color:var(--ink); text-align:right; flex-shrink:0; }
.wsp-comparisontable .ct-mval .ct-cell{ justify-content:flex-end; }

.wsp-comparisontable.is-diffs tr[data-same="1"],
.wsp-comparisontable.is-diffs .ct-mcat[data-same="1"],
.wsp-comparisontable.is-diffs .ct-mrow[data-same="1"]{ display:none; }

@container site (max-width:720px){
  .wsp-comparisontable .ct-scroll{ display:none; }
  .wsp-comparisontable .ct-cards{ display:grid; gap:16px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-comparisontable .ct-row, .wsp-comparisontable .ct-pcta, .wsp-comparisontable .ct-ccta,
  .wsp-comparisontable .ct-diffbtn, .wsp-comparisontable .ct-diffdot{ transition:none; }
}

/* --- metriccards (SB_04 port) --- */
.wsp-metriccards{ --mc-pos:#4caf82; --mc-neg:#e05c5c; }
.wsp-metriccards .mc-head{ text-align:left; margin-bottom:clamp(28px,4cqw,44px); }
.wsp-metriccards .mc-head .ws-kick{ margin-bottom:10px; }
.wsp-metriccards .mc-head .ws-h2{ max-width:32ch; }
.wsp-metriccards .mc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); }
.wsp-metriccards .mc-card{ background:var(--bg); padding:clamp(18px,2.4cqw,26px); display:flex; flex-direction:column; gap:clamp(16px,2.4cqw,22px); min-width:0; }
.wsp-metriccards .mc-top{ display:flex; flex-direction:column; gap:9px; }
.wsp-metriccards .mc-value{ display:block; font:800 clamp(28px,4cqw,42px)/1 var(--font-head,var(--font)); letter-spacing:-0.03em; color:var(--ink); }
.wsp-metriccards .mc-trend{ display:inline-flex; align-items:center; gap:5px; width:fit-content; font:600 clamp(11px,1.4cqw,12.5px)/1 var(--font); padding:3px 9px 3px 7px; border-radius:100px; }
.wsp-metriccards .mc-card[data-trend="up"] .mc-trend{ color:var(--mc-pos); background:color-mix(in srgb, var(--mc-pos) 14%, transparent); }
.wsp-metriccards .mc-card[data-trend="down"] .mc-trend{ color:var(--mc-neg); background:color-mix(in srgb, var(--mc-neg) 14%, transparent); }
.wsp-metriccards .mc-arrow{ width:0; height:0; flex-shrink:0; }
.wsp-metriccards .mc-card[data-trend="up"] .mc-arrow{ border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid var(--mc-pos); margin-top:-1px; }
.wsp-metriccards .mc-card[data-trend="down"] .mc-arrow{ border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid var(--mc-neg); margin-bottom:-1px; }
.wsp-metriccards .mc-bottom{ display:flex; flex-direction:column; gap:4px; margin-top:auto; }
.wsp-metriccards .mc-label{ font:600 clamp(13px,1.6cqw,15px) var(--font); letter-spacing:-0.01em; color:var(--ink); }
.wsp-metriccards .mc-desc{ font:400 12.5px/1.45 var(--font); color:var(--faint); }
@container site (max-width:860px){
  .wsp-metriccards .mc-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:460px){
  .wsp-metriccards .mc-grid{ grid-template-columns:1fr; }
}

/* --- socialproofstrip (SB_04 port) --- */
.wsp-socialproofstrip.ws-sec{ padding:0; overflow:visible; }
.wsp-socialproofstrip .sps-bar{ width:100%; background:var(--panel); border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-socialproofstrip .sps-inner{ width:min(1080px,92cqw); margin:0 auto; min-height:76px; padding:12px clamp(16px,3cqw,28px);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; }

.wsp-socialproofstrip .sps-trust{ display:flex; align-items:center; gap:14px; padding:6px clamp(16px,2.4cqw,26px) 6px 0; flex-shrink:0; }
.wsp-socialproofstrip .sps-avs{ display:flex; align-items:center; }
.wsp-socialproofstrip .sps-av{ display:block; width:30px; height:30px; border-radius:50%; border:2px solid var(--panel);
  flex:none; background:var(--accent-fill); }
.wsp-socialproofstrip .sps-av + .sps-av{ margin-left:-9px; }
.wsp-socialproofstrip .sps-av.a0{ background:radial-gradient(circle at 40% 33%, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); z-index:5; }
.wsp-socialproofstrip .sps-av.a1{ background:radial-gradient(circle at 40% 33%, color-mix(in srgb, var(--accent2, var(--accent)) 72%, #fff), var(--accent2, var(--accent))); z-index:4; }
.wsp-socialproofstrip .sps-av.a2{ background:radial-gradient(circle at 40% 33%, color-mix(in srgb, var(--ink) 40%, var(--panel)), color-mix(in srgb, var(--ink) 16%, var(--panel))); z-index:3; }
.wsp-socialproofstrip .sps-av.a3{ background:radial-gradient(circle at 40% 33%, color-mix(in srgb, var(--accent) 48%, var(--panel)), color-mix(in srgb, var(--accent) 24%, var(--panel))); z-index:2; }
.wsp-socialproofstrip .sps-av.a4{ background:radial-gradient(circle at 40% 33%, color-mix(in srgb, var(--accent2, var(--accent)) 42%, var(--panel)), color-mix(in srgb, var(--accent2, var(--accent)) 20%, var(--panel))); z-index:1; }

.wsp-socialproofstrip .sps-state{ display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
.wsp-socialproofstrip .sps-count{ font:800 15px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.wsp-socialproofstrip .sps-lab{ font:500 13.5px var(--font); color:var(--dim); }

.wsp-socialproofstrip .sps-div{ display:block; width:1px; height:30px; background:var(--hair); flex:none; align-self:center; }

.wsp-socialproofstrip .sps-rate{ display:flex; align-items:center; gap:7px; padding:6px clamp(16px,2.4cqw,26px); white-space:nowrap; flex-shrink:0; }
.wsp-socialproofstrip .sps-stars{ color:#f5b731; font-size:13px; letter-spacing:2px; line-height:1; }
.wsp-socialproofstrip .sps-rval{ font:800 14px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.wsp-socialproofstrip .sps-rmax{ font:500 12.5px var(--font); color:var(--dim); }

.wsp-socialproofstrip .sps-press{ display:flex; align-items:center; gap:16px; padding:6px 0 6px clamp(16px,2.4cqw,26px); flex-wrap:wrap; }
.wsp-socialproofstrip .sps-plabel{ font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.wsp-socialproofstrip .sps-logos{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.wsp-socialproofstrip .sps-logos .ws-mark{ font-size:14px; }

@container site (max-width:820px){
  .wsp-socialproofstrip .sps-press{ display:none; }
  .wsp-socialproofstrip .sps-div.d-press{ display:none; }
}
@container site (max-width:560px){
  .wsp-socialproofstrip .sps-inner{ gap:2px 0; padding:12px 14px; }
  .wsp-socialproofstrip .sps-div{ display:none; }
  .wsp-socialproofstrip .sps-trust{ padding:7px 0; }
  .wsp-socialproofstrip .sps-rate{ padding:7px 0; }
}

/* --- pricingtoggle (SB_04 port) --- */
.wsp-pricingtoggle .pt-toggle{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:26px; }
.wsp-pricingtoggle .pt-tlabel{ display:inline-flex; align-items:center; gap:8px; font:600 13.5px var(--font); color:var(--dim); transition:color .2s ease; }
.wsp-pricingtoggle .pt-tlabel.m{ color:var(--ink); }
.wsp-pricingtoggle.is-annual .pt-tlabel.m{ color:var(--dim); }
.wsp-pricingtoggle.is-annual .pt-tlabel.a{ color:var(--ink); }
.wsp-pricingtoggle .pt-save{ font:700 10px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:3px 8px; border-radius:999px; }
.wsp-pricingtoggle .pt-switch{ position:relative; flex:none; width:50px; height:28px; padding:0; margin:0; border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:var(--panel-2); cursor:pointer; transition:background .2s ease, border-color .2s ease; -webkit-appearance:none; appearance:none; }
.wsp-pricingtoggle .pt-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-pricingtoggle .pt-switch[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); }
.wsp-pricingtoggle .pt-thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--ink); transition:transform .2s ease, background .2s ease; pointer-events:none; }
.wsp-pricingtoggle .pt-switch[aria-checked="true"] .pt-thumb{ transform:translateX(22px); background:var(--accent-text, var(--bg)); }
.wsp-pricingtoggle .pt-amt{ transition:opacity .15s ease; }
@container site (max-width:520px){
  .wsp-pricingtoggle .pt-toggle{ gap:10px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-pricingtoggle .pt-switch, .wsp-pricingtoggle .pt-thumb, .wsp-pricingtoggle .pt-tlabel, .wsp-pricingtoggle .pt-amt{ transition:none; }
}

/* --- featurechecklist (SB_04 port) --- */
.wsp-featurechecklist .ws-in.split{ align-items:start; gap:clamp(32px,5cqw,64px); }
.wsp-featurechecklist .ws-shead.left .ws-sub{ margin-top:14px; max-width:40ch; }
.wsp-featurechecklist .fc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(8px,1.3cqw,15px); }
.wsp-featurechecklist .fc-item{ display:flex; align-items:flex-start; gap:14px; padding:5px 4px; border-radius:10px; color:var(--dim); font:400 clamp(14px,1.5cqw,16px)/1.5 var(--font); transition:color .18s ease, background-color .18s ease; }
.wsp-featurechecklist .fc-ico{ flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--accent-fill); color:var(--accent); margin-top:1px; transition:background-color .18s ease, transform .18s ease; }
.wsp-featurechecklist .fc-ico svg{ width:15px; height:15px; display:block; }
.wsp-featurechecklist .fc-tx{ padding-top:3px; }
.wsp-featurechecklist .fc-item:hover{ color:var(--ink); background:var(--accent-fill); }
.wsp-featurechecklist .fc-item:hover .fc-ico{ background:var(--accent-fill2); transform:scale(1.06); }
@container site (max-width:720px){
  .wsp-featurechecklist .ws-in.split{ grid-template-columns:1fr; gap:34px; }
  .wsp-featurechecklist .ws-shead.left .ws-sub{ max-width:none; }
}

/* --- stepcards (SB_04 port) --- */
.wsp-stepcards{ --scnum:clamp(3.4rem,6.4cqw,5.2rem); }
.wsp-stepcards .sc-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.7cqw,18px); margin-top:8px; }
.wsp-stepcards .sc-grid::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:calc(0.75rem + var(--scnum) * 0.5); left:12.5%; right:12.5%; height:1px; opacity:0.55;
  background:linear-gradient(to right, transparent, var(--hair) 15%, var(--accent) 40%, var(--accent) 60%, var(--hair) 85%, transparent);
}
.wsp-stepcards .sc-card{
  position:relative; z-index:1; overflow:hidden; text-align:left;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius);
  padding:clamp(22px,2.4cqw,30px) clamp(18px,2cqw,26px) clamp(24px,2.6cqw,34px);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  transition:border-color .25s ease, transform .25s ease;
}
.wsp-stepcards .sc-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.wsp-stepcards .sc-num{
  position:absolute; top:0.55rem; right:0.9rem; z-index:0;
  font:700 var(--scnum)/1 var(--font-head, var(--font));
  color:var(--accent); opacity:0.14; letter-spacing:-0.04em;
  pointer-events:none; user-select:none;
}
.wsp-stepcards .sc-ct{ position:relative; z-index:1; margin:0; font:700 clamp(1rem,1.3cqw,1.1rem)/1.3 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.wsp-stepcards .sc-cd{ position:relative; z-index:1; margin:0; font:400 clamp(0.86rem,1cqw,0.9rem)/1.62 var(--font); color:var(--dim); }
@container site (max-width:900px){
  .wsp-stepcards .sc-grid{ grid-template-columns:repeat(2,1fr); gap:clamp(12px,2cqw,16px); }
  .wsp-stepcards .sc-grid::before{ display:none; }
}
@container site (max-width:540px){
  .wsp-stepcards .sc-grid{ grid-template-columns:1fr; }
}

/* --- testimonialgrid (SB_04 port) --- */
.wsp-testimonialgrid .tg-wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6cqw,20px); align-items:stretch; margin-top:6px; }
.wsp-testimonialgrid .tg-card{ display:flex; flex-direction:column; gap:15px; padding:clamp(20px,2.4cqw,28px); text-align:left;
  background:var(--panel); background-image:var(--surface-grad,none); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  transition:border-color .2s ease, transform .2s ease; }
.wsp-testimonialgrid .tg-card:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); transform:translateY(-2px); }
.wsp-testimonialgrid .tg-card.is-feat{ position:relative; border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.wsp-testimonialgrid .tg-card.is-feat::before{ content:'Featured'; position:absolute; top:-1px; right:22px;
  font:700 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text,var(--bg));
  background:var(--accent); padding:5px 9px; border-radius:0 0 5px 5px; }
.wsp-testimonialgrid .tg-stars{ display:inline-flex; gap:2px; font:400 13px var(--font); color:var(--accent); letter-spacing:1px; line-height:1; }
.wsp-testimonialgrid .tg-stars i{ color:color-mix(in srgb, var(--faint) 55%, transparent); font-style:normal; }
.wsp-testimonialgrid .tg-quote{ margin:0; flex:1; font:400 clamp(13.5px,1.5cqw,15px)/1.7 var(--font); color:var(--dim); }
.wsp-testimonialgrid .tg-card.is-feat .tg-quote{ color:var(--ink); font-size:clamp(15px,1.7cqw,17px); }
.wsp-testimonialgrid .tg-author{ display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:15px;
  border-top:var(--bw, 1px) solid var(--hair); flex-wrap:wrap; }
.wsp-testimonialgrid .tg-avatar{ width:38px; height:38px; border:var(--bw, 1px) solid var(--hair); font-size:12px; }
.wsp-testimonialgrid .tg-who{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.wsp-testimonialgrid .tg-name{ font:600 13px var(--font); color:var(--ink); line-height:1.2; }
.wsp-testimonialgrid .tg-role{ font:400 11.5px var(--font); color:var(--faint); font-style:normal; line-height:1.2; }
.wsp-testimonialgrid .tg-co{ margin-left:auto; font:700 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--dim); opacity:.6; }
@container site (max-width:860px){ .wsp-testimonialgrid .tg-wall{ grid-template-columns:1fr 1fr; } }
@container site (max-width:560px){ .wsp-testimonialgrid .tg-wall{ grid-template-columns:1fr; } }

/* --- badgegrid (SB_04 port) --- */
.wsp-badgegrid .bg-filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 auto 34px; }
.wsp-badgegrid .bg-fbtn{ font:600 11px/1 var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--dim); background:transparent; border:var(--bw, 1px) solid var(--hair); border-radius:100px; padding:8px 15px; cursor:pointer; transition:color .18s ease; }
.wsp-badgegrid .bg-fbtn:hover{ color:var(--ink); border-color:var(--accent-dim); }
.wsp-badgegrid .bg-fbtn.on{ color:var(--accent-text, var(--bg)); background:var(--accent); border-color:var(--accent); }
.wsp-badgegrid .bg-items{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; width:min(1000px, 100%); margin:0 auto; }
.wsp-badgegrid .bg-badge{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:22px 16px; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); transition:transform .2s ease; }
.wsp-badgegrid .bg-badge:hover{ transform:translateY(-3px); border-color:var(--accent); }
.wsp-badgegrid .bg-badge.hide{ display:none; }
.wsp-badgegrid .bg-ico{ display:flex; align-items:center; justify-content:center; width:clamp(28px, 5.5cqw, 34px); height:clamp(28px, 5.5cqw, 34px); color:var(--dim); transition:color .2s ease; }
.wsp-badgegrid .bg-ico svg{ width:100%; height:100%; display:block; }
.wsp-badgegrid .bg-badge:hover .bg-ico{ color:var(--accent); }
.wsp-badgegrid .bg-mono{ font:700 clamp(16px, 3.2cqw, 20px)/1 var(--font-head, var(--font)); color:var(--dim); transition:color .2s ease; }
.wsp-badgegrid .bg-badge:hover .bg-mono{ color:var(--accent); }
.wsp-badgegrid .bg-name{ font:600 clamp(13px, 1.7cqw, 14px)/1.25 var(--font); color:var(--ink); }
.wsp-badgegrid .bg-cat{ font:500 10px/1 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--faint); }
.wsp-badgegrid .bg-empty{ display:none; text-align:center; margin-top:22px; color:var(--dim); font:400 clamp(14px, 1.7cqw, 15px)/1.6 var(--font); }
.wsp-badgegrid .bg-empty.on{ display:block; }
@container site (max-width:560px){
  .wsp-badgegrid .bg-filters{ margin-bottom:26px; }
  .wsp-badgegrid .bg-items{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
  .wsp-badgegrid .bg-badge{ padding:16px 10px; gap:8px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-badgegrid .bg-badge, .wsp-badgegrid .bg-ico, .wsp-badgegrid .bg-mono, .wsp-badgegrid .bg-fbtn{ transition:none; }
  .wsp-badgegrid .bg-badge:hover{ transform:none; }
}

/* --- scrollstrip (SB_04 port) --- */
.wsp-scrollstrip .ss-head{ max-width:640px; margin-bottom:clamp(22px,3cqw,34px); }
.wsp-scrollstrip .ss-head .ws-sub{ margin-top:10px; }

.wsp-scrollstrip .ss-row{ display:flex; align-items:center; gap:12px; }

.wsp-scrollstrip .ss-arrow{ flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 4%, transparent);
  color:var(--dim); cursor:pointer;
  transition:transform 140ms ease, color 140ms ease, border-color 140ms ease, background 140ms ease, opacity 140ms ease; }
.wsp-scrollstrip .ss-arrow svg{ width:18px; height:18px; }
.wsp-scrollstrip .ss-arrow:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 45%, var(--hair));
  background:color-mix(in srgb, var(--accent) 12%, transparent); transform:translateY(-1px); }
.wsp-scrollstrip .ss-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-scrollstrip .ss-arrow:disabled,
.wsp-scrollstrip .ss-arrow[aria-disabled="true"]{ opacity:.26; cursor:default; pointer-events:none; }

.wsp-scrollstrip .ss-track{ flex:1 1 auto; min-width:0; display:flex; gap:20px; overflow-x:auto;
  padding:6px 2px 18px; cursor:grab; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:auto; }
.wsp-scrollstrip .ss-track::-webkit-scrollbar{ display:none; }
.wsp-scrollstrip .ss-track.is-drag{ cursor:grabbing; user-select:none; -webkit-user-select:none; }

.wsp-scrollstrip .ss-card{ flex:0 0 auto; width:var(--ss-cw,300px); height:420px; display:flex; flex-direction:column;
  overflow:hidden; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  transition:transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.wsp-scrollstrip .ss-card:hover{ transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 34%, var(--hair));
  background:color-mix(in srgb, var(--ink) 5%, transparent); }

.wsp-scrollstrip .ss-media{ flex:0 0 62%; position:relative; overflow:hidden;
  background:radial-gradient(82% 112% at var(--hx,40%) var(--hy,24%), var(--accent-fill2), transparent 58%),
    linear-gradient(var(--ang,160deg), var(--panel-3, var(--panel)), var(--panel)); }
.wsp-scrollstrip .ss-media::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair); }
.wsp-scrollstrip .ss-num{ position:absolute; top:12px; left:14px; z-index:2;
  font:700 11px var(--mono); letter-spacing:.12em; color:color-mix(in srgb, var(--ink) 72%, transparent); }

.wsp-scrollstrip .ss-body{ flex:1 1 auto; min-height:0; padding:16px 18px 18px; display:flex; flex-direction:column;
  justify-content:flex-end; gap:6px; }
.wsp-scrollstrip .ss-tag{ font:700 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.wsp-scrollstrip .ss-title{ margin:0; font:700 clamp(15px,2.4cqw,18px)/1.25 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.01em; }
.wsp-scrollstrip .ss-desc{ margin:0; font:400 13px/1.55 var(--font); color:var(--dim); }

@container site (max-width:640px){
  .wsp-scrollstrip .ss-arrow{ display:none; }
  .wsp-scrollstrip .ss-card{ width:82cqw; height:400px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-scrollstrip .ss-card,
  .wsp-scrollstrip .ss-arrow{ transition:none; }
}

/* --- servicecolumns (SB_04 port) --- */
.wsp-servicecolumns .sc-head{ max-width:640px; margin-bottom:clamp(32px,4.4cqw,52px); text-align:left; }
.wsp-servicecolumns .sc-head .ws-kick{ margin-bottom:14px; }
.wsp-servicecolumns .sc-head .ws-h2{ margin-bottom:0; }
.wsp-servicecolumns .sc-head .ws-sub{ margin-top:12px; }
.wsp-servicecolumns .sc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border-top:var(--bw, 1px) solid var(--hair); }
.wsp-servicecolumns .sc-col{ position:relative; display:flex; flex-direction:column; background:var(--bg); padding:2rem 1.6rem 2.4rem; min-height:220px; }
.wsp-servicecolumns .sc-col:hover{ background:color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.wsp-servicecolumns .sc-index{ position:absolute; top:1.9rem; right:1.5rem; font:500 0.66rem/1 var(--font); letter-spacing:0.14em; color:var(--faint); transition:color 0.2s ease; }
.wsp-servicecolumns .sc-col:hover .sc-index{ color:var(--accent); }
.wsp-servicecolumns .sc-content{ flex:1; }
.wsp-servicecolumns .sc-name{ margin:0 0 0.9rem; padding-right:2.6rem; font:400 clamp(1.15rem,2.4cqw,1.5rem)/1.15 var(--font-head, var(--font)); letter-spacing:-0.02em; color:var(--ink); }
.wsp-servicecolumns .sc-desc{ margin:0 0 1.6rem; font:400 0.86rem/1.7 var(--font); color:var(--dim); max-width:46ch; }
.wsp-servicecolumns .sc-link{ align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:0.45em; font:500 0.75rem/1 var(--font); letter-spacing:0.04em; color:var(--dim); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:0.15em; transition:color 0.2s ease, border-color 0.2s ease; }
.wsp-servicecolumns .sc-link:hover{ color:var(--accent); border-color:var(--accent); }
.wsp-servicecolumns .sc-arr{ display:inline-block; transition:transform 0.2s ease; }
.wsp-servicecolumns .sc-link:hover .sc-arr{ transform:translateX(3px); }
@container site (max-width:900px){
  .wsp-servicecolumns .sc-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-servicecolumns .sc-grid{ grid-template-columns:1fr; }
  .wsp-servicecolumns .sc-col{ min-height:0; padding:1.7rem 0.1rem 1.8rem; }
  .wsp-servicecolumns .sc-index{ right:0.1rem; top:1.6rem; }
  .wsp-servicecolumns .sc-name{ padding-right:2.2rem; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-servicecolumns .sc-index,
  .wsp-servicecolumns .sc-link,
  .wsp-servicecolumns .sc-arr{ transition:none; }
}

/* --- mediaoffset (SB_04 port) --- */
.wsp-mediaoffset .mo-inner{ display:flex; align-items:flex-start; position:relative; }
.wsp-mediaoffset .mo-media{ width:58%; flex-shrink:0; align-self:stretch; position:relative; z-index:1; }
.wsp-mediaoffset .mo-image{ height:100%; min-height:clamp(320px,42cqw,520px);
  background:linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 50%, var(--bg) 100%);
  background-size:cover; background-position:center; position:relative; overflow:hidden; }
.wsp-mediaoffset .mo-image::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.014) 3px, rgba(255,255,255,0.014) 4px); }
.wsp-mediaoffset .mo-image::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 30% 60%, transparent 30%, rgba(0,0,0,0.32) 100%); }
.wsp-mediaoffset .mo-text{ flex:1; align-self:flex-start; position:relative; z-index:2;
  margin-left:clamp(-5rem,-5.5cqw,-2.5rem); margin-top:clamp(3rem,7cqw,6rem);
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); padding:clamp(1.9rem,3.2cqw,3rem);
  display:flex; flex-direction:column; gap:1.2rem; }
.wsp-mediaoffset .mo-over{ font:500 clamp(9px,1.05cqw,11px)/1 var(--font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); }
.wsp-mediaoffset .mo-head{ margin:0; font:300 clamp(1.55rem,3.6cqw,3rem)/1.1 var(--font-head, var(--font));
  letter-spacing:-0.03em; color:var(--ink); }
.wsp-mediaoffset .mo-body{ margin:0; font:400 clamp(0.9rem,1.5cqw,0.98rem)/1.75 var(--font);
  color:var(--dim); max-width:46ch; }
.wsp-mediaoffset .mo-cta{ display:inline-flex; align-items:center; gap:.5em; width:fit-content;
  font:500 clamp(0.78rem,1.05cqw,0.82rem) var(--font); letter-spacing:.04em; color:var(--accent);
  text-decoration:none; cursor:pointer; border-bottom:var(--bw, 1px) solid var(--hair); padding-bottom:.2em;
  transition:border-color .25s ease, color .25s ease; }
.wsp-mediaoffset .mo-cta:hover{ border-color:var(--accent); }
.wsp-mediaoffset .mo-cta span{ transition:transform .25s ease; }
.wsp-mediaoffset .mo-cta:hover span{ transform:translateX(3px); }
@container site (max-width:760px){
  .wsp-mediaoffset .mo-inner{ flex-direction:column; }
  .wsp-mediaoffset .mo-media{ width:100%; }
  .wsp-mediaoffset .mo-image{ height:auto; min-height:0; aspect-ratio:3 / 2; }
  .wsp-mediaoffset .mo-text{ margin:-2.4rem 1rem 0; padding:clamp(1.6rem,7cqw,2.2rem); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-mediaoffset .mo-cta, .wsp-mediaoffset .mo-cta span{ transition:none; }
}

/* --- staggeredfeaturelist (SB_04 port) --- */
.wsp-staggeredfeaturelist .sfl-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(30px,4cqw,52px); padding-bottom:22px; border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-staggeredfeaturelist .sfl-head-l{ min-width:0; }
.wsp-staggeredfeaturelist .sfl-title{ font-size:clamp(20px,2.6cqw,30px); }
.wsp-staggeredfeaturelist .sfl-count{ flex-shrink:0; font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); white-space:nowrap; }

.wsp-staggeredfeaturelist .sfl-list{ list-style:none; margin:0; padding:0; }
.wsp-staggeredfeaturelist .sfl-item{ border-top:var(--bw, 1px) solid var(--hair); padding:clamp(22px,3cqw,38px) 0; transition:border-color .22s ease; }
.wsp-staggeredfeaturelist .sfl-item:last-child{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-staggeredfeaturelist .sfl-item:hover{ border-top-color:color-mix(in srgb, var(--ink) 22%, transparent); }
.wsp-staggeredfeaturelist .sfl-item:last-child:hover{ border-bottom-color:color-mix(in srgb, var(--ink) 22%, transparent); }

.wsp-staggeredfeaturelist .sfl-inner{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; align-items:start; gap:0 clamp(20px,3cqw,40px); }

.wsp-staggeredfeaturelist .sfl-index{ grid-column:1; grid-row:1 / 3; align-self:center; justify-self:end; text-align:right; font-family:var(--font-head, var(--font)); font-size:clamp(3rem,7cqw,5.5rem); font-weight:700; letter-spacing:-0.05em; line-height:0.85; color:color-mix(in srgb, var(--ink) 13%, transparent); user-select:none; transition:color .22s ease; }
.wsp-staggeredfeaturelist .sfl-item:hover .sfl-index{ color:var(--accent); }

.wsp-staggeredfeaturelist .sfl-heading{ grid-column:2; grid-row:1; align-self:end; margin:0 0 8px; font-family:var(--font-head, var(--font)); font-size:clamp(1.15rem,2.4cqw,1.75rem); font-weight:600; letter-spacing:-0.02em; line-height:1.18; color:var(--ink); }
.wsp-staggeredfeaturelist .sfl-body{ grid-column:2; grid-row:2; margin:0; max-width:70ch; font:400 clamp(13px,1.4cqw,15px)/1.7 var(--font); color:var(--dim); }

.wsp-staggeredfeaturelist .sfl-tag{ grid-column:3; grid-row:1; align-self:center; justify-self:end; white-space:nowrap; padding:5px 11px; border:var(--bw, 1px) solid var(--hair); font:500 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--faint); transition:color .22s ease, border-color .22s ease; }
.wsp-staggeredfeaturelist .sfl-item:hover .sfl-tag{ color:var(--dim); border-color:color-mix(in srgb, var(--ink) 30%, transparent); }

@container site (max-width:768px){
  .wsp-staggeredfeaturelist .sfl-inner{ grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; }
  .wsp-staggeredfeaturelist .sfl-tag{ grid-column:2; grid-row:3; justify-self:start; align-self:start; margin-top:14px; }
  .wsp-staggeredfeaturelist .sfl-index{ font-size:clamp(2.4rem,9cqw,3.6rem); }
}

@container site (max-width:640px){
  .wsp-staggeredfeaturelist .sfl-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .wsp-staggeredfeaturelist .sfl-inner{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0; }
  .wsp-staggeredfeaturelist .sfl-index{ font-size:1.5rem; font-weight:700; letter-spacing:-0.03em; line-height:1; margin-right:12px; text-align:left; color:var(--accent); flex-shrink:0; align-self:baseline; }
  .wsp-staggeredfeaturelist .sfl-heading{ flex:1 1 auto; align-self:baseline; margin-bottom:0; }
  .wsp-staggeredfeaturelist .sfl-body{ flex:0 0 100%; margin-top:10px; max-width:100%; }
  .wsp-staggeredfeaturelist .sfl-tag{ flex:0 0 auto; margin-top:14px; }
}

@media (prefers-reduced-motion: reduce){
  .wsp-staggeredfeaturelist .sfl-item,
  .wsp-staggeredfeaturelist .sfl-index,
  .wsp-staggeredfeaturelist .sfl-tag{ transition:none; }
}

/* --- pullquote (SB_04 port) --- */
.wsp-pullquote{ padding-block:clamp(64px,10cqw,120px); text-align:center; }
.wsp-pullquote .pq-body{ position:relative; max-width:min(860px,90cqw); margin-inline:auto; }
.wsp-pullquote .pq-label{ display:block; font:500 11px var(--font); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:34px; }
.wsp-pullquote .pq-mark{ position:absolute; top:-.28em; left:50%; transform:translateX(-50%); z-index:0; pointer-events:none; user-select:none; font:700 clamp(6rem,15cqw,12rem)/1 var(--font-head,var(--font)); color:var(--ink); opacity:.06; }
.wsp-pullquote .pq-quote{ position:relative; z-index:1; margin:0; font:300 clamp(1.5rem,4.4cqw,2.7rem)/1.3 var(--font-head,var(--font)); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.wsp-pullquote .pq-attr{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.25rem; margin-top:2rem; }
.wsp-pullquote .pq-rule{ width:2rem; height:1px; background:var(--hair); margin-bottom:.6rem; }
.wsp-pullquote .pq-name{ font:500 .72rem var(--font); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.wsp-pullquote .pq-title{ font:400 .72rem var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
@container site (max-width:640px){
  .wsp-pullquote{ padding-block:clamp(48px,12cqw,72px); }
  .wsp-pullquote .pq-label{ margin-bottom:24px; }
  .wsp-pullquote .pq-mark{ font-size:clamp(5rem,20cqw,8rem); }
  .wsp-pullquote .pq-quote{ font-size:clamp(1.4rem,7.4cqw,2rem); }
}

/* --- splittestimonial (SB_04 port) --- */
.wsp-splittestimonial .stm-kick{ margin-bottom:clamp(20px,3cqw,32px); }

/* main split — quote | divider | person */
.wsp-splittestimonial .stm-split{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(28px,5cqw,64px); align-items:center; padding-bottom:clamp(34px,6cqw,60px); }

/* quote column */
.wsp-splittestimonial .stm-quotecol{ position:relative; }
.wsp-splittestimonial .stm-qmark{ display:block; font:400 clamp(60px,8cqw,100px)/0.85 Georgia,'Times New Roman',serif; color:var(--accent); margin-bottom:clamp(6px,1cqw,12px); }
.wsp-splittestimonial .stm-quote{ margin:0; font:400 clamp(19px,2.35cqw,26px)/1.55 var(--font); color:var(--ink); letter-spacing:-0.01em; }

/* vertical divider (flips horizontal when stacked) */
.wsp-splittestimonial .stm-divider{ width:1px; align-self:stretch; background:var(--hair); }

/* person plate */
.wsp-splittestimonial .stm-personcol{ display:flex; flex-direction:column; gap:clamp(13px,1.6cqw,20px); padding-left:clamp(12px,2cqw,28px); }
.wsp-splittestimonial .stm-avatar{ width:60px; height:60px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center; background:var(--accent-fill,rgba(124,196,255,0.14)); color:var(--accent); font:700 22px var(--font); }
.wsp-splittestimonial .stm-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.wsp-splittestimonial .stm-info{ display:flex; flex-direction:column; gap:3px; }
.wsp-splittestimonial .stm-name{ margin:0; font:600 clamp(15px,1.7cqw,17px) var(--font); color:var(--ink); letter-spacing:-0.01em; }
.wsp-splittestimonial .stm-role{ margin:0; font:400 13px var(--font); color:var(--dim); }
.wsp-splittestimonial .stm-company{ margin:0; font:500 13px var(--font); color:var(--accent); }
.wsp-splittestimonial .stm-logo{ margin-top:clamp(6px,1cqw,10px); padding-top:clamp(12px,1.6cqw,18px); border-top:var(--bw, 1px) solid var(--hair); font:700 clamp(10px,1.2cqw,12px)/1.4 var(--font); letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }

/* headline-results strip — divided cells, --stm-n = how many */
.wsp-splittestimonial .stm-stats{ display:grid; grid-template-columns:repeat(var(--stm-n,5),minmax(0,1fr)); border-top:var(--bw, 1px) solid var(--hair); }
.wsp-splittestimonial .stm-stat{ display:flex; flex-direction:column; gap:6px; padding:clamp(20px,3cqw,32px) clamp(8px,1.6cqw,16px); }
.wsp-splittestimonial .stm-stat + .stm-stat{ border-left:var(--bw, 1px) solid var(--hair); }
.wsp-splittestimonial .stm-val{ font:700 clamp(26px,3.2cqw,40px)/1 var(--font-head,var(--font)); color:var(--ink); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.wsp-splittestimonial .stm-label{ font:500 clamp(10px,1.1cqw,12px) var(--font); letter-spacing:0.06em; text-transform:uppercase; color:var(--faint); }

/* narrow: stack the split, wrap the strip two-up */
@container site (max-width:760px){
  .wsp-splittestimonial .stm-split{ grid-template-columns:1fr; gap:clamp(26px,5cqw,36px); }
  .wsp-splittestimonial .stm-divider{ width:100%; height:1px; align-self:auto; }
  .wsp-splittestimonial .stm-personcol{ padding-left:0; }
  .wsp-splittestimonial .stm-stats{ grid-template-columns:repeat(2,1fr); }
  .wsp-splittestimonial .stm-stat + .stm-stat{ border-left:none; }
  .wsp-splittestimonial .stm-stat:nth-child(n+3){ border-top:var(--bw, 1px) solid var(--hair); }
  .wsp-splittestimonial .stm-stat:nth-child(even){ border-left:var(--bw, 1px) solid var(--hair); }
}
/* very narrow: single column strip */
@container site (max-width:440px){
  .wsp-splittestimonial .stm-stats{ grid-template-columns:1fr; }
  .wsp-splittestimonial .stm-stat:nth-child(even){ border-left:none; }
  .wsp-splittestimonial .stm-stat + .stm-stat{ border-top:var(--bw, 1px) solid var(--hair); }
}

/* --- testimonialmarquee (SB_04 port) --- */
.ws-sec.wsp-testimonialmarquee{ padding:clamp(48px,7cqw,84px) 0; }

.wsp-testimonialmarquee .tmq-rows{ display:flex; flex-direction:column; gap:16px; margin-top:6px; }

.wsp-testimonialmarquee .tmq-row{ overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%); }

.wsp-testimonialmarquee .tmq-strip{ display:flex; width:max-content; gap:16px; will-change:transform; }

.wsp-testimonialmarquee .tmq-card{ flex-shrink:0; width:var(--tmqw,320px); padding:22px 24px;
  display:flex; flex-direction:column; gap:18px; background:var(--panel);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  transition:transform .2s ease, border-color .2s ease; }
.wsp-testimonialmarquee .tmq-card:hover{ transform:translateY(-3px); border-color:var(--accent); }

.wsp-testimonialmarquee .tmq-quote{ margin:0; flex:1;
  font:400 clamp(13px,1.5cqw,15px)/1.65 var(--font); color:var(--dim); }

.wsp-testimonialmarquee .tmq-author{ display:flex; align-items:center; gap:12px; }
.wsp-testimonialmarquee .tmq-avatar{ width:38px; height:38px; flex-shrink:0; font-size:.82rem; }
.wsp-testimonialmarquee .tmq-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wsp-testimonialmarquee .tmq-name{ font:600 .84rem/1.25 var(--font); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsp-testimonialmarquee .tmq-role{ font:400 .78rem/1.25 var(--font); color:var(--faint);
  font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* static fallback — reachable by horizontal scroll when the belt is held still */
.wsp-testimonialmarquee .tmq-row.is-static{ overflow-x:auto; overflow-y:hidden;
  -webkit-mask-image:none; mask-image:none; }
.wsp-testimonialmarquee .tmq-row.is-static .tmq-strip{ transform:none; }

@container site (max-width:640px){
  .wsp-testimonialmarquee .tmq-rows{ gap:12px; }
  .wsp-testimonialmarquee .tmq-strip{ gap:12px; }
  .wsp-testimonialmarquee .tmq-card{ --tmqw:264px; padding:18px 20px; gap:14px; }
}

@media (prefers-reduced-motion:reduce){
  .wsp-testimonialmarquee .tmq-strip{ transform:none !important; }
  .wsp-testimonialmarquee .tmq-row{ overflow-x:auto; overflow-y:hidden;
    -webkit-mask-image:none; mask-image:none; }
}

/* --- teamprofiles (SB_04 port) --- */
.wsp-teamprofiles .ws-in:not(.split) > .ws-shead{ margin-inline:0; text-align:left; max-width:560px; margin-bottom:clamp(34px,4.4cqw,52px); }
.wsp-teamprofiles .tp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,3.2cqw,40px) clamp(20px,2.4cqw,32px); }

.wsp-teamprofiles .tp-member{ display:flex; flex-direction:column; gap:14px; border-right:var(--bw, 1px) solid var(--hair); padding-right:clamp(16px,1.8cqw,28px); }
.wsp-teamprofiles .tp-member:nth-child(4n){ border-right:none; padding-right:0; }

.wsp-teamprofiles .tp-photo{ position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden; display:grid; place-items:center; border:var(--bw, 1px) solid var(--hair); transition:transform .25s ease; background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 15%, var(--panel)), var(--panel-2)); }
.wsp-teamprofiles .tp-photo::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 78% at 50% 16%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%); opacity:.9; }
.wsp-teamprofiles .tp-photo span{ position:relative; z-index:1; font:700 clamp(26px,4.6cqw,40px)/1 var(--font-head, var(--font)); letter-spacing:-.02em; color:color-mix(in srgb, var(--ink) 62%, var(--accent)); }
.wsp-teamprofiles .tp-photo.g1{ background:linear-gradient(205deg, color-mix(in srgb, var(--accent) 10%, var(--panel-2)), var(--panel)); }
.wsp-teamprofiles .tp-photo.g2{ background:linear-gradient(135deg, var(--panel-2), color-mix(in srgb, var(--accent) 14%, var(--panel))); }
.wsp-teamprofiles .tp-photo.g3{ background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel-2)); }
.wsp-teamprofiles .tp-member:hover .tp-photo{ transform:translateY(-3px); }

.wsp-teamprofiles .tp-info{ display:flex; flex-direction:column; gap:5px; }
.wsp-teamprofiles .tp-name{ margin:0; font:600 15px var(--font); color:var(--ink); }
.wsp-teamprofiles .tp-role{ font:500 12px var(--font); letter-spacing:.02em; color:var(--accent); }
.wsp-teamprofiles .tp-bio{ margin:2px 0 0; font:400 12.5px/1.55 var(--font); color:var(--dim); }

.wsp-teamprofiles .tp-social{ margin-top:6px; gap:8px; }
.wsp-teamprofiles .tp-social .ws-social{ width:28px; height:28px; border-radius:8px; }
.wsp-teamprofiles .tp-social .ws-social svg{ width:14px; height:14px; }

@container site (max-width:960px){
  .wsp-teamprofiles .tp-grid{ grid-template-columns:repeat(3,1fr); }
  .wsp-teamprofiles .tp-member{ border-right:var(--bw, 1px) solid var(--hair); padding-right:clamp(16px,1.8cqw,28px); }
  .wsp-teamprofiles .tp-member:nth-child(3n){ border-right:none; padding-right:0; }
}
@container site (max-width:680px){
  .wsp-teamprofiles .tp-grid{ grid-template-columns:repeat(2,1fr); }
  .wsp-teamprofiles .tp-member{ border-right:var(--bw, 1px) solid var(--hair); padding-right:clamp(14px,3cqw,24px); }
  .wsp-teamprofiles .tp-member:nth-child(2n){ border-right:none; padding-right:0; }
}
@container site (max-width:440px){
  .wsp-teamprofiles .tp-grid{ grid-template-columns:1fr; gap:24px; }
  .wsp-teamprofiles .tp-member{ border-right:none; padding-right:0; flex-direction:row; gap:16px; align-items:flex-start; }
  .wsp-teamprofiles .tp-photo{ width:92px; flex:0 0 92px; }
  .wsp-teamprofiles .tp-info{ flex:1; min-width:0; }
}

/* --- featuresplit (SB_04 port) --- */
.wsp-featuresplit .fs-rows{ display:flex; flex-direction:column; }
.wsp-featuresplit .fs-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5cqw,64px);
  align-items:center; padding:clamp(34px,5.4cqw,72px) 0; }
.wsp-featuresplit .fs-row:first-child{ padding-top:0; }
.wsp-featuresplit .fs-row:last-child{ padding-bottom:0; }
.wsp-featuresplit .fs-row + .fs-row{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-featuresplit .fs-row.flip .fs-vis{ order:1; }
.wsp-featuresplit .fs-row.flip .fs-text{ order:2; }

.wsp-featuresplit .fs-text{ display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,1.7cqw,20px); min-width:0; }
.wsp-featuresplit .fs-head{ margin:0; font:600 clamp(20px,2.7cqw,30px)/1.2 var(--font-head,var(--font));
  letter-spacing:-0.02em; color:var(--ink); text-wrap:balance; }
.wsp-featuresplit .fs-body{ margin:0; font:400 clamp(14px,1.6cqw,16px)/1.7 var(--font); color:var(--dim); max-width:42ch; }
.wsp-featuresplit .fs-link{ margin-top:2px; letter-spacing:0.01em; transition:opacity 160ms ease, color 160ms ease; }
.wsp-featuresplit .fs-link:hover{ opacity:0.82; }
.wsp-featuresplit .fs-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

.wsp-featuresplit .fs-vis{ min-width:0; }
.wsp-featuresplit .fs-shot{ position:relative; width:100%; }
.wsp-featuresplit .fs-shot .ws-browser{ width:100%; border-radius:10px;
  box-shadow:0 16px 38px -20px rgba(0,0,0,0.55); transition:transform 320ms cubic-bezier(.2,.8,.25,1); }
.wsp-featuresplit .fs-shot.has-img{ aspect-ratio:16 / 9; border-radius:10px; border:var(--bw, 1px) solid var(--hair);
  overflow:hidden; background:var(--panel) center/cover no-repeat;
  box-shadow:0 16px 38px -20px rgba(0,0,0,0.55); transition:transform 320ms cubic-bezier(.2,.8,.25,1); }
.wsp-featuresplit .fs-row:hover .fs-shot .ws-browser,
.wsp-featuresplit .fs-row:hover .fs-shot.has-img{ transform:translateY(-5px); }

@container site (max-width:720px){
  .wsp-featuresplit .fs-row, .wsp-featuresplit .fs-row.flip{ grid-template-columns:1fr; gap:22px; }
  .wsp-featuresplit .fs-row.flip .fs-vis, .wsp-featuresplit .fs-row.flip .fs-text{ order:0; }
  .wsp-featuresplit .fs-text{ max-width:none; }
  .wsp-featuresplit .fs-body{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-featuresplit .fs-shot .ws-browser, .wsp-featuresplit .fs-shot.has-img,
  .wsp-featuresplit .fs-row:hover .fs-shot .ws-browser,
  .wsp-featuresplit .fs-row:hover .fs-shot.has-img{ transition:none; transform:none; }
}

/* --- roadmapsection (SB_04 port) --- */
.wsp-roadmapsection .rm-head{ text-align:left; max-width:720px; margin:0; }
.wsp-roadmapsection .rm-head .ws-kick{ margin-bottom:12px; }
.wsp-roadmapsection .rm-head .ws-sub{ margin-top:12px; max-width:60ch; }
.wsp-roadmapsection .rm-grid{ display:grid; grid-template-columns:repeat(var(--rm-cols,3), minmax(0,1fr)); gap:0; margin-top:clamp(34px,5cqw,54px); }
.wsp-roadmapsection .rm-col{ padding:0 clamp(18px,2.6cqw,40px) 0 0; min-width:0; }
.wsp-roadmapsection .rm-col + .rm-col{ padding-left:clamp(18px,2.6cqw,40px); border-left:var(--bw, 1px) solid var(--hair); }
.wsp-roadmapsection .rm-colhead{ display:flex; align-items:center; gap:10px; margin-bottom:22px; padding-bottom:14px; border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-roadmapsection .rm-collabel{ font:600 0.78rem/1 var(--font); letter-spacing:0.09em; text-transform:uppercase; color:var(--ink); }
.wsp-roadmapsection .rm-colcap{ margin-left:auto; font:500 0.72rem/1 var(--mono); letter-spacing:0.04em; color:var(--faint); }
.wsp-roadmapsection .rm-coldot,
.wsp-roadmapsection .rm-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; box-sizing:border-box; }
.wsp-roadmapsection .t-done .rm-coldot,
.wsp-roadmapsection .t-done .rm-dot{ background:#22c55e; }
.wsp-roadmapsection .t-active .rm-coldot,
.wsp-roadmapsection .t-active .rm-dot{ background:var(--accent); }
.wsp-roadmapsection .t-planned .rm-coldot,
.wsp-roadmapsection .t-planned .rm-dot{ background:transparent; border:1.5px solid var(--faint); }
.wsp-roadmapsection .rm-list{ list-style:none; margin:0; padding:0; }
.wsp-roadmapsection .rm-item{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid color-mix(in srgb, var(--hair) 60%, transparent); transition:transform 0.18s ease; }
.wsp-roadmapsection .rm-item:first-child{ border-top:none; padding-top:0; }
.wsp-roadmapsection .rm-dot{ margin-top:6px; }
.wsp-roadmapsection .t-active .rm-dot{ animation:wsp-rmpulse 2s ease-in-out infinite; }
.wsp-roadmapsection .rm-ic{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.wsp-roadmapsection .rm-it{ margin:0; font:500 0.95rem/1.35 var(--font); color:var(--ink); transition:color 0.18s ease; }
.wsp-roadmapsection .rm-id{ margin:0; font:400 0.86rem/1.6 var(--font); color:var(--dim); }
.wsp-roadmapsection .rm-item:hover{ transform:translateX(3px); }
.wsp-roadmapsection .rm-item:hover .rm-it{ color:var(--accent); }
@keyframes wsp-rmpulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.4; transform:scale(0.72); } }
@media (prefers-reduced-motion: reduce){
  .wsp-roadmapsection .t-active .rm-dot{ animation:none; }
  .wsp-roadmapsection .rm-item{ transition:none; }
}
@container site (max-width:760px){
  .wsp-roadmapsection .rm-grid{ grid-template-columns:1fr; }
  .wsp-roadmapsection .rm-col{ padding:26px 0 0; }
  .wsp-roadmapsection .rm-col + .rm-col{ padding-left:0; border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
  .wsp-roadmapsection .rm-col:first-child{ padding-top:0; border-top:none; }
}

/* --- partnerssection (SB_04 port) --- */
.wsp-partnerssection .ps-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.2cqw,16px); width:100%; margin:0 auto; }
.wsp-partnerssection .ps-tile{ border:var(--bw, 1px) solid var(--hair); border-radius:10px; aspect-ratio:3 / 2; display:flex; align-items:center; justify-content:center; transition:border-color 180ms ease; }
.wsp-partnerssection .ps-tile:hover{ border-color:var(--accent); background:var(--accent-fill); }
.wsp-partnerssection .ps-name{ font:500 clamp(11px,1.1cqw,12.5px)/1 var(--font); letter-spacing:.09em; text-transform:uppercase; color:var(--faint); transition:color 180ms ease; user-select:none; text-align:center; padding:0 8px; }
.wsp-partnerssection .ps-tile:hover .ps-name{ color:var(--ink); }
.wsp-partnerssection .ps-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; width:100%; margin-top:clamp(34px,4cqw,52px); padding-top:clamp(22px,2.6cqw,30px); border-top:var(--bw, 1px) solid var(--hair); }
.wsp-partnerssection .ps-ctatext{ margin:0; font:400 clamp(14px,1.55cqw,15px)/1.5 var(--font); color:var(--dim); }
.wsp-partnerssection .ps-ctalink{ margin:0; }
@container site (max-width:1024px){ .wsp-partnerssection .ps-grid{ grid-template-columns:repeat(4,1fr); } }
@container site (max-width:640px){ .wsp-partnerssection .ps-grid{ grid-template-columns:repeat(3,1fr); } }
@container site (max-width:480px){
  .wsp-partnerssection .ps-grid{ grid-template-columns:repeat(2,1fr); }
  .wsp-partnerssection .ps-cta{ flex-direction:column; gap:8px; }
}

/* --- contactsplit (SB_04 port) --- */
.wsp-contactsplit .ws-in.split.cts-in{ align-items:start; gap:clamp(40px,5cqw,72px); }

/* left — reach-us info */
.wsp-contactsplit .cts-left{ border-right:var(--bw, 1px) solid var(--hair); padding-right:clamp(28px,4cqw,56px); }
.wsp-contactsplit .cts-intro{ max-width:38ch; margin-top:16px; }
.wsp-contactsplit .cts-details{ margin-top:clamp(28px,3.4cqw,44px); display:flex; flex-direction:column; }
.wsp-contactsplit .cts-row{ display:flex; gap:clamp(16px,2.4cqw,32px); align-items:flex-start;
  padding:18px 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-contactsplit .cts-row:first-child{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-contactsplit .cts-label{ flex:0 0 auto; min-width:72px; padding-top:.14em;
  font:500 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--dim); }
.wsp-contactsplit .cts-value{ font:400 clamp(14px,1.6cqw,15px)/1.6 var(--font); color:var(--ink);
  text-decoration:none; transition:color .18s ease; }
.wsp-contactsplit a.cts-value:hover{ color:var(--accent); }
.wsp-contactsplit .cts-social{ display:flex; flex-wrap:wrap; gap:14px; }
.wsp-contactsplit .cts-social-link{ font:400 clamp(14px,1.6cqw,15px) var(--font); color:var(--ink);
  text-decoration:none; transition:color .18s ease; }
.wsp-contactsplit .cts-social-link:hover{ color:var(--accent); }

/* right — form */
.wsp-contactsplit .cts-form{ display:flex; flex-direction:column; gap:clamp(16px,1.9cqw,22px); }
.wsp-contactsplit .cts-field{ display:flex; flex-direction:column; gap:8px; }
.wsp-contactsplit .cts-flabel{ font:500 10px var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:var(--dim); transition:color .18s ease; }
.wsp-contactsplit .cts-field.is-focused .cts-flabel{ color:var(--accent); }
.wsp-contactsplit .cts-input{ width:100%; font:400 15px/1.5 var(--font); color:var(--ink);
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius,12px) * .55);
  padding:12px 14px; outline:none; appearance:none; -webkit-appearance:none;
  transition:border-color .18s ease, color .18s ease; }
.wsp-contactsplit .cts-input::placeholder{ color:var(--faint); }
.wsp-contactsplit .cts-input:focus{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.wsp-contactsplit .cts-input:disabled{ cursor:default; }
.wsp-contactsplit .cts-textarea{ resize:vertical; min-height:140px; line-height:1.6; }
.wsp-contactsplit .cts-submit{ width:100%; justify-content:center; margin-top:6px; }
.wsp-contactsplit .cts-msg{ margin-top:2px; }
.wsp-contactsplit .cts-form.is-sent .cts-input,
.wsp-contactsplit .cts-form.is-sent .cts-submit{ opacity:.55; }

/* narrow — the split flattens on the shared 860px rule; swap the divider to a rule below */
@container site (max-width:860px){
  .wsp-contactsplit .cts-left{ border-right:none; padding-right:0;
    border-bottom:var(--bw, 1px) solid var(--hair); padding-bottom:clamp(28px,6cqw,40px); }
}
@container site (max-width:520px){
  .wsp-contactsplit .cts-row{ flex-direction:column; gap:6px; }
  .wsp-contactsplit .cts-label{ min-width:0; padding-top:0; }
}

/* --- newslettersection (SB_04 port) --- */
.wsp-newslettersection.ws-sec{ background:color-mix(in srgb, var(--panel) 70%, var(--bg)); }
.wsp-newslettersection .ws-in.nls-in{ align-items:center; }
.wsp-newslettersection .nls-copy .ws-h2{ margin:0; }
.wsp-newslettersection .nls-copy .ws-sub{ margin-top:14px; max-width:42ch; }
.wsp-newslettersection .nls-side{ display:flex; flex-direction:column; gap:12px; }
.wsp-newslettersection .nls-form{ display:flex; gap:10px; align-items:stretch; }
.wsp-newslettersection .nls-input{ flex:1; min-width:0; background:var(--bg); color:var(--ink);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .6); padding:12px 16px;
  font:400 13.5px var(--font); outline:none; transition:border-color .18s ease, box-shadow .18s ease; }
.wsp-newslettersection .nls-input::placeholder{ color:var(--faint); }
.wsp-newslettersection .nls-input:focus{ border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 3px var(--accent-fill); }
.wsp-newslettersection .nls-input:disabled{ opacity:.55; }
.wsp-newslettersection .nls-btn{ flex-shrink:0; }
.wsp-newslettersection .nls-privacy{ margin:0; font:400 11.5px/1.55 var(--font); color:var(--faint); max-width:46ch; }
.wsp-newslettersection .ws-nlmsg{ margin-top:0; }
@container site (max-width: 720px){
  .wsp-newslettersection .ws-in.nls-in{ grid-template-columns:1fr; gap:34px; }
}
@container site (max-width: 460px){
  .wsp-newslettersection .nls-form{ flex-direction:column; align-items:stretch; }
  .wsp-newslettersection .nls-btn{ width:100%; justify-content:center; }
}

/* --- socialshare (SB_04 port) --- */
.wsp-socialshare .ssh-bar{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; width:fit-content; max-width:min(960px,92cqw); margin:0 auto;
  padding:16px 24px; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); background:var(--panel); background-image:var(--surface-grad,none); }
.wsp-socialshare .ssh-group{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.wsp-socialshare .ssh-glabel{ font:600 11px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.wsp-socialshare .ssh-links{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wsp-socialshare .ssh-link{ display:inline-flex; align-items:center; gap:7px; padding:5px 6px; line-height:1; border:none; background:none;
  cursor:pointer; color:var(--dim); font:500 13px var(--font); border-radius:6px; transition:color 140ms ease, transform 120ms ease; }
.wsp-socialshare .ssh-link:hover{ color:var(--accent); }
.wsp-socialshare .ssh-link:active{ transform:translateY(1px); }
.wsp-socialshare .ssh-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-socialshare .ssh-ico{ display:inline-flex; }
.wsp-socialshare .ssh-ico svg{ width:15px; height:15px; display:block; }
.wsp-socialshare .ssh-lbl{ white-space:nowrap; }
.wsp-socialshare .ssh-pressed{ color:var(--accent); }
.wsp-socialshare .ssh-copy{ padding:6px 12px; border:var(--bw, 1px) solid var(--hair); border-radius:7px; color:var(--dim); font-weight:500;
  transition:color 140ms ease, background-color 140ms ease, border-color 140ms ease; }
.wsp-socialshare .ssh-copy:hover{ color:var(--accent); background-color:var(--accent-fill); border-color:var(--accent-dim); }
.wsp-socialshare .ssh-link.is-copied{ color:#22c55e; }
.wsp-socialshare .ssh-copy.is-copied{ color:#22c55e; border-color:rgba(34,197,94,0.42); background-color:rgba(34,197,94,0.08); }
.wsp-socialshare .ssh-divider{ width:1px; align-self:stretch; min-height:22px; background:var(--hair); flex-shrink:0; }
.wsp-socialshare .ssh-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap; }
@container site (max-width:560px){
  .wsp-socialshare .ssh-bar{ width:auto; max-width:100%; flex-direction:column; align-items:flex-start; gap:16px; }
  .wsp-socialshare .ssh-group{ width:100%; }
  .wsp-socialshare .ssh-divider{ width:100%; min-height:0; height:1px; align-self:auto; }
}

/* --- cookiebanner (SB_04 port) --- */
.wsp-cookiebanner .ckb-frame{ position:relative; width:min(880px,100%); min-height:300px; margin:clamp(28px,4cqw,46px) auto 0;
  display:flex; flex-direction:column; padding:18px; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius,12px) + 4px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 45%, transparent), transparent 42%), var(--bg-deep, var(--bg)); }
.wsp-cookiebanner .ckb-faux{ flex:1 1 auto; display:flex; flex-direction:column; gap:12px; padding:8px 12px 26px; overflow:hidden; }
.wsp-cookiebanner .ckb-faux i{ height:10px; border-radius:6px; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.wsp-cookiebanner .ckb-faux i:nth-child(1){ width:52%; }
.wsp-cookiebanner .ckb-faux i:nth-child(2){ width:74%; }
.wsp-cookiebanner .ckb-faux i:nth-child(3){ width:40%; }
.wsp-cookiebanner .ckb-dock{ display:flex; flex-direction:column; gap:12px; }

/* Consent bar */
.wsp-cookiebanner .ckb-banner{ display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:14px 18px; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  box-shadow:0 10px 34px -14px rgba(0,0,0,0.55); }
.wsp-cookiebanner .ckb-banner[hidden]{ display:none; }
.wsp-cookiebanner .ckb-copy{ flex:1 1 240px; min-width:200px; margin:0; font-size:0.9rem; line-height:1.55; color:var(--dim); }
.wsp-cookiebanner .ckb-learn{ color:var(--accent); text-decoration:none; font-weight:600; }
.wsp-cookiebanner .ckb-learn:hover{ text-decoration:underline; }
.wsp-cookiebanner .ckb-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* Buttons */
.wsp-cookiebanner .ckb-btn{ font-family:inherit; font-size:0.8rem; font-weight:600; white-space:nowrap; cursor:pointer;
  padding:9px 16px; border-radius:calc(var(--radius,12px) * .6); border:1px solid transparent;
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease; }
.wsp-cookiebanner .ckb-btn:active{ transform:translateY(1px); }
.wsp-cookiebanner .ckb-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-cookiebanner .ckb-btn--accept{ background:var(--accent); color:var(--accent-text, #04121a); border-color:var(--accent); }
.wsp-cookiebanner .ckb-btn--accept:hover{ background:color-mix(in srgb, var(--accent) 84%, var(--bg)); border-color:color-mix(in srgb, var(--accent) 84%, var(--bg)); }
.wsp-cookiebanner .ckb-btn--ghost{ background:color-mix(in srgb, var(--ink) 3%, transparent); color:var(--dim); border-color:var(--hair); }
.wsp-cookiebanner .ckb-btn--ghost:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.wsp-cookiebanner .ckb-btn--link{ background:transparent; border:none; padding:6px 4px; color:var(--accent); }
.wsp-cookiebanner .ckb-btn--link:hover{ text-decoration:underline; }

/* Preferences panel */
.wsp-cookiebanner .ckb-panel{ background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  padding:20px; box-shadow:0 12px 44px -18px rgba(0,0,0,0.6); }
.wsp-cookiebanner .ckb-panel[hidden]{ display:none; }
.wsp-cookiebanner .ckb-ptitle{ margin:0 0 6px; font:700 1rem/1.3 var(--font-head, var(--font)); color:var(--ink); }
.wsp-cookiebanner .ckb-pdesc{ margin:0 0 16px; font-size:0.8rem; line-height:1.55; color:var(--faint); }
.wsp-cookiebanner .ckb-rows{ display:flex; flex-direction:column; }
.wsp-cookiebanner .ckb-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-cookiebanner .ckb-row:first-child{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-cookiebanner .ckb-rowinfo{ display:flex; flex-direction:column; gap:3px; }
.wsp-cookiebanner .ckb-rowname{ font-size:0.85rem; font-weight:600; color:var(--ink); }
.wsp-cookiebanner .ckb-rowdesc{ font-size:0.75rem; line-height:1.45; color:var(--faint); }
.wsp-cookiebanner .ckb-pactions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Toggle switch */
.wsp-cookiebanner .ckb-switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; cursor:pointer; }
.wsp-cookiebanner .ckb-switch.is-locked{ cursor:not-allowed; opacity:0.55; }
.wsp-cookiebanner .ckb-switch input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.wsp-cookiebanner .ckb-track{ position:absolute; inset:0; border-radius:999px; background:color-mix(in srgb, var(--ink) 14%, transparent); transition:background 160ms ease; }
.wsp-cookiebanner .ckb-track::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink); transition:transform 180ms ease; }
.wsp-cookiebanner .ckb-switch input:checked ~ .ckb-track{ background:var(--accent); }
.wsp-cookiebanner .ckb-switch.is-locked input:checked ~ .ckb-track{ background:color-mix(in srgb, var(--ink) 10%, transparent); }
.wsp-cookiebanner .ckb-switch input:checked ~ .ckb-track::after{ transform:translateX(18px); }
.wsp-cookiebanner .ckb-switch input:focus-visible ~ .ckb-track{ outline:2px solid var(--accent); outline-offset:2px; }

/* Saved confirmation (dismiss is real, but the pane stays meaningful + re-openable) */
.wsp-cookiebanner .ckb-done{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  box-shadow:0 10px 34px -14px rgba(0,0,0,0.55); }
.wsp-cookiebanner .ckb-done[hidden]{ display:none; }
.wsp-cookiebanner .ckb-donecheck{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0;
  border-radius:50%; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.wsp-cookiebanner .ckb-donecheck svg{ width:15px; height:15px; }
.wsp-cookiebanner .ckb-donemsg{ flex:1 1 auto; min-width:180px; font-size:0.88rem; color:var(--ink); }

@container site (max-width:620px){
  .wsp-cookiebanner .ckb-frame{ min-height:260px; padding:14px; }
  .wsp-cookiebanner .ckb-banner{ flex-direction:column; align-items:stretch; gap:14px; }
  .wsp-cookiebanner .ckb-copy{ flex:0 0 auto; min-width:0; }
  .wsp-cookiebanner .ckb-actions{ width:100%; }
  .wsp-cookiebanner .ckb-actions .ckb-btn{ flex:1; text-align:center; }
  .wsp-cookiebanner .ckb-pactions .ckb-btn{ flex:1; }
}

/* --- featuremasonry (SB_04 port) --- */
.wsp-featuremasonry .ws-in > .ws-shead.left{ text-align:left; margin:0 0 clamp(38px,5cqw,56px); max-width:600px; }

.wsp-featuremasonry .fm-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(clamp(150px,19cqw,178px),auto); grid-auto-flow:dense; gap:2px;
  border-radius:var(--radius,12px); overflow:hidden; }

.wsp-featuremasonry .fm-block{ position:relative; background:var(--panel);
  padding:clamp(22px,3cqw,32px); display:flex; flex-direction:column; gap:13px; min-width:0; }
.wsp-featuremasonry .fm-block.big{ grid-row:span 2; background:var(--panel-2); }
.wsp-featuremasonry .fm-block:hover{ background:var(--panel-2); }
.wsp-featuremasonry .fm-block.big:hover{ background:var(--panel-3,var(--panel-2)); }

/* hover accent bar - transform/opacity only */
.wsp-featuremasonry .fm-block::after{ content:''; position:absolute; top:0; left:0;
  width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left;
  opacity:0; transition:transform .32s cubic-bezier(.2,.8,.25,1), opacity .32s ease; }
.wsp-featuremasonry .fm-block:hover::after{ transform:scaleX(1); opacity:.9; }

.wsp-featuremasonry .fm-ico{ display:block; line-height:0; color:var(--dim); transition:color .25s ease; }
.wsp-featuremasonry .fm-ico svg{ width:26px; height:26px; }
.wsp-featuremasonry .fm-block.big .fm-ico{ color:var(--accent); }
.wsp-featuremasonry .fm-block.big .fm-ico svg{ width:30px; height:30px; }
.wsp-featuremasonry .fm-block:hover .fm-ico{ color:var(--accent); }

.wsp-featuremasonry .fm-tt{ margin:0; font:600 clamp(15px,1.7cqw,17px)/1.3 var(--font-head,var(--font));
  letter-spacing:-.01em; color:var(--ink); }
.wsp-featuremasonry .fm-desc{ margin:0; font:400 clamp(13px,1.5cqw,14px)/1.65 var(--font); color:var(--dim); }

@container site (max-width:860px){
  .wsp-featuremasonry .fm-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-featuremasonry .ws-in > .ws-shead.left{ margin-bottom:clamp(28px,7cqw,40px); }
  .wsp-featuremasonry .fm-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .wsp-featuremasonry .fm-block{ min-height:clamp(150px,40cqw,168px); }
  .wsp-featuremasonry .fm-block.big{ grid-row:span 1; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-featuremasonry .fm-block::after,
  .wsp-featuremasonry .fm-ico{ transition:none; }
}

/* --- reviewwall (SB_04 port) --- */
.wsp-reviewwall .ws-shead.rvw-head{ max-width:640px; margin:0 0 clamp(40px,6cqw,64px); text-align:left; }
.wsp-reviewwall .rvw-head .ws-kick{ margin-bottom:16px; }
.wsp-reviewwall .rvw-head .ws-sub{ margin-top:14px; max-width:52ch; }
.wsp-reviewwall .rvw-overall{ display:flex; align-items:center; gap:20px; margin-top:32px; }
.wsp-reviewwall .rvw-score{ font:800 clamp(46px,7cqw,64px)/1 var(--font-head,var(--font)); letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.wsp-reviewwall .rvw-oright{ display:flex; flex-direction:column; gap:6px; }
.wsp-reviewwall .rvw-bigstars{ display:inline-flex; gap:3px; font-size:21px; line-height:1; color:var(--accent); letter-spacing:1px; }
.wsp-reviewwall .rvw-bigstars i{ color:color-mix(in srgb, var(--faint) 55%, transparent); font-style:normal; }
.wsp-reviewwall .rvw-count{ font:400 13px var(--font); color:var(--dim); }

.wsp-reviewwall .rvw-wall{ column-count:3; column-gap:clamp(28px,4.5cqw,64px); column-rule:var(--bw, 1px) solid var(--hair); }
.wsp-reviewwall .rvw-card{ break-inside:avoid; padding:26px 0; border-bottom:var(--bw, 1px) solid var(--hair); transition:transform .2s ease; }
.wsp-reviewwall .rvw-card:last-child{ border-bottom:none; }
.wsp-reviewwall .rvw-card:hover{ transform:translateY(-2px); }
.wsp-reviewwall .rvw-cstars{ display:inline-flex; font-size:14px; line-height:1; color:var(--accent); letter-spacing:2px; }
.wsp-reviewwall .rvw-cstars i{ color:color-mix(in srgb, var(--faint) 55%, transparent); font-style:normal; }
.wsp-reviewwall .rvw-quote{ margin:14px 0 18px; font:italic 400 clamp(14px,1.6cqw,15px)/1.75 var(--font); color:var(--dim); }
.wsp-reviewwall .rvw-who{ display:flex; flex-direction:column; gap:3px; }
.wsp-reviewwall .rvw-name{ font:600 13px var(--font); color:var(--ink); line-height:1.2; }
.wsp-reviewwall .rvw-role{ font:400 12px var(--font); color:var(--faint); font-style:normal; line-height:1.2; }

@container site (max-width:840px){ .wsp-reviewwall .rvw-wall{ column-count:2; } }
@container site (max-width:520px){
  .wsp-reviewwall .rvw-wall{ column-count:1; }
  .wsp-reviewwall .rvw-overall{ gap:14px; }
  .wsp-reviewwall .rvw-score{ font-size:44px; }
}

/* --- clientresultsstrip (SB_04 port) --- */
.wsp-clientresultsstrip.ws-sec{ padding:28px 0; border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-clientresultsstrip .crs-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; }
.wsp-clientresultsstrip .crs-left{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; flex:1; min-width:0; }
.wsp-clientresultsstrip .crs-label{ font:600 11px var(--font); letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); white-space:nowrap; flex-shrink:0; }
.wsp-clientresultsstrip .crs-logos{ display:flex; align-items:center; flex-wrap:wrap; }
.wsp-clientresultsstrip .crs-logo{ font:700 15px var(--font-head, var(--font)); letter-spacing:-0.02em; color:var(--faint); padding:0 20px; white-space:nowrap; transition:color 0.2s ease; cursor:default; }
.wsp-clientresultsstrip .crs-logo:first-child{ padding-left:0; }
.wsp-clientresultsstrip .crs-logo:hover{ color:var(--ink); }
.wsp-clientresultsstrip .crs-divider{ width:1px; height:16px; background:var(--hair); flex-shrink:0; }
.wsp-clientresultsstrip .crs-right{ display:flex; align-items:baseline; gap:8px; flex-shrink:0; border-left:var(--bw, 1px) solid var(--hair); padding-left:40px; }
.wsp-clientresultsstrip .crs-num{ font:800 clamp(22px, 3.2cqw, 28px) var(--font-head, var(--font)); letter-spacing:-0.03em; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.wsp-clientresultsstrip .crs-lbl{ font:400 13px var(--font); color:var(--dim); white-space:nowrap; }
@container site (max-width:720px){
  .wsp-clientresultsstrip .crs-inner{ flex-direction:column; align-items:flex-start; gap:24px; }
  .wsp-clientresultsstrip .crs-right{ border-left:none; padding-left:0; border-top:var(--bw, 1px) solid var(--hair); padding-top:20px; width:100%; }
}
@container site (max-width:480px){
  .wsp-clientresultsstrip.ws-sec{ padding:24px 0; }
  .wsp-clientresultsstrip .crs-left{ flex-direction:column; align-items:flex-start; gap:16px; }
  .wsp-clientresultsstrip .crs-logos{ flex-wrap:wrap; gap:4px 0; }
  .wsp-clientresultsstrip .crs-logo{ padding:4px 12px; font-size:14px; }
  .wsp-clientresultsstrip .crs-logo:first-child{ padding-left:12px; }
  .wsp-clientresultsstrip .crs-divider{ display:none; }
}

/* --- integrationsteps (SB_04 port) --- */
.wsp-integrationsteps .is-head{ max-width:600px; margin:0 0 52px; text-align:left; }
.wsp-integrationsteps .is-head .ws-sub{ margin-top:14px; }
.wsp-integrationsteps .is-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; align-items:start; }
.wsp-integrationsteps .is-step{ min-width:0; padding:0 32px; border-right:var(--bw, 1px) solid var(--hair); }
.wsp-integrationsteps .is-step:first-child{ padding-left:0; }
.wsp-integrationsteps .is-step:last-child{ padding-right:0; border-right:none; }
.wsp-integrationsteps .is-num{ width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  background:var(--accent); color:var(--accent-text,#0a0d14); font:700 1rem/1 var(--font); }
.wsp-integrationsteps .is-stitle{ margin:0 0 8px; font:600 1.0625rem/1.3 var(--font-head,var(--font));
  color:var(--ink); letter-spacing:-0.01em; }
.wsp-integrationsteps .is-sdesc{ margin:0 0 20px; font:400 0.9rem/1.65 var(--font); color:var(--dim); }
.wsp-integrationsteps .is-win{ max-width:100%; border-radius:calc(var(--radius,12px) * .7); overflow:hidden;
  background:#0e0f14; border:1px solid rgba(255,255,255,0.09); box-shadow:0 10px 30px -20px rgba(0,0,0,0.65); }
.wsp-integrationsteps .is-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08); }
.wsp-integrationsteps .is-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:rgba(255,255,255,0.18); }
.wsp-integrationsteps .is-lang{ margin-left:auto; font:600 0.6875rem var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,0.28); }
.wsp-integrationsteps .is-copy{ margin-left:10px; padding:3px 10px; border-radius:6px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#cdd3de;
  font:600 9.5px var(--mono); letter-spacing:.7px; text-transform:uppercase;
  transition:color 140ms linear, border-color 140ms linear; }
.wsp-integrationsteps .is-copy:hover{ color:#fff; border-color:rgba(255,255,255,0.3); }
.wsp-integrationsteps .is-copy.ok{ color:#4bd6a6; border-color:color-mix(in srgb, #4bd6a6 55%, transparent); }
.wsp-integrationsteps .is-body{ padding:16px 14px; overflow-x:auto; }
.wsp-integrationsteps .is-code{ margin:0; white-space:pre; color:#e6e8ee; font:400 0.8rem/1.75 var(--mono); }
.wsp-integrationsteps .is-code code{ font:inherit; color:inherit; }
.wsp-integrationsteps .is-c-kw{ color:#c4a2fb; }
.wsp-integrationsteps .is-c-str{ color:#f4bf6a; }
.wsp-integrationsteps .is-c-var{ color:#7cc0ff; }
.wsp-integrationsteps .is-c-fn{ color:#4bd6a6; }
.wsp-integrationsteps .is-c-num{ color:#fb9d5b; }
.wsp-integrationsteps .is-c-comment{ color:#5b6472; font-style:italic; }
.wsp-integrationsteps .is-c-punct{ color:#737d8c; }
.wsp-integrationsteps .ws-ctarow{ margin-top:40px; }
@container site (max-width:820px){
  .wsp-integrationsteps .is-steps{ grid-template-columns:1fr; gap:40px; }
  .wsp-integrationsteps .is-step{ padding:0; border-right:none; }
}

/* --- pricingcomparison (SB_04 port) --- */
.wsp-pricingcomparison .pcmp-wrap{ width:100%; margin-top:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); }
.wsp-pricingcomparison .pcmp-table{ width:100%; min-width:620px; border-collapse:collapse; table-layout:fixed;
  font-family:var(--font); text-align:center; }

.wsp-pricingcomparison .pcmp-th{ text-align:center; vertical-align:bottom; padding:26px 18px 20px;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-pricingcomparison .pcmp-th.f{ width:34%; }
.wsp-pricingcomparison .pcmp-th.tier{ width:22%; border-left:var(--bw, 1px) solid var(--hair); }

.wsp-pricingcomparison .pcmp-badge{ display:block; margin-bottom:9px; font:600 10px/1 var(--mono);
  letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.wsp-pricingcomparison .pcmp-name{ display:block; margin-bottom:9px; font:600 12px/1 var(--font);
  letter-spacing:1px; text-transform:uppercase; color:var(--ink); }
.wsp-pricingcomparison .pcmp-th.hot .pcmp-name{ color:var(--accent); }
.wsp-pricingcomparison .pcmp-price{ display:block; font:700 clamp(24px,3.4cqw,33px)/1 var(--font-head,var(--font));
  letter-spacing:-0.02em; color:var(--ink); }
.wsp-pricingcomparison .pcmp-per{ font:400 13px/1 var(--font); letter-spacing:0; color:var(--dim); margin-left:2px; }

.wsp-pricingcomparison .pcmp-group td{ padding:11px 18px; text-align:left; font:600 10px/1 var(--mono);
  letter-spacing:2px; text-transform:uppercase; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 3.5%, transparent);
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }

.wsp-pricingcomparison .pcmp-row{ transition:background 0.12s ease; }
.wsp-pricingcomparison .pcmp-feat{ padding:13px 18px; text-align:left; font:400 14px/1.4 var(--font);
  color:var(--dim); position:sticky; left:0; z-index:2; background:var(--bg);
  border-bottom:var(--bw, 1px) solid var(--hair-soft); }
.wsp-pricingcomparison .pcmp-cell{ padding:13px 14px; text-align:center; font:400 14px/1.4 var(--font);
  color:var(--dim); border-left:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair-soft); }
.wsp-pricingcomparison .pcmp-row:hover .pcmp-cell:not(.hot){ background:color-mix(in srgb, var(--ink) 3.5%, transparent); }

.wsp-pricingcomparison .pcmp-th.hot,
.wsp-pricingcomparison .pcmp-cell.hot,
.wsp-pricingcomparison .pcmp-cta td.hot{ background:var(--accent-fill); color:var(--ink);
  border-left:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-right:1px solid color-mix(in srgb, var(--accent) 28%, transparent); }

.wsp-pricingcomparison .pcmp-yes{ display:inline-flex; align-items:center; justify-content:center; color:#22c55e; }
.wsp-pricingcomparison .pcmp-yes svg{ width:17px; height:17px; }
.wsp-pricingcomparison .pcmp-no{ display:inline-block; width:14px; height:2px; border-radius:2px;
  background:var(--faint); opacity:0.55; vertical-align:middle; }

.wsp-pricingcomparison .pcmp-cta td{ padding:22px 14px 26px; text-align:center; border-left:var(--bw, 1px) solid var(--hair); }
.wsp-pricingcomparison .pcmp-cta .pcmp-feat{ border-left:none; border-bottom:none; background:var(--bg); }
.wsp-pricingcomparison .pcmp-cta .ws-btn{ width:100%; justify-content:center; }

@container site (max-width:640px){
  .wsp-pricingcomparison .pcmp-wrap{ border-left:none; border-right:none; border-radius:0; }
  .wsp-pricingcomparison .pcmp-th{ padding:22px 14px 16px; }
  .wsp-pricingcomparison .pcmp-cta .ws-btn{ font-size:12.5px; padding-inline:14px; }
}

/* --- featurespotlight (SB_04 port) --- */
.wsp-featurespotlight .ws-in.split{ grid-template-columns:0.82fr 1fr; gap:0; align-items:stretch;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) + 6px); overflow:hidden;
  background:var(--panel); box-shadow:var(--elev, 0 0 #0000); }

/* ---- the visual / spotlight column ---- */
.wsp-featurespotlight .fs-visual{ position:relative; overflow:hidden; min-height:clamp(340px, 44cqw, 560px);
  border-right:var(--bw, 1px) solid var(--hair); background:var(--panel-2, var(--panel));
  background-size:cover; background-position:center; }
.wsp-featurespotlight .fs-visual::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 26% 16%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
             radial-gradient(120% 120% at 86% 88%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 56%); }
.wsp-featurespotlight .fs-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000, transparent 74%);
  mask-image:radial-gradient(circle at 50% 45%, #000, transparent 74%); }
.wsp-featurespotlight .fs-orb{ position:absolute; left:50%; top:50%; width:min(56%, 300px); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; }
.wsp-featurespotlight .fs-orb::after{ content:''; position:absolute; inset:-22%; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 66%); }
.wsp-featurespotlight .fs-orb i{ position:absolute; inset:0; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.wsp-featurespotlight .fs-orb i:nth-child(2){ inset:17%; border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
.wsp-featurespotlight .fs-orb i:nth-child(3){ inset:36%; border:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 72%); }
.wsp-featurespotlight .fs-spot{ position:absolute; inset:0; pointer-events:none; --sx:50%; --sy:42%; --si:.6;
  transition:opacity .4s ease;
  background:radial-gradient(circle at var(--sx) var(--sy),
     color-mix(in srgb, var(--accent) calc(30% * var(--si)), transparent) 0%,
     color-mix(in srgb, var(--accent) calc(11% * var(--si)), transparent) 26%,
     transparent 47%); }
.wsp-featurespotlight .fs-cap{ position:absolute; left:0; bottom:0; margin:0; padding:11px 16px;
  font:600 10px var(--mono, var(--font)); letter-spacing:2px; text-transform:uppercase; color:var(--dim);
  background:linear-gradient(to right, color-mix(in srgb, var(--bg) 66%, transparent), transparent); }
.wsp-featurespotlight .fs-visual.has-img::before,
.wsp-featurespotlight .fs-visual.has-img .fs-grid,
.wsp-featurespotlight .fs-visual.has-img .fs-orb{ display:none; }

/* ---- the copy column ---- */
.wsp-featurespotlight .fs-content{ padding:clamp(30px, 4.6cqw, 68px); display:flex; flex-direction:column;
  justify-content:center; min-width:0; }
.wsp-featurespotlight .fs-content .ws-kick{ margin-bottom:18px; }
.wsp-featurespotlight .fs-content .ws-h2{ margin:0 0 22px; letter-spacing:-0.02em; text-wrap:balance; }
.wsp-featurespotlight .fs-body{ display:flex; flex-direction:column; gap:16px; }
.wsp-featurespotlight .fs-body p{ margin:0; font:400 clamp(14px, 1.6cqw, 16px)/1.75 var(--font); color:var(--dim); }
.wsp-featurespotlight .fs-benefits{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.wsp-featurespotlight .fs-benefits li{ display:flex; align-items:flex-start; gap:12px;
  font:400 clamp(13px, 1.5cqw, 15px)/1.5 var(--font); color:var(--ink); }
.wsp-featurespotlight .fs-check{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-top:1px; border-radius:6px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); }
.wsp-featurespotlight .fs-check svg{ width:12px; height:12px; }
.wsp-featurespotlight .fs-content .ws-ctarow{ margin-top:34px; }

/* ---- narrow: stack the columns (this is a section, not a hero, so it owns its own stack) ---- */
@container site (max-width: 820px){
  .wsp-featurespotlight .ws-in.split{ grid-template-columns:1fr; }
  .wsp-featurespotlight .fs-visual{ border-right:none; border-bottom:var(--bw, 1px) solid var(--hair);
    min-height:clamp(240px, 52cqw, 360px); }
}
@container site (max-width: 520px){
  .wsp-featurespotlight .fs-content{ padding:30px 22px 34px; }
  .wsp-featurespotlight .fs-benefits{ margin-top:24px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-featurespotlight .fs-spot{ transition:none; }
}

/* --- testimonialsingle (SB_04 port) --- */
.wsp-testimonialsingle .tsi-inner{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:clamp(26px,4.6cqw,50px); }

/* decorative quote mark — sits behind the quote */
.wsp-testimonialsingle .tsi-mark{ position:absolute; top:0; left:50%; transform:translate(-50%,-32%); z-index:0; pointer-events:none; user-select:none; font:700 clamp(110px,18cqw,210px)/1 Georgia,'Times New Roman',serif; color:var(--accent); opacity:.13; }

/* the quote */
.wsp-testimonialsingle .tsi-quote{ position:relative; z-index:1; margin:0 0 clamp(30px,4.8cqw,50px); font:400 clamp(1.3rem,2.9cqw,2rem)/1.55 var(--font); font-style:italic; letter-spacing:-0.01em; color:var(--ink); text-wrap:balance; }

/* attribution row */
.wsp-testimonialsingle .tsi-attr{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:clamp(20px,3cqw,28px); }
.wsp-testimonialsingle .tsi-avatar{ width:56px; height:56px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center; background:var(--accent-fill,rgba(124,196,255,0.14)); color:var(--accent); font:700 19px var(--font); font-style:normal; letter-spacing:0; }
.wsp-testimonialsingle .tsi-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.wsp-testimonialsingle .tsi-meta{ display:flex; flex-direction:column; gap:3px; text-align:left; }
.wsp-testimonialsingle .tsi-name{ font:600 0.95rem var(--font); color:var(--ink); letter-spacing:-0.01em; font-style:normal; }
.wsp-testimonialsingle .tsi-role{ font:400 0.875rem var(--font); color:var(--dim); font-style:normal; }
.wsp-testimonialsingle .tsi-company{ font:500 0.875rem var(--font); color:var(--accent); font-style:normal; }

/* star rating */
.wsp-testimonialsingle .tsi-stars{ position:relative; z-index:1; margin-bottom:clamp(22px,3.2cqw,32px); color:var(--accent); font-size:17px; line-height:1; letter-spacing:3px; }
.wsp-testimonialsingle .tsi-stars i{ color:var(--hair); font-style:normal; letter-spacing:3px; }

/* wordmark under a hairline */
.wsp-testimonialsingle .tsi-logo{ width:100%; padding-top:clamp(18px,2.6cqw,24px); border-top:var(--bw, 1px) solid var(--hair); font:700 0.7rem var(--font); letter-spacing:0.25em; text-transform:uppercase; color:var(--faint); }

/* narrow: stack the attribution, center the meta, tuck the mark in */
@container site (max-width:560px){
  .wsp-testimonialsingle .tsi-attr{ flex-direction:column; gap:12px; }
  .wsp-testimonialsingle .tsi-meta{ text-align:center; }
  .wsp-testimonialsingle .tsi-mark{ transform:translate(-50%,-26%); font-size:clamp(92px,24cqw,150px); }
}

/* --- changelogsection (SB_04 port) --- */
.wsp-changelogsection .cls-grid{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:clamp(40px,6cqw,80px); align-items:start; }

.wsp-changelogsection .cls-side{ position:relative; }
.wsp-changelogsection .cls-side-sticky{ position:sticky; top:24px; }
.wsp-changelogsection .cls-side .ws-kick{ margin-bottom:14px; }
.wsp-changelogsection .cls-side .ws-h2{ font-size:clamp(22px,2.6cqw,30px); margin-bottom:12px; }
.wsp-changelogsection .cls-side .ws-sub{ max-width:34ch; }

.wsp-changelogsection .cls-sub{ display:flex; flex-direction:column; gap:10px; margin-top:30px; }
.wsp-changelogsection .cls-sub-label{ font:600 0.82rem/1.3 var(--font); color:var(--ink); }
.wsp-changelogsection .cls-sub-row{ display:flex; }
.wsp-changelogsection .cls-sub-input{ flex:1; min-width:0; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-right:none; border-radius:8px 0 0 8px; padding:10px 14px; font:400 0.875rem/1.2 var(--font); color:var(--ink); outline:none; transition:border-color .18s ease; }
.wsp-changelogsection .cls-sub-input::placeholder{ color:var(--faint); }
.wsp-changelogsection .cls-sub-input:focus{ border-color:var(--accent); }
.wsp-changelogsection .cls-sub.is-err .cls-sub-input{ border-color:var(--bad,#e5533c); }
.wsp-changelogsection .cls-sub-btn{ background:var(--accent); color:var(--accent-text,#04121a); border:none; border-radius:0 8px 8px 0; padding:10px 18px; font:600 0.875rem/1.2 var(--font); cursor:pointer; white-space:nowrap; transition:opacity .18s ease, transform .18s ease; }
.wsp-changelogsection .cls-sub-btn:hover{ opacity:.9; transform:translateY(-1px); }
.wsp-changelogsection .cls-sub-btn:active{ transform:translateY(0); }
.wsp-changelogsection .cls-sub-done{ margin:0; font:600 0.9rem/1.5 var(--font); color:var(--ok,#4ade80); }

.wsp-changelogsection .cls-timeline{ position:relative; display:flex; flex-direction:column; }
.wsp-changelogsection .cls-timeline::before{ content:''; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:2px; background:color-mix(in srgb, var(--accent) 32%, transparent); }

.wsp-changelogsection .cls-entry{ position:relative; padding-left:34px; padding-bottom:52px; }
.wsp-changelogsection .cls-entry:last-child{ padding-bottom:0; }
.wsp-changelogsection .cls-dot{ position:absolute; left:-5px; top:9px; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

.wsp-changelogsection .cls-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.wsp-changelogsection .cls-date{ font:600 0.8rem/1 var(--font); color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); padding:4px 11px; border-radius:20px; }
.wsp-changelogsection .cls-ver{ font:600 0.8rem/1 var(--mono); color:var(--dim); }

.wsp-changelogsection .cls-etitle{ margin:0 0 10px; font:700 clamp(17px,1.7cqw,20px)/1.3 var(--font-head,var(--font)); letter-spacing:-.01em; color:var(--ink); }
.wsp-changelogsection .cls-ebody{ margin:0; font:400 0.94rem/1.7 var(--font); color:var(--dim); max-width:62ch; }

.wsp-changelogsection .cls-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.wsp-changelogsection .cls-tag{ font:700 0.68rem/1 var(--font); letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:5px; border:1px solid transparent; }
.wsp-changelogsection .cls-tag--new{ color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, transparent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.wsp-changelogsection .cls-tag--imp{ color:var(--ok,#4ade80); background:color-mix(in srgb, var(--ok,#4ade80) 14%, transparent); border-color:color-mix(in srgb, var(--ok,#4ade80) 30%, transparent); }
.wsp-changelogsection .cls-tag--fix{ color:var(--warn,#f5b342); background:color-mix(in srgb, var(--warn,#f5b342) 14%, transparent); border-color:color-mix(in srgb, var(--warn,#f5b342) 30%, transparent); }
.wsp-changelogsection .cls-tag--misc{ color:var(--dim); background:color-mix(in srgb, var(--ink) 8%, transparent); border-color:var(--hair); }

@container site (max-width:760px){
  .wsp-changelogsection .cls-grid{ grid-template-columns:1fr; gap:clamp(36px,7cqw,52px); }
  .wsp-changelogsection .cls-side-sticky{ position:static; }
  .wsp-changelogsection .cls-side .ws-sub{ max-width:52ch; }
}

/* --- featuretabshero (SB_04 port) --- */
.wsp-featuretabshero .fth-tabs{ display:flex; gap:0; margin-top:10px; border-bottom:var(--bw, 1px) solid var(--hair); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.wsp-featuretabshero .fth-tabs::-webkit-scrollbar{ display:none; }
.wsp-featuretabshero .fth-tab{ flex:0 0 auto; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:14px clamp(16px,2.4cqw,26px); font:500 clamp(13px,1.5cqw,14.5px) var(--font); color:var(--dim); cursor:pointer; white-space:nowrap; transition:color .2s ease, border-color .2s ease; }
.wsp-featuretabshero .fth-tab:hover{ color:var(--ink); }
.wsp-featuretabshero .fth-tab.on{ color:var(--ink); border-bottom-color:var(--accent); }
.wsp-featuretabshero .fth-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-5px; border-radius:6px; }

.wsp-featuretabshero .fth-panels{ position:relative; }
.wsp-featuretabshero .fth-panel{ display:none; }
.wsp-featuretabshero .fth-panel.on{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5cqw,64px); align-items:center; padding-top:clamp(30px,4cqw,48px); }
.wsp-featuretabshero .fth-pcontent{ min-width:0; }
.wsp-featuretabshero .fth-ptitle{ margin:0 0 18px; font:700 clamp(18px,2.4cqw,25px)/1.25 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.015em; }
.wsp-featuretabshero .fth-plist{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; }
.wsp-featuretabshero .fth-plist li{ position:relative; padding-left:20px; font:400 clamp(13.5px,1.6cqw,15px)/1.62 var(--font); color:var(--dim); }
.wsp-featuretabshero .fth-plist li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }

.wsp-featuretabshero .fth-pshot{ width:100%; aspect-ratio:4/3; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .9); overflow:hidden; background:var(--panel) center/cover no-repeat; }
.wsp-featuretabshero .fth-mock{ width:100%; height:100%; display:flex; flex-direction:column; background:var(--panel); }
.wsp-featuretabshero .fth-mtop{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-featuretabshero .fth-mtop s{ width:8px; height:8px; border-radius:50%; background:var(--hair); }
.wsp-featuretabshero .fth-mtop em{ flex:1; height:8px; margin-left:8px; border-radius:99px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-featuretabshero .fth-mbody{ flex:1; display:grid; grid-template-columns:auto 1fr; gap:14px; padding:14px; min-height:0; }
.wsp-featuretabshero .fth-mrail{ display:flex; flex-direction:column; gap:9px; }
.wsp-featuretabshero .fth-mrail u{ width:26px; height:8px; border-radius:99px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-featuretabshero .fth-mrail u:first-child{ background:var(--accent-fill); }
.wsp-featuretabshero .fth-mmain{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.wsp-featuretabshero .fth-mchart{ flex:1; display:flex; align-items:flex-end; gap:8px; min-height:44px; }
.wsp-featuretabshero .fth-mchart i{ flex:1; height:var(--h, 50%); border-radius:4px 4px 0 0; background:color-mix(in srgb, var(--ink) 13%, transparent); }
.wsp-featuretabshero .fth-mchart i.hot{ background:var(--accent); }
.wsp-featuretabshero .fth-mrow{ display:flex; gap:8px; }
.wsp-featuretabshero .fth-mrow span{ flex:1; height:20px; border-radius:6px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-featuretabshero .fth-mrow span.hot{ background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

.wsp-featuretabshero .fth-panel.on .fth-pcontent{ animation:fth-in .34s cubic-bezier(.2,.7,.3,1) both; }
.wsp-featuretabshero .fth-panel.on .fth-pshot{ animation:fth-in .34s cubic-bezier(.2,.7,.3,1) .04s both; }
@keyframes fth-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@container site (max-width:720px){
  .wsp-featuretabshero .fth-panel.on{ grid-template-columns:1fr; gap:24px; padding-top:28px; }
  .wsp-featuretabshero .fth-pshot{ aspect-ratio:16/9; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-featuretabshero .fth-panel.on .fth-pcontent,
  .wsp-featuretabshero .fth-panel.on .fth-pshot{ animation:none; }
}

/* --- togglesection (SB_04 port) --- */
.wsp-togglesection .tg-toggle{ display:inline-flex; align-items:center; gap:.9rem; margin-top:26px; }
.wsp-togglesection .tg-label{ font:500 .9rem/1 var(--font); color:var(--dim); cursor:pointer; user-select:none; white-space:nowrap; transition:color .2s ease; }
.wsp-togglesection .tg-label.on{ color:var(--ink); }
.wsp-togglesection .tg-track{ position:relative; width:46px; height:26px; flex:0 0 auto; padding:0; border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:var(--panel-3); cursor:pointer; }
.wsp-togglesection .tg-track.is-on{ background:var(--accent-fill2); border-color:var(--accent-dim); }
.wsp-togglesection .tg-track:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-togglesection .tg-thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink); pointer-events:none; transition:transform .25s cubic-bezier(.2,.8,.25,1); }
.wsp-togglesection .tg-track.is-on .tg-thumb{ transform:translateX(20px); }

.wsp-togglesection .tg-panels{ display:grid; margin-top:8px; }
.wsp-togglesection .tg-panel{ grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility 0s linear .3s; }
.wsp-togglesection .tg-panel.on{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s ease, visibility 0s; }

.wsp-togglesection .tg-grid{ display:grid; grid-template-columns:repeat(3,1fr); width:min(960px,88cqw); margin:0 auto; text-align:left; }
.wsp-togglesection .tg-item{ padding:2.4rem clamp(20px,3.6cqw,36px); border-right:var(--bw, 1px) solid var(--hair); }
.wsp-togglesection .tg-item:first-child{ border-left:var(--bw, 1px) solid var(--hair); }
.wsp-togglesection .tg-ico{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:9px; margin-bottom:1.15rem; background:var(--accent-fill); color:var(--accent); }
.wsp-togglesection .tg-ico svg{ width:22px; height:22px; }
.wsp-togglesection .tg-title{ margin:0 0 .5rem; font:600 1.05rem/1.3 var(--font); letter-spacing:-.01em; color:var(--ink); }
.wsp-togglesection .tg-desc{ margin:0; font:400 .9rem/1.65 var(--font); color:var(--dim); }

@container site (max-width:720px){
  .wsp-togglesection .tg-grid{ grid-template-columns:1fr; }
  .wsp-togglesection .tg-item{ padding:1.9rem 0; border-right:none; border-left:none; border-bottom:var(--bw, 1px) solid var(--hair); }
  .wsp-togglesection .tg-item:first-child{ border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-togglesection .tg-thumb, .wsp-togglesection .tg-panel{ transition:none; }
}

/* --- accordionfaq (SB_04 port) --- */
.wsp-accordionfaq .afq-grid{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px,5cqw,80px); align-items:start; }
.wsp-accordionfaq .afq-aside{ display:flex; flex-direction:column; align-items:flex-start; }
.wsp-accordionfaq .afq-aside .ws-kick{ margin:0 0 14px; }
.wsp-accordionfaq .afq-aside .ws-h2{ text-align:left; }
.wsp-accordionfaq .afq-sub{ margin:14px 0 0; max-width:34ch; }
.wsp-accordionfaq .afq-cta{ margin-top:26px; font:600 0.9rem var(--font); color:var(--accent); text-decoration:none; letter-spacing:.01em; display:inline-flex; align-items:center; gap:6px; transition:opacity .2s ease, gap .2s ease; }
.wsp-accordionfaq .afq-cta:hover{ opacity:.78; gap:10px; }
.wsp-accordionfaq .afq-cta-arw{ transition:transform .2s ease; }
.wsp-accordionfaq .afq-list{ display:flex; flex-direction:column; }
.wsp-accordionfaq .afq-item{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-accordionfaq .afq-item:last-child{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-accordionfaq .afq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; margin:0; background:none; border:0; cursor:pointer; text-align:left; font:500 1rem/1.4 var(--font); color:var(--ink); transition:color .2s ease; }
.wsp-accordionfaq .afq-q:hover{ color:var(--accent); }
.wsp-accordionfaq .afq-qt{ flex:1; }
.wsp-accordionfaq .afq-arrow{ flex-shrink:0; width:17px; height:17px; color:var(--dim); transition:transform .3s ease, color .2s ease; }
.wsp-accordionfaq .afq-item[data-open="1"] .afq-arrow{ transform:rotate(180deg); color:var(--accent); }
.wsp-accordionfaq .afq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.wsp-accordionfaq .afq-item[data-open="1"] .afq-panel{ grid-template-rows:1fr; }
.wsp-accordionfaq .afq-panel-in{ min-height:0; overflow:hidden; }
.wsp-accordionfaq .afq-a{ padding:0 0 1.35rem; font:400 0.92rem/1.75 var(--font); color:var(--dim); max-width:60ch; opacity:0; transition:opacity .3s ease .02s; }
.wsp-accordionfaq .afq-item[data-open="1"] .afq-a{ opacity:1; }
.wsp-accordionfaq .afq-q:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
@container site (max-width:820px){
  .wsp-accordionfaq .afq-grid{ grid-template-columns:1fr; gap:clamp(26px,5cqw,40px); }
  .wsp-accordionfaq .afq-sub{ max-width:52ch; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-accordionfaq .afq-panel, .wsp-accordionfaq .afq-a, .wsp-accordionfaq .afq-arrow, .wsp-accordionfaq .afq-cta, .wsp-accordionfaq .afq-cta-arw{ transition:none; }
}

/* --- openrolessection (SB_04 port) --- */
.wsp-openrolessection .or-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; margin-bottom:40px; }
.wsp-openrolessection .or-headings{ min-width:0; }
.wsp-openrolessection .or-headings .ws-kick{ margin-bottom:12px; }
.wsp-openrolessection .or-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.wsp-openrolessection .or-chip{ appearance:none; -webkit-appearance:none; }
.wsp-openrolessection .or-chip:not(.on):hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 32%, var(--hair)); }

.wsp-openrolessection .or-list{ display:flex; flex-direction:column; }
.wsp-openrolessection .or-row{ display:flex; align-items:center; gap:16px; padding:20px 4px; border-top:var(--bw, 1px) solid var(--hair); }
.wsp-openrolessection .or-row:last-child{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-openrolessection .or-hide{ display:none; }
.wsp-openrolessection .or-main{ display:flex; align-items:center; gap:12px; flex:0 0 clamp(220px,32cqw,320px); min-width:0; }
.wsp-openrolessection .or-title{ font:600 15px var(--font); color:var(--ink); line-height:1.3; }
.wsp-openrolessection .or-tag{ flex:none; font:700 9px var(--mono); letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); background:var(--accent-fill); padding:4px 9px; border-radius:5px; white-space:nowrap; }
.wsp-openrolessection .or-meta{ display:flex; align-items:center; gap:16px; flex:1 1 auto; min-width:0; padding:0 8px; }
.wsp-openrolessection .or-loc, .wsp-openrolessection .or-type{ font:400 13px var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsp-openrolessection .or-apply{ flex:none; display:inline-flex; align-items:center; gap:6px; margin-left:auto; font:600 13px var(--font); color:var(--accent); text-decoration:none; cursor:pointer; white-space:nowrap; transition:opacity 140ms linear; }
.wsp-openrolessection .or-apply svg{ width:14px; height:14px; transition:transform 140ms ease-out; }
.wsp-openrolessection .or-apply:hover{ opacity:.72; }
.wsp-openrolessection .or-apply:hover svg{ transform:translateX(3px); }
.wsp-openrolessection .ws-finenote{ margin-top:24px; }

@container site (max-width:720px){
  .wsp-openrolessection .or-head{ margin-bottom:32px; }
  .wsp-openrolessection .or-row{ flex-wrap:wrap; gap:8px 12px; padding:18px 2px; }
  .wsp-openrolessection .or-main{ flex:1 1 100%; }
  .wsp-openrolessection .or-meta{ flex:1 1 auto; padding:0; gap:12px; }
  .wsp-openrolessection .or-apply{ margin-left:auto; }
}
@container site (max-width:460px){
  .wsp-openrolessection .or-meta{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* --- perkssection (SB_04 port) --- */
.wsp-perkssection.pk-flush{ padding-bottom:0; }
.wsp-perkssection .pk-head{ max-width:600px; margin-bottom:clamp(40px,5cqw,56px); text-align:left; }
.wsp-perkssection .pk-head .ws-h2{ margin:0; letter-spacing:-0.02em; }
.wsp-perkssection .pk-head .ws-sub{ margin-top:14px; }
.wsp-perkssection .pk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-perkssection .pk-item{ background:var(--bg); display:flex; flex-direction:column; gap:0.55rem; padding:clamp(1.7rem,3cqw,2.2rem) clamp(1.3rem,2.4cqw,2rem); }
.wsp-perkssection .pk-item:hover{ background:color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.wsp-perkssection .pk-ico{ display:inline-flex; align-items:center; font-size:1.85rem; line-height:1; margin-bottom:0.4rem; color:var(--accent); }
.wsp-perkssection .pk-ico svg{ width:30px; height:30px; }
.wsp-perkssection .pk-item-title{ margin:0; font:600 1.02rem/1.3 var(--font-head, var(--font)); color:var(--ink); transition:color 0.2s ease; }
.wsp-perkssection .pk-item:hover .pk-item-title{ color:var(--accent); }
.wsp-perkssection .pk-item-desc{ margin:0; font:400 0.9rem/1.65 var(--font); color:var(--dim); max-width:42ch; }
.wsp-perkssection .pk-culture{ position:relative; margin-top:clamp(56px,7cqw,80px); height:clamp(300px,40cqw,420px); overflow:hidden; }
.wsp-perkssection .pk-culture-img{ position:absolute; inset:0; background:linear-gradient(155deg, var(--panel) 0%, var(--panel-2) 55%, var(--bg) 100%); background-size:cover; background-position:center; }
.wsp-perkssection .pk-culture-img::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 72% 26%, var(--accent-fill) 0%, transparent 55%); }
.wsp-perkssection .pk-culture-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:clamp(32px,5cqw,56px) clamp(28px,5cqw,64px); background:linear-gradient(to right, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 45%, transparent) 58%, transparent 100%); }
.wsp-perkssection .pk-quote{ margin:0; max-width:520px; font:400 clamp(1.05rem,2.2cqw,1.28rem)/1.6 var(--font); color:var(--ink); }
.wsp-perkssection .pk-cite{ display:block; margin-top:12px; font:500 0.82rem/1.4 var(--font); letter-spacing:0.03em; color:var(--dim); font-style:normal; }
@container site (max-width:900px){
  .wsp-perkssection .pk-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-perkssection .pk-grid{ grid-template-columns:1fr; }
  .wsp-perkssection .pk-item{ padding:1.6rem 0.1rem; }
  .wsp-perkssection .pk-culture{ height:clamp(280px,72cqw,340px); }
  .wsp-perkssection .pk-culture-overlay{ padding:28px 22px; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-perkssection .pk-item-title{ transition:none; }
}

/* --- metricstrip (SB_04 port) --- */
.wsp-metricstrip.ws-sec{ padding:clamp(30px,4cqw,40px) 0; border-block:var(--bw, 1px) solid var(--hair); }
.wsp-metricstrip .ms-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; align-items:stretch; }
.wsp-metricstrip .ms-metric{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:8px clamp(14px,2cqw,28px); min-width:0; border-right:var(--bw, 1px) solid var(--hair); }
.wsp-metricstrip .ms-metric:nth-child(5n){ border-right:none; }
.wsp-metricstrip .ms-metric:last-child{ border-right:none; }
.wsp-metricstrip .ms-number{ font:800 clamp(26px,4cqw,40px)/1 var(--font-head,var(--font)); letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.wsp-metricstrip .ms-label{ font:400 clamp(12px,1.5cqw,13px)/1.4 var(--font); letter-spacing:0.01em; color:var(--dim); max-width:22ch; }
@container site (max-width:900px){
  .wsp-metricstrip .ms-grid{ grid-template-columns:repeat(3,1fr); }
  .wsp-metricstrip .ms-metric{ border-right:var(--bw, 1px) solid var(--hair); }
  .wsp-metricstrip .ms-metric:nth-child(5n){ border-right:var(--bw, 1px) solid var(--hair); }
  .wsp-metricstrip .ms-metric:nth-child(3n){ border-right:none; }
  .wsp-metricstrip .ms-metric:last-child{ border-right:none; }
}
@container site (max-width:600px){
  .wsp-metricstrip .ms-grid{ grid-template-columns:repeat(2,1fr); }
  .wsp-metricstrip .ms-metric{ border-right:var(--bw, 1px) solid var(--hair); padding:14px clamp(12px,3cqw,20px); }
  .wsp-metricstrip .ms-metric:nth-child(3n){ border-right:var(--bw, 1px) solid var(--hair); }
  .wsp-metricstrip .ms-metric:nth-child(2n){ border-right:none; }
  .wsp-metricstrip .ms-metric:last-child{ border-right:none; }
}

/* --- kpisection (SB_04 port) --- */
.wsp-kpisection .ws-in.k-split{ grid-template-columns:minmax(0,0.62fr) minmax(0,1fr); gap:0; align-items:start; }
.wsp-kpisection .k-copy{ border-right:var(--bw, 1px) solid var(--hair); padding-right:clamp(28px,4cqw,56px); padding-top:6px; }
.wsp-kpisection .k-copy .ws-kick{ margin-bottom:14px; }
.wsp-kpisection .k-copy .ws-sub{ margin-top:14px; max-width:44ch; }

.wsp-kpisection .k-grid{ display:grid; grid-template-columns:1fr 1fr; }
.wsp-kpisection .k-block{ display:flex; flex-direction:column; gap:7px;
  padding:clamp(20px,3cqw,34px) clamp(20px,3cqw,40px);
  border-right:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-kpisection .k-block:nth-child(2n){ border-right:none; }
.wsp-kpisection .k-block:nth-last-child(-n+2){ border-bottom:none; }

.wsp-kpisection .k-num{ font:800 clamp(30px,4.2cqw,50px)/1 var(--font-head, var(--font));
  letter-spacing:-0.03em; color:var(--ink); }
.wsp-kpisection .k-trend{ display:inline-flex; align-items:center; gap:5px; width:fit-content;
  font:600 11px/1.2 var(--font); letter-spacing:0.02em; padding:4px 9px; border-radius:5px; }
.wsp-kpisection .k-trend em{ font-style:normal; font-size:12px; line-height:1; }
.wsp-kpisection .k-up{ color:#22c55e; background:rgba(34,197,94,0.12); }
.wsp-kpisection .k-down{ color:var(--accent); background:var(--accent-fill, rgba(124,196,255,0.12)); }
.wsp-kpisection .k-warn{ color:#f5b342; background:rgba(245,179,66,0.12); }
.wsp-kpisection .k-bad{ color:#ef4444; background:rgba(239,68,68,0.12); }
.wsp-kpisection .k-label{ font:600 14px var(--font); color:var(--ink); margin-top:3px; }
.wsp-kpisection .k-desc{ font:400 12.5px/1.55 var(--font); color:var(--dim); }

@container site (max-width:860px){
  .wsp-kpisection .ws-in.k-split{ grid-template-columns:1fr; }
  .wsp-kpisection .k-copy{ border-right:none; padding-right:0; padding-bottom:6px; margin-bottom:26px; }
}
@container site (max-width:560px){
  .wsp-kpisection .k-grid{ grid-template-columns:1fr; }
  .wsp-kpisection .k-block{ border-right:none; }
  .wsp-kpisection .k-block:nth-last-child(-n+2){ border-bottom:var(--bw, 1px) solid var(--hair); }
  .wsp-kpisection .k-block:last-child{ border-bottom:none; }
}

/* --- codeshowcasesection (SB_04 port) --- */
.wsp-codeshowcasesection .ws-in{ width:min(860px, 90cqw); }
.wsp-codeshowcasesection .ws-shead{ margin-bottom:clamp(26px, 3.6cqw, 38px); }

.wsp-codeshowcasesection .cs-nav{ display:flex; gap:clamp(1rem, 2.4cqw, 1.8rem); position:relative;
  margin:0 0 clamp(20px, 2.8cqw, 28px); border-bottom:var(--bw, 1px) solid var(--hair); overflow-x:auto; scrollbar-width:none; }
.wsp-codeshowcasesection .cs-nav::-webkit-scrollbar{ display:none; }
.wsp-codeshowcasesection .cs-tab{ appearance:none; -webkit-appearance:none; background:transparent; border:0;
  color:var(--dim); font:500 .875rem var(--font); padding:.7rem .15rem; margin-bottom:-1px; cursor:pointer;
  position:relative; white-space:nowrap; transition:color .2s ease; }
.wsp-codeshowcasesection .cs-tab:hover{ color:var(--ink); }
.wsp-codeshowcasesection .cs-tab.on{ color:var(--accent); }
.wsp-codeshowcasesection .cs-tab::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left center; transition:transform .25s ease; }
.wsp-codeshowcasesection .cs-tab.on::after{ transform:scaleX(1); }
.wsp-codeshowcasesection .cs-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }

.wsp-codeshowcasesection .cs-panels{ position:relative; }
.wsp-codeshowcasesection .cs-panel{ display:none; }
.wsp-codeshowcasesection .cs-panel.on{ display:block; }

.wsp-codeshowcasesection .cs-term{ background:#0d1117; border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius, 10px); overflow:hidden; box-shadow:0 24px 55px -32px rgba(0,0,0,0.7); }
.wsp-codeshowcasesection .cs-bar{ display:flex; align-items:center; gap:6px; padding:12px 18px;
  background:#161b22; border-bottom:1px solid rgba(255,255,255,0.06); }
.wsp-codeshowcasesection .cs-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.wsp-codeshowcasesection .cs-dot.r{ background:#ff5f57; }
.wsp-codeshowcasesection .cs-dot.y{ background:#ffbd2e; }
.wsp-codeshowcasesection .cs-dot.g{ background:#28c840; }
.wsp-codeshowcasesection .cs-file{ margin-left:8px; font:400 .75rem var(--mono); color:#8b93a5; }

.wsp-codeshowcasesection .cs-code{ padding:24px 24px 28px; font:400 .8125rem/1.75 var(--mono);
  color:#e6edf7; overflow-x:auto; }
.wsp-codeshowcasesection .cs-ln{ display:block; white-space:pre; }
.wsp-codeshowcasesection .cs-t-kw{ color:#60a5fa; }
.wsp-codeshowcasesection .cs-t-str{ color:#4ade80; }
.wsp-codeshowcasesection .cs-t-num{ color:#f59e0b; }
.wsp-codeshowcasesection .cs-t-fn{ color:#c084fc; }
.wsp-codeshowcasesection .cs-t-prop{ color:#94d8f8; }
.wsp-codeshowcasesection .cs-t-var{ color:#e6edf7; }
.wsp-codeshowcasesection .cs-t-punct{ color:#8b93a5; }
.wsp-codeshowcasesection .cs-t-cmt{ color:#5b6472; font-style:italic; }

.wsp-codeshowcasesection .cs-foot{ display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  margin-top:clamp(20px, 2.8cqw, 28px); }
.wsp-codeshowcasesection .cs-copy{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px;
  background:transparent; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55);
  color:var(--dim); font:500 .875rem var(--font); cursor:pointer; transition:color .2s ease; }
.wsp-codeshowcasesection .cs-copy:hover{ color:var(--ink); }
.wsp-codeshowcasesection .cs-copy.ok{ color:#28c840; }
.wsp-codeshowcasesection .cs-copy svg{ width:14px; height:14px; flex-shrink:0; }
.wsp-codeshowcasesection .cs-docs{ display:inline-flex; align-items:center; gap:6px; font:500 .875rem var(--font);
  color:var(--accent); text-decoration:none; transition:opacity .2s ease; }
.wsp-codeshowcasesection .cs-docs:hover{ opacity:.72; }
.wsp-codeshowcasesection .cs-docs svg{ width:13px; height:13px; }

@container site (max-width:640px){
  .wsp-codeshowcasesection .cs-tab{ padding:.7rem .1rem; }
  .wsp-codeshowcasesection .cs-code{ font-size:.75rem; padding:18px 16px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-codeshowcasesection .cs-tab,
  .wsp-codeshowcasesection .cs-tab::after,
  .wsp-codeshowcasesection .cs-copy,
  .wsp-codeshowcasesection .cs-docs{ transition:none; }
}

/* --- milestonessection (SB_04 port) --- */
.wsp-milestonessection .mls-list{ position:relative; margin-top:6px; }
/* continuous centre rail — hair track + accent fill driven by scroll (mount) */
.wsp-milestonessection .mls-rail{ position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:var(--hair); border-radius:2px; overflow:hidden; pointer-events:none; }
.wsp-milestonessection .mls-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:var(--accent); }
/* row */
.wsp-milestonessection .mls-row{ position:relative; display:grid; grid-template-columns:1fr 64px 1fr; align-items:center;
  padding:56px 0; border-top:var(--bw, 1px) solid var(--hair); }
.wsp-milestonessection .mls-row:last-child{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-milestonessection .mls-content{ order:1; padding:0 40px; }
.wsp-milestonessection .mls-conn{ order:2; align-self:stretch; display:flex; align-items:center; justify-content:center; z-index:1; }
.wsp-milestonessection .mls-media{ order:3; }
.wsp-milestonessection .mls-row.flip .mls-content{ order:3; }
.wsp-milestonessection .mls-row.flip .mls-media{ order:1; }
/* content column */
.wsp-milestonessection .mls-year{ display:block; margin-bottom:12px; color:var(--accent);
  font:800 clamp(40px,6cqw,64px)/1 var(--font-head, var(--font)); letter-spacing:-0.04em; }
.wsp-milestonessection .mls-mtitle{ margin:0 0 10px; color:var(--ink);
  font:600 clamp(17px,2cqw,20px)/1.25 var(--font-head, var(--font)); letter-spacing:-0.01em; }
.wsp-milestonessection .mls-desc{ margin:0; max-width:42ch; color:var(--dim); font:400 15px/1.7 var(--font); }
/* connector dot */
.wsp-milestonessection .mls-dot{ position:relative; width:14px; height:14px; border-radius:50%; background:var(--accent);
  transform:scale(1); transition:transform 200ms var(--ease-pop, ease-out); }
.wsp-milestonessection .mls-dot::before{ content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); opacity:.55;
  transition:opacity 200ms linear, transform 200ms var(--ease-pop, ease-out); }
.wsp-milestonessection .mls-dot.on{ transform:scale(1.14); }
.wsp-milestonessection .mls-dot.on::before{ opacity:1; transform:scale(1.16); }
/* media tile — real image, or an accent placeholder that echoes the year */
.wsp-milestonessection .mls-media{ position:relative; aspect-ratio:4/3; border-radius:var(--radius,12px);
  border:var(--bw, 1px) solid var(--hair); overflow:hidden; background:var(--panel); }
.wsp-milestonessection .mls-img{ display:block; width:100%; height:100%; object-fit:cover; }
.wsp-milestonessection .mls-ph{ position:absolute; inset:0; display:grid; place-items:center; }
.wsp-milestonessection .mls-ph b{ font:800 clamp(46px,9cqw,92px)/1 var(--font-head, var(--font));
  letter-spacing:-0.04em; color:color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-milestonessection .mls-ph.p0{ background:radial-gradient(80% 70% at 22% 16%, var(--accent-fill, rgba(124,196,255,.12)), transparent 70%), var(--panel); }
.wsp-milestonessection .mls-ph.p1{ background:linear-gradient(135deg, var(--accent-fill, rgba(124,196,255,.12)), color-mix(in srgb, var(--accent2, var(--accent)) 14%, transparent)), var(--panel); }
.wsp-milestonessection .mls-ph.p2{ background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 0 2px, transparent 2px 16px), var(--panel); }
.wsp-milestonessection .mls-ph.p3{ background:radial-gradient(90% 80% at 82% 84%, color-mix(in srgb, var(--accent2, var(--accent)) 20%, transparent), transparent 72%), var(--panel); }
/* stack on narrow containers — rail + connector fold away, media widens */
@container site (max-width:560px){
  .wsp-milestonessection .mls-rail{ display:none; }
  .wsp-milestonessection .mls-row{ grid-template-columns:1fr; padding:34px 0; gap:22px; }
  .wsp-milestonessection .mls-row.flip .mls-content,
  .wsp-milestonessection .mls-row.flip .mls-media,
  .wsp-milestonessection .mls-content,
  .wsp-milestonessection .mls-media{ order:0; }
  .wsp-milestonessection .mls-conn{ display:none; }
  .wsp-milestonessection .mls-content{ padding:0; }
  .wsp-milestonessection .mls-desc{ max-width:none; }
  .wsp-milestonessection .mls-media{ aspect-ratio:16/9; }
}

/* --- socialwall (SB_04 port) --- */
.wsp-socialwall .sw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px;
  --sw-h:clamp(400px,58cqh,560px); }
.wsp-socialwall .sw-col{ position:relative; height:var(--sw-h); overflow:hidden;
  padding:0 clamp(12px,1.8cqw,26px); border-right:var(--bw, 1px) solid var(--hair);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.wsp-socialwall .sw-col:first-child{ padding-left:0; }
.wsp-socialwall .sw-col:last-child{ padding-right:0; border-right:none; }
.wsp-socialwall .sw-track{ display:flex; flex-direction:column; gap:14px; will-change:transform; }

.wsp-socialwall .sw-post{ background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius);
  padding:15px 17px; display:flex; flex-direction:column; gap:11px; transition:transform .18s ease; }
.wsp-socialwall .sw-post:hover{ background:var(--panel-2); transform:translateY(-2px); }

.wsp-socialwall .sw-phead{ display:flex; align-items:center; gap:10px; }
.wsp-socialwall .sw-net{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--ink); }
.wsp-socialwall .sw-net svg{ width:16px; height:16px; }
.wsp-socialwall .sw-user{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.wsp-socialwall .sw-name{ font:600 13px/1.25 var(--font); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsp-socialwall .sw-handle{ font:400 12px/1.2 var(--font); font-style:normal; color:var(--dim); }

.wsp-socialwall .sw-text{ margin:0; font:400 13.5px/1.62 var(--font); color:var(--dim); }

.wsp-socialwall .sw-stats{ display:flex; gap:18px; padding-top:10px; border-top:var(--bw, 1px) solid var(--hair); }
.wsp-socialwall .sw-stat{ display:inline-flex; align-items:center; gap:6px;
  font:500 12px/1 var(--font); color:var(--faint); }
.wsp-socialwall .sw-stat svg{ width:14px; height:14px; }

/* small containers: one calm static column, EVERY post visible, no drift */
@container site (max-width:900px){
  .wsp-socialwall .sw-grid{ grid-template-columns:1fr; gap:14px; margin-top:34px; }
  .wsp-socialwall .sw-col{ height:auto; overflow:visible; padding:0; border-right:none;
    -webkit-mask-image:none; mask-image:none; }
  .wsp-socialwall .sw-track{ transform:none !important; gap:14px; }
  .wsp-socialwall .sw-dup{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-socialwall .sw-col{ height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .wsp-socialwall .sw-track{ transform:none !important; }
  .wsp-socialwall .sw-dup{ display:none; }
  .wsp-socialwall .sw-post{ transition:none; }
}

/* --- presslogossection (SB_04 port) --- */
.wsp-presslogossection .ws-kick{ margin-bottom:14px; }
.wsp-presslogossection .ws-shead{ margin-bottom:clamp(36px,5cqw,52px); }

.wsp-presslogossection .pls-logos{ display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; width:100%; }
.wsp-presslogossection .pls-logo{ flex:1 1 0; min-width:120px; display:flex; align-items:center; justify-content:center;
  padding:20px 32px; border-right:var(--bw, 1px) solid var(--hair); }
.wsp-presslogossection .pls-logo:last-child{ border-right:none; }
.wsp-presslogossection .pls-lname{ font:700 clamp(15px,1.6cqw,19px)/1 var(--font-head, var(--font)); letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; user-select:none; transition:color .2s ease; }
.wsp-presslogossection .pls-logo:hover .pls-lname{ color:var(--ink); }

.wsp-presslogossection .pls-quotes{ display:grid; grid-template-columns:1fr 1fr; column-gap:0; row-gap:clamp(24px,3cqw,34px);
  width:100%; margin-top:clamp(36px,5cqw,52px); padding-top:clamp(32px,4cqw,48px); border-top:var(--bw, 1px) solid var(--hair); }
.wsp-presslogossection .pls-qcol{ margin:0; display:flex; flex-direction:column; gap:18px; text-align:left;
  padding-right:clamp(24px,3cqw,48px); border-right:var(--bw, 1px) solid var(--hair); }
.wsp-presslogossection .pls-qcol:nth-child(even){ padding-right:0; padding-left:clamp(24px,3cqw,48px); border-right:none; }
.wsp-presslogossection .pls-qcol:last-child{ border-right:none; }
.wsp-presslogossection .pls-q{ margin:0; font:italic 400 clamp(15px,1.5cqw,17px)/1.7 var(--font); color:var(--dim); }
.wsp-presslogossection .pls-qcite{ font:700 11px var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); font-style:normal; opacity:.85; }

.wsp-presslogossection .pls-foot{ width:100%; text-align:center; margin-top:clamp(30px,4cqw,48px); }
.wsp-presslogossection .pls-all{ display:inline-flex; align-items:center; gap:7px; font:500 14px var(--font);
  color:var(--dim); text-decoration:none; letter-spacing:.02em; transition:color .2s ease; cursor:pointer; }
.wsp-presslogossection .pls-all:hover{ color:var(--ink); }
.wsp-presslogossection .pls-arrow{ transition:transform .2s ease; }
.wsp-presslogossection .pls-all:hover .pls-arrow{ transform:translateX(3px); }

@container site (max-width:720px){
  .wsp-presslogossection .pls-logo{ flex:0 0 50%; padding:16px 20px; }
  .wsp-presslogossection .pls-logo:nth-child(2n){ border-right:none; }
  .wsp-presslogossection .pls-quotes{ grid-template-columns:1fr; row-gap:0; }
  .wsp-presslogossection .pls-qcol,
  .wsp-presslogossection .pls-qcol:nth-child(even){ padding:0 0 28px; border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
  .wsp-presslogossection .pls-qcol:last-child{ border-bottom:none; padding-bottom:0; }
}
@container site (max-width:440px){
  .wsp-presslogossection .pls-logo{ padding:14px 12px; }
}

/* --- pricingenterprise (SB_04 port) --- */
.wsp-pricingenterprise .pen-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:start; width:100%; }
.wsp-pricingenterprise .pen-self{ padding:0 clamp(26px,3.4cqw,48px) 0 0; border-right:var(--bw, 1px) solid var(--hair);
  display:flex; flex-direction:column; }
.wsp-pricingenterprise .pen-ent{ padding:0 0 0 clamp(26px,3.4cqw,48px); }

.wsp-pricingenterprise .pen-collabel{ margin:0 0 24px; font:600 11px/1 var(--mono); letter-spacing:2px;
  text-transform:uppercase; color:var(--faint); }

.wsp-pricingenterprise .pen-plan{ padding:22px 0; border-bottom:var(--bw, 1px) solid var(--hair);
  display:flex; flex-direction:column; gap:9px; }
.wsp-pricingenterprise .pen-plan:first-of-type{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-pricingenterprise .pen-plan--hot{ background:var(--accent-fill); margin:0 -16px; padding:22px 16px;
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius:var(--radius); }
.wsp-pricingenterprise .pen-plantop{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.wsp-pricingenterprise .pen-planname{ font:600 15px/1 var(--font); color:var(--ink); }
.wsp-pricingenterprise .pen-price{ display:flex; align-items:baseline; gap:3px; white-space:nowrap; }
.wsp-pricingenterprise .pen-amount{ font:700 clamp(20px,2.6cqw,24px)/1 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.wsp-pricingenterprise .pen-per{ font:400 13px var(--font); color:var(--dim); }
.wsp-pricingenterprise .pen-desc{ margin:0; font:400 14px/1.55 var(--font); color:var(--dim); }
.wsp-pricingenterprise .pen-plancta{ align-self:flex-start; margin-top:2px; display:inline-flex; align-items:center;
  gap:6px; font:600 13px var(--font); color:var(--ink); text-decoration:none; letter-spacing:.2px;
  transition:color .16s ease; cursor:pointer; }
.wsp-pricingenterprise .pen-plancta::after{ content:'\\2192'; font-size:14px; }
.wsp-pricingenterprise .pen-plancta:hover{ color:var(--accent); }
.wsp-pricingenterprise .pen-plancta.accent{ color:var(--accent); }
.wsp-pricingenterprise .pen-plancta.accent:hover{ color:var(--ink); }

.wsp-pricingenterprise .pen-entbody{ display:flex; flex-direction:column; gap:18px; }
.wsp-pricingenterprise .pen-enth{ margin:0; font:700 clamp(18px,2.4cqw,22px)/1.25 var(--font-head, var(--font));
  color:var(--ink); letter-spacing:-0.02em; }
.wsp-pricingenterprise .pen-entintro{ margin:0; font:400 15px/1.65 var(--font); color:var(--dim); }

.wsp-pricingenterprise .pen-feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.wsp-pricingenterprise .pen-feat{ display:flex; align-items:flex-start; gap:14px; padding:14px 0;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-pricingenterprise .pen-feat:first-child{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-pricingenterprise .pen-featico{ flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); position:relative; }
.wsp-pricingenterprise .pen-featico::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--accent); }
.wsp-pricingenterprise .pen-feattext{ display:flex; flex-direction:column; gap:3px; }
.wsp-pricingenterprise .pen-feat strong{ font:600 14px/1.3 var(--font); color:var(--ink); }
.wsp-pricingenterprise .pen-feat span{ font:400 13px/1.5 var(--font); color:var(--dim); }

.wsp-pricingenterprise .pen-entbody .ws-btn{ align-self:flex-start; }

.wsp-pricingenterprise .pen-logos{ display:flex; flex-direction:column; gap:12px; }
.wsp-pricingenterprise .pen-logoslabel{ margin:0; font:600 11px/1 var(--mono); letter-spacing:2px;
  text-transform:uppercase; color:var(--faint); opacity:.85; }
.wsp-pricingenterprise .pen-logosgrid{ display:flex; flex-wrap:wrap; gap:8px; }
.wsp-pricingenterprise .pen-logo{ padding:6px 14px; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:6px; font:700 12px/1 var(--font); color:var(--dim); letter-spacing:.6px; text-transform:uppercase; }

@container site (max-width:860px){
  .wsp-pricingenterprise .pen-grid{ grid-template-columns:1fr; }
  .wsp-pricingenterprise .pen-self{ padding:0 0 40px; border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
  .wsp-pricingenterprise .pen-ent{ padding:40px 0 0; }
}

/* --- pricingusage (SB_04 port) --- */
.wsp-pricingusage .pru-calc{ background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); overflow:hidden; margin-top:clamp(30px,4cqw,44px); }
.wsp-pricingusage .pru-res{ padding:clamp(20px,3cqw,28px) clamp(20px,3.4cqw,32px); border-bottom:var(--bw, 1px) solid var(--hair); display:flex; flex-direction:column; gap:16px; }
.wsp-pricingusage .pru-res__meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wsp-pricingusage .pru-res__name{ font:600 15px var(--font); color:var(--ink); }
.wsp-pricingusage .pru-res__contrib{ font:700 15px var(--font); color:var(--accent); font-variant-numeric:tabular-nums; min-width:3rem; text-align:right; }
.wsp-pricingusage .pru-tiers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.wsp-pricingusage .pru-tier{ padding:9px 8px; background:var(--panel-2); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .5); color:var(--dim); font:500 13px var(--font); cursor:pointer; text-align:center; line-height:1.3; transition:color .18s ease, border-color .18s ease, transform .12s ease; }
.wsp-pricingusage .pru-tier:hover{ border-color:color-mix(in srgb, var(--ink) 22%, transparent); color:var(--ink); }
.wsp-pricingusage .pru-tier:active{ transform:translateY(1px); }
.wsp-pricingusage .pru-tier:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-pricingusage .pru-tier.is-active{ background:var(--accent-fill); border-color:color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent); }
.wsp-pricingusage .pru-tier__note{ display:block; font:400 11px var(--font); opacity:.7; letter-spacing:.02em; }
.wsp-pricingusage .pru-bar{ height:3px; border-radius:2px; overflow:hidden; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.wsp-pricingusage .pru-bar__fill{ height:100%; width:100%; transform-origin:left center; background:var(--accent); border-radius:2px; transition:transform .3s ease; }
.wsp-pricingusage .pru-total{ padding:clamp(22px,3cqw,32px) clamp(20px,3.4cqw,32px); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-pricingusage .pru-total__meta{ display:flex; flex-direction:column; gap:3px; }
.wsp-pricingusage .pru-total__label{ font:600 15px var(--font); color:var(--ink); }
.wsp-pricingusage .pru-total__note{ font:400 12.5px var(--font); color:var(--dim); opacity:.8; }
.wsp-pricingusage .pru-total__price{ display:flex; align-items:baseline; gap:2px; color:var(--ink); font-variant-numeric:tabular-nums; }
.wsp-pricingusage .pru-total__cur{ font:700 22px var(--font); align-self:flex-start; margin-top:6px; }
.wsp-pricingusage .pru-total__amt{ font:800 clamp(40px,7cqw,56px)/1 var(--font); letter-spacing:-.03em; transition:color .25s ease; }
.wsp-pricingusage .pru-total__per{ font:400 15px var(--font); color:var(--dim); }
.wsp-pricingusage .pru-actions{ padding:clamp(20px,3cqw,28px) clamp(20px,3.4cqw,32px); margin-top:0; }
@container site (max-width:520px){
  .wsp-pricingusage .pru-tiers{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wsp-pricingusage .pru-actions{ flex-direction:column; }
  .wsp-pricingusage .pru-actions .ws-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-pricingusage .pru-bar__fill, .wsp-pricingusage .pru-total__amt, .wsp-pricingusage .pru-tier{ transition:none; }
}

/* --- pricingfreemium (SB_04 port) --- */
.wsp-pricingfreemium .ws-shead{ margin-bottom:clamp(30px,3.5cqw,44px); }

.wsp-pricingfreemium .pf-free{ position:relative; overflow:hidden;
  background:var(--panel); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius:calc(var(--radius, 12px) + 2px); padding:clamp(30px,4.5cqw,48px) clamp(20px,3.5cqw,40px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.wsp-pricingfreemium .pf-free::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%); }
.wsp-pricingfreemium .pf-free > *{ position:relative; z-index:1; }

.wsp-pricingfreemium .pf-badge{ display:inline-block; padding:5px 14px; border-radius:999px;
  background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color:var(--accent); font:600 11px var(--mono); letter-spacing:1.4px; text-transform:uppercase; }

.wsp-pricingfreemium .pf-price{ display:flex; align-items:flex-start; justify-content:center; gap:8px; line-height:1; }
.wsp-pricingfreemium .pf-cur{ font:700 clamp(20px,3cqw,28px) var(--font-head, var(--font)); color:var(--ink); margin-top:8px; }
.wsp-pricingfreemium .pf-amt{ font:800 clamp(52px,10cqw,76px) var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.04em; line-height:1; font-variant-numeric:tabular-nums; }
.wsp-pricingfreemium .pf-per{ align-self:flex-end; margin-bottom:10px; font:400 15px var(--font); color:var(--dim); }

.wsp-pricingfreemium .pf-desc{ max-width:380px; font:400 15px/1.6 var(--font); color:var(--dim); }

.wsp-pricingfreemium .pf-feats{ list-style:none; margin:2px auto 0; padding:0; width:100%; max-width:420px;
  display:grid; grid-template-columns:1fr 1fr; gap:11px 30px; text-align:left; }
.wsp-pricingfreemium .pf-feat{ display:flex; align-items:center; gap:10px; font:400 14px var(--font); color:var(--dim); }
.wsp-pricingfreemium .pf-check{ position:relative; flex:none; width:16px; height:16px; border-radius:50%;
  background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.32); }
.wsp-pricingfreemium .pf-check::after{ content:''; position:absolute; left:4px; top:4px;
  width:6px; height:6px; border-radius:50%; background:#22c55e; }

.wsp-pricingfreemium .pf-free .ws-btn{ min-width:220px; max-width:100%; justify-content:center; margin-top:4px; }

.wsp-pricingfreemium .pf-divider{ display:flex; align-items:center; gap:18px;
  margin:clamp(28px,3.5cqw,44px) 0 clamp(22px,3cqw,36px); }
.wsp-pricingfreemium .pf-divider::before, .wsp-pricingfreemium .pf-divider::after{ content:'';
  flex:1; height:1px; background:var(--hair); }
.wsp-pricingfreemium .pf-divider-t{ white-space:nowrap; font:600 12px var(--mono);
  letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }

.wsp-pricingfreemium .pf-paid{ display:grid; grid-template-columns:1fr 1fr; text-align:left; }
.wsp-pricingfreemium .pf-plan{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; padding:6px 0; }
.wsp-pricingfreemium .pf-plan:first-child{ padding-right:clamp(20px,3cqw,34px); }
.wsp-pricingfreemium .pf-plan:last-child{ padding-left:clamp(20px,3cqw,34px); border-left:var(--bw, 1px) solid var(--hair); }
.wsp-pricingfreemium .pf-plan-top{ display:flex; flex-direction:column; gap:5px; }
.wsp-pricingfreemium .pf-plan-name{ font:600 12px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.wsp-pricingfreemium .pf-plan-price{ display:flex; align-items:baseline; gap:6px; }
.wsp-pricingfreemium .pf-plan-amt{ font:700 clamp(26px,4cqw,32px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.02em; }
.wsp-pricingfreemium .pf-plan-per{ font:400 13px var(--font); color:var(--dim); }
.wsp-pricingfreemium .pf-plan-up{ display:flex; flex-direction:column; gap:5px; font:400 14px/1.55 var(--font); color:var(--dim); }
.wsp-pricingfreemium .pf-plan-uplabel{ font:600 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); }
.wsp-pricingfreemium .pf-plan .ws-btn{ margin-top:2px; }

@container site (max-width:560px){
  .wsp-pricingfreemium .pf-paid{ grid-template-columns:1fr; }
  .wsp-pricingfreemium .pf-plan:first-child{ padding-right:0; padding-bottom:22px; }
  .wsp-pricingfreemium .pf-plan:last-child{ padding-left:0; padding-top:22px; border-left:none; border-top:var(--bw, 1px) solid var(--hair); }
}
@container site (max-width:460px){
  .wsp-pricingfreemium .pf-feats{ grid-template-columns:1fr; max-width:280px; }
}

/* --- trustsection (SB_04 port) --- */
.wsp-trustsection .ws-in .ws-shead.left{ text-align:left; margin-inline:0; max-width:min(560px,100%);
  margin-bottom:clamp(40px,5cqw,60px); }
.wsp-trustsection .ws-in .ws-shead.left .ws-kick{ margin-bottom:14px; }

.wsp-trustsection .trs-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-trustsection .trs-col{ padding:clamp(34px,3.4cqw,48px) clamp(24px,2.6cqw,40px); min-width:0; }
.wsp-trustsection .trs-col:not(:last-child){ border-right:var(--bw, 1px) solid var(--hair); }
.wsp-trustsection .trs-col:first-child{ padding-left:0; }
.wsp-trustsection .trs-col:last-child{ padding-right:0; }

/* Col 1 — rating + awards */
.wsp-trustsection .trs-rating{ margin-bottom:clamp(28px,3.2cqw,40px); }
.wsp-trustsection .trs-score{ font:700 clamp(3rem,6cqw,4rem)/1 var(--font-head,var(--font));
  color:var(--ink); letter-spacing:-0.03em; margin-bottom:10px; font-variant-numeric:tabular-nums; }
.wsp-trustsection .trs-stars{ display:flex; gap:4px; margin-bottom:9px; color:#f5b731; font-size:15px; line-height:1; }
.wsp-trustsection .trs-ratelab{ margin:0; font:500 0.72rem/1.4 var(--font); letter-spacing:0.05em;
  text-transform:uppercase; color:var(--faint); }
.wsp-trustsection .trs-awards{ display:flex; flex-direction:column; gap:10px; }
.wsp-trustsection .trs-award{ display:flex; align-items:center; gap:13px; padding:13px 15px;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,10px);
  transition:transform .2s ease, border-color .2s ease; }
.wsp-trustsection .trs-award:hover{ transform:translateY(-1px); border-color:var(--accent-dim,var(--hair)); }
.wsp-trustsection .trs-award-ico{ display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; }
.wsp-trustsection .trs-award-ico svg{ width:20px; height:20px; }
.wsp-trustsection .trs-award-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wsp-trustsection .trs-award-name{ font:600 0.82rem/1.3 var(--font); color:var(--ink); }
.wsp-trustsection .trs-award-meta{ font:400 0.72rem/1.3 var(--font); color:var(--faint); font-style:normal; }

/* Col 2 — testimonials */
.wsp-trustsection .trs-quotes{ display:flex; flex-direction:column; gap:clamp(24px,3cqw,34px); }
.wsp-trustsection .trs-quote{ display:flex; flex-direction:column; gap:14px; margin:0; }
.wsp-trustsection .trs-qtext{ margin:0; font:italic 400 0.92rem/1.7 var(--font); color:var(--dim); }
.wsp-trustsection .trs-qwho{ display:flex; align-items:center; gap:12px; }
.wsp-trustsection .trs-av{ width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; text-transform:uppercase;
  font:700 13px var(--font-head,var(--font)); color:var(--accent);
  background:var(--accent-fill); border:var(--bw, 1px) solid var(--hair); }
.wsp-trustsection .trs-qinfo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wsp-trustsection .trs-qname{ font:600 0.83rem/1.3 var(--font); color:var(--ink); }
.wsp-trustsection .trs-qrole{ font:400 0.74rem/1.3 var(--font); color:var(--faint); font-style:normal; }

/* Col 3 — metrics (2x2) */
.wsp-trustsection .trs-metrics{ display:grid; grid-template-columns:1fr 1fr; }
.wsp-trustsection .trs-metric{ padding:22px 0; border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-trustsection .trs-metric:nth-child(odd){ padding-right:26px; border-right:var(--bw, 1px) solid var(--hair); }
.wsp-trustsection .trs-metric:nth-child(even){ padding-left:26px; }
.wsp-trustsection .trs-metric:nth-child(-n+2){ padding-top:0; }
.wsp-trustsection .trs-metric:nth-last-child(-n+2){ border-bottom:none; }
.wsp-trustsection .trs-metric-num{ font:700 clamp(1.9rem,3.4cqw,2.4rem)/1 var(--font-head,var(--font));
  color:var(--ink); letter-spacing:-0.02em; margin-bottom:6px; font-variant-numeric:tabular-nums; }
.wsp-trustsection .trs-metric-lab{ font:400 0.76rem/1.4 var(--font); color:var(--dim); }

/* Logo strip */
.wsp-trustsection .trs-logostrip{ margin-top:clamp(40px,5cqw,64px); border-top:var(--bw, 1px) solid var(--hair);
  padding-top:clamp(28px,3.4cqw,40px); }
.wsp-trustsection .trs-logolab{ margin:0 0 24px; font:600 0.7rem/1.4 var(--mono); letter-spacing:0.16em;
  text-transform:uppercase; color:var(--faint); text-align:center; }
.wsp-trustsection .trs-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.wsp-trustsection .trs-logo{ padding:8px clamp(16px,2.4cqw,28px); font:700 0.82rem/1 var(--font);
  letter-spacing:0.06em; text-transform:uppercase; color:var(--dim); opacity:0.7;
  border-right:var(--bw, 1px) solid var(--hair); white-space:nowrap; }
.wsp-trustsection .trs-logo:last-child{ border-right:none; }

@container site (max-width:820px){
  .wsp-trustsection .trs-grid{ grid-template-columns:1fr; }
  .wsp-trustsection .trs-col{ padding:clamp(30px,7cqw,40px) 0; }
  .wsp-trustsection .trs-col:not(:last-child){ border-right:none; border-bottom:var(--bw, 1px) solid var(--hair); }
}
@container site (max-width:480px){
  .wsp-trustsection .trs-logo{ padding:7px 15px; font-size:0.75rem; }
}

/* --- testimonialcarousel (SB_04 port) --- */
.wsp-testimonialcarousel .tcc-stage{ overflow:hidden; }
.wsp-testimonialcarousel .tcc-track{ display:flex; will-change:transform;
  transition:transform 520ms cubic-bezier(.4,0,.2,1); }
.wsp-testimonialcarousel .tcc-slide{ flex:0 0 100%; min-width:0; display:flex; flex-direction:column;
  padding:34px clamp(18px,3.4cqw,38px); border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-testimonialcarousel .tcc-qmark{ display:block; margin-bottom:6px; line-height:.5;
  font:800 60px var(--font-head, var(--font)); color:var(--accent); opacity:.5; }
.wsp-testimonialcarousel .tcc-quote{ flex:1; margin:0 0 26px; font:400 clamp(14px,1.5cqw,16px)/1.72 var(--font);
  color:var(--dim); }
.wsp-testimonialcarousel .tcc-author{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.wsp-testimonialcarousel .tcc-avatar{ flex:none; width:44px; height:44px; border-radius:50%; display:grid;
  place-items:center; font:600 14px var(--font); letter-spacing:.02em; color:var(--accent-text, #04121a);
  background:var(--accent); background-image:var(--accent-grad, none); user-select:none; }
.wsp-testimonialcarousel .tcc-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.wsp-testimonialcarousel .tcc-name{ font:600 14px var(--font); color:var(--ink); }
.wsp-testimonialcarousel .tcc-role{ font:400 12.5px var(--font); color:var(--faint); font-style:normal; }
.wsp-testimonialcarousel .tcc-controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:38px; }
.wsp-testimonialcarousel .tcc-arrow{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--dim);
  cursor:pointer; transition:color 160ms ease, transform 160ms ease; }
.wsp-testimonialcarousel .tcc-arrow:hover{ color:var(--ink);
  background:color-mix(in srgb, var(--ink) 9%, transparent);
  border-color:color-mix(in srgb, var(--accent) 42%, transparent); }
.wsp-testimonialcarousel .tcc-arrow:active{ transform:scale(.93); }
.wsp-testimonialcarousel .tcc-arrow svg{ width:18px; height:18px; }
.wsp-testimonialcarousel .tcc-arrow.tcc-prev svg{ transform:rotate(180deg); }
.wsp-testimonialcarousel .tcc-dots{ display:flex; align-items:center; gap:9px; }
.wsp-testimonialcarousel .tcc-dot{ width:7px; height:7px; padding:0; border:none; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 22%, transparent); cursor:pointer;
  transition:transform 160ms ease, opacity 160ms ease; }
.wsp-testimonialcarousel .tcc-dot.is-on{ background:var(--accent); transform:scale(1.35); }
@container site (min-width:721px){
  .wsp-testimonialcarousel .tcc-slide{ flex-basis:33.3333%; border-right:var(--bw, 1px) solid var(--hair); }
  .wsp-testimonialcarousel .tcc-slide:nth-child(3n){ border-right:none; }
}
@container site (max-width:560px){
  .wsp-testimonialcarousel .tcc-qmark{ font-size:50px; }
  .wsp-testimonialcarousel .tcc-controls{ gap:16px; margin-top:30px; }
}

/* --- quoterotator (SB_04 port) --- */
.wsp-quoterotator .qr-inner{ display:flex; flex-direction:column; align-items:center; gap:clamp(38px,6cqw,56px); }
.wsp-quoterotator .qr-label{ margin:0; }
.wsp-quoterotator .qr-stage{ position:relative; width:100%; text-align:center; min-height:clamp(240px,42cqh,300px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.wsp-quoterotator .qr-deco{ position:absolute; top:clamp(-42px,-4cqw,-18px); left:50%; transform:translateX(-50%);
  z-index:0; font:400 clamp(120px,20cqw,168px)/1 var(--font-head, Georgia, "Times New Roman", serif);
  color:var(--accent); opacity:.10; pointer-events:none; user-select:none; }
.wsp-quoterotator .qr-quotes{ position:relative; width:100%; z-index:1; }
.wsp-quoterotator .qr-quote{ position:absolute; top:0; left:0; width:100%; margin:0; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; gap:16px; transition:opacity .5s ease; }
.wsp-quoterotator .qr-quote.on{ position:relative; opacity:1; pointer-events:auto; }
.wsp-quoterotator .qr-p{ margin:0; font:400 clamp(15px,2.2cqw,20px)/1.75 var(--font); color:var(--dim); }
.wsp-quoterotator .qr-lead{ font-weight:500; font-size:clamp(17px,2.6cqw,24px); line-height:1.55; color:var(--ink); }
.wsp-quoterotator .qr-tabs{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:clamp(16px,3cqw,32px); }
.wsp-quoterotator .qr-tab{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:0;
  background:none; border:0; cursor:pointer; color:inherit; font:inherit; transition:opacity .2s ease; }
.wsp-quoterotator .qr-tab:hover{ opacity:.82; }
.wsp-quoterotator .qr-av{ display:grid; place-items:center; width:clamp(46px,7cqw,56px); height:clamp(46px,7cqw,56px);
  border-radius:50%; border:2px solid var(--hair); background:color-mix(in srgb, var(--ink) 6%, transparent);
  color:var(--dim); font:600 clamp(14px,1.6cqw,16px) var(--font); letter-spacing:.02em;
  transition:border-color .25s ease, transform .25s ease, color .25s ease, background .25s ease; }
.wsp-quoterotator .qr-tab.on .qr-av{ border-color:var(--accent); background:var(--accent-fill); color:var(--ink); transform:scale(1.08); }
.wsp-quoterotator .qr-tabname{ font:500 11px var(--font); letter-spacing:.03em; color:var(--dim); transition:color .25s ease; }
.wsp-quoterotator .qr-tab.on .qr-tabname{ color:var(--ink); }
@container site (max-width:640px){
  .wsp-quoterotator .qr-inner{ gap:36px; }
  .wsp-quoterotator .qr-stage{ min-height:clamp(300px,64cqh,380px); }
  .wsp-quoterotator .qr-deco{ font-size:clamp(96px,26cqw,128px); top:-14px; }
  .wsp-quoterotator .qr-tabs{ gap:16px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-quoterotator .qr-quote{ transition:none; }
  .wsp-quoterotator .qr-av{ transition:none; }
}

/* --- customerspotlight (SB_04 port) --- */
.wsp-customerspotlight .csp-label{ margin-bottom:clamp(34px,4.4cqw,52px); }
.wsp-customerspotlight .csp-main{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start; }
.wsp-customerspotlight .csp-story{ display:flex; flex-direction:column; gap:20px; padding-right:clamp(28px,5cqw,64px); border-right:var(--bw, 1px) solid var(--hair); }
.wsp-customerspotlight .csp-company{ font:800 clamp(30px,5.2cqw,52px)/1 var(--font-head,var(--font)); color:var(--ink); letter-spacing:-0.03em; }
.wsp-customerspotlight .csp-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:500 13px var(--font); color:var(--dim); }
.wsp-customerspotlight .csp-sep{ opacity:0.4; }
.wsp-customerspotlight .csp-result{ margin:0; font:700 clamp(18px,2.6cqw,26px)/1.28 var(--font-head,var(--font)); color:var(--accent); letter-spacing:-0.02em; }
.wsp-customerspotlight .csp-body{ display:flex; flex-direction:column; gap:15px; }
.wsp-customerspotlight .csp-body p{ margin:0; font:400 15px/1.75 var(--font); color:var(--dim); }
.wsp-customerspotlight .csp-cta{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:4px; padding:12px 0; font:600 14px var(--font); color:var(--ink); text-decoration:none; cursor:pointer; border-bottom:var(--bw, 1px) solid var(--hair); transition:color 160ms ease-out, border-color 160ms ease-out; }
.wsp-customerspotlight .csp-cta svg{ width:15px; height:15px; transition:transform 160ms ease-out; }
.wsp-customerspotlight .csp-cta:hover{ color:var(--accent); border-color:var(--accent); }
.wsp-customerspotlight .csp-cta:hover svg{ transform:translateX(4px); }

.wsp-customerspotlight .csp-visual{ padding-left:clamp(28px,5cqw,64px); }
.wsp-customerspotlight .csp-frame{ border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; background:var(--panel); background-image:var(--surface-grad,none); }
.wsp-customerspotlight .csp-photo{ position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; }
.wsp-customerspotlight .csp-photo-img{ width:100%; height:100%; object-fit:cover; display:block; }
.wsp-customerspotlight .csp-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg, var(--accent-fill), transparent 62%), var(--panel-2,var(--panel)); }
.wsp-customerspotlight .csp-ph b{ font:800 clamp(44px,9cqw,88px) var(--font-head,var(--font)); color:var(--accent); opacity:0.5; letter-spacing:-0.03em; }
.wsp-customerspotlight .csp-stats{ display:flex; border-top:var(--bw, 1px) solid var(--hair); }
.wsp-customerspotlight .csp-stat{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; padding:20px 10px; text-align:center; }
.wsp-customerspotlight .csp-stat + .csp-stat{ border-left:var(--bw, 1px) solid var(--hair); }
.wsp-customerspotlight .csp-sv{ display:inline-flex; align-items:baseline; gap:3px; font:800 clamp(20px,2.8cqw,28px) var(--font-head,var(--font)); color:var(--accent); letter-spacing:-0.02em; line-height:1; }
.wsp-customerspotlight .csp-sv b{ font-weight:800; }
.wsp-customerspotlight .csp-unit{ font-size:0.5em; font-weight:600; font-style:normal; }
.wsp-customerspotlight .csp-sl{ font:500 11px var(--font); color:var(--dim); line-height:1.3; }

.wsp-customerspotlight .csp-also{ margin-top:clamp(40px,5cqw,64px); border-top:var(--bw, 1px) solid var(--hair); padding-top:36px; }
.wsp-customerspotlight .csp-also-label{ font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin-bottom:22px; }
.wsp-customerspotlight .csp-also-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.wsp-customerspotlight .csp-card{ display:flex; flex-direction:column; gap:8px; padding:2px 24px 2px 0; text-decoration:none; cursor:pointer; }
.wsp-customerspotlight .csp-card + .csp-card{ border-left:var(--bw, 1px) solid var(--hair); padding-left:24px; }
.wsp-customerspotlight .csp-card-co{ font:700 12px var(--font); letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); transition:color 160ms ease-out; }
.wsp-customerspotlight .csp-card-r{ font:400 13.5px/1.45 var(--font); color:var(--dim); }
.wsp-customerspotlight .csp-card-ar{ margin-top:2px; font-size:16px; line-height:1; color:var(--dim); transition:color 160ms ease-out, transform 160ms ease-out; }
.wsp-customerspotlight .csp-card:hover .csp-card-co{ color:var(--accent); }
.wsp-customerspotlight .csp-card:hover .csp-card-ar{ color:var(--accent); transform:translateX(4px); }

@container site (max-width:760px){
  .wsp-customerspotlight .csp-main{ grid-template-columns:1fr; gap:42px; }
  .wsp-customerspotlight .csp-story{ padding-right:0; border-right:none; }
  .wsp-customerspotlight .csp-visual{ padding-left:0; }
  .wsp-customerspotlight .csp-photo{ aspect-ratio:4/3; }
  .wsp-customerspotlight .csp-also-grid{ grid-template-columns:1fr 1fr; }
  .wsp-customerspotlight .csp-card{ padding:18px 0; }
  .wsp-customerspotlight .csp-card + .csp-card{ border-left:none; border-top:var(--bw, 1px) solid var(--hair); padding-left:0; }
}
@container site (max-width:480px){
  .wsp-customerspotlight .csp-also-grid{ grid-template-columns:1fr; }
}

/* --- portfolioheroshowcase (SB_04 port) --- */
.wsp-portfolioheroshowcase{ }
.wsp-portfolioheroshowcase::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 55% at 74% 36%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(46% 46% at 20% 86%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); }
.wsp-portfolioheroshowcase .ws-in{ position:relative; z-index:1; }
.wsp-portfolioheroshowcase .ph-grid{ display:grid; grid-template-columns:1.02fr 1fr;
  gap:clamp(32px, 5cqw, 60px); align-items:center; }

/* --- left column: copy --- */
.wsp-portfolioheroshowcase .ph-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.wsp-portfolioheroshowcase .ph-avail{ display:inline-flex; align-items:center; gap:10px; margin:0;
  font:600 11px/1 var(--mono); letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); }
.wsp-portfolioheroshowcase .ph-dot{ position:relative; width:8px; height:8px; border-radius:50%;
  background:var(--accent); flex:none; }
.wsp-portfolioheroshowcase .ph-dot::after{ content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--accent); animation:phShowPulse 2.4s ease-out infinite; }
.wsp-portfolioheroshowcase .ph-name{ margin:0; font-family:var(--font-head, var(--font)); font-weight:800;
  font-size:clamp(30px, 5cqw, 58px); line-height:1.02; letter-spacing:-0.03em; color:var(--ink); }
.wsp-portfolioheroshowcase .ph-title{ display:block; }
.wsp-portfolioheroshowcase .ph-role{ margin:0; max-width:30ch;
  font:300 clamp(16px, 1.9cqw, 22px)/1.4 var(--font); color:var(--dim); }
.wsp-portfolioheroshowcase .ph-divider{ width:60px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), transparent); }
.wsp-portfolioheroshowcase .ph-bio{ max-width:46ch; }
.wsp-portfolioheroshowcase .ph-socials{ margin-top:4px; }
.wsp-portfolioheroshowcase .ph-socials.ws-socials .ws-social{ width:40px; height:40px; border-radius:11px;
  transition:color .25s ease, border-color .25s ease, transform .25s ease; }
.wsp-portfolioheroshowcase .ph-socials.ws-socials .ws-social:hover{ color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent); transform:translateY(-2px); }

/* --- right column: floating showcase --- */
.wsp-portfolioheroshowcase .ph-stage{ position:relative; width:100%; height:clamp(400px, 42cqw, 560px); }
.wsp-portfolioheroshowcase .ph-thumb{ position:absolute; animation:phShowFloat 7s ease-in-out infinite;
  will-change:transform; }
.wsp-portfolioheroshowcase .ph-p1{ top:0; left:0; width:clamp(150px, 21cqw, 264px); aspect-ratio:7/5;
  z-index:3; animation-duration:6s; animation-delay:-1.2s; }
.wsp-portfolioheroshowcase .ph-p2{ top:6%; right:0; width:clamp(120px, 17cqw, 214px); aspect-ratio:3/4;
  z-index:2; animation-duration:7.4s; animation-delay:-3s; }
.wsp-portfolioheroshowcase .ph-p3{ bottom:7%; left:5%; width:clamp(160px, 23cqw, 286px); aspect-ratio:15/11;
  z-index:4; animation-duration:8.2s; animation-delay:-2.1s; }
.wsp-portfolioheroshowcase .ph-p4{ bottom:0; right:4%; width:clamp(104px, 14.5cqw, 182px); aspect-ratio:4/5;
  z-index:1; animation-duration:6.6s; animation-delay:-4s; }
.wsp-portfolioheroshowcase .ph-card{ position:absolute; inset:0; border-radius:16px; overflow:hidden;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); box-shadow:0 20px 50px rgba(0,0,0,0.42);
  transition:transform .4s cubic-bezier(.2,.8,.25,1), border-color .3s ease; }
.wsp-portfolioheroshowcase .ph-thumb:hover{ z-index:10; }
.wsp-portfolioheroshowcase .ph-thumb:hover .ph-card{ transform:scale(1.04) translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 30px 70px rgba(0,0,0,0.5), 0 0 34px color-mix(in srgb, var(--accent) 26%, transparent); }
.wsp-portfolioheroshowcase .ph-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:12px 13px 11px; display:flex; flex-direction:column; gap:3px;
  background:linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent)); }
.wsp-portfolioheroshowcase .ph-cap b{ font:600 clamp(11px, 1.1cqw, 13.5px)/1.2 var(--font); color:var(--ink); }
.wsp-portfolioheroshowcase .ph-cap i{ font:600 9.5px/1 var(--mono); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--accent); font-style:normal; }

/* --- CSS-drawn project art (no images) --- */
.wsp-portfolioheroshowcase .ph-art{ position:absolute; inset:0; z-index:1; }
.wsp-portfolioheroshowcase .ph-art::before,
.wsp-portfolioheroshowcase .ph-art::after{ content:''; position:absolute; }
.wsp-portfolioheroshowcase .ph-art.a0{ background:
  radial-gradient(circle at 66% 64%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%),
  linear-gradient(150deg, var(--panel-2), var(--panel)); }
.wsp-portfolioheroshowcase .ph-art.a0::before{ left:13%; top:18%; width:40%; aspect-ratio:1; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 40%, transparent); }
.wsp-portfolioheroshowcase .ph-art.a0::after{ left:13%; bottom:32%; width:54%; height:7%; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 18%, transparent); }
.wsp-portfolioheroshowcase .ph-art.a1{ background:linear-gradient(160deg, var(--panel-2), var(--panel)); }
.wsp-portfolioheroshowcase .ph-art.a1::before{ left:10%; top:12%; width:46%; height:6%; border-radius:99px;
  background:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 210% 0 color-mix(in srgb, var(--ink) 13%, transparent), 0 400% 0 color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-portfolioheroshowcase .ph-art.a1::after{ left:10%; bottom:12%; width:80%; height:36%; border-radius:9px;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--accent) 48%, transparent) 70%, transparent 70%) 2% 100%/15% 100% no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--accent) 62%, transparent) 100%, transparent 100%) 26% 100%/15% 100% no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--accent) 40%, transparent) 86%, transparent 86%) 50% 100%/15% 100% no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--accent) 30%, transparent) 52%, transparent 52%) 74% 100%/15% 100% no-repeat,
    color-mix(in srgb, var(--panel-3, var(--panel-2)) 70%, transparent); }
.wsp-portfolioheroshowcase .ph-art.a2{ background:linear-gradient(160deg,
  color-mix(in srgb, var(--bg) 62%, var(--panel-2)), var(--panel)); }
.wsp-portfolioheroshowcase .ph-art.a2::before{ left:0; top:0; width:100%; height:15%;
  background:color-mix(in srgb, var(--ink) 8%, transparent); box-shadow:inset 0 -1px 0 var(--hair); }
.wsp-portfolioheroshowcase .ph-art.a2::after{ left:9%; top:30%; width:74%; height:46%;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 50%, transparent) 0 100%) 0 0/22% 10% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 0 100%) 30% 0/40% 10% no-repeat,
    linear-gradient(color-mix(in srgb, var(--accent2) 42%, transparent) 0 100%) 14% 32%/28% 10% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 0 100%) 48% 32%/26% 10% no-repeat,
    linear-gradient(color-mix(in srgb, var(--accent) 34%, transparent) 0 100%) 14% 66%/18% 10% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ink) 18%, transparent) 0 100%) 38% 66%/44% 10% no-repeat; }
.wsp-portfolioheroshowcase .ph-art.a3{ background:
  radial-gradient(circle at 50% 33%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 46%),
  linear-gradient(160deg, var(--panel-2), var(--panel)); }
.wsp-portfolioheroshowcase .ph-art.a3::before{ left:50%; top:33%; width:34%; aspect-ratio:1;
  transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent),
    color-mix(in srgb, var(--accent) 12%, transparent) 70%, transparent 72%); }
.wsp-portfolioheroshowcase .ph-art.a3::after{ left:14%; bottom:12%; width:72%; height:9%; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 12%, transparent); }

@keyframes phShowFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes phShowPulse{ 0%{ transform:scale(1); opacity:0.55; } 100%{ transform:scale(3.2); opacity:0; } }

@container site (max-width: 860px){
  .wsp-portfolioheroshowcase .ph-grid{ grid-template-columns:1fr; gap:clamp(30px, 6cqw, 44px); }
  .wsp-portfolioheroshowcase .ph-stage{ height:clamp(360px, 58cqw, 460px); max-width:540px; margin-inline:auto; }
}
@container site (max-width: 560px){
  .wsp-portfolioheroshowcase .ph-stage{ height:340px; }
  .wsp-portfolioheroshowcase .ph-name{ font-size:clamp(30px, 10cqw, 42px); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-portfolioheroshowcase .ph-thumb{ animation:none; }
  .wsp-portfolioheroshowcase .ph-dot::after{ animation:none; }
}

/* --- portfoliomasonrygrid (SB_04 port) --- */
.wsp-portfoliomasonrygrid .pmg-filters{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; max-width:760px; margin:0 auto clamp(28px,3.6cqw,44px); }
.wsp-portfoliomasonrygrid .pmg-pill{ appearance:none; -webkit-appearance:none; background:transparent; border:var(--bw, 1px) solid var(--hair); color:var(--dim); padding:8px 20px; border-radius:999px; font:500 .82rem var(--font); letter-spacing:.02em; cursor:pointer; transition:color .2s ease, border-color .2s ease; }
.wsp-portfoliomasonrygrid .pmg-pill:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.wsp-portfoliomasonrygrid .pmg-pill.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-text, var(--bg)); }
.wsp-portfoliomasonrygrid .pmg-pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wsp-portfoliomasonrygrid .pmg-grid{ columns:3; column-gap:clamp(14px,1.8cqw,20px); }
.wsp-portfoliomasonrygrid .pmg-card{ position:relative; break-inside:avoid; margin:0 0 clamp(14px,1.8cqw,20px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .3s cubic-bezier(.4,0,.2,1), border-color .3s ease; }
.wsp-portfoliomasonrygrid .pmg-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); }
.wsp-portfoliomasonrygrid .pmg-card:focus-within{ border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); }

.wsp-portfoliomasonrygrid .pmg-thumb{ display:block; width:100%; transform:scale(1); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.wsp-portfoliomasonrygrid .pmg-card:hover .pmg-thumb{ transform:scale(1.045); }
.wsp-portfoliomasonrygrid .pmg-h0{ aspect-ratio:3/4; }
.wsp-portfoliomasonrygrid .pmg-h1{ aspect-ratio:4/3; }
.wsp-portfoliomasonrygrid .pmg-h2{ aspect-ratio:1/1; }
.wsp-portfoliomasonrygrid .pmg-h3{ aspect-ratio:4/5; }
.wsp-portfoliomasonrygrid .pmg-h4{ aspect-ratio:5/4; }
.wsp-portfoliomasonrygrid .pmg-a0{ background:radial-gradient(82% 72% at 24% 16%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 72%), var(--panel-2, var(--panel)); }
.wsp-portfoliomasonrygrid .pmg-a1{ background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 36%, transparent), color-mix(in srgb, var(--accent2, var(--accent)) 26%, transparent) 78%), var(--panel-2, var(--panel)); }
.wsp-portfoliomasonrygrid .pmg-a2{ background:conic-gradient(from 210deg at 64% 38%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 48%, color-mix(in srgb, var(--accent2, var(--accent)) 26%, transparent) 82%, transparent), var(--panel-2, var(--panel)); }
.wsp-portfoliomasonrygrid .pmg-a3{ background:radial-gradient(92% 84% at 80% 82%, color-mix(in srgb, var(--accent2, var(--accent)) 40%, transparent), transparent 74%), var(--panel-2, var(--panel)); }
.wsp-portfoliomasonrygrid .pmg-a4{ background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 20px), radial-gradient(72% 62% at 30% 26%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 76%), var(--panel-2, var(--panel)); }
.wsp-portfoliomasonrygrid .pmg-a5{ background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 64%), repeating-linear-gradient(45deg, transparent 0 26px, color-mix(in srgb, var(--ink) 8%, transparent) 26px 27px), var(--panel-2, var(--panel)); }

.wsp-portfoliomasonrygrid .pmg-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:8px; padding:clamp(16px,2.4cqw,22px); pointer-events:none; background:linear-gradient(to top, color-mix(in srgb, var(--bg) 86%, transparent) 0%, color-mix(in srgb, var(--bg) 30%, transparent) 40%, transparent 74%); }
.wsp-portfoliomasonrygrid .pmg-cat{ font:600 .68rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); background:var(--accent-fill, color-mix(in srgb, var(--accent) 14%, transparent)); padding:4px 11px; border-radius:999px; }
.wsp-portfoliomasonrygrid .pmg-name{ margin:0; font:600 clamp(1rem,1.5cqw,1.16rem)/1.3 var(--font-head, var(--font)); letter-spacing:-.01em; color:var(--ink); text-shadow:0 1px 14px color-mix(in srgb, var(--bg) 72%, transparent); }
.wsp-portfoliomasonrygrid .pmg-link{ display:inline-flex; align-items:center; gap:5px; font:500 .82rem var(--font); color:var(--dim); text-decoration:none; pointer-events:auto; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1), color .2s ease; }
.wsp-portfoliomasonrygrid .pmg-card:hover .pmg-link,
.wsp-portfoliomasonrygrid .pmg-card:focus-within .pmg-link{ opacity:1; transform:translateY(0); }
.wsp-portfoliomasonrygrid .pmg-link:hover{ color:var(--ink); }
.wsp-portfoliomasonrygrid .pmg-link i{ font-style:normal; transition:transform .2s ease; }
.wsp-portfoliomasonrygrid .pmg-card:hover .pmg-link i{ transform:translateX(3px); }

@container site (max-width:900px){ .wsp-portfoliomasonrygrid .pmg-grid{ columns:2; } }
@container site (max-width:560px){ .wsp-portfoliomasonrygrid .pmg-grid{ columns:1; } .wsp-portfoliomasonrygrid .pmg-link{ opacity:1; transform:none; } }
@media (hover:none){ .wsp-portfoliomasonrygrid .pmg-link{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .wsp-portfoliomasonrygrid .pmg-card, .wsp-portfoliomasonrygrid .pmg-thumb, .wsp-portfoliomasonrygrid .pmg-link, .wsp-portfoliomasonrygrid .pmg-link i, .wsp-portfoliomasonrygrid .pmg-pill{ transition:none; } }

/* --- portfoliocasestudy (SB_04 port) --- */
.wsp-portfoliocasestudy .ws-in{ width:min(960px, 88cqw); }

/* header */
.wsp-portfoliocasestudy .pcs-head{ text-align:left; max-width:none; margin:0 0 60px; }
.wsp-portfoliocasestudy .pcs-title{ margin-top:14px; }
.wsp-portfoliocasestudy .pcs-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.wsp-portfoliocasestudy .pcs-tag{ display:inline-block; font:500 11.5px var(--font); letter-spacing:0.06em;
  text-transform:uppercase; color:var(--dim); background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair);
  padding:6px 13px; border-radius:100px; }
.wsp-portfoliocasestudy .pcs-tag--accent{ color:var(--accent); border-color:var(--accent-dim, var(--accent));
  background:var(--accent-fill); }
.wsp-portfoliocasestudy .pcs-summary{ margin-top:22px; max-width:640px; }

/* challenge / solution */
.wsp-portfoliocasestudy .pcs-split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:0 0 64px; }
.wsp-portfoliocasestudy .pcs-block{ background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); padding:34px 30px; }
.wsp-portfoliocasestudy .pcs-label{ display:flex; align-items:center; gap:9px; font:600 11px var(--mono, var(--font));
  letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); margin:0 0 15px; }
.wsp-portfoliocasestudy .pcs-label span{ width:7px; height:7px; border-radius:50%; flex:none; }
.wsp-portfoliocasestudy .pcs-label--challenge span{ background:#f87171; }
.wsp-portfoliocasestudy .pcs-label--solution span{ background:#34d399; }
.wsp-portfoliocasestudy .pcs-text{ font:400 14.5px/1.75 var(--font); color:var(--dim); margin:0; }

/* metrics strip */
.wsp-portfoliocasestudy .pcs-metrics{ display:grid; grid-template-columns:repeat(4, 1fr); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); overflow:hidden; background:linear-gradient(135deg, var(--accent-fill), transparent);
  margin:0 0 64px; }
.wsp-portfoliocasestudy .pcs-metric{ padding:34px 22px; text-align:center; }
.wsp-portfoliocasestudy .pcs-metric + .pcs-metric{ border-left:var(--bw, 1px) solid var(--hair); }
.wsp-portfoliocasestudy .pcs-mval{ font:800 clamp(26px, 3.4cqw, 40px)/1.1 var(--font-head, var(--font));
  letter-spacing:-0.02em; color:var(--accent); }
.wsp-portfoliocasestudy .pcs-mlabel{ margin-top:8px; font:600 11px var(--font); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); }

/* process timeline */
.wsp-portfoliocasestudy .pcs-process{ margin:0 0 64px; }
.wsp-portfoliocasestudy .pcs-process__heading{ text-align:center; font:600 11px var(--mono, var(--font));
  letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin:0 0 38px; }
.wsp-portfoliocasestudy .pcs-timeline{ display:grid; grid-template-columns:repeat(4, 1fr); position:relative; }
.wsp-portfoliocasestudy .pcs-timeline::before{ content:''; position:absolute; top:24px;
  left:calc(12.5% + 12px); right:calc(12.5% + 12px); height:2px; background:var(--hair); }
.wsp-portfoliocasestudy .pcs-step{ display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative; z-index:1; padding:0 8px; }
.wsp-portfoliocasestudy .pcs-step__dot{ width:48px; height:48px; border-radius:50%; background:var(--panel-2, var(--panel));
  border:2px solid var(--hair); display:grid; place-items:center; margin-bottom:16px; color:var(--dim);
  transition:border-color .25s ease, color .25s ease; }
.wsp-portfoliocasestudy .pcs-step__dot svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.wsp-portfoliocasestudy .pcs-step:hover .pcs-step__dot{ border-color:var(--accent); color:var(--accent); }
.wsp-portfoliocasestudy .pcs-step__name{ font:600 14px var(--font); color:var(--ink); margin:0 0 5px; }
.wsp-portfoliocasestudy .pcs-step__desc{ font:400 12px/1.5 var(--font); color:var(--faint); max-width:140px; margin:0; }

/* testimonial */
.wsp-portfoliocasestudy .pcs-quote{ position:relative; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); padding:46px 40px; margin:0 0 60px; }
.wsp-portfoliocasestudy .pcs-quote::before{ content:'\\201C'; position:absolute; top:14px; left:30px;
  font:700 72px/1 Georgia, serif; color:var(--accent); opacity:0.22; pointer-events:none; }
.wsp-portfoliocasestudy .pcs-quote__text{ position:relative; font:italic 400 17px/1.75 var(--font); color:var(--ink);
  margin:0 0 22px; max-width:680px; }
.wsp-portfoliocasestudy .pcs-quote__by{ display:flex; align-items:center; gap:12px; }
.wsp-portfoliocasestudy .pcs-avatar{ width:40px; height:40px; font-size:14px; color:var(--accent);
  background:var(--accent-fill); border:1px solid var(--accent-dim, var(--accent)); }
.wsp-portfoliocasestudy .pcs-quote__who{ display:flex; flex-direction:column; gap:2px; }
.wsp-portfoliocasestudy .pcs-quote__who b{ font:600 14px var(--font); color:var(--ink); }
.wsp-portfoliocasestudy .pcs-quote__who i{ font:400 12px var(--font); color:var(--faint); font-style:normal; }

/* next project */
.wsp-portfoliocasestudy .pcs-next{ display:flex; justify-content:flex-end; padding-top:30px; border-top:var(--bw, 1px) solid var(--hair); }
.wsp-portfoliocasestudy .pcs-nextlink{ text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }

/* responsive — container queries (sections render in panes of any width) */
@container site (max-width:640px){
  .wsp-portfoliocasestudy .pcs-split{ grid-template-columns:1fr; gap:16px; margin-bottom:48px; }
  .wsp-portfoliocasestudy .pcs-metrics{ grid-template-columns:1fr 1fr; }
  .wsp-portfoliocasestudy .pcs-metric + .pcs-metric{ border-left:none; }
  .wsp-portfoliocasestudy .pcs-metric:nth-child(even){ border-left:var(--bw, 1px) solid var(--hair); }
  .wsp-portfoliocasestudy .pcs-metric:nth-child(n+3){ border-top:var(--bw, 1px) solid var(--hair); }
  .wsp-portfoliocasestudy .pcs-timeline{ grid-template-columns:1fr 1fr; gap:34px 12px; }
  .wsp-portfoliocasestudy .pcs-timeline::before{ display:none; }
  .wsp-portfoliocasestudy .pcs-step__desc{ max-width:170px; }
}
@container site (max-width:430px){
  .wsp-portfoliocasestudy .pcs-metrics{ grid-template-columns:1fr; }
  .wsp-portfoliocasestudy .pcs-metric:nth-child(even){ border-left:none; }
  .wsp-portfoliocasestudy .pcs-metric{ border-top:var(--bw, 1px) solid var(--hair); }
  .wsp-portfoliocasestudy .pcs-metric:first-child{ border-top:none; }
  .wsp-portfoliocasestudy .pcs-quote{ padding:36px 24px; }
  .wsp-portfoliocasestudy .pcs-next{ justify-content:flex-start; }
}

/* --- portfolioaboutsplit (SB_04 port) --- */
.wsp-portfolioaboutsplit .ws-in.split{ align-items:center; gap:clamp(32px,5cqw,64px); }
.wsp-portfolioaboutsplit .ws-kick{ margin:0; }

/* left — portrait frame + decorative accent lines */
.wsp-portfolioaboutsplit .pas-photo{ position:relative; display:flex; align-items:center; justify-content:center; padding:clamp(24px,4cqw,56px); }
.wsp-portfolioaboutsplit .pas-frame{ position:relative; width:100%; max-width:380px; aspect-ratio:3 / 4; border-radius:calc(var(--radius,12px) + 2px); overflow:hidden; border:var(--bw, 1px) solid var(--hair); background-size:cover; background-position:center;
  background-image:linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--panel)) 0%, var(--panel-2) 48%, color-mix(in srgb, var(--accent) 13%, var(--panel-2)) 100%); }
.wsp-portfolioaboutsplit .pas-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 60%, transparent)); }
.wsp-portfolioaboutsplit .pas-line{ position:absolute; background:var(--accent); border-radius:2px; opacity:.6; }
.wsp-portfolioaboutsplit .pas-line--top{ width:80px; height:3px; top:clamp(16px,3cqw,40px); left:clamp(16px,3cqw,40px); }
.wsp-portfolioaboutsplit .pas-line--side{ width:3px; height:110px; bottom:clamp(16px,3cqw,40px); right:clamp(16px,3cqw,40px); }
.wsp-portfolioaboutsplit .pas-line--corner{ width:50px; height:3px; bottom:clamp(16px,3cqw,40px); right:clamp(16px,3cqw,40px); }

/* right — copy column */
.wsp-portfolioaboutsplit .pas-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,2.4cqw,26px); }
.wsp-portfolioaboutsplit .pas-head{ color:var(--ink); }
.wsp-portfolioaboutsplit .pas-bio{ margin:0; max-width:52ch; }

/* stats — left-aligned inline row, accent values */
.wsp-portfolioaboutsplit .pas-stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,3cqw,40px); }
.wsp-portfolioaboutsplit .pas-stat{ display:flex; flex-direction:column; gap:4px; text-align:left; }
.wsp-portfolioaboutsplit .pas-val{ font:800 clamp(22px,2.6cqw,30px)/1.1 var(--font-head, var(--font)); color:var(--accent); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.wsp-portfolioaboutsplit .pas-label{ font:600 10.5px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--dim); }

/* skill pills — accent-tinted (bg set instantly, only color/border transition) */
.wsp-portfolioaboutsplit .pas-tools{ display:flex; flex-wrap:wrap; gap:8px; }
.wsp-portfolioaboutsplit .pas-pill{ padding:6px 14px; font:500 12.5px var(--font); border-radius:99px; color:var(--accent); background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); transition:color .22s ease, border-color .22s ease; }
.wsp-portfolioaboutsplit .pas-pill:hover{ background:var(--accent-fill2, var(--accent-fill)); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }

.wsp-portfolioaboutsplit .ws-ctarow{ margin-top:0; }

@container site (max-width:820px){
  .wsp-portfolioaboutsplit .ws-in.split{ grid-template-columns:1fr; gap:clamp(24px,5cqw,40px); }
  .wsp-portfolioaboutsplit .pas-photo{ padding:6px 6px 0; }
  .wsp-portfolioaboutsplit .pas-frame{ max-width:260px; }
}

/* --- portfolioskillsradar (SB_04 port) --- */
.wsp-portfolioskillsradar .psr-layout{ display:flex; flex-direction:column; align-items:center;
  gap:clamp(30px,4.5cqw,54px); margin-top:clamp(30px,4cqw,50px); }
.wsp-portfolioskillsradar .psr-radar{ width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; }
.wsp-portfolioskillsradar .psr-canvas{ width:min(400px,78cqw); aspect-ratio:1/1; height:auto; display:block; }
.wsp-portfolioskillsradar .psr-legend{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.wsp-portfolioskillsradar .psr-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border-radius:999px; border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  color:var(--dim); font:600 12px var(--font); cursor:pointer;
  transition:color .25s ease, border-color .25s ease, opacity .25s ease, transform .25s ease; }
.wsp-portfolioskillsradar .psr-chip:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--cat,var(--accent)) 55%, var(--hair)); }
.wsp-portfolioskillsradar .psr-chip.psr-on{ color:var(--ink); border-color:var(--cat,var(--accent)); }
.wsp-portfolioskillsradar .psr-chip.psr-dim{ opacity:.42; }
.wsp-portfolioskillsradar .psr-dot{ width:9px; height:9px; border-radius:50%; background:var(--cat,var(--accent)); flex-shrink:0; }
.wsp-portfolioskillsradar .psr-cards{ width:100%; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:clamp(16px,2cqw,24px); }
.wsp-portfolioskillsradar .psr-card{ background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius,14px); padding:clamp(18px,2.4cqw,26px);
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .3s ease, transform .3s ease, opacity .3s ease; }
.wsp-portfolioskillsradar .psr-card:hover{ border-color:color-mix(in srgb, var(--cat,var(--accent)) 55%, var(--hair)); }
.wsp-portfolioskillsradar .psr-card.psr-on{ border-color:var(--cat,var(--accent)); transform:translateY(-3px); }
.wsp-portfolioskillsradar .psr-card.psr-dim{ opacity:.5; }
.wsp-portfolioskillsradar .psr-chead{ display:flex; align-items:center; gap:12px; }
.wsp-portfolioskillsradar .psr-ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  flex-shrink:0; color:var(--cat,var(--accent)); background:color-mix(in srgb, var(--cat,var(--accent)) 15%, transparent); }
.wsp-portfolioskillsradar .psr-ico svg{ width:22px; height:22px; }
.wsp-portfolioskillsradar .psr-ctitle{ flex:1; margin:0; color:var(--ink);
  font:600 clamp(15px,1.7cqw,18px)/1.2 var(--font-head, var(--font)); }
.wsp-portfolioskillsradar .psr-avg{ font:600 11px var(--mono); letter-spacing:.5px;
  color:var(--cat,var(--accent)); font-variant-numeric:tabular-nums; white-space:nowrap; }
.wsp-portfolioskillsradar .psr-list{ display:flex; flex-direction:column; gap:13px; }
.wsp-portfolioskillsradar .psr-srow{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.wsp-portfolioskillsradar .psr-name{ font-size:clamp(12px,1.4cqw,14px); color:var(--dim); font-weight:500; }
.wsp-portfolioskillsradar .psr-pct{ font-size:12px; color:var(--cat,var(--accent)); font-weight:600; font-variant-numeric:tabular-nums; }
.wsp-portfolioskillsradar .psr-track{ position:relative; width:100%; height:6px; border-radius:4px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-portfolioskillsradar .psr-fill{ position:absolute; inset:0 auto 0 0; height:100%; width:var(--pct,0%); border-radius:4px;
  transform-origin:left center;
  background:linear-gradient(90deg, color-mix(in srgb, var(--cat,var(--accent)) 30%, transparent), var(--cat,var(--accent))); }
@container site (max-width:560px){
  .wsp-portfolioskillsradar .psr-canvas{ width:min(360px,86cqw); }
  .wsp-portfolioskillsradar .psr-cards{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-portfolioskillsradar .psr-card,
  .wsp-portfolioskillsradar .psr-chip{ transition:none; }
}

/* --- portfolioservicescards (SB_04 port) --- */
.wsp-portfolioservicescards .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:4px; }
.wsp-portfolioservicescards .ws-shead .ws-sub{ margin-inline:auto; max-width:52ch; }
.wsp-portfolioservicescards .svc-card{ display:flex; flex-direction:column; gap:16px; padding:36px 28px; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-top:3px solid transparent; border-radius:var(--radius,12px); transition:transform .28s ease, border-top-color .2s ease; }
.wsp-portfolioservicescards .svc-card:hover{ transform:translateY(-6px); border-top-color:var(--accent); box-shadow:0 12px 32px rgba(0,0,0,0.4); }
.wsp-portfolioservicescards .svc-ico{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--accent-fill); color:var(--accent); transition:transform .28s ease; }
.wsp-portfolioservicescards .svc-card:hover .svc-ico{ transform:scale(1.12); }
.wsp-portfolioservicescards .svc-ico svg{ width:24px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wsp-portfolioservicescards .svc-t{ margin:0; font:600 1.15rem/1.25 var(--font-head, var(--font)); letter-spacing:-0.01em; color:var(--ink); }
.wsp-portfolioservicescards .svc-d{ margin:0; flex:1; font-size:0.94rem; line-height:1.6; color:var(--dim); }
.wsp-portfolioservicescards .svc-link{ display:inline-flex; align-items:center; gap:6px; width:max-content; font-size:0.875rem; font-weight:500; color:var(--accent); text-decoration:none; }
.wsp-portfolioservicescards .svc-link svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.wsp-portfolioservicescards .svc-link:hover svg{ transform:translateX(3px); }
@container site (max-width:900px){
  .wsp-portfolioservicescards .svc-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-portfolioservicescards .svc-grid{ grid-template-columns:1fr; }
  .wsp-portfolioservicescards .svc-card{ padding:28px 22px; }
}

/* --- portfoliotestimonials (SB_04 port) --- */
.wsp-portfoliotestimonials .pt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2cqw,28px); width:min(1140px,90cqw); margin:0 auto; }
.wsp-portfoliotestimonials .pt-card{ display:flex; flex-direction:column; gap:20px;
  padding:clamp(26px,2.8cqw,34px) clamp(22px,2.4cqw,30px) clamp(24px,2.6cqw,30px);
  background:color-mix(in srgb, var(--accent) 5%, var(--panel)); background-image:var(--surface-grad,none);
  border:1px solid color-mix(in srgb, var(--accent) 16%, var(--hair)); border-radius:calc(var(--radius,12px) + 4px);
  transition:transform .3s ease, border-color .3s ease; }
.wsp-portfoliotestimonials .pt-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 42%, var(--hair)); }
.wsp-portfoliotestimonials .pt-qico{ width:40px; height:40px; flex:none; color:var(--accent); opacity:.55; }
.wsp-portfoliotestimonials .pt-qico svg{ width:100%; height:100%; display:block; }
.wsp-portfoliotestimonials .pt-text{ margin:0; flex:1; font:400 clamp(14px,1.6cqw,16px)/1.72 var(--font); color:var(--ink); }
.wsp-portfoliotestimonials .pt-stars{ display:inline-flex; gap:4px; color:var(--accent); font-size:1rem; letter-spacing:.06em; line-height:1; }
.wsp-portfoliotestimonials .pt-stars i{ color:color-mix(in srgb, var(--faint) 55%, transparent); font-style:normal; }
.wsp-portfoliotestimonials .pt-client{ display:flex; align-items:center; gap:14px; padding-top:20px; margin-top:2px; border-top:var(--bw, 1px) solid var(--hair); }
.wsp-portfoliotestimonials .pt-avatar{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; flex:none;
  font:600 15px var(--font); letter-spacing:.02em; color:var(--accent-text,#04121a);
  background:var(--accent-grad, linear-gradient(135deg, var(--accent), var(--accent2,var(--accent)))); background-color:var(--accent); }
.wsp-portfoliotestimonials .pt-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.wsp-portfoliotestimonials .pt-name{ font:600 15px var(--font); color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.wsp-portfoliotestimonials .pt-role{ font:400 12.5px var(--font); color:var(--dim); font-style:normal; }
@container site (max-width:820px){
  .wsp-portfoliotestimonials .pt-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-portfoliotestimonials .pt-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-portfoliotestimonials .pt-card{ transition:none; }
  .wsp-portfoliotestimonials .pt-card:hover{ transform:none; }
}

/* --- portfoliocontactform (SB_04 port) --- */
.wsp-portfoliocontactform .ws-shead{ margin-bottom:clamp(40px,5cqw,60px); }
.wsp-portfoliocontactform .pcf-grid{ display:grid; grid-template-columns:1fr 1.3fr;
  gap:clamp(32px,4cqw,48px); align-items:start; }

/* left — icon-badge contact cards + circular social buttons */
.wsp-portfoliocontactform .pcf-info-cards{ display:flex; flex-direction:column; gap:16px; }
.wsp-portfoliocontactform .pcf-card{ display:flex; align-items:center; gap:18px;
  padding:clamp(18px,2.4cqw,24px); background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius,12px); transition:border-color .3s ease, transform .3s ease; }
.wsp-portfoliocontactform .pcf-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.wsp-portfoliocontactform .pcf-card-icon{ flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--accent-fill); }
.wsp-portfoliocontactform .pcf-card-icon svg{ width:22px; height:22px; fill:none; stroke:var(--accent);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wsp-portfoliocontactform .pcf-card-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.wsp-portfoliocontactform .pcf-card-label{ font:500 0.72rem var(--font); text-transform:uppercase;
  letter-spacing:0.08em; color:var(--dim); }
.wsp-portfoliocontactform .pcf-card-value{ font:500 0.95rem var(--font); color:var(--ink); overflow-wrap:anywhere; }

.wsp-portfoliocontactform .pcf-socials{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.wsp-portfoliocontactform .pcf-social-link{ width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); color:var(--dim);
  transition:border-color .3s ease, transform .3s ease, color .3s ease; }
.wsp-portfoliocontactform .pcf-social-link:hover{ border-color:var(--accent); background:var(--accent-fill);
  transform:translateY(-2px); color:var(--accent); }
.wsp-portfoliocontactform .pcf-social-link svg{ width:18px; height:18px; fill:currentColor; }

/* right — bordered form card */
.wsp-portfoliocontactform .pcf-form{ padding:clamp(24px,3.4cqw,40px); background:var(--panel);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); }
.wsp-portfoliocontactform .pcf-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.wsp-portfoliocontactform .pcf-field{ position:relative; margin-bottom:18px; }
.wsp-portfoliocontactform .pcf-form-row .pcf-field{ margin-bottom:0; }
.wsp-portfoliocontactform .pcf-field input,
.wsp-portfoliocontactform .pcf-field select,
.wsp-portfoliocontactform .pcf-field textarea{ width:100%; box-sizing:border-box;
  padding:18px 15px 7px; font:400 0.95rem var(--font); color:var(--ink); background:var(--bg);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius,12px) * .6); outline:none;
  appearance:none; -webkit-appearance:none; transition:border-color .2s ease, color .2s ease; }
.wsp-portfoliocontactform .pcf-field select{ cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238595af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; }
.wsp-portfoliocontactform .pcf-field select option{ background:var(--panel); color:var(--ink); }
.wsp-portfoliocontactform .pcf-field textarea{ resize:vertical; min-height:132px; line-height:1.6; }
.wsp-portfoliocontactform .pcf-field input:focus,
.wsp-portfoliocontactform .pcf-field select:focus,
.wsp-portfoliocontactform .pcf-field textarea:focus{ border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-fill2); }

/* floating label — transform + color transitions only */
.wsp-portfoliocontactform .pcf-field label{ position:absolute; left:15px; top:50%;
  transform:translateY(-50%); transform-origin:left center; pointer-events:none;
  font:400 0.95rem var(--font); color:var(--faint); transition:transform .2s ease, color .2s ease; }
.wsp-portfoliocontactform .pcf-field input:focus ~ label,
.wsp-portfoliocontactform .pcf-field input:not(:placeholder-shown) ~ label,
.wsp-portfoliocontactform .pcf-field select:focus ~ label,
.wsp-portfoliocontactform .pcf-field select:valid ~ label{
  transform:translate(0, calc(-50% - 12px)) scale(0.72); color:var(--accent); }
.wsp-portfoliocontactform .pcf-field--textarea label{ top:18px; transform:none; }
.wsp-portfoliocontactform .pcf-field--textarea textarea:focus ~ label,
.wsp-portfoliocontactform .pcf-field--textarea textarea:not(:placeholder-shown) ~ label{
  transform:translateY(-11px) scale(0.72); color:var(--accent); }

/* submit + message */
.wsp-portfoliocontactform .pcf-submit{ margin-top:4px; }
.wsp-portfoliocontactform .pcf-submit svg{ fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease; }
.wsp-portfoliocontactform .pcf-submit:hover svg{ transform:translateX(3px); }
.wsp-portfoliocontactform .pcf-msg{ margin-top:8px; }
.wsp-portfoliocontactform .pcf-form.is-sent .pcf-field input,
.wsp-portfoliocontactform .pcf-form.is-sent .pcf-field select,
.wsp-portfoliocontactform .pcf-form.is-sent .pcf-field textarea,
.wsp-portfoliocontactform .pcf-form.is-sent .pcf-submit{ opacity:0.6; }

@media (prefers-reduced-motion: reduce){
  .wsp-portfoliocontactform .pcf-card,
  .wsp-portfoliocontactform .pcf-social-link,
  .wsp-portfoliocontactform .pcf-field input,
  .wsp-portfoliocontactform .pcf-field select,
  .wsp-portfoliocontactform .pcf-field textarea,
  .wsp-portfoliocontactform .pcf-field label,
  .wsp-portfoliocontactform .pcf-submit svg{ transition:none; }
}
@container site (max-width:820px){
  .wsp-portfoliocontactform .pcf-grid{ grid-template-columns:1fr; gap:32px; }
}
@container site (max-width:560px){
  .wsp-portfoliocontactform .pcf-form-row{ grid-template-columns:1fr; gap:0; }
  .wsp-portfoliocontactform .pcf-form-row .pcf-field{ margin-bottom:18px; }
}

/* --- portfoliotimelinevertical (SB_04 port) --- */
.wsp-portfoliotimelinevertical .ptv-wrap{ position:relative; width:min(900px,88cqw); margin:46px auto 0; }
.wsp-portfoliotimelinevertical .ptv-rail{ position:absolute; left:50%; top:7px; bottom:7px; width:2px; transform:translateX(-50%); background:var(--hair); border-radius:2px; overflow:hidden; }
.wsp-portfoliotimelinevertical .ptv-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:var(--accent); }
.wsp-portfoliotimelinevertical .ptv-entry{ position:relative; display:grid; grid-template-columns:1fr 46px 1fr; align-items:start; margin-bottom:2.6rem; }
.wsp-portfoliotimelinevertical .ptv-entry:last-child{ margin-bottom:0; }
.wsp-portfoliotimelinevertical .ptv-node{ grid-column:2; display:flex; justify-content:center; }
.wsp-portfoliotimelinevertical .ptv-dot{ position:relative; width:14px; height:14px; margin-top:6px; border-radius:50%; background:var(--accent); opacity:.34; box-shadow:0 0 0 4px var(--bg); transition:opacity .3s linear, transform .3s ease; }
.wsp-portfoliotimelinevertical .ptv-dot::before{ content:''; position:absolute; inset:-5px; border-radius:50%; box-shadow:0 0 16px 2px var(--accent); opacity:0; transition:opacity .3s linear; }
.wsp-portfoliotimelinevertical .ptv-dot.on{ opacity:1; transform:scale(1.14); }
.wsp-portfoliotimelinevertical .ptv-dot.on::before{ opacity:.5; }
.wsp-portfoliotimelinevertical .ptv-entry:hover .ptv-dot{ opacity:1; transform:scale(1.28); }
.wsp-portfoliotimelinevertical .ptv-side{ grid-column:1; text-align:right; padding-right:2rem; min-width:0; }
.wsp-portfoliotimelinevertical .ptv-entry.flip .ptv-side{ grid-column:3; text-align:left; padding-right:0; padding-left:2rem; }
.wsp-portfoliotimelinevertical .ptv-year{ display:inline-block; margin-bottom:.7rem; padding:.28rem .8rem; border-radius:999px; font:600 .68rem/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--accent-fill, rgba(124,196,255,0.12)); }
.wsp-portfoliotimelinevertical .ptv-card{ border:var(--bw, 1px) solid var(--hair); background:var(--panel); border-radius:var(--radius,12px); padding:1.2rem 1.35rem; transition:transform .16s ease-out, border-color .16s ease-out; }
.wsp-portfoliotimelinevertical .ptv-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); }
.wsp-portfoliotimelinevertical .ptv-role{ margin:0 0 .2rem; color:var(--ink); font:600 clamp(1.02rem,2cqw,1.16rem)/1.3 var(--font-head, var(--font)); letter-spacing:-.01em; }
.wsp-portfoliotimelinevertical .ptv-org{ margin-bottom:.5rem; color:var(--accent); font:500 .86rem/1.4 var(--font); }
.wsp-portfoliotimelinevertical .ptv-note{ margin:0; color:var(--dim); font:400 .9rem/1.65 var(--font); }
@container site (max-width:640px){
  .wsp-portfoliotimelinevertical .ptv-wrap{ width:100%; }
  .wsp-portfoliotimelinevertical .ptv-rail{ left:15px; }
  .wsp-portfoliotimelinevertical .ptv-entry{ grid-template-columns:30px 1fr; margin-bottom:2rem; }
  .wsp-portfoliotimelinevertical .ptv-node{ grid-column:1; }
  .wsp-portfoliotimelinevertical .ptv-side,
  .wsp-portfoliotimelinevertical .ptv-entry.flip .ptv-side{ grid-column:2; text-align:left; padding:0; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-portfoliotimelinevertical .ptv-dot,
  .wsp-portfoliotimelinevertical .ptv-card{ transition:none; }
}

/* --- portfoliostatscounter (SB_04 port) --- */
.wsp-portfoliostatscounter{ position:relative; }
.wsp-portfoliostatscounter::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%); }
.wsp-portfoliostatscounter::after{ content:''; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 42%, transparent), transparent); }
.wsp-portfoliostatscounter .ws-in{ position:relative; z-index:1; }
.wsp-portfoliostatscounter .psc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); width:min(1000px, 88cqw); margin:0 auto; }
.wsp-portfoliostatscounter .psc-item{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 18px; }
.wsp-portfoliostatscounter .psc-item:not(:last-child)::after{ content:''; position:absolute; right:0; top:22%; height:56%; width:1px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 34%, transparent), transparent); }
.wsp-portfoliostatscounter .psc-ico{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); transition:transform .25s ease; }
.wsp-portfoliostatscounter .psc-item:hover .psc-ico{ transform:translateY(-3px);
  background:var(--accent-fill2, color-mix(in srgb, var(--accent) 20%, transparent));
  border-color:color-mix(in srgb, var(--accent) 46%, transparent); }
.wsp-portfoliostatscounter .psc-ico svg{ width:28px; height:28px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wsp-portfoliostatscounter .psc-num{ font:800 clamp(38px, 6cqw, 62px)/1 var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; margin-bottom:10px; font-variant-numeric:tabular-nums; }
.wsp-portfoliostatscounter .psc-label{ font:600 12px var(--font); letter-spacing:1.8px; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 80%, var(--dim)); }
@container site (max-width:860px){
  .wsp-portfoliostatscounter .psc-grid{ grid-template-columns:repeat(2, 1fr); row-gap:40px; }
  .wsp-portfoliostatscounter .psc-item:nth-child(2n)::after{ display:none; }
}
@container site (max-width:500px){
  .wsp-portfoliostatscounter .psc-grid{ grid-template-columns:1fr; row-gap:0; }
  .wsp-portfoliostatscounter .psc-item::after{ display:none; }
  .wsp-portfoliostatscounter .psc-item:not(:last-child){ border-bottom:var(--bw, 1px) solid var(--hair); }
  .wsp-portfoliostatscounter .psc-item{ padding:30px 18px; }
}

/* --- portfolioexperimentalgrid (SB_04 port) --- */
.wsp-portfolioexperimentalgrid .peg-wrap{ width:min(1280px,92cqw); margin:0 auto; }

.wsp-portfolioexperimentalgrid .peg-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:clamp(16px,2.2cqw,26px); margin-bottom:clamp(26px,4cqw,52px); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-portfolioexperimentalgrid .peg-title{ margin:0; font:800 clamp(2rem,6cqw,4.4rem)/0.9 var(--font-head,var(--font)); text-transform:uppercase; letter-spacing:-0.03em; color:var(--ink); }
.wsp-portfolioexperimentalgrid .peg-sub{ flex:none; text-align:right; font:600 clamp(9px,1cqw,11px)/1.85 var(--mono); text-transform:uppercase; letter-spacing:0.16em; color:var(--dim); }

.wsp-portfolioexperimentalgrid .peg-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,19cqw,244px); grid-auto-flow:dense; gap:4px; }
.wsp-portfolioexperimentalgrid .peg-item{ position:relative; overflow:hidden; cursor:pointer; outline:none; }
.wsp-portfolioexperimentalgrid .peg-item.big{ grid-column:span 2; grid-row:span 2; }
.wsp-portfolioexperimentalgrid .peg-item.tall{ grid-row:span 2; }
.wsp-portfolioexperimentalgrid .peg-item.wide{ grid-column:span 2; }
.wsp-portfolioexperimentalgrid .peg-item:focus-visible{ outline:2px solid var(--peg-h,var(--accent)); outline-offset:-3px; }

.wsp-portfolioexperimentalgrid .peg-bg{ position:absolute; inset:0; z-index:1; background:linear-gradient(var(--peg-a,145deg), color-mix(in srgb, var(--peg-h,var(--accent)) 8%, #08090d) 0%, color-mix(in srgb, var(--peg-h,var(--accent)) 30%, #0a0b11) 46%, var(--peg-h,var(--accent)) 120%); transform:scale(1.001); transition:transform .6s cubic-bezier(.23,1,.32,1); }
.wsp-portfolioexperimentalgrid .peg-item:hover .peg-bg,.wsp-portfolioexperimentalgrid .peg-item.is-open .peg-bg{ transform:scale(1.06); }

.wsp-portfolioexperimentalgrid .peg-num{ position:absolute; top:-0.12em; right:0.06em; z-index:2; font:800 clamp(4rem,10cqw,10rem)/1 var(--font-head,var(--font)); color:rgba(255,255,255,0.07); pointer-events:none; user-select:none; }
.wsp-portfolioexperimentalgrid .peg-cat{ position:absolute; left:0.95rem; bottom:3.2rem; z-index:3; font:600 0.58rem/1 var(--mono); text-transform:uppercase; letter-spacing:0.2em; color:var(--peg-h,var(--accent)); white-space:nowrap; pointer-events:none; transform-origin:left bottom; transform:rotate(-90deg); }
.wsp-portfolioexperimentalgrid .peg-tt{ position:absolute; left:clamp(1.5rem,3cqw,2.8rem); right:1rem; bottom:1.1rem; z-index:3; display:block; font:700 clamp(1rem,1.9cqw,1.7rem)/1.08 var(--font-head,var(--font)); text-transform:uppercase; letter-spacing:0.01em; color:#f0efe8; pointer-events:none; }
.wsp-portfolioexperimentalgrid .peg-tt::before{ content:''; display:block; width:20px; height:1px; margin-bottom:0.5rem; background:var(--peg-h,var(--accent)); }

.wsp-portfolioexperimentalgrid .peg-ov{ position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:flex-end; gap:0.55rem; padding:1.5rem 1.4rem 1.3rem clamp(1.5rem,3cqw,2.8rem); background:rgba(6,7,10,0.9); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.wsp-portfolioexperimentalgrid .peg-item:hover .peg-ov,.wsp-portfolioexperimentalgrid .peg-item.is-open .peg-ov{ opacity:1; }
.wsp-portfolioexperimentalgrid .peg-ov-t{ font:700 clamp(1.05rem,2cqw,1.7rem)/1.05 var(--font-head,var(--font)); text-transform:uppercase; color:#f0efe8; }
.wsp-portfolioexperimentalgrid .peg-ov-line{ width:56px; height:1px; background:var(--peg-h,var(--accent)); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.23,1,.32,1) .12s; }
.wsp-portfolioexperimentalgrid .peg-ov-d{ font:400 0.82rem/1.6 var(--font); color:rgba(240,239,232,0.62); max-width:340px; }
.wsp-portfolioexperimentalgrid .peg-ov-m{ font:600 0.64rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:0.14em; color:var(--peg-h,var(--accent)); }
.wsp-portfolioexperimentalgrid .peg-ov-t,.wsp-portfolioexperimentalgrid .peg-ov-d,.wsp-portfolioexperimentalgrid .peg-ov-m{ transform:translateX(-24px); opacity:0; transition:transform .5s cubic-bezier(.23,1,.32,1), opacity .4s ease; }
.wsp-portfolioexperimentalgrid .peg-item:hover .peg-ov-t,.wsp-portfolioexperimentalgrid .peg-item.is-open .peg-ov-t,
.wsp-portfolioexperimentalgrid .peg-item:hover .peg-ov-d,.wsp-portfolioexperimentalgrid .peg-item.is-open .peg-ov-d,
.wsp-portfolioexperimentalgrid .peg-item:hover .peg-ov-m,.wsp-portfolioexperimentalgrid .peg-item.is-open .peg-ov-m{ transform:none; opacity:1; }
.wsp-portfolioexperimentalgrid .peg-item:hover .peg-ov-d,.wsp-portfolioexperimentalgrid .peg-item.is-open .peg-ov-d{ transition-delay:.08s; }
.wsp-portfolioexperimentalgrid .peg-item:hover .peg-ov-m,.wsp-portfolioexperimentalgrid .peg-item.is-open .peg-ov-m{ transition-delay:.16s; }

.wsp-portfolioexperimentalgrid .peg-x{ position:absolute; z-index:5; width:0; height:0; pointer-events:none; }
.wsp-portfolioexperimentalgrid .peg-x::before{ content:'+'; position:absolute; transform:translate(-50%,-50%); font:400 0.72rem/1 var(--mono); color:rgba(240,239,232,0.16); }

@container site (max-width:820px){
  .wsp-portfolioexperimentalgrid .peg-grid{ grid-template-columns:repeat(2,1fr); }
  .wsp-portfolioexperimentalgrid .peg-x{ display:none; }
}
@container site (max-width:520px){
  .wsp-portfolioexperimentalgrid .peg-grid{ grid-template-columns:1fr; grid-auto-rows:clamp(190px,58cqw,230px); }
  .wsp-portfolioexperimentalgrid .peg-item.big,.wsp-portfolioexperimentalgrid .peg-item.tall,.wsp-portfolioexperimentalgrid .peg-item.wide{ grid-column:auto; grid-row:auto; }
  .wsp-portfolioexperimentalgrid .peg-head{ flex-direction:column; align-items:flex-start; gap:0.7rem; }
  .wsp-portfolioexperimentalgrid .peg-sub{ text-align:left; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-portfolioexperimentalgrid .peg-bg,
  .wsp-portfolioexperimentalgrid .peg-ov,
  .wsp-portfolioexperimentalgrid .peg-ov-t,
  .wsp-portfolioexperimentalgrid .peg-ov-d,
  .wsp-portfolioexperimentalgrid .peg-ov-m,
  .wsp-portfolioexperimentalgrid .peg-ov-line{ transition-duration:.01ms; }
}

/* --- portfolio3dcards (SB_04 port) --- */
.wsp-portfolio3dcards .p3-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.wsp-portfolio3dcards .p3-wrap{ perspective:1000px; }
.wsp-portfolio3dcards .p3-card{ position:relative; border-radius:14px; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad,none);
  cursor:pointer; transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  transition:transform 0.16s ease-out; will-change:transform;
  box-shadow:0 20px 44px -26px rgba(0,0,0,0.72), 0 3px 10px -6px rgba(0,0,0,0.5); }
.wsp-portfolio3dcards .p3-card::before{ content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:3;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.wsp-portfolio3dcards .p3-card:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.wsp-portfolio3dcards .p3-shine{ position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(280px circle at var(--mx,-999px) var(--my,-999px), color-mix(in srgb, #ffffff 22%, transparent), transparent 60%);
  mix-blend-mode:overlay; }
.wsp-portfolio3dcards .p3-art{ position:relative; aspect-ratio:16/11; background:var(--panel-2); }
.wsp-portfolio3dcards .p3-art::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(135deg, rgba(255,255,255,0.16), transparent 46%); }
.wsp-portfolio3dcards .p3-wrap:nth-child(6n+1) .p3-art{ background:
  radial-gradient(120% 120% at 16% 10%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 62%),
  linear-gradient(145deg, color-mix(in srgb, var(--accent) 30%, var(--panel-2)), var(--panel-2) 72%); }
.wsp-portfolio3dcards .p3-wrap:nth-child(6n+2) .p3-art{ background:
  conic-gradient(from 210deg at 62% 38%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 40%, color-mix(in srgb, var(--accent2, var(--accent)) 34%, transparent) 78%, transparent),
  var(--panel-2); }
.wsp-portfolio3dcards .p3-wrap:nth-child(6n+3) .p3-art{ background:
  repeating-linear-gradient(58deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 2px, transparent 2px 16px),
  radial-gradient(90% 80% at 78% 24%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 66%),
  var(--panel-2); }
.wsp-portfolio3dcards .p3-wrap:nth-child(6n+4) .p3-art{ background:
  radial-gradient(110% 110% at 84% 86%, color-mix(in srgb, var(--accent2, var(--accent)) 55%, transparent), transparent 64%),
  linear-gradient(200deg, color-mix(in srgb, var(--accent) 22%, var(--panel-2)), var(--panel-2) 70%); }
.wsp-portfolio3dcards .p3-wrap:nth-child(6n+5) .p3-art{ background:
  linear-gradient(160deg, color-mix(in srgb, var(--accent) 46%, transparent), transparent 58%),
  radial-gradient(80% 90% at 20% 82%, color-mix(in srgb, var(--ink) 12%, transparent), transparent 60%),
  var(--panel-2); }
.wsp-portfolio3dcards .p3-wrap:nth-child(6n) .p3-art{ background:
  radial-gradient(70% 70% at 50% 26%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 60%),
  conic-gradient(from 120deg at 50% 120%, color-mix(in srgb, var(--accent2, var(--accent)) 28%, transparent), transparent 50%),
  var(--panel-2); }
.wsp-portfolio3dcards .p3-info{ padding:18px 20px 22px; }
.wsp-portfolio3dcards .p3-num{ font:600 11px var(--mono); letter-spacing:0.15em; color:var(--faint); margin-bottom:8px; }
.wsp-portfolio3dcards .p3-title{ margin:0 0 12px; font:600 clamp(15px,1.7cqw,18px)/1.2 var(--font-head, var(--font));
  letter-spacing:-0.01em; color:var(--ink); }
.wsp-portfolio3dcards .p3-tag{ display:inline-block; font:600 10px var(--mono); letter-spacing:0.09em; text-transform:uppercase;
  padding:4px 10px; border-radius:5px; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 6%, transparent); border:var(--bw, 1px) solid var(--hair); }
@container site (max-width:860px){
  .wsp-portfolio3dcards .p3-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
}
@container site (max-width:560px){
  .wsp-portfolio3dcards .p3-grid{ grid-template-columns:1fr; }
}

/* --- accordionsection (SB_04 port) --- */
.wsp-accordionsection .ws-shead{ margin-bottom:clamp(2.5rem,5cqw,3.5rem); }
.wsp-accordionsection .as-list{ display:flex; flex-direction:column; gap:10px; }
.wsp-accordionsection .as-item{ background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); overflow:hidden; }
.wsp-accordionsection .as-item[data-open="1"]{ border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.wsp-accordionsection .as-trigger{ display:flex; align-items:center; gap:1rem; width:100%; padding:1.15rem 1.4rem; margin:0; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-head, var(--font)); color:var(--ink); transition:color .2s ease; }
.wsp-accordionsection .as-trigger:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.wsp-accordionsection .as-trigger:hover .as-trigger-text{ color:var(--accent); }
.wsp-accordionsection .as-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:calc(var(--radius) - 2px); }
.wsp-accordionsection .as-num{ flex-shrink:0; width:1.75rem; font:700 0.75rem var(--mono); letter-spacing:1px; color:var(--accent); opacity:.55; transition:opacity .2s ease; }
.wsp-accordionsection .as-item[data-open="1"] .as-num{ opacity:1; }
.wsp-accordionsection .as-trigger-text{ flex:1; font:600 1.02rem/1.3 var(--font); letter-spacing:-0.01em; color:var(--ink); transition:color .2s ease; }
.wsp-accordionsection .as-icon{ position:relative; flex-shrink:0; width:1.25rem; height:1.25rem; }
.wsp-accordionsection .as-icon::before,
.wsp-accordionsection .as-icon::after{ content:''; position:absolute; background:var(--dim); transition:transform .35s ease, opacity .35s ease; }
.wsp-accordionsection .as-icon::before{ top:50%; left:15%; width:70%; height:1.5px; transform:translateY(-50%); }
.wsp-accordionsection .as-icon::after{ top:15%; left:50%; width:1.5px; height:70%; transform:translateX(-50%); }
.wsp-accordionsection .as-item[data-open="1"] .as-icon::before{ background:var(--accent); }
.wsp-accordionsection .as-item[data-open="1"] .as-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.wsp-accordionsection .as-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1); }
.wsp-accordionsection .as-item[data-open="1"] .as-panel{ grid-template-rows:1fr; }
.wsp-accordionsection .as-panel-in{ min-height:0; overflow:hidden; }
.wsp-accordionsection .as-content-inner{ padding:0 1.4rem 1.4rem 4.15rem; display:flex; flex-direction:column; gap:1rem; opacity:0; transition:opacity .3s ease .02s; }
.wsp-accordionsection .as-item[data-open="1"] .as-content-inner{ opacity:1; }
.wsp-accordionsection .as-content-inner p{ margin:0; font:400 0.925rem/1.7 var(--font); color:var(--dim); }
.wsp-accordionsection .as-content-inner ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
.wsp-accordionsection .as-content-inner li{ position:relative; padding-left:1.25rem; font:400 0.85rem/1.55 var(--font); color:var(--dim); }
.wsp-accordionsection .as-content-inner li::before{ content:''; position:absolute; left:0; top:0.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.6; }
@container site (max-width:560px){
  .wsp-accordionsection .as-trigger{ padding:1rem 1.15rem; gap:0.75rem; }
  .wsp-accordionsection .as-trigger-text{ font-size:0.95rem; }
  .wsp-accordionsection .as-content-inner{ padding:0 1.15rem 1.15rem 3rem; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-accordionsection .as-panel,
  .wsp-accordionsection .as-content-inner,
  .wsp-accordionsection .as-num,
  .wsp-accordionsection .as-trigger-text,
  .wsp-accordionsection .as-icon::before,
  .wsp-accordionsection .as-icon::after{ transition:none; }
}

/* --- beforeafter (SB_04 port) --- */
.wsp-beforeafter .ba-stage{ position:relative; width:min(940px,94cqw); margin:6px auto 0;
  aspect-ratio:16/9; border-radius:var(--radius,12px); overflow:hidden; isolation:isolate;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); cursor:ew-resize;
  touch-action:pan-y; -webkit-user-select:none; user-select:none; --pos:50%; }
.wsp-beforeafter .ba-layer{ position:absolute; inset:0; overflow:hidden; }
.wsp-beforeafter .ba-after{ background:linear-gradient(180deg, color-mix(in srgb, #22c55e 13%, var(--panel-2)), var(--panel-2) 48%); }
.wsp-beforeafter .ba-before{ background:linear-gradient(180deg, color-mix(in srgb, #ef4444 13%, var(--panel-2)), var(--panel-2) 48%);
  clip-path:inset(0 calc(100% - var(--pos)) 0 0); }

/* image-free wireframe "screenshots" — neutral ink blocks over the tinted layer */
.wsp-beforeafter .ba-shot{ position:absolute; inset:0; padding:clamp(14px,3.4cqw,30px);
  display:flex; flex-direction:column; gap:clamp(8px,1.8cqw,16px); }
.wsp-beforeafter .ba-wf-bar{ height:clamp(14px,3cqw,26px); border-radius:5px; flex:0 0 auto;
  background:color-mix(in srgb, var(--ink) 14%, transparent); }
.wsp-beforeafter .ba-wf-row{ display:flex; gap:clamp(8px,1.8cqw,16px); flex:1 1 auto; min-height:0; }
.wsp-beforeafter .ba-wf-blk{ border-radius:5px; flex:1; background:color-mix(in srgb, var(--ink) 10%, transparent); }
.wsp-beforeafter .ba-wf-blk.tall{ flex:0 0 46%; }
.wsp-beforeafter .ba-wf-stack{ display:flex; flex-direction:column; gap:clamp(8px,1.8cqw,16px); flex:1; }
.wsp-beforeafter .ba-wf-ln{ height:clamp(6px,1.4cqw,11px); border-radius:3px; flex:0 0 auto;
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
.wsp-beforeafter .ba-wf-ln.w1{ width:82%; }
.wsp-beforeafter .ba-wf-ln.w2{ width:60%; }
.wsp-beforeafter .ba-wf-ln.w3{ width:38%; }
.wsp-beforeafter .ba-wf-pill{ height:clamp(14px,3cqw,26px); width:52%; border-radius:99px; flex:0 0 auto;
  background:color-mix(in srgb, var(--ink) 14%, transparent); }
.wsp-beforeafter .ba-wf-hero{ flex:1 1 auto; min-height:0; border-radius:12px;
  background:color-mix(in srgb, var(--ink) 12%, transparent); }
.wsp-beforeafter .ba-wf-dots{ display:flex; gap:clamp(10px,2.4cqw,22px); justify-content:center; flex:0 0 auto; }
.wsp-beforeafter .ba-wf-dots i{ width:clamp(20px,4.6cqw,40px); height:clamp(20px,4.6cqw,40px); border-radius:50%;
  background:color-mix(in srgb, var(--ink) 12%, transparent); }
.wsp-beforeafter .ba-wf-cta{ height:clamp(16px,3.4cqw,30px); border-radius:8px; flex:0 0 auto;
  background:color-mix(in srgb, var(--accent) 34%, transparent); }

/* corner labels (semantic bad-red / ok-green stay literal) */
.wsp-beforeafter .ba-tag{ position:absolute; top:12px; z-index:3; font:700 11px/1 var(--mono,var(--font));
  letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:6px; }
.wsp-beforeafter .ba-tag.before{ left:12px; background:rgba(239,68,68,.16); color:#f87171; }
.wsp-beforeafter .ba-tag.after{ right:12px; background:rgba(34,197,94,.16); color:#4ade80; }

/* the real divider + grab handle */
.wsp-beforeafter .ba-divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px;
  transform:translateX(-1px); background:var(--accent); z-index:4; pointer-events:none; }
.wsp-beforeafter .ba-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(34px,7cqw,46px); height:clamp(34px,7cqw,46px); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-text,#04121a);
  border:2px solid color-mix(in srgb, var(--accent) 55%, #fff);
  box-shadow:0 2px 12px rgba(0,0,0,.4); cursor:ew-resize; pointer-events:auto;
  touch-action:none; transition:transform .15s ease; }
.wsp-beforeafter .ba-handle svg{ width:56%; height:56%; }
.wsp-beforeafter .ba-handle:hover{ transform:translate(-50%,-50%) scale(1.08); }
.wsp-beforeafter .ba-handle:focus-visible{ outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 12px rgba(0,0,0,.4); }

/* captions below */
.wsp-beforeafter .ba-caps{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3cqw,32px);
  width:min(940px,94cqw); margin:22px auto 0; text-align:left; }
.wsp-beforeafter .ba-cap{ margin:0; display:flex; gap:9px;
  font:400 clamp(13px,1.5cqw,15px)/1.6 var(--font); color:var(--dim); }
.wsp-beforeafter .ba-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:.42em; }
.wsp-beforeafter .ba-dot.before{ background:#ef4444; }
.wsp-beforeafter .ba-dot.after{ background:#22c55e; }

@container site (max-width:640px){
  .wsp-beforeafter .ba-stage{ aspect-ratio:4/3; }
  .wsp-beforeafter .ba-caps{ grid-template-columns:1fr; gap:12px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-beforeafter .ba-handle{ transition:none; }
  .wsp-beforeafter .ba-handle:hover{ transform:translate(-50%,-50%); }
}

/* --- faqaccordion (SB_04 port) --- */
.wsp-faqaccordion .ws-shead .ws-sub{ margin-inline:auto; max-width:52ch; }
.wsp-faqaccordion .fqa-list{ display:flex; flex-direction:column; }
.wsp-faqaccordion .fqa-item{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-faqaccordion .fqa-item:first-child{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-faqaccordion .fqa-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0; padding:clamp(1.05rem,2cqw,1.4rem) 0; background:none; border:0; cursor:pointer; text-align:left; font:500 clamp(0.95rem,2cqw,1.05rem)/1.4 var(--font); color:var(--ink); transition:color .2s ease; -webkit-user-select:none; user-select:none; }
.wsp-faqaccordion .fqa-q:hover{ color:var(--accent); }
.wsp-faqaccordion .fqa-qt{ flex:1; }
.wsp-faqaccordion .fqa-q:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.wsp-faqaccordion .fqa-icon{ position:relative; flex-shrink:0; width:1.2rem; height:1.2rem; }
.wsp-faqaccordion .fqa-icon::before, .wsp-faqaccordion .fqa-icon::after{ content:''; position:absolute; background:var(--dim); transition:transform .3s ease; }
.wsp-faqaccordion .fqa-icon::before{ top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }
.wsp-faqaccordion .fqa-icon::after{ left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }
.wsp-faqaccordion .fqa-item[data-open="1"] .fqa-icon::after{ transform:translateX(-50%) rotate(90deg); }
.wsp-faqaccordion .fqa-item[data-open="1"] .fqa-icon::before, .wsp-faqaccordion .fqa-item[data-open="1"] .fqa-icon::after{ background:var(--accent); }
.wsp-faqaccordion .fqa-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.wsp-faqaccordion .fqa-item[data-open="1"] .fqa-panel{ grid-template-rows:1fr; }
.wsp-faqaccordion .fqa-panel-in{ min-height:0; overflow:hidden; }
.wsp-faqaccordion .fqa-a{ padding:0 0 clamp(1.1rem,2cqw,1.45rem); font:400 clamp(0.88rem,1.6cqw,0.95rem)/1.7 var(--font); color:var(--dim); max-width:60ch; opacity:0; transition:opacity .3s ease .02s; }
.wsp-faqaccordion .fqa-item[data-open="1"] .fqa-a{ opacity:1; }
@container site (max-width:640px){
  .wsp-faqaccordion .fqa-q{ padding:1.05rem 0; }
  .wsp-faqaccordion .fqa-a{ padding-bottom:1.1rem; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-faqaccordion .fqa-panel, .wsp-faqaccordion .fqa-a, .wsp-faqaccordion .fqa-icon::before, .wsp-faqaccordion .fqa-icon::after, .wsp-faqaccordion .fqa-q{ transition:none; }
}

/* --- featurecards (SB_04 port) --- */
.wsp-featurecards .fc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 1.8cqw, 22px); margin-top:clamp(30px, 4cqw, 52px); }
.wsp-featurecards .fc-card{ position:relative; display:flex; flex-direction:column; gap:clamp(10px, 1.2cqw, 14px);
  padding:clamp(22px, 2.6cqw, 30px) clamp(20px, 2.4cqw, 28px); border-radius:var(--radius, 12px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); background-image:var(--surface-grad, none);
  transition:transform 200ms var(--ease-pop, cubic-bezier(.2,.8,.25,1)), border-color 200ms linear; }
.wsp-featurecards .fc-glow{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  box-shadow:0 12px 30px -8px color-mix(in srgb, var(--accent) 30%, transparent); transition:opacity 220ms ease; }
.wsp-featurecards .fc-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 60%, var(--hair)); }
.wsp-featurecards .fc-card:hover .fc-glow{ opacity:1; }

.wsp-featurecards .fc-ico{ display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:clamp(40px, 4.4cqw, 46px); height:clamp(40px, 4.4cqw, 46px); border-radius:11px;
  border:var(--bw, 1px) solid var(--hair); background:var(--bg); color:var(--accent);
  transition:border-color 200ms linear, color 200ms linear; }
.wsp-featurecards .fc-ico svg{ width:20px; height:20px; }
.wsp-featurecards .fc-card:hover .fc-ico{ border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }

.wsp-featurecards .fc-title{ margin:0; color:var(--ink); letter-spacing:-0.01em;
  font:600 clamp(15px, 1.55cqw, 17px)/1.28 var(--font-head, var(--font)); }
.wsp-featurecards .fc-text{ margin:0; color:var(--dim); font:400 clamp(13px, 1.45cqw, 14px)/1.62 var(--font); }
.wsp-featurecards .fc-link{ margin-top:4px; }

@container site (max-width:900px){
  .wsp-featurecards .fc-grid{ grid-template-columns:repeat(2, 1fr); }
}
@container site (max-width:560px){
  .wsp-featurecards .fc-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-featurecards .fc-card, .wsp-featurecards .fc-ico, .wsp-featurecards .fc-glow{ transition:none; }
  .wsp-featurecards .fc-card:hover{ transform:none; }
}

/* --- featuregrid (SB_04 port) --- */
.wsp-featuregrid .fg-grid{ display:grid; grid-template-columns:repeat(var(--fg-cols,3),1fr); gap:clamp(16px,2.2cqw,26px); margin-top:8px; }
.wsp-featuregrid .fg-card{ padding:clamp(22px,3cqw,30px) clamp(20px,2.6cqw,28px); background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); box-shadow:var(--elev,none); transition:transform 220ms cubic-bezier(.2,.8,.25,1), border-color 200ms linear; }
.wsp-featuregrid .fg-card:hover{ transform:translateY(-3px); border-color:var(--accent); }
.wsp-featuregrid .fg-ico{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:11px; background:var(--accent); color:var(--accent-text,var(--bg)); margin-bottom:18px; }
.wsp-featuregrid .fg-ico svg{ width:22px; height:22px; }
.wsp-featuregrid .fg-grid.fg-tint .fg-ico{ background:var(--accent-fill); color:var(--accent); }
.wsp-featuregrid .fg-t{ display:block; margin:0 0 8px; font:600 clamp(15px,1.6cqw,17px)/1.3 var(--font-head,var(--font)); letter-spacing:-0.01em; color:var(--ink); }
.wsp-featuregrid .fg-d{ margin:0; font:400 clamp(13px,1.45cqw,14.5px)/1.6 var(--font); color:var(--dim); }
@container site (max-width:860px){
  .wsp-featuregrid .fg-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-featuregrid .fg-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-featuregrid .fg-card{ transition:border-color 200ms linear; }
  .wsp-featuregrid .fg-card:hover{ transform:none; }
}

/* --- imagetextrow (SB_04 port) --- */
.wsp-imagetextrow .ws-shead{ margin-inline:auto; text-align:center; }
.wsp-imagetextrow .ws-shead .ws-sub{ margin-inline:auto; }

.wsp-imagetextrow .itr-rows{ display:flex; flex-direction:column; gap:clamp(38px,5.4cqw,60px); }
.wsp-imagetextrow .itr-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4cqw,56px); align-items:center; }
.wsp-imagetextrow .itr-row + .itr-row{ padding-top:clamp(38px,5.4cqw,60px); border-top:var(--bw, 1px) solid var(--hair); }
.wsp-imagetextrow .itr-row.flip .itr-media{ order:2; }

.wsp-imagetextrow .itr-media{ position:relative; aspect-ratio:4 / 3; border-radius:var(--radius,14px);
  border:var(--bw, 1px) solid var(--hair); background-color:var(--panel); background-size:cover; background-position:center;
  overflow:hidden; display:flex; align-items:center; justify-content:center; }
.wsp-imagetextrow .itr-media::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 120% at 22% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    linear-gradient(150deg, color-mix(in srgb, var(--panel-2, var(--panel)) 82%, transparent), transparent 70%); }
.wsp-imagetextrow .itr-media.has-img::before{ opacity:0; }
.wsp-imagetextrow .itr-ph{ position:relative; font:600 10px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

.wsp-imagetextrow .itr-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; text-align:left; }
.wsp-imagetextrow .itr-label{ font:600 10px var(--mono); letter-spacing:3px; text-transform:uppercase; color:var(--accent); }
.wsp-imagetextrow .itr-title{ margin:0; font:700 clamp(19px,2.4cqw,26px)/1.2 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-imagetextrow .itr-text{ margin:0; font:400 clamp(14px,1.55cqw,16px)/1.65 var(--font); color:var(--dim); max-width:52ch; }
.wsp-imagetextrow .itr-cta{ margin-top:3px; }

@container site (max-width:720px){
  .wsp-imagetextrow .itr-row,
  .wsp-imagetextrow .itr-row.flip{ grid-template-columns:1fr; gap:20px; }
  .wsp-imagetextrow .itr-row.flip .itr-media{ order:0; }
}

/* --- logocloud (SB_04 port) --- */
.wsp-logocloud .lc-head{ margin-bottom:clamp(28px,5cqw,44px); }
.wsp-logocloud .lc-head .ws-h2{ margin-top:14px; }
.wsp-logocloud .lc-head .ws-sub{ margin:12px auto 0; }
.wsp-logocloud .lc-cloud{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(12px,1.6cqw,18px); width:min(920px,90cqw); margin:0 auto; }
.wsp-logocloud .lc-chip{ display:inline-flex; align-items:center; gap:11px;
  padding:10px 18px 10px 11px; border:var(--bw, 1px) solid var(--hair); border-radius:999px;
  background:var(--panel); color:var(--dim); transition:transform .25s ease, color .2s ease; }
.wsp-logocloud .lc-chip:hover{ transform:translateY(-2px); color:var(--ink); }
.wsp-logocloud .lc-mono{ display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex:none; background:var(--panel-2); color:var(--faint);
  font:700 11px/1 var(--font-head, var(--font)); letter-spacing:.5px; transition:color .2s ease; }
.wsp-logocloud .lc-chip:hover .lc-mono{ color:var(--accent); }
.wsp-logocloud .lc-name{ font:600 15px/1 var(--font-head, var(--font)); letter-spacing:.2px; white-space:nowrap; }
.wsp-logocloud .lc-chip.feat{ border-color:var(--accent-dim); color:var(--ink); }
.wsp-logocloud .lc-chip.feat .lc-mono{ background:var(--accent-fill); color:var(--accent); }
@container site (max-width:640px){
  .wsp-logocloud .lc-cloud{ gap:10px; width:min(560px,94cqw); }
  .wsp-logocloud .lc-chip{ padding:8px 14px 8px 9px; gap:9px; }
  .wsp-logocloud .lc-mono{ width:24px; height:24px; }
  .wsp-logocloud .lc-name{ font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-logocloud .lc-chip, .wsp-logocloud .lc-mono{ transition:none; }
  .wsp-logocloud .lc-chip:hover{ transform:none; }
}

/* --- secclientlogos (SB_04 port) --- */
.ws-sec.wsp-secclientlogos .scl-label{ display:block; margin-bottom:clamp(18px,2.6cqw,26px); }
.wsp-secclientlogos .scl-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  width:min(860px,100%); margin:0 auto; background:var(--panel);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; }
.wsp-secclientlogos .scl-logo{ display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(58px,8cqw,84px); padding:clamp(14px,2cqw,22px) clamp(9px,1.4cqw,16px);
  box-shadow:inset -1px -1px 0 0 var(--hair); color:var(--dim); text-decoration:none;
  transition:color .2s ease; }
.wsp-secclientlogos .scl-logo:hover{ color:var(--ink); background:var(--panel-2); }
.wsp-secclientlogos .scl-mark{ font:800 clamp(11.5px,1.4cqw,13px)/1.2 var(--font-head, var(--font));
  letter-spacing:-.01em; opacity:.6; transition:opacity .2s ease; }
.wsp-secclientlogos .scl-logo:hover .scl-mark{ opacity:1; }
.wsp-secclientlogos .scl-img{ max-width:100%; max-height:clamp(20px,3cqw,30px); width:auto; height:auto;
  object-fit:contain; opacity:.62; transition:opacity .2s ease; }
.wsp-secclientlogos .scl-logo:hover .scl-img{ opacity:1; }
@container site (max-width:560px){
  .wsp-secclientlogos .scl-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); width:min(460px,100%); }
  .wsp-secclientlogos .scl-logo{ min-height:54px; padding:14px 10px; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-secclientlogos .scl-logo,
  .wsp-secclientlogos .scl-mark,
  .wsp-secclientlogos .scl-img{ transition:none; }
}

/* --- logogrid (SB_04 port) --- */
.wsp-logogrid .lgx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5cqw,18px); }
.wsp-logogrid .lgx-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:clamp(22px,3cqw,32px) 18px; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius,12px); transition:border-color 200ms ease; }
.wsp-logogrid .lgx-cell:hover{ border-color:var(--accent); }
.wsp-logogrid .lgx-mark{ display:flex; align-items:center; justify-content:center; min-height:clamp(40px,6cqw,52px);
  font:700 clamp(17px,2.2cqw,21px)/1 var(--font-head, var(--font)); letter-spacing:.04em; text-align:center;
  color:var(--dim); transition:color 200ms ease; }
.wsp-logogrid .lgx-cell:hover .lgx-mark{ color:var(--ink); }
.wsp-logogrid .lgx-cap{ font:500 11px/1.3 var(--font); letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); text-align:center; }
@container site (max-width:960px){ .wsp-logogrid .lgx-grid{ grid-template-columns:repeat(3,1fr); } }
@container site (max-width:640px){ .wsp-logogrid .lgx-grid{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion:reduce){ .wsp-logogrid .lgx-cell, .wsp-logogrid .lgx-mark{ transition:none; } }

/* --- mediagallery (SB_04 port) --- */
.wsp-mediagallery .mg-wrap{ width:min(1280px,92cqw); margin:0 auto; }

.wsp-mediagallery .mg-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px 28px; margin-bottom:clamp(24px,3.4cqw,40px); }
.wsp-mediagallery .mg-head .ws-kick{ margin:0; }
.wsp-mediagallery .mg-head .ws-h2{ text-align:right; }

.wsp-mediagallery .mg-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(200px,26cqw,280px); gap:4px; }
.wsp-mediagallery .mg-item{ position:relative; overflow:hidden; cursor:pointer; outline:none; background:var(--panel); border-radius:calc(var(--radius) - 10px); }
.wsp-mediagallery .mg-tall{ grid-row:span 2; }
.wsp-mediagallery .mg-wide{ grid-column:span 2; }
.wsp-mediagallery .mg-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }

.wsp-mediagallery .mg-img{ position:absolute; inset:0; display:block; transform:scale(1.001); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.wsp-mediagallery .mg-item:hover .mg-img{ transform:scale(1.045); }

/* token-driven placeholder colorways (origin's fixed dark hexes → brand accent) */
.wsp-mediagallery .mg-a0{ background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--panel)) 0%, var(--panel-2, var(--panel)) 100%); }
.wsp-mediagallery .mg-a1{ background:linear-gradient(135deg, color-mix(in srgb, var(--accent2, var(--accent)) 24%, var(--panel)) 0%, var(--panel-2, var(--panel)) 100%); }
.wsp-mediagallery .mg-a2{ background:radial-gradient(90% 82% at 78% 22%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), var(--panel-2, var(--panel)); }
.wsp-mediagallery .mg-a3{ background:conic-gradient(from 210deg at 60% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 46%, color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent) 80%, transparent), var(--panel-2, var(--panel)); }
.wsp-mediagallery .mg-a4{ background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--ink) 7%, var(--panel-2, var(--panel)))); }
.wsp-mediagallery .mg-a5{ background:radial-gradient(96% 90% at 22% 82%, color-mix(in srgb, var(--accent2, var(--accent)) 30%, transparent), transparent 72%), var(--panel-2, var(--panel)); }

.wsp-mediagallery .mg-overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:clamp(18px,2.4cqw,28px); background:color-mix(in srgb, var(--bg) 82%, transparent); opacity:0; transition:opacity .3s ease; }
.wsp-mediagallery .mg-item:hover .mg-overlay,
.wsp-mediagallery .mg-item:focus-visible .mg-overlay{ opacity:1; }
.wsp-mediagallery .mg-cat{ font:600 .68rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.wsp-mediagallery .mg-name{ font:600 clamp(1rem,1.5cqw,1.18rem)/1.25 var(--font-head, var(--font)); letter-spacing:-.01em; color:var(--ink); }

/* ---- lightbox: absolute over the section band (no position:fixed — the builder
   window is a transformed ancestor); transparent + non-interactive until open. The
   panel centres itself in the visible band via mount()'s env.scroll math, with a CSS
   centre fallback so it still lands sensibly if mount never runs. ---- */
.wsp-mediagallery .mg-lightbox{ position:absolute; inset:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); opacity:0; pointer-events:none; transition:opacity .28s ease; }
.wsp-mediagallery.mg-open .mg-lightbox{ opacity:1; pointer-events:auto; }
.wsp-mediagallery .mg-lb-panel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(760px,88cqw); height:min(460px,80%); max-height:calc(100% - 28px); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--panel-2, var(--panel)); box-shadow:var(--elev); }
.wsp-mediagallery .mg-lb-art{ position:absolute; inset:0; z-index:1; }
.wsp-mediagallery .mg-lb-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:7px; padding:clamp(20px,3cqw,34px); background:linear-gradient(to top, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 58%, transparent 100%); }
.wsp-mediagallery .mg-lb-cat{ font:600 .72rem var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.wsp-mediagallery .mg-lb-title{ font:700 clamp(1.25rem,2.4cqw,1.9rem)/1.15 var(--font-head, var(--font)); letter-spacing:-.02em; color:var(--ink); }
.wsp-mediagallery .mg-lb-count{ position:absolute; top:13px; left:15px; z-index:3; font:600 .7rem var(--mono); letter-spacing:.1em; color:var(--ink); background:color-mix(in srgb, var(--bg) 42%, transparent); padding:4px 9px; border-radius:999px; }
.wsp-mediagallery .mg-lb-close,
.wsp-mediagallery .mg-lb-nav{ position:absolute; z-index:3; appearance:none; -webkit-appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; background:color-mix(in srgb, var(--bg) 46%, transparent); border:1px solid color-mix(in srgb, var(--ink) 24%, transparent); color:var(--ink); border-radius:999px; transition:color .2s ease, border-color .2s ease; }
.wsp-mediagallery .mg-lb-close{ top:11px; right:12px; width:38px; height:38px; font-size:21px; line-height:1; }
.wsp-mediagallery .mg-lb-nav{ top:50%; transform:translateY(-50%); width:44px; height:44px; font-size:18px; line-height:1; }
.wsp-mediagallery .mg-lb-nav.prev{ left:12px; }
.wsp-mediagallery .mg-lb-nav.next{ right:12px; }
.wsp-mediagallery .mg-lb-close:hover,
.wsp-mediagallery .mg-lb-nav:hover{ border-color:var(--accent); color:var(--accent); }
.wsp-mediagallery .mg-lb-close:focus-visible,
.wsp-mediagallery .mg-lb-nav:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@container site (max-width:820px){
  .wsp-mediagallery .mg-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(178px,40cqw,220px); }
  .wsp-mediagallery .mg-tall{ grid-row:span 1; }
  .wsp-mediagallery .mg-wide{ grid-column:span 2; }
  .wsp-mediagallery .mg-overlay{ opacity:1; background:linear-gradient(to top, color-mix(in srgb, var(--bg) 84%, transparent) 0%, color-mix(in srgb, var(--bg) 18%, transparent) 62%, transparent 100%); }
  .wsp-mediagallery .mg-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .wsp-mediagallery .mg-head .ws-h2{ text-align:left; }
}
@container site (max-width:480px){
  .wsp-mediagallery .mg-grid{ grid-template-columns:1fr; }
  .wsp-mediagallery .mg-wide{ grid-column:auto; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-mediagallery .mg-img,
  .wsp-mediagallery .mg-overlay,
  .wsp-mediagallery .mg-lightbox,
  .wsp-mediagallery .mg-lb-close,
  .wsp-mediagallery .mg-lb-nav{ transition:none; }
}

/* --- newslettercta (SB_04 port) --- */
.wsp-newslettercta .nlc-copy{ max-width:560px; margin-inline:auto; }
.wsp-newslettercta .nlc-label{ display:inline-block; margin-bottom:16px; padding:5px 13px;
  font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  border:var(--bw, 1px) solid var(--hair); border-radius:99px; }
.wsp-newslettercta .nlc-copy .ws-h2{ margin:0; }
.wsp-newslettercta .nlc-desc{ margin-top:12px; margin-inline:auto; max-width:48ch; }

.wsp-newslettercta .nlc-form{ width:min(480px, 100%); margin:28px auto 0; display:flex;
  flex-direction:column; gap:12px; }
.wsp-newslettercta .nlc-row{ display:flex; align-items:stretch; gap:0; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  border-radius:calc(var(--radius, 12px) * .7);
  transition:border-color .18s ease, box-shadow .18s ease; }
.wsp-newslettercta .nlc-row:focus-within{ border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 3px var(--accent-fill); }
.wsp-newslettercta .nlc-input{ flex:1 1 auto; min-width:0; background:transparent; border:none;
  outline:none; color:var(--ink); font:400 14px var(--font); padding:13px 16px; text-align:left;
  -webkit-appearance:none; appearance:none; }
.wsp-newslettercta .nlc-input::placeholder{ color:var(--faint); }
.wsp-newslettercta .nlc-input:disabled{ opacity:.55; }
.wsp-newslettercta .nlc-btn{ flex:0 0 auto; border-radius:0; }

.wsp-newslettercta .nlc-fine{ margin:0 auto; max-width:46ch;
  font:400 11.5px/1.55 var(--font); color:var(--faint); }
.wsp-newslettercta .nlc-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  transition:color .18s ease; }
.wsp-newslettercta .nlc-link:hover{ color:var(--ink); }
.wsp-newslettercta .nlc-msg{ margin-top:2px; }

/* inline success — the form collapses into a confirmation row */
.wsp-newslettercta .nlc-done{ display:none; align-items:center; justify-content:center; gap:10px;
  width:min(480px, 100%); margin:28px auto 0; padding:13px 18px; color:var(--ink);
  font:500 14px var(--font); border-radius:calc(var(--radius, 12px) * .7);
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--hair)); background:var(--accent-fill); }
.wsp-newslettercta .nlc-check{ display:flex; flex:0 0 auto; color:var(--accent); }
.wsp-newslettercta .nlc-check svg{ width:18px; height:18px; }
.wsp-newslettercta .nlc-form.is-done .nlc-row,
.wsp-newslettercta .nlc-form.is-done .nlc-fine,
.wsp-newslettercta .nlc-form.is-done .nlc-msg{ display:none; }
.wsp-newslettercta .nlc-form.is-done .nlc-done{ display:flex; animation:nlc-rise .3s ease both; }
@keyframes nlc-rise{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

@container site (max-width:460px){
  .wsp-newslettercta .nlc-row{ flex-direction:column; overflow:visible; border:none;
    background:transparent; box-shadow:none; }
  .wsp-newslettercta .nlc-row:focus-within{ box-shadow:none; }
  .wsp-newslettercta .nlc-input{ border:var(--bw, 1px) solid var(--hair); background:var(--panel);
    border-radius:calc(var(--radius, 12px) * .6); text-align:center; }
  .wsp-newslettercta .nlc-input:focus{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
  .wsp-newslettercta .nlc-btn{ border-radius:calc(var(--radius, 12px) * .6); width:100%;
    justify-content:center; margin-top:10px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-newslettercta .nlc-form.is-done .nlc-done{ animation:none; }
}

/* --- numbercounter (SB_04 port) --- */
.wsp-numbercounter .nc-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(28px,3.5cqw,40px); width:min(1040px,90cqw); margin:44px auto 0; text-align:center; }
.wsp-numbercounter .nc-item{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; }
.wsp-numbercounter .nc-value{ font-family:var(--font-head,var(--font)); font-size:clamp(2.4rem,7.4cqw,4.2rem); font-weight:800; line-height:1; letter-spacing:-0.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
.wsp-numbercounter .nc-unit{ font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.09em; color:var(--ink); }
.wsp-numbercounter .nc-label{ font-size:0.9rem; line-height:1.5; color:var(--dim); max-width:15rem; }
@container site (max-width:900px){
  .wsp-numbercounter .nc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px clamp(20px,4cqw,32px); width:min(560px,92cqw); }
}
@container site (max-width:520px){
  .wsp-numbercounter .nc-grid{ grid-template-columns:1fr; gap:34px; width:min(340px,92cqw); }
}

/* --- pricingtable (SB_04 port) --- */
.wsp-pricingtable .ptb-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:20px; align-items:start; margin-top:44px; }
.wsp-pricingtable .ptb-card{ position:relative; display:flex; flex-direction:column; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) + 2px); padding:30px 26px; transition:border-color .2s ease, transform .2s ease; }
.wsp-pricingtable .ptb-card:hover{ border-color:color-mix(in srgb, var(--accent) 38%, var(--hair)); }
.wsp-pricingtable .ptb-card.is-hot{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset, 0 24px 54px -34px color-mix(in srgb, var(--accent) 60%, rgba(0,0,0,.5)); transform:translateY(-8px); }
.wsp-pricingtable .ptb-badge{ position:absolute; top:0; left:50%; transform:translate(-50%, -50%); font:700 10px var(--font); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; color:var(--accent-text, var(--bg)); background:var(--accent); padding:4px 12px; border-radius:999px; }
.wsp-pricingtable .ptb-plan{ font:600 12px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.wsp-pricingtable .ptb-price{ display:flex; align-items:baseline; gap:5px; margin:8px 0 4px; }
.wsp-pricingtable .ptb-amount{ font:800 clamp(30px, 5cqw, 44px) var(--font-head, var(--font)); line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; transition:opacity .15s ease; }
.wsp-pricingtable .ptb-period{ font:500 13px var(--font); color:var(--faint); }
.wsp-pricingtable .ptb-desc{ margin:6px 0 20px; padding-bottom:20px; border-bottom:var(--bw, 1px) solid var(--hair); font:400 13.5px/1.5 var(--font); color:var(--dim); }
.wsp-pricingtable .ptb-feats{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1 1 auto; }
.wsp-pricingtable .ptb-feat{ display:flex; align-items:flex-start; gap:10px; font:400 13.5px/1.45 var(--font); color:var(--dim); }
.wsp-pricingtable .ptb-feat svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--accent); }
.wsp-pricingtable .ptb-feat.is-off{ color:var(--faint); opacity:.62; }
.wsp-pricingtable .ptb-feat.is-off svg{ color:var(--faint); }
.wsp-pricingtable .ptb-card .ws-btn{ width:100%; justify-content:center; margin-top:auto; }
.wsp-pricingtable .ptb-toggle{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:26px; }
.wsp-pricingtable .ptb-tlabel{ display:inline-flex; align-items:center; gap:8px; font:600 13.5px var(--font); color:var(--dim); transition:color .2s ease; }
.wsp-pricingtable .ptb-tlabel.m{ color:var(--ink); }
.wsp-pricingtable.is-annual .ptb-tlabel.m{ color:var(--dim); }
.wsp-pricingtable.is-annual .ptb-tlabel.a{ color:var(--ink); }
.wsp-pricingtable .ptb-save{ font:700 10px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:3px 8px; border-radius:999px; }
.wsp-pricingtable .ptb-switch{ position:relative; flex:none; width:50px; height:28px; padding:0; margin:0; border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:var(--panel-2); cursor:pointer; -webkit-appearance:none; appearance:none; transition:border-color .2s ease; }
.wsp-pricingtable .ptb-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-pricingtable .ptb-switch[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); }
.wsp-pricingtable .ptb-thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--ink); pointer-events:none; transition:transform .2s ease, background .2s ease; }
.wsp-pricingtable .ptb-switch[aria-checked="true"] .ptb-thumb{ transform:translateX(22px); background:var(--accent-text, var(--bg)); }
@container site (max-width:560px){
  .wsp-pricingtable .ptb-grid{ margin-top:32px; }
  .wsp-pricingtable .ptb-card.is-hot{ transform:none; }
  .wsp-pricingtable .ptb-toggle{ gap:10px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-pricingtable .ptb-card, .wsp-pricingtable .ptb-amount, .wsp-pricingtable .ptb-switch,
  .wsp-pricingtable .ptb-thumb, .wsp-pricingtable .ptb-tlabel{ transition:none; }
}

/* --- sociallinks (SB_04 port) --- */
.wsp-sociallinks .ws-shead{ margin-bottom:0; }
.wsp-sociallinks .sl-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(8px,1.6cqw,18px); margin-top:clamp(22px,3.6cqw,38px); }
.wsp-sociallinks.left .sl-row{ justify-content:flex-start; }
.wsp-sociallinks .sl-link{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:11px; color:var(--dim); text-decoration:none;
  transition:color 180ms ease, transform 180ms var(--ease-pop,ease-out); }
.wsp-sociallinks .sl-link svg{ width:24px; height:24px; display:block; }
.wsp-sociallinks .sl-link:hover{ transform:scale(1.18); color:var(--ink); }
.wsp-sociallinks .sl-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px;
  color:var(--ink); transform:scale(1.12); }
/* per-platform brand colour on hover — the component's signature (brand marks stay
   literal; near-white marks map to the theme's --ink so they read in any theme) */
.wsp-sociallinks .sl-link[data-net="instagram"]:hover{ color:#E4405F; }
.wsp-sociallinks .sl-link[data-net="x"]:hover{ color:var(--ink); }
.wsp-sociallinks .sl-link[data-net="twitter"]:hover{ color:#1DA1F2; }
.wsp-sociallinks .sl-link[data-net="linkedin"]:hover{ color:#0A66C2; }
.wsp-sociallinks .sl-link[data-net="github"]:hover{ color:var(--ink); }
.wsp-sociallinks .sl-link[data-net="youtube"]:hover{ color:#FF0000; }
.wsp-sociallinks .sl-link[data-net="facebook"]:hover{ color:#1877F2; }
.wsp-sociallinks .sl-link[data-net="mastodon"]:hover{ color:#6364FF; }
.wsp-sociallinks .sl-link[data-net="bluesky"]:hover{ color:#0085FF; }
.wsp-sociallinks .sl-link[data-net="discord"]:hover{ color:#5865F2; }
.wsp-sociallinks .sl-link[data-net="rss"]:hover{ color:#F26522; }
.wsp-sociallinks .sl-link[data-net="email"]:hover{ color:var(--accent); }
.wsp-sociallinks .sl-link[data-net="mail"]:hover{ color:var(--accent); }
@container site (max-width:560px){
  .wsp-sociallinks .sl-row{ gap:8px; }
  .wsp-sociallinks .sl-link{ width:40px; height:40px; }
  .wsp-sociallinks .sl-link svg{ width:22px; height:22px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-sociallinks .sl-link{ transition:color 180ms ease; }
  .wsp-sociallinks .sl-link:hover,
  .wsp-sociallinks .sl-link:focus-visible{ transform:none; }
}

/* --- secblogpreview (SB_04 port) --- */
.wsp-secblogpreview .sbp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2cqw,22px); margin-top:8px; text-align:left; }
.wsp-secblogpreview .sbp-card{ display:flex; flex-direction:column; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; text-decoration:none; color:inherit; }
.wsp-secblogpreview a.sbp-card{ cursor:pointer; transition:transform 200ms var(--ease-pop,ease-out), border-color 200ms ease; }
.wsp-secblogpreview a.sbp-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); }
.wsp-secblogpreview a.sbp-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-secblogpreview .sbp-img{ height:clamp(120px,15cqw,150px); background-size:cover; background-position:center;
  background-image:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent2, var(--accent)) 9%, transparent)), var(--surface-grad,none); background-color:var(--panel-2, var(--panel)); }
.wsp-secblogpreview .sbp-i1{ background-image:linear-gradient(135deg, color-mix(in srgb, var(--accent2, var(--accent)) 18%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }
.wsp-secblogpreview .sbp-i2{ background-image:radial-gradient(85% 80% at 72% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--ink) 6%, transparent) 22px 23px); }
.wsp-secblogpreview .sbp-body{ display:flex; flex-direction:column; flex:1; padding:clamp(16px,1.8cqw,20px); }
.wsp-secblogpreview .sbp-cat{ margin-bottom:8px; font:700 10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--accent); }
.wsp-secblogpreview .sbp-card-title{ margin:0 0 8px; font:700 15px/1.35 var(--font-head, var(--font)); color:var(--ink); transition:color 160ms ease; }
.wsp-secblogpreview a.sbp-card:hover .sbp-card-title{ color:var(--accent); }
.wsp-secblogpreview .sbp-excerpt{ margin:0 0 16px; font:400 12.5px/1.6 var(--font); color:var(--dim); }
.wsp-secblogpreview .sbp-author{ display:flex; align-items:center; gap:8px; margin-top:auto; }
.wsp-secblogpreview .sbp-av{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 16%, transparent)); color:var(--accent); font:800 9px var(--font); letter-spacing:.02em; }
.wsp-secblogpreview .sbp-author-name{ font:600 11px var(--font); color:var(--ink); }
.wsp-secblogpreview .sbp-author-date{ margin-left:auto; font:400 11px var(--font); color:var(--faint); }
.wsp-secblogpreview .sbp-foot{ margin-top:clamp(26px,3.4cqw,40px); }
.wsp-secblogpreview .sbp-viewall svg{ width:1em; height:1em; transition:transform .2s ease; }
.wsp-secblogpreview .sbp-viewall:hover svg{ transform:translateX(3px); }
@container site (max-width:860px){ .wsp-secblogpreview .sbp-grid{ grid-template-columns:repeat(2,1fr); } }
@container site (max-width:560px){ .wsp-secblogpreview .sbp-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .wsp-secblogpreview a.sbp-card,
  .wsp-secblogpreview .sbp-card-title,
  .wsp-secblogpreview .sbp-viewall svg{ transition:none; }
  .wsp-secblogpreview a.sbp-card:hover{ transform:none; }
}

/* --- seccasestudycard (SB_04 port) — featured outcome cards, left accent edge ---
   Origin --scsc-* vars -> tokens: bg/surface->--panel(+--surface-grad), text->--ink,
   dim->--dim/--faint, accent->--accent, border->--hair, font->--font/--font-head/--mono.
   Entrance anims dropped (anims.js owns reveals); hover rides transform/opacity/color only. */
.wsp-seccasestudycard .scc-grid{ display:grid; gap:clamp(16px,2.2cqw,24px);
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
.wsp-seccasestudycard .scc-grid.solo{ grid-template-columns:minmax(0, 640px); justify-content:center; }
.wsp-seccasestudycard .scc-card{ display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,1.5cqw,18px); padding:clamp(24px,3cqw,36px);
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-left:3px solid var(--accent); border-radius:var(--radius,14px);
  transition:transform 220ms var(--ease-pop,ease-out); }
.wsp-seccasestudycard .scc-card:hover{ transform:translateY(-3px); }
.wsp-seccasestudycard .scc-top{ display:flex; align-items:center; }
.wsp-seccasestudycard .scc-company{ font:700 11px var(--mono,var(--font)); text-transform:uppercase;
  letter-spacing:.14em; color:var(--faint); }
.wsp-seccasestudycard .scc-logo{ display:block; max-height:26px; width:auto; object-fit:contain; }
.wsp-seccasestudycard .scc-stat{ margin:0; font:800 clamp(28px,5.2cqw,44px)/1.02 var(--font-head,var(--font));
  letter-spacing:-.03em; color:var(--accent); }
.wsp-seccasestudycard .scc-quote{ margin:0; font:italic 400 16px/1.7 var(--font); color:var(--dim); }
.wsp-seccasestudycard .scc-author{ display:flex; align-items:center; gap:11px; margin-top:2px; }
.wsp-seccasestudycard .scc-av{ flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; font:800 12px var(--font-head,var(--font));
  background:var(--accent); color:var(--accent-text,#04121a); }
.wsp-seccasestudycard .scc-av.m1{ opacity:.9; }
.wsp-seccasestudycard .scc-av.m2{ opacity:.8; }
.wsp-seccasestudycard .scc-who{ display:flex; flex-direction:column; }
.wsp-seccasestudycard .scc-name{ font:700 13px var(--font); color:var(--ink); }
.wsp-seccasestudycard .scc-role{ font:400 11px var(--font); font-style:normal; color:var(--faint); }
.wsp-seccasestudycard .scc-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:2px;
  font:700 13px var(--font); color:var(--accent); text-decoration:none; cursor:pointer;
  transition:opacity 180ms linear; }
.wsp-seccasestudycard .scc-cta svg{ width:15px; height:15px; transition:transform 180ms var(--ease-pop,ease-out); }
.wsp-seccasestudycard .scc-cta:hover{ opacity:.85; }
.wsp-seccasestudycard .scc-cta:hover svg{ transform:translateX(3px); }
.wsp-seccasestudycard .scc-cta:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
@container site (max-width:860px){
  .wsp-seccasestudycard .scc-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}
@container site (max-width:560px){
  .wsp-seccasestudycard .scc-grid,
  .wsp-seccasestudycard .scc-grid.solo{ grid-template-columns:1fr; }
  .wsp-seccasestudycard .scc-quote{ font-size:15px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccasestudycard .scc-card{ transition:none; }
  .wsp-seccasestudycard .scc-card:hover{ transform:none; }
  .wsp-seccasestudycard .scc-cta svg{ transition:none; }
  .wsp-seccasestudycard .scc-cta:hover svg{ transform:none; }
}

/* --- seccaseresults (SB_04 port) --- */
.wsp-seccaseresults .scr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8cqw,18px);
  margin-top:clamp(30px,4cqw,44px); align-items:start; }

.wsp-seccaseresults .scr-card{ position:relative; display:flex; flex-direction:column; gap:clamp(15px,1.9cqw,20px);
  padding:clamp(22px,2.7cqw,28px); border-radius:var(--radius,12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none);
  transition:border-color .2s ease, transform .3s cubic-bezier(.2,.8,.25,1); }
.wsp-seccaseresults .scr-card:hover{ border-color:color-mix(in srgb, var(--accent) 30%, var(--hair)); transform:translateY(-3px); }

/* featured card — accent-tinted, ringed (the origin's centre card) */
.wsp-seccaseresults .scr-card.is-featured{ border-color:color-mix(in srgb, var(--accent) 34%, transparent);
  background:color-mix(in srgb, var(--accent) 5%, var(--panel));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.wsp-seccaseresults .scr-flag{ position:absolute; top:0; right:clamp(18px,2.4cqw,24px); transform:translateY(-50%);
  padding:3px 10px; border-radius:99px; white-space:nowrap;
  font:700 9px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text,#04121a); background:var(--accent-grad,var(--accent)); background-color:var(--accent); }

.wsp-seccaseresults .scr-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wsp-seccaseresults .scr-logo{ font:800 clamp(16px,2cqw,18px) var(--font-head,var(--font)); letter-spacing:-.02em; color:var(--ink); }
.wsp-seccaseresults .scr-badge{ flex:none; padding:3px 9px; border-radius:5px;
  font:700 9px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 5%, transparent); border:var(--bw, 1px) solid var(--hair); }

.wsp-seccaseresults .scr-quote{ margin:0; font:italic 400 clamp(15px,1.9cqw,17px)/1.6 var(--font-head,var(--font)); color:var(--ink); }

.wsp-seccaseresults .scr-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.wsp-seccaseresults .scr-stat{ display:flex; flex-direction:column; gap:2px; }
.wsp-seccaseresults .scr-stat b{ font:800 clamp(18px,2.3cqw,21px) var(--font-head,var(--font));
  letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
.wsp-seccaseresults .scr-stat i{ font:400 10px var(--font); color:var(--faint); font-style:normal; }

/* the read-case affordance — a real link OR a disclosure toggle, styled identically */
.wsp-seccaseresults .scr-link{ appearance:none; -webkit-appearance:none; background:none; border:0; padding:0;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; width:max-content; text-decoration:none;
  font:600 12px var(--font); color:var(--accent); transition:color .18s ease; }
.wsp-seccaseresults .scr-link svg{ width:13px; height:13px; transition:transform .2s ease; }
.wsp-seccaseresults .scr-link:hover svg{ transform:translateX(3px); }
.wsp-seccaseresults .scr-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wsp-seccaseresults .scr-detail p{ margin:0; padding-top:14px; border-top:var(--bw, 1px) solid var(--hair);
  font:400 13px/1.6 var(--font); color:var(--dim);
  opacity:0; transform:translateY(-4px); transition:opacity .28s ease, transform .28s ease; }
.wsp-seccaseresults .scr-detail.in p{ opacity:1; transform:none; }

@container site (max-width:860px){
  .wsp-seccaseresults .scr-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:560px){
  .wsp-seccaseresults .scr-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccaseresults .scr-card,
  .wsp-seccaseresults .scr-card:hover,
  .wsp-seccaseresults .scr-link svg,
  .wsp-seccaseresults .scr-detail p{ transition:none; transform:none; }
  .wsp-seccaseresults .scr-detail p{ opacity:1; }
}

/* --- seccasestudy (SB_04 port) — alternating horizontal case-study cards --- */
.wsp-seccasestudy .ws-shead{ margin-inline:auto; }
.wsp-seccasestudy .scs-list{ display:flex; flex-direction:column; gap:clamp(16px,2cqw,24px); margin-top:clamp(30px,4cqw,48px); }
.wsp-seccasestudy .scs-item{ display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px);
  background:var(--panel); background-image:var(--surface-grad,none);
  transition:transform .4s cubic-bezier(.2,.8,.25,1), border-color .25s ease; }
.wsp-seccasestudy .scs-item:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 30%, var(--hair)); }
.wsp-seccasestudy .scs-item.flip .scs-visual{ order:2; }
.wsp-seccasestudy .scs-item.flip .scs-content{ order:1; }

.wsp-seccasestudy .scs-visual{ position:relative; min-height:clamp(200px,26cqw,300px); overflow:hidden;
  display:flex; align-items:flex-end; padding:26px;
  background:
    radial-gradient(120% 140% at 18% 12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--panel-2, var(--panel))), var(--panel-2, var(--panel))); }
.wsp-seccasestudy .scs-item:nth-of-type(3n+2) .scs-visual{
  background:
    radial-gradient(120% 140% at 82% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    linear-gradient(215deg, color-mix(in srgb, var(--accent) 13%, var(--panel-2, var(--panel))), var(--panel-2, var(--panel))); }
.wsp-seccasestudy .scs-item:nth-of-type(3n) .scs-visual{
  background:
    radial-gradient(120% 150% at 28% 82%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    linear-gradient(320deg, color-mix(in srgb, var(--accent) 11%, var(--panel-2, var(--panel))), var(--panel-2, var(--panel))); }
.wsp-seccasestudy .scs-mono{ position:absolute; top:50%; left:50%; transform:translate(-50%,-54%);
  font:800 clamp(90px,16cqw,150px)/1 var(--font-head, var(--font)); letter-spacing:-0.04em;
  color:color-mix(in srgb, var(--ink) 8%, transparent); pointer-events:none; user-select:none; }
.wsp-seccasestudy .scs-visual.has-img{ background:var(--panel-2, var(--panel)) center/cover no-repeat; }
.wsp-seccasestudy .scs-visual.has-img::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, color-mix(in srgb, var(--bg) 62%, transparent), transparent 55%); }
.wsp-seccasestudy .scs-vlabel{ position:relative; z-index:1; font:700 11px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); padding:6px 12px; border-radius:7px;
  background:color-mix(in srgb, var(--ink) 6%, transparent); border:var(--bw, 1px) solid var(--hair); }

.wsp-seccasestudy .scs-content{ display:flex; flex-direction:column; justify-content:center; gap:18px;
  padding:clamp(26px,3.4cqw,40px); background:var(--panel); background-image:var(--surface-grad,none); }
.wsp-seccasestudy .scs-company{ display:block; font:700 14px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.01em; }
.wsp-seccasestudy .scs-meta{ display:block; margin-top:3px; font:400 11.5px var(--font); color:var(--dim); font-style:normal; }
.wsp-seccasestudy .scs-quote{ margin:0; font:500 clamp(17px,2.1cqw,20px)/1.5 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.005em; }
.wsp-seccasestudy .scs-qmark{ color:var(--accent); font-size:1.5em; line-height:0; vertical-align:-0.3em; margin-right:2px; }
.wsp-seccasestudy .scs-author{ margin:0; font:400 12px var(--font); color:var(--dim); }
.wsp-seccasestudy .scs-author cite{ font-style:normal; font-weight:600; color:var(--ink); }
.wsp-seccasestudy .scs-stats{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.6cqw,30px); }
.wsp-seccasestudy .scs-stats .ws-stat{ align-items:flex-start; text-align:left; gap:3px; }
.wsp-seccasestudy .scs-stats .ws-stat b{ font-size:clamp(19px,2.4cqw,24px); }
.wsp-seccasestudy .scs-stats .ws-stat i{ color:var(--dim); }
.wsp-seccasestudy .scs-link{ align-self:flex-start; margin-top:2px; }

@container site (max-width:860px){
  .wsp-seccasestudy .scs-item, .wsp-seccasestudy .scs-item.flip{ grid-template-columns:1fr; }
  .wsp-seccasestudy .scs-item.flip .scs-visual, .wsp-seccasestudy .scs-visual{ order:0; }
  .wsp-seccasestudy .scs-item.flip .scs-content, .wsp-seccasestudy .scs-content{ order:0; }
  .wsp-seccasestudy .scs-visual{ min-height:clamp(160px,36cqw,220px); }
  .wsp-seccasestudy .scs-mono{ font-size:clamp(84px,24cqw,130px); }
}
@container site (max-width:560px){
  .wsp-seccasestudy .scs-content{ padding:24px 20px; gap:15px; }
  .wsp-seccasestudy .scs-visual{ min-height:150px; padding:20px; }
  .wsp-seccasestudy .scs-stats{ gap:16px; }
  .wsp-seccasestudy .scs-stats .ws-stat b{ font-size:20px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccasestudy .scs-item{ transition:border-color .25s ease; }
  .wsp-seccasestudy .scs-item:hover{ transform:none; }
}

/* seccomparison — ported from SB_04 drafts/section-comparison (a competitor feature matrix: a
   feature-name column beside 2-4 product columns, capability rows banded into groups, each cell a
   check / cross / short text value, one column badged "yours"). The static zero-JS origin is made
   REAL: every product-column header is a spotlight toggle — click or arrow-key to move the accent
   emphasis across the matrix, with aria-pressed + roving tabindex and a polite status line. Origin
   --sc-* vars map to tokens: bg->--bg, surface->--panel/--panel-2, text->--ink, dim->--dim/--faint,
   border->--hair, accent->--accent (the badged/spotlit column rides an accent tint instead of the
   origin's baked green). check=ok-green / cross=bad-red stay the only literal semantic hues (scoped
   --scc-ok/--scc-bad). Reuses ws-in/ws-shead/ws-kick/ws-h2+gradLast/ws-sub for the header. The matrix
   scrolls inside its own .sc-scroll on narrow containers (feature column stays put via position:sticky)
   so the page never overflows; container queries only, hover/selected fills switch instantly (only
   color/border transition), no blur. */
.wsp-seccomparison { --scc-ok:#4ade80; --scc-bad:#f26d6d; }
.wsp-seccomparison .ws-shead { text-align:center; margin-bottom:clamp(28px, 3.4cqw, 46px); }
.wsp-seccomparison .sc-scroll { overflow-x:auto; scrollbar-width:thin; max-width:960px; margin-inline:auto;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px); background:var(--panel); }
.wsp-seccomparison .sc-table { width:100%; min-width:500px; border-collapse:collapse; }
.wsp-seccomparison .sc-table th, .wsp-seccomparison .sc-table td { text-align:center; }
.wsp-seccomparison thead th { padding:0; border-bottom:var(--bw, 1px) solid var(--hair); background:var(--panel-2); }
.wsp-seccomparison .sc-corner { position:sticky; left:0; z-index:2; text-align:left; width:34%; min-width:150px;
  padding:16px 20px; background:var(--panel-2); font:500 clamp(11px, 1.3cqw, 12.5px) var(--font); color:var(--faint); }
.wsp-seccomparison .sc-colh { position:relative; }
.wsp-seccomparison .sc-colbtn { appearance:none; -webkit-appearance:none; width:100%; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px 16px;
  background:transparent; border:0; cursor:pointer; color:var(--dim);
  font:600 clamp(12px, 1.5cqw, 14px) var(--font); transition:color .16s linear; }
.wsp-seccomparison .sc-colbtn:hover { color:var(--ink); }
.wsp-seccomparison .sc-colbtn:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:6px; }
.wsp-seccomparison .sc-badge { font:700 9px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-text, #fff); background:var(--accent); padding:2px 7px; border-radius:999px; white-space:nowrap; }
.wsp-seccomparison .sc-band th { position:sticky; left:0; text-align:left; padding:10px 20px;
  border-top:var(--bw, 1px) solid var(--hair); font:700 clamp(10px, 1.2cqw, 11px) var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); background:color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.wsp-seccomparison .sc-row th, .wsp-seccomparison .sc-row td { padding:13px 18px; border-top:var(--bw, 1px) solid var(--hair); }
.wsp-seccomparison .sc-feat { position:sticky; left:0; z-index:1; text-align:left; background:var(--panel);
  font:500 clamp(13px, 1.5cqw, 14px)/1.4 var(--font); color:var(--ink); }
.wsp-seccomparison .sc-cell { font:500 clamp(12px, 1.4cqw, 13px) var(--font); color:var(--dim); }
.wsp-seccomparison .sc-val { color:var(--ink); font-weight:500; }
.wsp-seccomparison .sc-mark { display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; }
.wsp-seccomparison .sc-mark svg { width:13px; height:13px; display:block; }
.wsp-seccomparison .sc-mark.ok { color:var(--scc-ok); background:color-mix(in srgb, var(--scc-ok) 15%, transparent); }
.wsp-seccomparison .sc-mark.bad { color:var(--scc-bad); background:color-mix(in srgb, var(--scc-bad) 13%, transparent); }
.wsp-seccomparison .sc-colh.is-hl { background:color-mix(in srgb, var(--accent) 13%, var(--panel-2)); }
.wsp-seccomparison .sc-colh.is-hl .sc-colbtn { color:var(--accent); }
.wsp-seccomparison td.sc-cell.is-hl { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.wsp-seccomparison td.sc-cell.is-hl .sc-val { color:var(--ink); }
.wsp-seccomparison .sc-live { min-height:1.2em; margin:12px 0 0; text-align:center;
  font:500 12.5px var(--font); color:var(--faint); }
@container site (max-width: 860px) {
  .wsp-seccomparison .sc-corner { width:30%; min-width:124px; }
}
@container site (max-width: 560px) {
  .wsp-seccomparison .sc-scroll { border-radius:10px; }
  .wsp-seccomparison .sc-corner { min-width:112px; padding:14px 14px; }
  .wsp-seccomparison .sc-row th, .wsp-seccomparison .sc-row td { padding:11px 12px; }
  .wsp-seccomparison .sc-colbtn { padding:14px 10px; }
  .wsp-seccomparison .sc-band th { padding:9px 14px; }
}

/* --- secchangelogbanner (SB_04 port) — compact dismissible announcement strip --- */
.wsp-secchangelogbanner{ padding:0; overflow:visible;
  background:var(--accent-fill);
  border-top:1px solid color-mix(in srgb, var(--accent) 22%, var(--hair));
  border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, var(--hair)); }
.wsp-secchangelogbanner[hidden]{ display:none; }
.wsp-secchangelogbanner .scb-inner{ width:min(1040px, 92cqw); margin:0 auto;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:12px 24px; }
.wsp-secchangelogbanner .scb-version{ flex:0 0 auto;
  font:500 11px/1 var(--mono); letter-spacing:.4px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  padding:4px 8px; border-radius:5px; white-space:nowrap; }
.wsp-secchangelogbanner .scb-summary{ flex:1 1 240px; min-width:0;
  font-size:13px; line-height:1.45; color:var(--ink); }
.wsp-secchangelogbanner .scb-link{ flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:700; color:var(--accent); text-decoration:none; cursor:pointer;
  transition:opacity 180ms ease; }
.wsp-secchangelogbanner .scb-link svg{ width:14px; height:14px; transition:transform 180ms ease; }
.wsp-secchangelogbanner .scb-link:hover{ opacity:.82; }
.wsp-secchangelogbanner .scb-link:hover svg{ transform:translateX(2px); }
.wsp-secchangelogbanner .scb-close{ flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0;
  background:transparent; border:0; border-radius:6px; color:var(--dim); cursor:pointer;
  transition:color 180ms ease; }
.wsp-secchangelogbanner .scb-close svg{ width:15px; height:15px; }
.wsp-secchangelogbanner .scb-close:hover{ color:var(--ink); }
.wsp-secchangelogbanner .scb-link:focus-visible,
.wsp-secchangelogbanner .scb-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
/* dismiss — transform/opacity only, nothing animates at rest */
.wsp-secchangelogbanner.is-dismissing{ opacity:0; transform:translateY(-6px);
  transition:opacity 250ms ease, transform 250ms ease; }
@container site (max-width:560px){
  .wsp-secchangelogbanner .scb-inner{ padding:11px 16px; gap:8px 12px; }
  .wsp-secchangelogbanner .scb-close{ order:2; margin-left:auto; }
  .wsp-secchangelogbanner .scb-summary{ order:3; flex-basis:100%; }
  .wsp-secchangelogbanner .scb-link{ order:4; flex-basis:100%; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secchangelogbanner .scb-link,
  .wsp-secchangelogbanner .scb-link svg,
  .wsp-secchangelogbanner .scb-close{ transition:none; }
  .wsp-secchangelogbanner.is-dismissing{ transition:opacity 1ms linear; transform:none; }
}

/* --- secchangelogfeed (SB_04 port · section-changelog-feed) — filterable release timeline --- */
.wsp-secchangelogfeed .scf-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:34px; }
.wsp-secchangelogfeed .scf-chip{ appearance:none; -webkit-appearance:none; }
.wsp-secchangelogfeed .scf-chip:not(.on):hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 32%, var(--hair)); }
.wsp-secchangelogfeed .scf-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wsp-secchangelogfeed .scf-timeline{ position:relative; display:flex; flex-direction:column; gap:20px; padding-left:30px; }
.wsp-secchangelogfeed .scf-timeline::before{ content:''; position:absolute; left:5px; top:12px; bottom:12px; width:2px; border-radius:2px; background:color-mix(in srgb, var(--accent) 30%, var(--hair)); }
.wsp-secchangelogfeed .scf-entry{ position:relative; }
.wsp-secchangelogfeed .scf-hide{ display:none; }
.wsp-secchangelogfeed .scf-dot{ position:absolute; left:-30px; top:21px; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

.wsp-secchangelogfeed .scf-card{ background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); }
.wsp-secchangelogfeed .scf-head{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:9px; width:100%; margin:0; padding:18px 40px 18px 20px; background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; -webkit-user-select:none; user-select:none; }
.wsp-secchangelogfeed .scf-head.is-static{ cursor:default; padding-right:20px; }
.wsp-secchangelogfeed .scf-head:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--radius,12px); }

.wsp-secchangelogfeed .scf-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.wsp-secchangelogfeed .scf-ver{ font:600 11px/1 var(--mono); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); padding:3px 7px; border-radius:4px; }
.wsp-secchangelogfeed .scf-date{ font:500 11px/1 var(--font); color:var(--dim); }
.wsp-secchangelogfeed .scf-tag{ font:700 9.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; padding:3px 7px; border-radius:4px; border:1px solid transparent; }
.wsp-secchangelogfeed .scf-tag--feature{ color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); border-color:color-mix(in srgb, var(--accent) 26%, transparent); }
.wsp-secchangelogfeed .scf-tag--improvement{ color:var(--warn,#f5b342); background:color-mix(in srgb, var(--warn,#f5b342) 14%, transparent); border-color:color-mix(in srgb, var(--warn,#f5b342) 28%, transparent); }
.wsp-secchangelogfeed .scf-tag--fix{ color:var(--ok,#4ade80); background:color-mix(in srgb, var(--ok,#4ade80) 14%, transparent); border-color:color-mix(in srgb, var(--ok,#4ade80) 28%, transparent); }
.wsp-secchangelogfeed .scf-tag--misc{ color:var(--dim); background:color-mix(in srgb, var(--ink) 8%, transparent); border-color:var(--hair); }
.wsp-secchangelogfeed .scf-title{ font:600 15px/1.4 var(--font-head,var(--font)); letter-spacing:-.01em; color:var(--ink); transition:color .18s ease; }
.wsp-secchangelogfeed .scf-head:hover .scf-title{ color:var(--accent); }

.wsp-secchangelogfeed .scf-chev{ position:absolute; right:20px; top:21px; width:8px; height:8px; border-right:2px solid var(--dim); border-bottom:2px solid var(--dim); transform:rotate(45deg); transition:transform .25s ease, border-color .18s ease; }
.wsp-secchangelogfeed .scf-head:hover .scf-chev{ border-color:var(--accent); }
.wsp-secchangelogfeed .scf-entry[data-open="1"] .scf-chev{ transform:rotate(225deg); }

/* disclosure — grid-rows snaps (no motion on a layout property); the change list itself fades/slides */
.wsp-secchangelogfeed .scf-panel{ display:grid; grid-template-rows:0fr; }
.wsp-secchangelogfeed .scf-entry[data-open="1"] .scf-panel{ grid-template-rows:1fr; }
.wsp-secchangelogfeed .scf-panel-in{ min-height:0; overflow:hidden; }
.wsp-secchangelogfeed .scf-changes{ list-style:none; margin:0; padding:0 20px 18px; display:flex; flex-direction:column; gap:7px; opacity:0; transform:translateY(-4px); transition:opacity .28s ease, transform .28s ease; }
.wsp-secchangelogfeed .scf-entry[data-open="1"] .scf-changes{ opacity:1; transform:none; }
.wsp-secchangelogfeed .scf-changes li{ position:relative; padding-left:18px; font:400 12.5px/1.6 var(--font); color:var(--dim); }
.wsp-secchangelogfeed .scf-changes li::before{ content:''; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:2px; background:color-mix(in srgb, var(--accent) 55%, transparent); }

.wsp-secchangelogfeed .scf-status{ margin:22px 0 0; text-align:center; font:500 12px/1.4 var(--mono); letter-spacing:.02em; color:var(--faint); }
.wsp-secchangelogfeed .scf-status:empty{ display:none; }

@container site (max-width:860px){
  .wsp-secchangelogfeed .scf-timeline{ gap:18px; }
}
@container site (max-width:560px){
  .wsp-secchangelogfeed .scf-filters{ margin-bottom:26px; }
  .wsp-secchangelogfeed .scf-timeline{ padding-left:24px; }
  .wsp-secchangelogfeed .scf-dot{ left:-24px; top:18px; }
  .wsp-secchangelogfeed .scf-head{ padding:15px 34px 15px 16px; }
  .wsp-secchangelogfeed .scf-head.is-static{ padding-right:16px; }
  .wsp-secchangelogfeed .scf-chev{ right:16px; top:18px; }
  .wsp-secchangelogfeed .scf-changes{ padding:0 16px 15px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secchangelogfeed .scf-title,
  .wsp-secchangelogfeed .scf-chev,
  .wsp-secchangelogfeed .scf-changes{ transition:none; }
}

/* ===== Changelog · wsp-secchangelog (SB_04 · departments/dev/web_dev/drafts/section-changelog)
   A tagged release timeline: versions right-aligned down a dotted rail, each release a
   New/Improved/Fixed pill summary over a bulleted change list. Filter chips (live) narrow
   the feed by category. Tokens throughout; container queries at 860/560; motion is
   color/transform only, nothing at rest. Prefix clog- (chl-/scl- belong to other kinds). ===== */
.wsp-secchangelog .clog-head{ text-align:left; max-width:640px; margin:0 0 clamp(28px,4cqw,44px); }
.wsp-secchangelog .clog-head .ws-kick{ margin-bottom:10px; }
.wsp-secchangelog .clog-head .ws-h2{ margin-bottom:10px; }
.wsp-secchangelog .clog-head .ws-sub{ max-width:52ch; }

/* filter chips — the live upgrade over the origin's static, zero-JS shell */
.wsp-secchangelog .clog-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(26px,4cqw,38px); }
.wsp-secchangelog .clog-chip{ appearance:none; -webkit-appearance:none; cursor:pointer;
  font:600 0.78rem/1 var(--font); letter-spacing:.01em; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 5%, transparent); border:var(--bw, 1px) solid var(--hair);
  padding:8px 15px; border-radius:999px;
  transition:color .18s ease, border-color .18s ease, transform .12s ease; }
.wsp-secchangelog .clog-chip:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 42%, var(--hair)); }
.wsp-secchangelog .clog-chip:active{ transform:translateY(1px); }
.wsp-secchangelog .clog-chip.on{ color:var(--accent-text,#04121a); background:var(--accent); border-color:var(--accent); }
.wsp-secchangelog .clog-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* feed + timeline rail */
.wsp-secchangelog .clog-feed{ position:relative; }
.wsp-secchangelog .clog-feed::before{ content:''; position:absolute; left:108px; margin-left:-1px;
  top:8px; bottom:8px; width:2px; border-radius:2px;
  background:color-mix(in srgb, var(--accent) 25%, var(--hair)); }
.wsp-secchangelog .clog-entry{ display:grid; grid-template-columns:108px minmax(0,1fr); gap:40px;
  padding-bottom:clamp(28px,4cqw,40px); }
.wsp-secchangelog .clog-entry:last-child{ padding-bottom:0; }
.wsp-secchangelog .clog-hide{ display:none; }

.wsp-secchangelog .clog-meta{ position:relative; display:flex; flex-direction:column; align-items:flex-end;
  gap:4px; padding-top:2px; padding-right:22px; }
.wsp-secchangelog .clog-dot{ position:absolute; right:-6px; top:7px; width:12px; height:12px; border-radius:50%;
  background:var(--panel); border:2px solid var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.wsp-secchangelog .clog-version{ font:800 0.82rem/1.25 var(--mono); color:var(--accent); }
.wsp-secchangelog .clog-date{ font:400 0.72rem/1.3 var(--font); color:var(--dim); white-space:nowrap; }

.wsp-secchangelog .clog-body{ min-width:0; }
.wsp-secchangelog .clog-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px; }
.wsp-secchangelog .clog-tag{ font:700 0.6rem/1 var(--font); letter-spacing:.07em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px; border:1px solid transparent; }

.wsp-secchangelog .clog-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.wsp-secchangelog .clog-item{ display:flex; align-items:flex-start; gap:10px; }
.wsp-secchangelog .clog-itag{ flex-shrink:0; margin-top:2px; font:700 0.56rem/1.35 var(--font);
  letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.wsp-secchangelog .clog-itext{ min-width:0; font:400 0.9rem/1.6 var(--font); color:var(--dim); transition:color .18s ease; }
.wsp-secchangelog .clog-item:hover .clog-itext{ color:var(--ink); }

/* tag palette — accent (new) · ok/green (improved) · warn/amber (fixed), mirrors changelogsection */
.wsp-secchangelog .clog-tag--new,  .wsp-secchangelog .clog-itag--new{ color:var(--accent);
  background:color-mix(in srgb, var(--accent) 15%, transparent); }
.wsp-secchangelog .clog-tag--new{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.wsp-secchangelog .clog-tag--imp,  .wsp-secchangelog .clog-itag--imp{ color:var(--ok,#4ade80);
  background:color-mix(in srgb, var(--ok,#4ade80) 14%, transparent); }
.wsp-secchangelog .clog-tag--imp{ border-color:color-mix(in srgb, var(--ok,#4ade80) 30%, transparent); }
.wsp-secchangelog .clog-tag--fix,  .wsp-secchangelog .clog-itag--fix{ color:var(--warn,#f5b342);
  background:color-mix(in srgb, var(--warn,#f5b342) 14%, transparent); }
.wsp-secchangelog .clog-tag--fix{ border-color:color-mix(in srgb, var(--warn,#f5b342) 30%, transparent); }
.wsp-secchangelog .clog-tag--misc, .wsp-secchangelog .clog-itag--misc{ color:var(--dim);
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
.wsp-secchangelog .clog-tag--misc{ border-color:var(--hair); }

@container site (max-width: 860px){
  .wsp-secchangelog .clog-feed::before{ left:92px; }
  .wsp-secchangelog .clog-entry{ grid-template-columns:92px minmax(0,1fr); gap:30px; }
  .wsp-secchangelog .clog-meta{ padding-right:18px; }
}
@container site (max-width: 560px){
  .wsp-secchangelog .clog-feed::before{ display:none; }
  .wsp-secchangelog .clog-entry{ grid-template-columns:1fr; gap:10px; padding-bottom:clamp(24px,6cqw,30px); }
  .wsp-secchangelog .clog-meta{ flex-direction:row; align-items:baseline; gap:10px; padding-right:0; }
  .wsp-secchangelog .clog-dot{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secchangelog .clog-chip,
  .wsp-secchangelog .clog-itext{ transition:none; }
}

/* --- seccontactform (SB_04 port) — two-column contact: copy + real mailto/tel
   links beside a live, validated form card ---
   Origin --scf2-* vars -> tokens: bg->page --bg, surface->--panel(+--surface-grad),
   text->--ink, dim->--dim/--faint, accent->--accent, border->--hair, radius->--radius,
   font->--font/--font-head. The form validates for real (required + validEmail in the
   convert.js mount), shows inline field errors with aria-invalid, and swaps to a friendly
   success panel on submit (no network). Reuses ws-in.split / ws-kick / ws-h2 / ws-sub /
   ws-btn atoms. Not a .ws-hero, so the split narrow-stacks via its own container query;
   entrance anims dropped, hover/focus motion kept, no backdrop-filter. */
.wsp-seccontactform .ws-in.split{ align-items:start; gap:clamp(32px,5cqw,64px); }
.wsp-seccontactform .scf-copy .ws-sub{ margin-top:14px; max-width:42ch; }
.wsp-seccontactform .scf-methods{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.wsp-seccontactform .scf-method{ margin:0; }
.wsp-seccontactform .scf-mlink{ display:inline-flex; align-items:center; gap:11px; color:var(--dim);
  font:500 14px var(--font); text-decoration:none; transition:color 180ms ease, transform 180ms ease; }
.wsp-seccontactform a.scf-mlink:hover{ color:var(--ink); transform:translateX(2px); }
.wsp-seccontactform a.scf-mlink:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset:3px; border-radius:5px; color:var(--ink); }
.wsp-seccontactform .scf-mico{ display:inline-flex; width:20px; height:20px; flex:none; color:var(--accent); }
.wsp-seccontactform .scf-mico svg{ width:100%; height:100%; }
.wsp-seccontactform .scf-card{ position:relative; overflow:hidden; padding:clamp(24px,2.8cqw,34px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius,12px) * 1.1);
  background:var(--panel); background-image:var(--surface-grad,none); }
.wsp-seccontactform .scf-form{ display:flex; flex-direction:column; gap:14px; }
.wsp-seccontactform .scf-form[hidden], .wsp-seccontactform .scf-done[hidden]{ display:none; }
.wsp-seccontactform .scf-field{ display:flex; flex-direction:column; margin:0; }
.wsp-seccontactform .scf-input{ width:100%; padding:12px 14px; border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius,12px) * .66); background:color-mix(in srgb, var(--ink) 4%, transparent);
  color:var(--ink); font:400 14px var(--font); outline:none; caret-color:var(--accent); }
.wsp-seccontactform .scf-input::placeholder{ color:var(--faint); }
.wsp-seccontactform .scf-input:focus{ border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.wsp-seccontactform .scf-input.bad{ border-color:color-mix(in srgb, #f87171 62%, var(--hair)); }
.wsp-seccontactform .scf-input.bad:focus{ box-shadow:inset 0 0 0 1px color-mix(in srgb, #f87171 52%, transparent); }
.wsp-seccontactform .scf-textarea{ min-height:108px; line-height:1.55; resize:vertical; }
.wsp-seccontactform .scf-err{ display:block; min-height:0; font:500 12px var(--font); color:#f87171;
  opacity:0; transform:translateY(-2px); transition:opacity 160ms ease, transform 160ms ease; }
.wsp-seccontactform .scf-err:not(:empty){ min-height:1.3em; margin-top:6px; opacity:1; transform:none; }
.wsp-seccontactform .scf-submit{ margin-top:4px; justify-content:center; }
.wsp-seccontactform .scf-status{ min-height:1.3em; margin:2px 0 0; font:500 12.5px var(--font); color:var(--faint); }
.wsp-seccontactform .scf-status.bad{ color:#f87171; }
.wsp-seccontactform .scf-done{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; padding:clamp(20px,3cqw,34px) 8px; outline:none; }
.wsp-seccontactform .scf-donetick{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:4px; border-radius:50%; color:#34d399;
  background:color-mix(in srgb, #34d399 15%, transparent); }
.wsp-seccontactform .scf-donetick svg{ width:24px; height:24px; }
.wsp-seccontactform .scf-doneh{ font:700 clamp(17px,1.9cqw,20px) var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-seccontactform .scf-donep{ margin:0; font:400 13.5px/1.6 var(--font); color:var(--dim); max-width:34ch; }
@container site (max-width:860px){
  .wsp-seccontactform .ws-in.split{ grid-template-columns:1fr; gap:34px; }
  .wsp-seccontactform .scf-copy .ws-sub{ max-width:none; }
}
@container site (max-width:560px){
  .wsp-seccontactform .scf-card{ padding:22px 18px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccontactform .scf-mlink,
  .wsp-seccontactform .scf-err{ transition:none; }
  .wsp-seccontactform a.scf-mlink:hover{ transform:none; }
}

/* --- secconfigurator (SB_04 port) --- */
.wsp-secconfigurator{ --scfg-metal:#383b44; --scfg-metal-deep:#23252c; --scfg-wood:#7a5233; }
.wsp-secconfigurator .scfg-body{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(1.6rem,4cqw,3.2rem); align-items:start; }
.wsp-secconfigurator .scfg-stagewrap{ min-width:0; position:sticky; top:1.5rem; }
.wsp-secconfigurator .scfg-stage{ position:relative; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); padding:clamp(1rem,3cqw,2rem); display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--ink) 5%, transparent), transparent 60%), radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--panel); }
.wsp-secconfigurator .scfg-svg{ width:min(100%,380px); height:auto; display:block; }
.wsp-secconfigurator .scfg-plate{ position:absolute; left:1rem; bottom:.85rem; margin:0; font:400 .64rem var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.wsp-secconfigurator .scfg-plate b{ font-weight:400; color:var(--ink); }
/* live product — articulation + finish */
.wsp-secconfigurator .scfg-lo, .wsp-secconfigurator .scfg-up{ transform-box:view-box; transition:transform .8s cubic-bezier(.3,1.25,.35,1); }
.wsp-secconfigurator .scfg-lo{ transform-origin:160px 250px; }
.wsp-secconfigurator .scfg-up{ transform-origin:160px 166px; }
.wsp-secconfigurator .scfg-stage[data-pose="compact"] .scfg-lo{ transform:rotate(-34deg); }
.wsp-secconfigurator .scfg-stage[data-pose="compact"] .scfg-up{ transform:rotate(84deg); }
.wsp-secconfigurator .scfg-stage[data-pose="standard"] .scfg-lo{ transform:rotate(-14deg); }
.wsp-secconfigurator .scfg-stage[data-pose="standard"] .scfg-up{ transform:rotate(42deg); }
.wsp-secconfigurator .scfg-stage[data-pose="tall"] .scfg-lo{ transform:rotate(0deg); }
.wsp-secconfigurator .scfg-stage[data-pose="tall"] .scfg-up{ transform:rotate(0deg); }
.wsp-secconfigurator .scfg-metal-fill{ fill:var(--scfg-metal); transition:fill .45s ease; }
.wsp-secconfigurator .scfg-deep-fill{ fill:var(--scfg-metal-deep); transition:fill .45s ease; }
.wsp-secconfigurator .scfg-knob-tick{ fill:var(--accent); }
.wsp-secconfigurator .scfg-knob, .wsp-secconfigurator .scfg-led, .wsp-secconfigurator .scfg-grain{ opacity:0; transition:opacity .35s ease; }
.wsp-secconfigurator .scfg-stage.has-dimmer .scfg-knob{ opacity:1; }
.wsp-secconfigurator .scfg-stage.has-smart .scfg-led{ opacity:1; }
.wsp-secconfigurator .scfg-stage.has-walnut .scfg-grain{ opacity:.5; }
.wsp-secconfigurator .scfg-stage.has-walnut .scfg-plinth{ fill:var(--scfg-wood); }
.wsp-secconfigurator .scfg-stage.has-smart .scfg-st{ stop-color:#cdeedd; }
.wsp-secconfigurator .scfg-stage.has-smart .scfg-bulb{ fill:#e2f6ea; }
/* option groups */
.wsp-secconfigurator .scfg-form{ min-width:0; }
.wsp-secconfigurator .scfg-group{ border:0; margin:0 0 1.7rem; padding:0; min-width:0; }
.wsp-secconfigurator .scfg-legend{ padding:0; margin-bottom:.85rem; font:400 .66rem var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--dim); }
.wsp-secconfigurator .scfg-legend b{ font-weight:400; color:var(--accent); }
.wsp-secconfigurator .scfg-sr-input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
.wsp-secconfigurator .scfg-chips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:.6rem; }
.wsp-secconfigurator .scfg-chip{ position:relative; display:flex; align-items:center; gap:.6rem; padding:.65rem .75rem; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius) * .66); cursor:pointer; transition:border-color .2s ease; }
.wsp-secconfigurator .scfg-chip:hover{ border-color:var(--dim); }
.wsp-secconfigurator .scfg-swatch{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--chip); border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); transition:box-shadow .2s ease; }
.wsp-secconfigurator .scfg-chip-txt{ display:grid; line-height:1.25; min-width:0; }
.wsp-secconfigurator .scfg-chip-name{ font:550 .85rem var(--font); color:var(--ink); transition:color .2s ease; }
.wsp-secconfigurator .scfg-chip-delta{ font:400 .66rem var(--mono); letter-spacing:.06em; color:var(--dim); }
.wsp-secconfigurator .scfg-chip input:checked ~ .scfg-swatch{ box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.wsp-secconfigurator .scfg-chip input:checked ~ .scfg-chip-txt .scfg-chip-name{ color:var(--accent); }
.wsp-secconfigurator .scfg-chip:has(input:checked){ border-color:var(--accent); }
.wsp-secconfigurator .scfg-chip input:focus-visible ~ .scfg-swatch{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-secconfigurator .scfg-seg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.wsp-secconfigurator .scfg-segopt{ position:relative; display:grid; gap:.15rem; justify-items:center; padding:.7rem .4rem; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius) * .66); text-align:center; cursor:pointer; transition:border-color .2s ease; }
.wsp-secconfigurator .scfg-segopt:hover{ border-color:var(--dim); }
.wsp-secconfigurator .scfg-seg-name{ font:550 .85rem var(--font); color:var(--ink); transition:color .2s ease; }
.wsp-secconfigurator .scfg-seg-cm{ font:400 .66rem var(--mono); letter-spacing:.08em; color:var(--dim); }
.wsp-secconfigurator .scfg-segopt input:checked ~ .scfg-seg-name{ color:var(--accent); }
.wsp-secconfigurator .scfg-segopt:has(input:checked){ border-color:var(--accent); background:var(--accent-fill); }
.wsp-secconfigurator .scfg-segopt input:focus-visible ~ .scfg-seg-name{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
.wsp-secconfigurator .scfg-extras{ display:grid; gap:.6rem; }
.wsp-secconfigurator .scfg-extra{ position:relative; display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius) * .66); cursor:pointer; transition:border-color .2s ease; }
.wsp-secconfigurator .scfg-extra:hover{ border-color:var(--dim); }
.wsp-secconfigurator .scfg-box{ flex:0 0 auto; width:18px; height:18px; border:1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius:4px; display:grid; place-content:center; color:var(--accent-text); }
.wsp-secconfigurator .scfg-box svg{ width:12px; height:12px; opacity:0; transform:scale(.6); transition:opacity .18s ease, transform .18s ease; }
.wsp-secconfigurator .scfg-extra input:checked ~ .scfg-box{ background:var(--accent); border-color:var(--accent); }
.wsp-secconfigurator .scfg-extra input:checked ~ .scfg-box svg{ opacity:1; transform:none; }
.wsp-secconfigurator .scfg-extra input:focus-visible ~ .scfg-box{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-secconfigurator .scfg-extra:has(input:checked){ border-color:var(--accent); }
.wsp-secconfigurator .scfg-extra-txt{ display:grid; line-height:1.3; min-width:0; }
.wsp-secconfigurator .scfg-extra-name{ font:550 .85rem var(--font); color:var(--ink); }
.wsp-secconfigurator .scfg-extra-blurb{ font:400 .74rem var(--font); color:var(--dim); }
.wsp-secconfigurator .scfg-extra-price{ margin-left:auto; font:400 .76rem var(--mono); color:var(--dim); }
.wsp-secconfigurator .scfg-extra input:checked ~ .scfg-extra-price{ color:var(--accent); }
/* summary card */
.wsp-secconfigurator .scfg-summary{ background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); padding:clamp(1rem,3cqw,1.5rem); }
.wsp-secconfigurator .scfg-coderow{ display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem; }
.wsp-secconfigurator .scfg-code{ flex:1 1 auto; min-width:0; font:400 .7rem var(--mono); letter-spacing:.14em; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsp-secconfigurator .scfg-copy{ flex:0 0 auto; appearance:none; -webkit-appearance:none; cursor:pointer; background:transparent; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius) * .5); padding:.3rem .6rem; font:600 .62rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); transition:color .2s ease, border-color .2s ease; }
.wsp-secconfigurator .scfg-copy:hover{ color:var(--ink); border-color:var(--dim); }
.wsp-secconfigurator .scfg-copy:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-secconfigurator .scfg-copy.ok{ color:var(--accent); border-color:var(--accent); }
.wsp-secconfigurator .scfg-specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin:0 0 1rem; padding-bottom:1rem; border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secconfigurator .scfg-specs > div{ display:grid; gap:.1rem; }
.wsp-secconfigurator .scfg-specs dt{ font:400 .6rem var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.wsp-secconfigurator .scfg-specs dd{ margin:0; font:550 .95rem var(--font); color:var(--ink); font-variant-numeric:tabular-nums; }
.wsp-secconfigurator .scfg-total{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.wsp-secconfigurator .scfg-total-label{ font:400 .66rem var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.wsp-secconfigurator .scfg-price{ display:inline-flex; align-items:baseline; color:var(--accent); }
.wsp-secconfigurator .scfg-cur{ font:400 1.1rem var(--mono); margin-right:.1em; }
.wsp-secconfigurator .scfg-odo{ display:inline-flex; font:600 clamp(1.7rem,5cqw,2.3rem) var(--mono); }
.wsp-secconfigurator .scfg-col{ display:block; height:1em; overflow:hidden; }
.wsp-secconfigurator .scfg-reel{ display:block; line-height:1; transform:translateY(calc(var(--d,0) * -1em)); transition:transform .55s cubic-bezier(.3,.9,.25,1); }
.wsp-secconfigurator .scfg-col:nth-child(2) .scfg-reel{ transition-delay:.05s; }
.wsp-secconfigurator .scfg-col:nth-child(3) .scfg-reel{ transition-delay:.1s; }
.wsp-secconfigurator .scfg-reel span{ display:block; height:1em; }
.wsp-secconfigurator .scfg-cta{ display:block; width:100%; padding:.9rem 1.2rem; margin-top:.2rem; background:var(--accent); border-radius:calc(var(--radius) * .66); text-align:center; text-decoration:none; color:var(--accent-text); font:700 .78rem var(--mono); letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:transform .2s ease, filter .2s ease; }
.wsp-secconfigurator .scfg-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.wsp-secconfigurator .scfg-cta:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.wsp-secconfigurator .scfg-ship{ margin:.8rem 0 0; text-align:center; font:400 .64rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.wsp-secconfigurator .scfg-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
@container site (max-width:860px){
  .wsp-secconfigurator .scfg-body{ grid-template-columns:minmax(0,1fr); }
  .wsp-secconfigurator .scfg-stagewrap{ position:static; }
  .wsp-secconfigurator .scfg-svg{ width:min(100%,320px); }
}
@container site (max-width:560px){
  .wsp-secconfigurator .scfg-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wsp-secconfigurator .scfg-extra-blurb{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secconfigurator .scfg-lo, .wsp-secconfigurator .scfg-up,
  .wsp-secconfigurator .scfg-metal-fill, .wsp-secconfigurator .scfg-deep-fill,
  .wsp-secconfigurator .scfg-knob, .wsp-secconfigurator .scfg-led, .wsp-secconfigurator .scfg-grain,
  .wsp-secconfigurator .scfg-reel, .wsp-secconfigurator .scfg-swatch,
  .wsp-secconfigurator .scfg-chip, .wsp-secconfigurator .scfg-segopt, .wsp-secconfigurator .scfg-extra,
  .wsp-secconfigurator .scfg-chip-name, .wsp-secconfigurator .scfg-seg-name,
  .wsp-secconfigurator .scfg-box svg, .wsp-secconfigurator .scfg-copy, .wsp-secconfigurator .scfg-cta{ transition:none; }
  .wsp-secconfigurator .scfg-cta:hover{ transform:none; }
}

/* --- seccomparisontable (SB_04 port · drafts/section-comparison-table) ---
   A pricing-plan feature matrix: a sticky feature-name column beside plan columns
   (Starter / Pro / Enterprise), capability rows banded into groups, check/dash/text
   per cell, the popular plan badged, and a per-plan CTA row. The static origin is made
   REAL — the highlighted "Pro" column becomes a live spotlight (each plan header is a
   roving-tabindex button, aria-pressed, click or arrow-key), the header row + first
   column stick while the matrix scrolls (a self-contained scroll panel: on narrow the
   table stays usable via horizontal scroll with the feature column pinned), and an
   "Only differences" switch (role=switch, keyboard) collapses the rows every plan shares.
   Origin --sct-* vars map to tokens: bg->--bg, surface->--panel, text->--ink,
   dim->--dim/--faint, border->--hair, accent->--accent, fonts->--font/--mono; the lone
   literal semantic hue is the check tick (scoped --sct-ok). Reuses ws-in / ws-shead /
   ws-kick / ws-h2+gradLast / ws-sub / btn(). Container queries only (860 / 560); hover +
   spotlight backgrounds switch instantly (only color/border/transform transition), no blur. */
.wsp-seccomparisontable { --sct-ok:#4ade80; }
.wsp-seccomparisontable .ws-in { width:min(900px, 92cqw); }
.wsp-seccomparisontable .ws-shead { margin-bottom:26px; }

.wsp-seccomparisontable .sct-controls { display:flex; justify-content:flex-end; margin-bottom:12px; }
.wsp-seccomparisontable .sct-switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:5px 2px;
  font:600 12px var(--font); color:var(--dim); transition:color .16s linear; }
.wsp-seccomparisontable .sct-switch:hover, .wsp-seccomparisontable .sct-switch[aria-checked="true"] { color:var(--ink); }
.wsp-seccomparisontable .sct-track { position:relative; width:34px; height:19px; flex:none; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 12%, transparent); border:var(--bw, 1px) solid var(--hair); }
.wsp-seccomparisontable .sct-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--dim); transition:transform .18s var(--ease-pop, ease-out), background .16s linear; }
.wsp-seccomparisontable .sct-switch[aria-checked="true"] .sct-track { background:var(--accent-fill);
  border-color:color-mix(in srgb, var(--accent) 42%, transparent); }
.wsp-seccomparisontable .sct-switch[aria-checked="true"] .sct-thumb { transform:translateX(15px); background:var(--accent); }
.wsp-seccomparisontable .sct-switch:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

.wsp-seccomparisontable .sct-scroll { position:relative; overflow:auto; background:var(--bg);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  max-height:760px; max-height:min(78cqh, 760px); }
.wsp-seccomparisontable .sct-table { width:100%; min-width:520px; border-collapse:separate; border-spacing:0;
  font:400 13px var(--font); }

/* header row — sticky to the top of the panel while the matrix scrolls */
.wsp-seccomparisontable .sct-scroll thead th { position:sticky; top:0; z-index:3; background:var(--panel);
  border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-seccomparisontable .sct-scroll thead th.sct-corner { left:0; z-index:5; width:38%; min-width:180px; }
.wsp-seccomparisontable .sct-th { padding:0; text-align:center; vertical-align:bottom; }
.wsp-seccomparisontable .sct-th.is-hl { background:color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.wsp-seccomparisontable .sct-plan { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%;
  padding:15px 16px; appearance:none; -webkit-appearance:none; background:transparent; border:0;
  border-bottom:2px solid transparent; cursor:pointer; color:var(--dim); font:inherit;
  transition:color .16s linear, border-color .16s linear; }
.wsp-seccomparisontable .sct-plan:hover { color:var(--ink); }
.wsp-seccomparisontable .sct-th.is-hl .sct-plan, .wsp-seccomparisontable .sct-plan[aria-pressed="true"] { color:var(--ink); }
.wsp-seccomparisontable .sct-plan[aria-pressed="true"] { border-bottom-color:var(--accent); }
.wsp-seccomparisontable .sct-plan:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:7px; }
.wsp-seccomparisontable .sct-planname { font:700 13.5px var(--font); letter-spacing:.01em; }
.wsp-seccomparisontable .sct-pop { font:700 8.5px var(--mono); letter-spacing:1px; text-transform:uppercase;
  color:var(--accent-text, #04121a); background:var(--accent); padding:2px 8px; border-radius:999px; }

/* feature column — sticky to the left while the matrix scrolls sideways */
.wsp-seccomparisontable .sct-feat { position:sticky; left:0; z-index:2; background:var(--bg);
  text-align:left; font:500 13px var(--font); color:var(--ink); padding:12px 20px;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-seccomparisontable .sct-cell { padding:12px 18px; text-align:center; color:var(--dim);
  border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-seccomparisontable .sct-cell.txt { color:var(--ink); font-weight:500; }
.wsp-seccomparisontable .sct-cell.is-hl { background:color-mix(in srgb, var(--accent) 7%, transparent); }
.wsp-seccomparisontable .sct-mark { display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; }
.wsp-seccomparisontable .sct-mark.ok { color:var(--sct-ok); background:color-mix(in srgb, var(--sct-ok) 15%, transparent); }
.wsp-seccomparisontable .sct-mark svg { width:12px; height:12px; display:block; }
.wsp-seccomparisontable .sct-dash { color:var(--faint); font-size:16px; line-height:1; }

/* group band */
.wsp-seccomparisontable .sct-group { position:sticky; left:0; text-align:left; padding:9px 20px;
  font:700 10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint);
  background:color-mix(in srgb, var(--ink) 3%, var(--bg)); border-bottom:var(--bw, 1px) solid var(--hair); }

/* row hover — instant, no transition on background */
.wsp-seccomparisontable .sct-row:hover .sct-feat { color:var(--ink); background:color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.wsp-seccomparisontable .sct-row:hover .sct-cell:not(.is-hl) { background:color-mix(in srgb, var(--ink) 3%, transparent); }

/* CTA row */
.wsp-seccomparisontable .sct-ctarow .sct-feat, .wsp-seccomparisontable .sct-ctarow .sct-cell { border-bottom:0;
  padding-top:16px; padding-bottom:8px; background:var(--bg); }
.wsp-seccomparisontable .sct-ctarow .sct-cell.is-hl { background:color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.wsp-seccomparisontable .sct-ctarow .ws-btn { width:100%; justify-content:center; }

/* live status line + differences mode */
.wsp-seccomparisontable .sct-live { min-height:1.3em; margin:12px 0 0; text-align:center;
  font:500 12.5px var(--font); color:var(--faint); }
.wsp-seccomparisontable.is-diffs tr[data-same="1"] { display:none; }

.wsp-seccomparisontable .sct-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@container site (max-width: 860px) {
  .wsp-seccomparisontable .sct-feat, .wsp-seccomparisontable .sct-cell { padding:11px 15px; }
  .wsp-seccomparisontable .sct-plan { padding:13px 13px; }
  .wsp-seccomparisontable .sct-scroll thead th.sct-corner { min-width:150px; }
}
@container site (max-width: 560px) {
  .wsp-seccomparisontable .sct-table { min-width:440px; font-size:12.5px; }
  .wsp-seccomparisontable .sct-feat, .wsp-seccomparisontable .sct-cell { padding:10px 12px; }
  .wsp-seccomparisontable .sct-scroll thead th.sct-corner { width:40%; min-width:116px; }
  .wsp-seccomparisontable .sct-planname { font-size:12px; }
  .wsp-seccomparisontable .sct-controls { justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .wsp-seccomparisontable .sct-thumb { transition:none; }
}

/* --- secctabanner (SB_04 port) — contained gradient CTA banner: pill eyebrow,
   gradient-tipped headline, support line, dual CTA, soft accent corner glows.
   Origin --ctab-* vars -> tokens: bg->--bg, surface->--panel, text->--ink,
   dim->--dim/--faint, accent->--accent(+--accent2), border->--hair, font->--font*.
   The saturated indigo gradient becomes an accent-tinted panel wash so it reads
   in light + dark and cascades with the brand; the float @keyframes are dropped
   (anims.js owns entrances) and the ghost button's backdrop blur removed — the
   radial glows stay soft without any filter. */
.wsp-secctabanner .scb-banner{ position:relative; overflow:hidden; text-align:center;
  padding:clamp(48px,7cqw,80px) clamp(26px,5cqw,64px);
  border-radius:calc(var(--radius,12px) * 1.5);
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--hair));
  background:var(--panel);
  background-image:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 7%, var(--panel)) 100%); }
.wsp-secctabanner .scb-glow{ position:absolute; border-radius:50%; aspect-ratio:1; pointer-events:none; z-index:0; }
.wsp-secctabanner .scb-g1{ width:min(46%,340px); top:-16%; left:-9%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%); }
.wsp-secctabanner .scb-g2{ width:min(34%,240px); bottom:-22%; right:6%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 22%, transparent) 0%, transparent 70%); }
.wsp-secctabanner .scb-g3{ width:min(26%,180px); top:12%; right:-7%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%); }
.wsp-secctabanner .scb-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.wsp-secctabanner .scb-kick.ws-kick{ display:inline-flex; align-items:center; width:auto; margin:0 0 18px;
  padding:5px 14px; border-radius:99px; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--hair));
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 10%, transparent)); }
.wsp-secctabanner .scb-title.ws-h2{ max-width:20ch; margin:0 auto; }
.wsp-secctabanner .scb-sub.ws-sub{ margin:14px auto 0; }
.wsp-secctabanner .scb-actions.ws-ctarow{ margin-top:clamp(24px,3.2cqw,34px); justify-content:center; }
@container site (max-width:560px){
  .wsp-secctabanner .scb-banner{ padding:44px 22px; }
  .wsp-secctabanner .scb-actions.ws-ctarow{ flex-direction:column; align-items:stretch;
    width:100%; max-width:300px; margin-inline:auto; }
  .wsp-secctabanner .scb-actions.ws-ctarow .ws-btn{ justify-content:center; }
}

/* --- seccontenttabs (SB_04 port) — tabbed feature section; tab rail joined to one panel card ---
   Origin --sct-* vars -> tokens: bg->--bg, surface->--panel, text->--ink, dim->--dim,
   accent->--accent, border->--hair, radius->--radius, font->--font. Tabs + panel read as one
   connected card (tab rail border-bottom, active tab overlaps the seam, panel border-top:0 and
   bottom-rounded). Entrance anims dropped (anims.js owns reveals); hover/switch ride
   color/opacity/transform only — panel swap is instant via [hidden]. */
.wsp-seccontenttabs .sct-group{ margin-top:clamp(28px,4cqw,44px); text-align:left; }
.wsp-seccontenttabs .sct-tabs{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-seccontenttabs .sct-tabs::-webkit-scrollbar{ height:0; display:none; }
.wsp-seccontenttabs .sct-tab{ appearance:none; -webkit-appearance:none; cursor:pointer; flex:0 0 auto;
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:12px 20px; white-space:nowrap; font:600 14px/1 var(--font); color:var(--dim);
  transition:color .16s ease; }
.wsp-seccontenttabs .sct-tab:hover{ color:var(--ink); }
.wsp-seccontenttabs .sct-tab.on{ color:var(--ink); border-bottom-color:var(--accent); }
.wsp-seccontenttabs .sct-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px 6px 0 0; }
.wsp-seccontenttabs .sct-panel{ padding:clamp(28px,4cqw,48px);
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-top:0; border-radius:0 0 var(--radius,12px) var(--radius,12px); }
.wsp-seccontenttabs .sct-panel[hidden]{ display:none; }
.wsp-seccontenttabs .sct-panel:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px;
  border-radius:0 0 var(--radius,12px) var(--radius,12px); }
.wsp-seccontenttabs .sct-icon{ font-size:36px; line-height:1; margin-bottom:16px; }
.wsp-seccontenttabs .sct-ptitle{ margin:0 0 14px; letter-spacing:-.02em; color:var(--ink);
  font:700 clamp(20px,2.5cqw,28px)/1.2 var(--font-head, var(--font)); }
.wsp-seccontenttabs .sct-pbody{ margin:0 0 20px; max-width:560px; font:400 15px/1.7 var(--font); color:var(--dim); }
.wsp-seccontenttabs .sct-plink{ display:inline-flex; align-items:center; gap:6px;
  font:700 14px var(--font); color:var(--accent); text-decoration:none; transition:opacity .18s linear; }
.wsp-seccontenttabs .sct-plink svg{ width:1em; height:1em; transition:transform .2s ease; }
.wsp-seccontenttabs a.sct-plink[href]:hover{ opacity:.85; }
.wsp-seccontenttabs a.sct-plink[href]:hover svg{ transform:translateX(3px); }
.wsp-seccontenttabs .sct-plink:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
@container site (max-width:560px){
  .wsp-seccontenttabs .sct-tab{ padding:10px 14px; font-size:13px; }
  .wsp-seccontenttabs .sct-panel{ padding:26px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccontenttabs .sct-tab,
  .wsp-seccontenttabs .sct-plink,
  .wsp-seccontenttabs .sct-plink svg{ transition:none; }
  .wsp-seccontenttabs a.sct-plink[href]:hover svg{ transform:none; }
}

/* --- seccustomergrid (SB_04 port) — customer testimonial wall ---
   Origin --scg-* vars -> tokens: bg->--bg, surface->--panel(+--surface-grad),
   text->--ink, dim->--dim, 2nd->--faint, accent->--accent, border->--hair,
   radius->--radius, serif->--font-head/--font. Star rating rides --accent;
   entrance anims dropped (anims.js owns reveals), hover keeps transform +
   border only. Columns reflow by container width via container queries. */
.wsp-seccustomergrid .scg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6cqw,18px);
  margin-top:clamp(28px,3.4cqw,44px); align-items:start; text-align:left; }
.wsp-seccustomergrid .scg-card{ display:flex; flex-direction:column; gap:clamp(12px,1.5cqw,16px);
  padding:clamp(20px,2.4cqw,26px); border-radius:var(--radius,12px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad,none);
  transition:border-color .2s ease, transform .25s var(--ease-pop,ease-out); }
.wsp-seccustomergrid .scg-card:hover{ border-color:color-mix(in srgb, var(--accent) 26%, var(--hair)); transform:translateY(-3px); }
.wsp-seccustomergrid .scg-card.tall{ padding-block:clamp(28px,3.6cqw,44px); }
.wsp-seccustomergrid .scg-stars{ display:flex; gap:2px; font-size:13px; line-height:1; }
.wsp-seccustomergrid .scg-star{ color:var(--faint); }
.wsp-seccustomergrid .scg-star.on{ color:var(--accent); }
.wsp-seccustomergrid .scg-quote{ margin:0; flex:1;
  font:italic 400 clamp(14px,1.7cqw,15px)/1.7 var(--font-head, var(--font)); color:var(--dim); }
.wsp-seccustomergrid .scg-author{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.wsp-seccustomergrid .scg-av{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 16%, transparent)); color:var(--accent);
  font:800 11px var(--font); letter-spacing:.02em; }
.wsp-seccustomergrid .scg-who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.wsp-seccustomergrid .scg-name{ font:700 13px var(--font); color:var(--ink); }
.wsp-seccustomergrid .scg-co{ font:400 11px var(--font); color:var(--faint); }
@container site (max-width:820px){ .wsp-seccustomergrid .scg-grid{ grid-template-columns:repeat(2,1fr); } }
@container site (max-width:520px){
  .wsp-seccustomergrid .scg-grid{ grid-template-columns:1fr; }
  .wsp-seccustomergrid .scg-card.tall{ padding-block:clamp(20px,2.4cqw,26px); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccustomergrid .scg-card{ transition:none; }
  .wsp-seccustomergrid .scg-card:hover{ transform:none; }
}
/* --- secctafullwidth (SB_04 port) — full-width CTA band: copy left, actions right ---
   Origin --cfw-* vars -> tokens: bg->--bg (the .ws-sec), surface->--panel, text->--ink,
   dim->--dim, accent->--accent, border->--hair, radius->--radius; type rides the ws-* atoms.
   The band FILLS the content column (width:100% of .ws-in — no fixed vw). Dot-grid + glow
   are static (entrance anim owned by anims.js); button motion is owned by the .ws-btn atoms. */
.wsp-secctafullwidth .cfw-band{ position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,4cqw,48px);
  padding:clamp(30px,4.4cqw,54px);
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,14px); }
/* dot grid — foreground ink at low opacity so it reads on light AND dark themes */
.wsp-secctafullwidth .cfw-band::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size:24px 24px; }
/* accent glow — the origin's brand halo, now token-driven */
.wsp-secctafullwidth .cfw-band::after{ content:''; position:absolute; top:-90px; right:16%; pointer-events:none;
  width:min(420px,60%); height:300px;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%); }
.wsp-secctafullwidth .cfw-copy{ position:relative; z-index:1; flex:1 1 auto; max-width:60ch; }
.wsp-secctafullwidth .cfw-copy .ws-kick{ margin-bottom:10px; }
.wsp-secctafullwidth .cfw-copy .ws-sub{ margin-top:12px; }
.wsp-secctafullwidth .cfw-actions{ position:relative; z-index:1; flex:none; margin-top:0;
  flex-direction:column; align-items:flex-end; gap:12px; }
@container site (max-width:860px){
  .wsp-secctafullwidth .cfw-band{ flex-direction:column; align-items:flex-start; gap:clamp(20px,4cqw,28px); }
  .wsp-secctafullwidth .cfw-actions{ align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
}
@container site (max-width:560px){
  .wsp-secctafullwidth .cfw-actions{ width:100%; flex-direction:column; align-items:stretch; }
  .wsp-secctafullwidth .cfw-actions .ws-btn{ justify-content:center; }
}
/* --- seccontentcards (SB_04 port) — blog/resource grid led by a featured post ---
   Origin --scc-* vars -> tokens: bg owned by ws-sec, surface->--panel/--panel-2, text->--ink,
   dim->--dim/--faint, accent->--accent, border->--hair, radius->--radius, font->--font/--font-head/--mono.
   Featured first card spans two columns with a side cover. Entrance anims dropped
   (anims.js owns reveals); hover-lift rides transform/border-color on link cards only. */
.wsp-seccontentcards .ccd-head{ display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:12px 24px; margin-bottom:clamp(22px,3cqw,34px); text-align:left; }
.wsp-seccontentcards .ccd-headtext{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.wsp-seccontentcards .ccd-h2{ text-align:left; font-size:clamp(22px,3cqw,30px); }
.wsp-seccontentcards .ccd-sub{ margin-top:2px; }
.wsp-seccontentcards .ccd-viewall{ flex:none; }

.wsp-seccontentcards .ccd-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8cqw,18px); text-align:left; }

.wsp-seccontentcards .ccd-card{ display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  text-decoration:none; color:inherit; }
.wsp-seccontentcards a.ccd-card{ cursor:pointer;
  transition:transform 200ms var(--ease-pop,ease-out), border-color 200ms ease; }
.wsp-seccontentcards a.ccd-card:hover{ transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 32%, var(--hair)); }
.wsp-seccontentcards a.ccd-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-seccontentcards .ccd-card.feat{ grid-column:span 2; flex-direction:row; }

.wsp-seccontentcards .ccd-cover{ flex:none; height:clamp(150px,17cqw,180px);
  background-color:var(--panel-2, var(--panel)); background-size:cover; background-position:center;
  background-image:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent2, var(--accent)) 8%, transparent)); }
.wsp-seccontentcards .ccd-cover.c1{ background-image:linear-gradient(135deg, color-mix(in srgb, var(--accent2, var(--accent)) 18%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); }
.wsp-seccontentcards .ccd-cover.c2{ background-image:radial-gradient(85% 80% at 72% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--ink) 6%, transparent) 22px 23px); }
.wsp-seccontentcards .ccd-card.feat .ccd-cover{ width:clamp(200px,26cqw,280px); height:auto; align-self:stretch; }

.wsp-seccontentcards .ccd-body{ display:flex; flex-direction:column; flex:1; min-width:0;
  padding:clamp(16px,1.8cqw,22px); }
.wsp-seccontentcards .ccd-meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wsp-seccontentcards .ccd-cat{ padding:2px 8px; border-radius:4px; white-space:nowrap;
  font:700 10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 14%, transparent)); }
.wsp-seccontentcards .ccd-read{ font:400 11px var(--font); color:var(--faint); }
.wsp-seccontentcards .ccd-title{ margin:0 0 8px; font:600 15px/1.4 var(--font-head, var(--font));
  color:var(--ink); transition:color 160ms ease; }
.wsp-seccontentcards .ccd-card.feat .ccd-title{ font-size:18px; }
.wsp-seccontentcards a.ccd-card:hover .ccd-title{ color:var(--accent); }
.wsp-seccontentcards .ccd-excerpt{ margin:0 0 16px; font:400 13px/1.65 var(--font); color:var(--dim); }
.wsp-seccontentcards .ccd-author{ display:flex; align-items:center; gap:8px; margin-top:auto; }
.wsp-seccontentcards .ccd-av{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; flex:none;
  font:800 9px var(--font); letter-spacing:.02em; color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 16%, transparent)); }
.wsp-seccontentcards .ccd-name{ font:500 12px var(--font); color:var(--ink); }
.wsp-seccontentcards .ccd-sep{ font:400 11px var(--font); color:var(--faint); }
.wsp-seccontentcards .ccd-date{ font:400 11px var(--font); color:var(--faint); }

@container site (max-width:860px){
  .wsp-seccontentcards .ccd-grid{ grid-template-columns:repeat(2,1fr); }
  .wsp-seccontentcards .ccd-card.feat{ grid-column:span 2; }
  .wsp-seccontentcards .ccd-card.feat .ccd-cover{ width:clamp(200px,34cqw,300px); }
}
@container site (max-width:560px){
  .wsp-seccontentcards .ccd-grid{ grid-template-columns:1fr; }
  .wsp-seccontentcards .ccd-card.feat{ grid-column:span 1; flex-direction:column; }
  .wsp-seccontentcards .ccd-card.feat .ccd-cover{ width:100%; height:clamp(150px,40cqw,180px); align-self:auto; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccontentcards a.ccd-card,
  .wsp-seccontentcards .ccd-title,
  .wsp-seccontentcards .ccd-viewall svg{ transition:none; }
  .wsp-seccontentcards a.ccd-card:hover{ transform:none; }
}

/* --- secctanewsletter (SB_04 port) --- */
.wsp-secctanewsletter{ background:var(--panel); border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secctanewsletter .scn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4cqw,48px); align-items:center; }
.wsp-secctanewsletter .scn-copy .ws-h2{ letter-spacing:-.02em; }
.wsp-secctanewsletter .scn-copy .ws-sub{ margin-top:10px; }
.wsp-secctanewsletter .scn-actions{ display:flex; flex-direction:column; gap:14px; }
.wsp-secctanewsletter .scn-cta .ws-btn{ width:100%; justify-content:center; }
.wsp-secctanewsletter .scn-or{ display:flex; align-items:center; gap:12px; color:var(--faint); font:600 10.5px var(--mono, var(--font)); text-transform:uppercase; letter-spacing:.1em; }
.wsp-secctanewsletter .scn-or::before, .wsp-secctanewsletter .scn-or::after{ content:''; flex:1; height:1px; background:var(--hair); }
.wsp-secctanewsletter .scn-form{ display:flex; flex-direction:column; gap:8px; }
.wsp-secctanewsletter .scn-field{ display:flex; align-items:stretch; border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .7); overflow:hidden; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.wsp-secctanewsletter .scn-field:focus-within{ border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.wsp-secctanewsletter .scn-field input{ flex:1; min-width:0; padding:11px 14px; border:none; outline:none; background:transparent; color:var(--ink); font:400 13px var(--font); }
.wsp-secctanewsletter .scn-field input::placeholder{ color:var(--faint); }
.wsp-secctanewsletter .scn-submit{ flex-shrink:0; border-radius:0; padding:0 18px; background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); font-weight:700; }
.wsp-secctanewsletter .scn-submit:hover{ transform:none; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.wsp-secctanewsletter .scn-submit:disabled{ cursor:default; opacity:.7; }
.wsp-secctanewsletter .scn-form.is-done .scn-field{ border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.wsp-secctanewsletter .ws-nlmsg{ margin-top:0; }
@container site (max-width:720px){
  .wsp-secctanewsletter .scn-grid{ grid-template-columns:1fr; gap:22px; }
}

/* --- seccontactstrip (SB_04 port) — bordered contact bar: lead + labelled
   email/phone/office details with dividers, plus a live email hand-off form.
   Origin --scs-* vars -> tokens: bg/surface->--panel(+--surface-grad), text->--ink,
   dim->--dim/--faint, accent->--accent(+--accent-fill/--accent-text), border->--hair,
   fonts->--font/--font-head/--mono, radius->--radius. Zero-JS origin; the email field
   is made real in mount (validEmail + inline confirm). Entrance anims dropped
   (anims.js owns reveals); interaction motion rides transform/color only. */
.wsp-seccontactstrip .cst-panel{ background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  padding:clamp(24px,3cqw,34px) clamp(22px,3cqw,38px);
  display:flex; flex-direction:column; gap:clamp(20px,2.6cqw,26px); }
.wsp-seccontactstrip .cst-top{ display:flex; align-items:center; gap:clamp(28px,5cqw,60px); }
.wsp-seccontactstrip .cst-lead{ flex:0 0 auto; max-width:260px; }
.wsp-seccontactstrip .cst-lead .ws-h2{ font-size:clamp(22px,2.6cqw,30px); }
.wsp-seccontactstrip .cst-lead .ws-sub{ margin-top:8px; }

.wsp-seccontactstrip .cst-contacts{ flex:1 1 auto; display:flex; align-items:center; flex-wrap:wrap; gap:0; }
.wsp-seccontactstrip .cst-item{ display:flex; align-items:center; gap:12px; min-width:0; }
.wsp-seccontactstrip .cst-icon{ flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.wsp-seccontactstrip .cst-icon svg{ width:18px; height:18px; }
.wsp-seccontactstrip .cst-body{ display:flex; flex-direction:column; min-width:0; }
.wsp-seccontactstrip .cst-label{ font:700 10px var(--mono,var(--font)); letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
.wsp-seccontactstrip .cst-value{ font:600 14px var(--font); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.wsp-seccontactstrip a.cst-value{ transition:color 160ms ease; }
.wsp-seccontactstrip a.cst-value:hover{ color:var(--accent); }
.wsp-seccontactstrip a.cst-value:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.wsp-seccontactstrip .cst-div{ flex:none; width:1px; align-self:stretch; min-height:40px;
  margin:0 clamp(18px,2.4cqw,30px); background:var(--hair); }

.wsp-seccontactstrip .cst-form{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  padding-top:clamp(18px,2.4cqw,24px); border-top:var(--bw, 1px) solid var(--hair); }
.wsp-seccontactstrip .cst-prompt{ flex:1 1 200px; font:600 13.5px var(--font); color:var(--dim); }
.wsp-seccontactstrip .cst-field{ flex:0 0 auto; display:flex; align-items:center; gap:10px; width:min(100%,420px); }
.wsp-seccontactstrip .cst-input{ flex:1 1 auto; min-width:0; height:44px; padding:0 14px; border-radius:10px;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel-2, var(--panel)); color:var(--ink);
  font:500 14px var(--font); transition:border-color 160ms ease, box-shadow 160ms ease; }
.wsp-seccontactstrip .cst-input::placeholder{ color:var(--faint); }
.wsp-seccontactstrip .cst-input:focus-visible{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.wsp-seccontactstrip .cst-input[aria-invalid="true"]{ border-color:var(--bad,#e5484d);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bad,#e5484d) 20%, transparent); }
.wsp-seccontactstrip .cst-send{ flex:none; height:44px; padding:0 20px; border:0; border-radius:10px; cursor:pointer;
  font:700 13px var(--font); color:var(--accent-text, var(--bg));
  background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  transition:transform 160ms var(--ease-pop,ease-out), opacity 160ms ease; }
.wsp-seccontactstrip .cst-send:hover{ transform:translateY(-1px); }
.wsp-seccontactstrip .cst-send:active{ transform:translateY(0); }
.wsp-seccontactstrip .cst-send:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-seccontactstrip .cst-send:disabled{ cursor:default; opacity:.7; transform:none; }
.wsp-seccontactstrip .cst-note{ flex-basis:100%; margin:0; font:400 12px var(--font); color:var(--faint); }
.wsp-seccontactstrip .cst-msg{ flex-basis:100%; min-height:1.15em; font:600 12.5px var(--font); font-style:normal; }
.wsp-seccontactstrip .cst-msg.ok{ color:var(--ok,#3fb950); }
.wsp-seccontactstrip .cst-msg.bad{ color:var(--bad,#e5484d); }

@container site (max-width:860px){
  .wsp-seccontactstrip .cst-contacts{ flex-direction:column; align-items:flex-start; gap:16px; }
  .wsp-seccontactstrip .cst-div{ display:none; }
}
@container site (max-width:560px){
  .wsp-seccontactstrip .cst-panel{ padding:22px 20px; gap:22px; }
  .wsp-seccontactstrip .cst-top{ flex-direction:column; align-items:flex-start; gap:22px; }
  .wsp-seccontactstrip .cst-lead{ max-width:none; }
  .wsp-seccontactstrip .cst-field{ width:100%; }
  .wsp-seccontactstrip .cst-send{ flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccontactstrip .cst-send,
  .wsp-seccontactstrip a.cst-value,
  .wsp-seccontactstrip .cst-input{ transition:none; }
  .wsp-seccontactstrip .cst-send:hover{ transform:none; }
}

/* ===== Dark FAQ · wsp-secdarkfaq (SB_04 · departments/dev/web_dev/drafts/section-dark-faq)
   Two-column FAQ: sticky lead + a single-open accordion. Origin --sdf-* vars ->
   tokens (bg->--bg, surface->--panel, text->--ink, dim->--dim/--faint,
   border->--hair, accent->--accent), so "dark" is rendered from the theme and
   follows it — no raw dark hex. Bespoke rules only under .wsp-secdarkfaq. ===== */
.wsp-secdarkfaq .sdf-grid{ display:grid; grid-template-columns:minmax(0,290px) 1fr; gap:clamp(36px,6cqw,80px); align-items:start; }

.wsp-secdarkfaq .sdf-lead{ position:sticky; top:24px; align-self:start; }
.wsp-secdarkfaq .sdf-lead-sub{ margin-top:16px; }
.wsp-secdarkfaq .sdf-support{ white-space:nowrap; }

.wsp-secdarkfaq .sdf-list{ display:flex; flex-direction:column; }
.wsp-secdarkfaq .sdf-item{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secdarkfaq .sdf-item:last-child{ border-bottom:0; }

.wsp-secdarkfaq .sdf-qh{ margin:0; font:inherit; }
.wsp-secdarkfaq .sdf-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0; padding:18px 0; background:none; border:0; text-align:left; cursor:pointer;
  font:600 clamp(14px,1.5cqw,15.5px)/1.4 var(--font); color:var(--ink);
  -webkit-user-select:none; user-select:none; transition:color .16s ease; }
.wsp-secdarkfaq .sdf-q:hover{ color:var(--accent); }
.wsp-secdarkfaq .sdf-item[data-open="1"] .sdf-q{ color:var(--accent); }
.wsp-secdarkfaq .sdf-q:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.wsp-secdarkfaq .sdf-qt{ flex:1 1 auto; }

/* signature chevron — two short bars meeting in a V, flipping open (origin detail) */
.wsp-secdarkfaq .sdf-chevron{ position:relative; flex:0 0 auto; width:18px; height:18px; }
.wsp-secdarkfaq .sdf-chevron::before,
.wsp-secdarkfaq .sdf-chevron::after{ content:''; position:absolute; top:50%; width:7px; height:1.5px; border-radius:1px;
  background:var(--dim); transition:transform .2s ease, background-color .16s ease; }
.wsp-secdarkfaq .sdf-chevron::before{ left:2px; transform:translateY(-50%) rotate(45deg); }
.wsp-secdarkfaq .sdf-chevron::after{ right:2px; transform:translateY(-50%) rotate(-45deg); }
.wsp-secdarkfaq .sdf-item[data-open="1"] .sdf-chevron::before{ transform:translateY(-50%) rotate(-45deg); }
.wsp-secdarkfaq .sdf-item[data-open="1"] .sdf-chevron::after{ transform:translateY(-50%) rotate(45deg); }
.wsp-secdarkfaq .sdf-q:hover .sdf-chevron::before,
.wsp-secdarkfaq .sdf-q:hover .sdf-chevron::after,
.wsp-secdarkfaq .sdf-item[data-open="1"] .sdf-chevron::before,
.wsp-secdarkfaq .sdf-item[data-open="1"] .sdf-chevron::after{ background:var(--accent); }

/* disclosure — grid-rows snaps (no motion on a layout prop); the answer fades/slides */
.wsp-secdarkfaq .sdf-panel{ display:grid; grid-template-rows:0fr; }
.wsp-secdarkfaq .sdf-item[data-open="1"] .sdf-panel{ grid-template-rows:1fr; }
.wsp-secdarkfaq .sdf-panel-in{ min-height:0; overflow:hidden; }
.wsp-secdarkfaq .sdf-a{ margin:0; padding:0 0 18px; max-width:60ch;
  font:400 clamp(13px,1.4cqw,14.5px)/1.7 var(--font); color:var(--dim);
  opacity:0; transform:translateY(-4px); transition:opacity .26s ease, transform .26s ease; }
.wsp-secdarkfaq .sdf-item[data-open="1"] .sdf-a{ opacity:1; transform:none; }

@container site (max-width:860px){
  .wsp-secdarkfaq .sdf-grid{ grid-template-columns:minmax(0,240px) 1fr; gap:40px; }
}
@container site (max-width:560px){
  .wsp-secdarkfaq .sdf-grid{ grid-template-columns:1fr; gap:26px; }
  .wsp-secdarkfaq .sdf-lead{ position:static; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secdarkfaq .sdf-q,
  .wsp-secdarkfaq .sdf-chevron::before,
  .wsp-secdarkfaq .sdf-chevron::after,
  .wsp-secdarkfaq .sdf-a{ transition:none; }
}

/* --- secctadark (SB_04 port) — full-bleed inverted CTA band ---
   Origin --scd-* vars -> tokens. The dark surface is rendered as an INVERTED
   band (background:var(--ink); text:var(--bg)) so it reads as a dark CTA in
   light mode and cleanly flips in dark mode — no hardcoded dark hex. accent ->
   --accent (eyebrow via .ws-kick, primary fill, top glow, avatar fills);
   borders/support/proof text -> color-mix over --bg. Star gold is a literal
   semantic hue (matches the .ws-bkstar / .adl-stars sibling ports; no token
   exists). Entrance anims dropped (anims.js owns reveals); motion is hover-only
   (transform/opacity/color), no blur. */
.wsp-secctadark{ background:var(--ink); color:var(--bg);
  border-top:1px solid color-mix(in srgb, var(--bg) 12%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--bg) 12%, transparent); }
.wsp-secctadark::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 78% at 50% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%); }
.wsp-secctadark .scd-inner{ position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:clamp(18px,2.4cqw,26px); }
.wsp-secctadark .ws-kick{ margin:0; }
.wsp-secctadark .ws-h2{ color:var(--bg); }
.wsp-secctadark .ws-sub{ color:color-mix(in srgb, var(--bg) 66%, var(--ink)); }
.wsp-secctadark .scd-actions{ margin-top:0; }
/* ghost reads light on the inverted band (the default ghost uses --ink text) */
.wsp-secctadark .ws-btn.ghost{ color:var(--bg);
  border-color:color-mix(in srgb, var(--bg) 24%, transparent);
  background:color-mix(in srgb, var(--bg) 6%, transparent); }
.wsp-secctadark .ws-btn.ghost:hover{ border-color:color-mix(in srgb, var(--bg) 48%, transparent); }
/* primary keeps the accent fill (self-contained accent/accent-text contrast) */
.wsp-secctadark .ws-btn.primary svg{ transition:transform 180ms var(--ease-pop,ease-out); }
.wsp-secctadark .ws-btn.primary:hover svg{ transform:translateX(3px); }
/* trust / social-proof row */
.wsp-secctadark .scd-trust{ display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:12px; }
.wsp-secctadark .scd-avatars{ display:flex; }
.wsp-secctadark .scd-av{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  margin-left:-8px; font:800 10px var(--font); letter-spacing:.02em;
  background:var(--accent); color:var(--accent-text, var(--bg)); border:2px solid var(--ink); }
.wsp-secctadark .scd-avatars .scd-av:first-child{ margin-left:0; }
.wsp-secctadark .scd-av:nth-child(2){ opacity:.9; }
.wsp-secctadark .scd-av:nth-child(3){ opacity:.8; }
.wsp-secctadark .scd-av:nth-child(4){ opacity:.7; }
.wsp-secctadark .scd-av:nth-child(n+5){ opacity:.62; }
.wsp-secctadark .scd-stars{ display:inline-flex; gap:2px; font-size:14px; line-height:1; }
.wsp-secctadark .scd-star{ color:#f5b325; }
.wsp-secctadark .scd-star.off{ color:color-mix(in srgb, var(--bg) 26%, transparent); }
.wsp-secctadark .scd-trusttext{ font:500 12px var(--font);
  color:color-mix(in srgb, var(--bg) 60%, var(--ink)); }
@container site (max-width:560px){
  .wsp-secctadark .scd-trust{ gap:9px; }
  .wsp-secctadark .scd-av{ width:27px; height:27px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secctadark .ws-btn.primary svg{ transition:none; }
  .wsp-secctadark .ws-btn.primary:hover svg{ transform:none; }
}
/* --- secemailsignup (SB_04 port) — centered newsletter capture with avatar social proof.
   Origin --ses-* vars -> tokens: bg->--bg, surface->--panel, text->--ink, dim->--dim/--faint,
   accent->--accent, border->--hair, font->--font. Reuses the ws-nlform / ws-nlrow / ws-nlmsg
   atoms for the joined field+button and inline feedback; bespoke below are the floated input
   pill, the avatar social-proof pile and the privacy microcopy. The zero-JS origin is now
   live-validating. Entrance anims dropped (anims.js owns reveals); nothing transitions at rest. */
.wsp-secemailsignup .ws-nlform{ max-width:480px; text-align:center; }
.wsp-secemailsignup .ws-nlrow{ background:var(--panel); box-shadow:0 6px 24px rgba(0,0,0,.16); }
.wsp-secemailsignup .esf-proof{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; }
.wsp-secemailsignup .esf-avatars{ display:inline-flex; }
.wsp-secemailsignup .esf-avatar{ width:26px; height:26px; border-radius:50%; margin-right:-7px;
  border:2px solid var(--bg); background:var(--accent); }
.wsp-secemailsignup .esf-avatar:nth-child(2){ background:color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.wsp-secemailsignup .esf-avatar:nth-child(3){ background:var(--accent2, color-mix(in srgb, var(--accent) 58%, var(--ink))); }
.wsp-secemailsignup .esf-avatar:nth-child(4){ background:color-mix(in srgb, var(--accent) 52%, var(--ink)); }
.wsp-secemailsignup .esf-avatar:nth-child(5){ background:color-mix(in srgb, var(--accent) 34%, var(--ink)); }
.wsp-secemailsignup .esf-proof-text{ font:400 13px var(--font); color:var(--dim); }
.wsp-secemailsignup .esf-privacy{ margin:14px auto 0; max-width:52ch; text-align:center; font:400 12px/1.55 var(--font); color:var(--faint); }

/* --- secfaqsplit (SB_04 port) — two-column FAQ: a sticky intro column (eyebrow,
   heading, contact link) beside a bordered accordion of expandable questions.
   Origin --sfs-* vars -> tokens: bg->--bg, surface->--panel, text->--ink,
   dim->--dim, accent->--accent, border->--hair, radius->--radius, open-bg->accent
   tint. Entrance motion belongs to the reveal system (dropped the origin's none);
   the only motion here is the grid-row expand + chevron rotation + instant hover.
   Columns stack one-up via container query (not @media). */
.wsp-secfaqsplit .ws-in.split{ grid-template-columns:1fr 1.35fr; align-items:start; gap:clamp(30px,4.4cqw,56px); }
.wsp-secfaqsplit .sfs-left{ position:sticky; top:40px; }
.wsp-secfaqsplit .sfs-left .ws-shead{ margin-bottom:16px; max-width:none; }
.wsp-secfaqsplit .sfs-ctarow{ margin-top:0; }
.wsp-secfaqsplit .sfs-contact svg{ width:14px; height:14px; }
.wsp-secfaqsplit .sfs-list{ display:flex; flex-direction:column; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); background:var(--panel); }
.wsp-secfaqsplit .sfs-item{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secfaqsplit .sfs-item:last-child{ border-bottom:0; }
.wsp-secfaqsplit .sfs-item[data-open="1"]{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
.wsp-secfaqsplit .sfs-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0; padding:clamp(0.9rem,1.7cqw,1.05rem) clamp(1rem,1.9cqw,1.15rem); background:none; border:0; cursor:pointer;
  text-align:left; font:600 clamp(0.9rem,1.7cqw,0.98rem)/1.4 var(--font); color:var(--ink);
  -webkit-user-select:none; user-select:none; }
.wsp-secfaqsplit .sfs-q:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.wsp-secfaqsplit .sfs-q:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.wsp-secfaqsplit .sfs-qt{ flex:1; }
.wsp-secfaqsplit .sfs-chev{ position:relative; flex-shrink:0; width:9px; height:9px; margin-right:3px;
  border-right:1.6px solid var(--dim); border-bottom:1.6px solid var(--dim);
  transform:translateY(-2px) rotate(45deg); transition:transform .3s ease, border-color .2s ease; }
.wsp-secfaqsplit .sfs-item[data-open="1"] .sfs-chev{ transform:translateY(2px) rotate(225deg); border-color:var(--accent); }
.wsp-secfaqsplit .sfs-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.wsp-secfaqsplit .sfs-item[data-open="1"] .sfs-panel{ grid-template-rows:1fr; }
.wsp-secfaqsplit .sfs-panel-in{ min-height:0; overflow:hidden; }
.wsp-secfaqsplit .sfs-a{ padding:0 clamp(1rem,1.9cqw,1.15rem) clamp(0.95rem,1.7cqw,1.1rem);
  font:400 clamp(0.82rem,1.45cqw,0.9rem)/1.7 var(--font); color:var(--dim); opacity:0; transition:opacity .3s ease .02s; }
.wsp-secfaqsplit .sfs-item[data-open="1"] .sfs-a{ opacity:1; }
@container site (max-width: 820px){
  .wsp-secfaqsplit .ws-in.split{ grid-template-columns:1fr; gap:clamp(26px,5cqw,34px); }
  .wsp-secfaqsplit .sfs-left{ position:static; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfaqsplit .sfs-panel, .wsp-secfaqsplit .sfs-a,
  .wsp-secfaqsplit .sfs-chev, .wsp-secfaqsplit .sfs-q{ transition:none; }
}
/* --- secdiningmenu (SB_04 port) — fine-dining carte. Mono course headings ruled
   with hairlines over dish rows whose names dot-leader across to a right-aligned
   price; dietary tags, sold-out (“86’d”) and market-price handling; an ember-glow
   feature dish, a tasting card and a dietary legend. Origin --sdm-* vars -> tokens:
   bg stays transparent (theme owns it), brass accent->--accent, text->--ink,
   dim->--dim/--faint, leader/rule->--hair, panel->--panel-2, serif display feel
   ->--font-head, mono labels->--mono. Scroll-draw entrance dropped (anims.js owns
   reveals); the dotted leaders stay as static typeset detail. Course rail is LIVE. */
.wsp-secdiningmenu .dm-note{ font-style:italic; }
.wsp-secdiningmenu .dm-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }

/* course-filter rail — mono, letterspaced, brass active (echoes the origin rail) */
.wsp-secdiningmenu .dm-rail{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(10px,2cqw,22px);
  margin:0 auto clamp(28px,4cqw,44px); max-width:44rem; padding:10px 4px;
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secdiningmenu .dm-chip{ appearance:none; -webkit-appearance:none; background:none; border:0; padding:5px 2px;
  cursor:pointer; font:600 11px var(--mono, var(--font)); letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease; }
.wsp-secdiningmenu .dm-chip:hover{ color:var(--ink); }
.wsp-secdiningmenu .dm-chip.on{ color:var(--accent); border-bottom-color:var(--accent); }
.wsp-secdiningmenu .dm-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* courses + dish rows */
.wsp-secdiningmenu .dm-course{ max-width:44rem; margin:0 auto clamp(30px,5cqw,52px); }
.wsp-secdiningmenu .dm-course.dm-hide{ display:none; }
.wsp-secdiningmenu .dm-course-title{ display:flex; align-items:center; gap:1.1rem; margin:0 0 1.5rem;
  font:400 12px var(--mono, var(--font)); letter-spacing:.32em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.wsp-secdiningmenu .dm-course-title::before, .wsp-secdiningmenu .dm-course-title::after{
  content:''; flex:1; min-width:1rem; height:1px; background:var(--hair); }
.wsp-secdiningmenu .dm-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.3rem; }
.wsp-secdiningmenu .dm-dish{ margin:0; }
.wsp-secdiningmenu .dm-line{ display:flex; align-items:baseline; gap:.65rem; }
.wsp-secdiningmenu .dm-name{ margin:0; flex:0 1 auto; min-width:0;
  font:400 clamp(16px,2.4cqw,19px)/1.35 var(--font-head, var(--font)); letter-spacing:.01em; color:var(--ink); }
.wsp-secdiningmenu .dm-tag{ margin-left:.4em; font:600 .58em var(--mono, var(--font)); letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); vertical-align:.4em; }
.wsp-secdiningmenu .dm-dots{ flex:1 1 2ch; min-width:2ch; align-self:baseline; height:.8em; position:relative; }
.wsp-secdiningmenu .dm-dots::after{ content:''; position:absolute; left:0; bottom:.12em; width:100%; height:3px;
  background-image:radial-gradient(circle at 1.5px 1.5px, color-mix(in srgb, var(--ink) 30%, transparent) 1.15px, transparent 1.6px);
  background-size:7px 3px; background-repeat:repeat-x; }
.wsp-secdiningmenu .dm-price{ flex:0 0 auto; font:400 14px var(--mono, var(--font)); letter-spacing:.04em;
  color:var(--accent); font-variant-numeric:tabular-nums; }
.wsp-secdiningmenu .dm-desc{ margin:.3rem 0 0; max-width:34em; font:italic 400 13.5px/1.55 var(--font); color:var(--dim); }

/* sold-out (“86’d”) — struck, muted, small-caps marker in the price slot */
.wsp-secdiningmenu .dm-dish.is-out .dm-name{ color:var(--faint); text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.wsp-secdiningmenu .dm-dish.is-out .dm-desc{ opacity:.55; }
.wsp-secdiningmenu .dm-dish.is-out .dm-price{ font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 60%, transparent); }

/* feature dish — ember glow driven by the brand accent */
.wsp-secdiningmenu .dm-feature{ position:relative; max-width:50rem; margin:0 auto clamp(30px,5cqw,52px);
  padding:clamp(28px,5cqw,48px) clamp(20px,4.5cqw,48px); overflow:hidden; text-align:center;
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--hair)); border-radius:var(--radius,12px); }
.wsp-secdiningmenu .dm-feature::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 85% at 50% 118%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    radial-gradient(120% 100% at 50% 130%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.wsp-secdiningmenu .dm-feature > *{ position:relative; }
.wsp-secdiningmenu .dm-feature-kick{ margin:0 0 1rem; font:600 10px var(--mono, var(--font));
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent); }
.wsp-secdiningmenu .dm-feature-name{ margin:0; font:italic 400 clamp(22px,4.4cqw,38px)/1.14 var(--font-head, var(--font)); color:var(--ink); }
.wsp-secdiningmenu .dm-feature-desc{ margin:.9rem auto 1.4rem; max-width:30em; font:italic 400 14.5px/1.6 var(--font); color:var(--dim); }
.wsp-secdiningmenu .dm-feature-price{ display:inline-flex; align-items:baseline; gap:.6rem; margin:0;
  padding:.5rem 1.1rem; border:1px solid color-mix(in srgb, var(--accent) 38%, var(--hair)); border-radius:99px;
  font:400 15px var(--mono, var(--font)); color:var(--ink); }
.wsp-secdiningmenu .dm-feature-price small{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

/* tasting-menu card */
.wsp-secdiningmenu .dm-tasting{ max-width:44rem; margin:0 auto clamp(28px,5cqw,48px); padding:clamp(22px,4cqw,36px);
  text-align:center; background:var(--panel-2, var(--panel)); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); }
.wsp-secdiningmenu .dm-tasting-title{ margin:0 0 .35rem; font:400 clamp(20px,3.2cqw,28px) var(--font-head, var(--font)); color:var(--ink); }
.wsp-secdiningmenu .dm-tasting-sub{ margin:0 0 1.1rem; font:italic 400 14px var(--font); color:var(--dim); }
.wsp-secdiningmenu .dm-tasting-price{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.6rem; margin:0;
  font:400 13px var(--mono, var(--font)); letter-spacing:.05em; color:var(--accent); }
.wsp-secdiningmenu .dm-tasting-note{ margin:1rem 0 0; font:italic 400 12px var(--font); color:var(--faint); }

/* dietary legend */
.wsp-secdiningmenu .dm-foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.8rem;
  max-width:44rem; margin:clamp(6px,2cqw,16px) auto 0; padding-top:1.4rem; border-top:var(--bw, 1px) solid var(--hair);
  font:400 11px var(--mono, var(--font)); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); text-align:center; }
.wsp-secdiningmenu .dm-foot b{ font-weight:400; color:var(--accent); }

@container site (max-width:560px){
  .wsp-secdiningmenu .dm-desc{ font-size:12.5px; }
  .wsp-secdiningmenu .dm-rail{ gap:10px 14px; }
  .wsp-secdiningmenu .dm-tasting-price{ gap:.4rem 1rem; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secdiningmenu .dm-chip{ transition:none; }
}

/* --- secfaqaccordion (SB_04 port) — two-column FAQ: a sticky heading column beside a
   ruled accordion whose question rows expand on click. Origin --sfaq-* vars -> tokens:
   bg->--bg, surface->--panel, text->--ink, dim->--dim/--faint, accent->--accent,
   border->--hair, font->--font/--font-head. Entrance dropped; the reveal keeps a measured
   max-height transition (JS sets the px), the chevron rotates, hover rides colour only. */
.wsp-secfaqaccordion .ws-in.split{ grid-template-columns:0.9fr 1.35fr; gap:clamp(40px,6cqw,80px); align-items:start; }
.wsp-secfaqaccordion .sfaq-head{ position:sticky; top:clamp(20px,4cqw,40px); }
.wsp-secfaqaccordion .sfaq-sub{ margin-top:14px; }
.wsp-secfaqaccordion .sfaq-link{ color:var(--accent); text-decoration:none; }
.wsp-secfaqaccordion .sfaq-link:hover{ text-decoration:underline; }
.wsp-secfaqaccordion .sfaq-list{ display:flex; flex-direction:column; }
.wsp-secfaqaccordion .sfaq-item{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secfaqaccordion .sfaq-item:first-child{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-secfaqaccordion .sfaq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0; background:none; border:0; cursor:pointer; text-align:left;
  font:600 clamp(14px,1.7cqw,16px)/1.4 var(--font); color:var(--ink); }
.wsp-secfaqaccordion .sfaq-q:hover{ color:var(--accent); }
.wsp-secfaqaccordion .sfaq-q:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; }
.wsp-secfaqaccordion .sfaq-qt{ flex:1; }
.wsp-secfaqaccordion .sfaq-chevron{ display:flex; flex:none; color:var(--faint);
  transition:transform .25s var(--ease-pop, ease), color .15s ease; }
.wsp-secfaqaccordion .sfaq-chevron svg{ width:18px; height:18px; }
.wsp-secfaqaccordion .sfaq-item[data-open="1"] .sfaq-q{ color:var(--accent); }
.wsp-secfaqaccordion .sfaq-item[data-open="1"] .sfaq-chevron{ transform:rotate(180deg); color:var(--accent); }
.wsp-secfaqaccordion .sfaq-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.wsp-secfaqaccordion .sfaq-panel-in{ padding-bottom:22px; }
.wsp-secfaqaccordion .sfaq-a{ margin:0; max-width:62ch; color:var(--dim);
  font:400 clamp(13px,1.5cqw,14.5px)/1.75 var(--font); }
@container site (max-width:860px){
  .wsp-secfaqaccordion .ws-in.split{ grid-template-columns:1fr; gap:clamp(26px,5cqw,40px); }
  .wsp-secfaqaccordion .sfaq-head{ position:static; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfaqaccordion .sfaq-chevron,
  .wsp-secfaqaccordion .sfaq-panel{ transition:none; }
}
/* --- secfeatureicons (SB_04 port) — icon-tiled feature grid ---
   Origin --sfi-* vars -> tokens: bg->section --bg, surface->--panel, text->--ink,
   text-dim->--dim, accent->--accent, icon-bg->accent color-mix, border->--hair,
   font->--font/--font-head. Entrance anims dropped (anims.js owns reveals); hover
   rides transform/color only, backgrounds set instantly. Container queries (not
   @media) reflow the columns inside preview cards / panes of any width. */
.wsp-secfeatureicons .sfi-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2cqw,18px); margin-top:8px; text-align:left; }
.wsp-secfeatureicons .sfi-item{ display:block; padding:clamp(22px,2.6cqw,28px) clamp(20px,2.2cqw,24px);
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  text-decoration:none; color:inherit; }
.wsp-secfeatureicons a.sfi-item{ cursor:pointer;
  transition:transform 200ms var(--ease-pop,ease-out), border-color 200ms ease; }
.wsp-secfeatureicons a.sfi-item:hover{ transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 32%, var(--hair)); }
.wsp-secfeatureicons a.sfi-item:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-secfeatureicons .sfi-ico{ display:grid; place-items:center; width:44px; height:44px;
  margin-bottom:16px; border-radius:10px; color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent)); }
.wsp-secfeatureicons .sfi-ico svg{ width:22px; height:22px; }
.wsp-secfeatureicons a.sfi-item:hover .sfi-ico{ background:color-mix(in srgb, var(--accent) 20%, transparent); }
.wsp-secfeatureicons .sfi-name{ margin:0 0 8px; font:600 15px/1.35 var(--font-head, var(--font)); color:var(--ink); }
.wsp-secfeatureicons .sfi-body{ margin:0; font:400 13px/1.65 var(--font); color:var(--dim); }
@container site (max-width:860px){ .wsp-secfeatureicons .sfi-grid{ grid-template-columns:repeat(2,1fr); } }
@container site (max-width:560px){ .wsp-secfeatureicons .sfi-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .wsp-secfeatureicons a.sfi-item{ transition:none; }
  .wsp-secfeatureicons a.sfi-item:hover{ transform:none; }
}
/* --- secfaqtwocol (SB_04 port · section-faq-two-col) — a sticky intro column beside a
   bordered plus-toggle accordion. Origin --faq2-* vars -> tokens: bg->page --bg, text->--ink,
   text-dim->--dim, accent->--accent, border->--hair, icon-bg->accent color-mix, font->--font.
   Origin @media -> @container (the two columns collapse to one in narrow panes); the fixed-px
   answer height becomes a JS-measured max-height; entrance anims dropped, hover/expand kept. */
.wsp-secfaqtwocol .f2c-grid{ display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(32px,6cqw,80px); align-items:start; }
.wsp-secfaqtwocol .f2c-intro{ position:sticky; top:clamp(20px,4cqw,40px); }
.wsp-secfaqtwocol .f2c-sub{ margin-top:14px; }
.wsp-secfaqtwocol .f2c-contact{ margin-top:26px; }
.wsp-secfaqtwocol .f2c-contact svg{ width:15px; height:15px; }

.wsp-secfaqtwocol .f2c-list{ display:flex; flex-direction:column; }
.wsp-secfaqtwocol .f2c-item{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secfaqtwocol .f2c-item:first-child{ border-top:var(--bw, 1px) solid var(--hair); }

.wsp-secfaqtwocol .f2c-q{ appearance:none; -webkit-appearance:none; width:100%; margin:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0;
  background:none; border:0; text-align:left; color:var(--ink); font-family:inherit; }
.wsp-secfaqtwocol .f2c-qt{ font:600 clamp(14px,1.6cqw,15.5px)/1.45 var(--font); color:var(--ink); transition:color 160ms ease; }
.wsp-secfaqtwocol .f2c-q:hover .f2c-qt{ color:var(--accent); }
.wsp-secfaqtwocol .f2c-q:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wsp-secfaqtwocol .f2c-icon{ flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent)); color:var(--accent);
  transition:transform 250ms var(--ease-pop,ease-out); }
.wsp-secfaqtwocol .f2c-icon svg{ width:14px; height:14px; }
.wsp-secfaqtwocol .f2c-item.is-open .f2c-icon{ transform:rotate(45deg); }

.wsp-secfaqtwocol .f2c-a{ overflow:hidden; max-height:0; transition:max-height 300ms ease; }
.wsp-secfaqtwocol .f2c-a-inner{ padding:0 0 20px; }
.wsp-secfaqtwocol .f2c-a-text{ margin:0; max-width:64ch; font:400 clamp(13px,1.5cqw,14px)/1.7 var(--font); color:var(--dim); }

@container site (max-width:860px){
  .wsp-secfaqtwocol .f2c-grid{ grid-template-columns:1fr; gap:clamp(24px,5cqw,40px); }
  .wsp-secfaqtwocol .f2c-intro{ position:static; }
}
@container site (max-width:560px){
  .wsp-secfaqtwocol .f2c-contact{ margin-top:20px; }
  .wsp-secfaqtwocol .f2c-q{ padding:16px 0; gap:12px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfaqtwocol .f2c-qt,
  .wsp-secfaqtwocol .f2c-icon,
  .wsp-secfaqtwocol .f2c-a{ transition:none; }
}
/* --- secfeaturehighlight (SB_04 port) — single-feature callout card ---
   Origin --sfh-* vars -> tokens: bg->section --bg, surface->--panel(+--surface-grad),
   text->--ink, dim->--dim, accent->--accent (+ --accent-fill tint), border->--hair,
   radius->--radius, font->--font/--font-head. The origin's green outcome badges map
   to accent-tinted chips (the system has no success token). Entrance anims dropped
   (anims.js owns reveals); hover rides border-color only; a container query stacks
   the icon + copy into a column on narrow. */
.wsp-secfeaturehighlight .fh-card{ display:flex; align-items:center; gap:clamp(24px,4cqw,48px);
  max-width:820px; margin-inline:auto; padding:clamp(28px,3.4cqw,40px);
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,16px);
  transition:border-color 220ms ease; }
.wsp-secfeaturehighlight .fh-card:hover{ border-color:color-mix(in srgb, var(--accent) 30%, var(--hair)); }
.wsp-secfeaturehighlight .fh-iconwrap{ flex:none; display:grid; place-items:center;
  width:clamp(60px,8cqw,76px); aspect-ratio:1; border-radius:calc(var(--radius,16px) * .9);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.wsp-secfeaturehighlight .fh-icon{ display:flex; color:var(--accent);
  width:clamp(26px,3.4cqw,32px); height:clamp(26px,3.4cqw,32px); }
.wsp-secfeaturehighlight .fh-icon svg{ width:100%; height:100%; }
.wsp-secfeaturehighlight .fh-content{ flex:1; min-width:0; }
.wsp-secfeaturehighlight .fh-content .ws-h2{ font-size:clamp(22px,2.8cqw,30px); }
.wsp-secfeaturehighlight .fh-content .ws-sub{ margin-top:12px; }
.wsp-secfeaturehighlight .fh-metrics{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.wsp-secfeaturehighlight .fh-metric{ display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:7px; font:700 11px var(--font); color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.wsp-secfeaturehighlight .fh-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.wsp-secfeaturehighlight .ws-ctarow{ margin-top:20px; }
@container site (max-width:560px){
  .wsp-secfeaturehighlight .fh-card{ flex-direction:column; align-items:flex-start;
    gap:20px; padding:clamp(22px,6cqw,28px); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfeaturehighlight .fh-card{ transition:none; }
}
/* --- secframeworksupport (SB_04 port) — supported-framework tiles ---
   Origin --sfrs-* vars -> tokens: bg inherits the section, surface->--panel(+--surface-grad),
   text->--ink, dim->--dim/--faint, accent->--accent, border->--hair, radius->--radius,
   font->--font/--font-head/--mono. Emoji marks became token-driven accent monogram tiles
   (no external images). Entrance anims dropped (anims.js owns reveals); hover rides
   transform/color only, border-color and backgrounds otherwise instant. Container
   queries (not @media) reflow the columns inside preview cards / panes of any width. */
.wsp-secframeworksupport .sfs-grid{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.4cqw,14px); margin-top:clamp(20px,3cqw,34px); text-align:left; }
.wsp-secframeworksupport .sfs-tile{ display:flex; align-items:center; gap:11px;
  padding:clamp(12px,1.5cqw,15px) clamp(14px,1.7cqw,18px); border-radius:var(--radius,12px);
  background:var(--panel); background-image:var(--surface-grad,none); border:var(--bw, 1px) solid var(--hair);
  text-decoration:none; color:var(--ink); }
.wsp-secframeworksupport a.sfs-tile{ cursor:pointer;
  transition:transform 200ms var(--ease-pop,ease-out), border-color 200ms ease; }
.wsp-secframeworksupport a.sfs-tile:hover{ transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.wsp-secframeworksupport a.sfs-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-secframeworksupport .sfs-mono{ flex:none; display:grid; place-items:center;
  width:34px; height:34px; border-radius:9px;
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 16%, transparent));
  color:var(--accent); font:800 13px/1 var(--mono, var(--font)); letter-spacing:.01em; }
.wsp-secframeworksupport .sfs-name{ font:600 13.5px var(--font); color:var(--ink);
  letter-spacing:-.01em; transition:color 160ms ease; }
.wsp-secframeworksupport a.sfs-tile:hover .sfs-name{ color:var(--accent); }
.wsp-secframeworksupport .sfs-foot{ margin-top:clamp(22px,3cqw,32px); }
.wsp-secframeworksupport .sfs-viewall svg{ width:1em; height:1em; transition:transform .2s ease; }
.wsp-secframeworksupport .sfs-viewall:hover svg{ transform:translateX(3px); }
@container site (max-width:860px){ .wsp-secframeworksupport .sfs-grid{ grid-template-columns:repeat(3,1fr); } }
@container site (max-width:560px){ .wsp-secframeworksupport .sfs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){
  .wsp-secframeworksupport a.sfs-tile,
  .wsp-secframeworksupport .sfs-name,
  .wsp-secframeworksupport .sfs-viewall svg{ transition:none; }
  .wsp-secframeworksupport a.sfs-tile:hover{ transform:none; }
}
/* --- secfeaturegrid (SB_04 port) — bento feature grid: gradient hero cell + icon cards ---
   Origin --sfg-* vars -> tokens: bg->--bg, surface->--panel(+--surface-grad),
   text->--ink, text-dim->--dim, accent->--accent, border->--hair,
   radius->--radius, icon-bg->--accent-fill. @media breakpoints -> container
   queries (3->2->1). Entrance anims dropped; hover keeps border/transform/color. */
.wsp-secfeaturegrid .ws-in > .ws-shead{ text-align:left; max-width:none; margin:0 0 clamp(30px,4.4cqw,46px); }
.wsp-secfeaturegrid .sfg-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr; gap:clamp(10px,1.5cqw,14px); text-align:left; }
.wsp-secfeaturegrid .sfg-span2{ grid-column:span 2; }

.wsp-secfeaturegrid .sfg-cell{ display:flex; flex-direction:column; padding:clamp(20px,2.6cqw,28px);
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  text-decoration:none; color:inherit; transition:border-color 200ms ease; }
.wsp-secfeaturegrid .sfg-cell:hover{ border-color:color-mix(in srgb, var(--accent) 26%, var(--hair)); }
.wsp-secfeaturegrid a.sfg-cell{ cursor:pointer; transition:border-color 200ms ease, transform 200ms var(--ease-pop,ease-out); }
.wsp-secfeaturegrid a.sfg-cell:hover{ transform:translateY(-3px); }
.wsp-secfeaturegrid a.sfg-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* hero cell — flush gradient panel over a padded body */
.wsp-secfeaturegrid .sfg-hero{ padding:0; overflow:hidden; }
.wsp-secfeaturegrid .sfg-hero-body{ display:block; padding:clamp(20px,2.6cqw,26px); }
.wsp-secfeaturegrid .sfg-visual{ display:block; height:clamp(120px,16cqw,168px); flex:none;
  background:
    radial-gradient(120% 150% at 80% 12%, color-mix(in srgb, var(--accent2, var(--accent)) 42%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, var(--panel-2, var(--panel))),
      color-mix(in srgb, var(--accent2, var(--accent)) 26%, var(--panel-2, var(--panel)))); }

.wsp-secfeaturegrid .sfg-ico{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:9px;
  margin-bottom:16px; color:var(--accent);
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--hair)); }
.wsp-secfeaturegrid .sfg-ico svg{ width:19px; height:19px; }
.wsp-secfeaturegrid .sfg-hero .sfg-ico{ width:auto; height:auto; margin-bottom:14px; background:none; border:none; }
.wsp-secfeaturegrid .sfg-hero .sfg-ico svg{ width:24px; height:24px; }

.wsp-secfeaturegrid .sfg-ct{ margin:0 0 8px; letter-spacing:-.01em; color:var(--ink);
  font:700 clamp(15px,1.7cqw,16px)/1.3 var(--font-head, var(--font)); transition:color 160ms ease; }
.wsp-secfeaturegrid .sfg-hero .sfg-ct{ font-size:clamp(16px,1.9cqw,18px); }
.wsp-secfeaturegrid a.sfg-cell:hover .sfg-ct{ color:var(--accent); }
.wsp-secfeaturegrid .sfg-cs{ margin:0; font:400 clamp(12.5px,1.4cqw,13px)/1.62 var(--font); color:var(--dim); }

@container site (max-width:820px){
  .wsp-secfeaturegrid .sfg-grid{ grid-template-columns:1fr 1fr; }
  .wsp-secfeaturegrid .sfg-span2{ grid-column:span 1; }
  .wsp-secfeaturegrid .sfg-hero{ grid-column:span 2; }
}
@container site (max-width:520px){
  .wsp-secfeaturegrid .sfg-grid{ grid-template-columns:1fr; }
  .wsp-secfeaturegrid .sfg-span2,
  .wsp-secfeaturegrid .sfg-hero{ grid-column:span 1; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfeaturegrid .sfg-cell,
  .wsp-secfeaturegrid a.sfg-cell,
  .wsp-secfeaturegrid .sfg-ct{ transition:none; }
  .wsp-secfeaturegrid a.sfg-cell:hover{ transform:none; }
}
/* --- secfeaturelist (SB_04 port) — sticky lead beside a two-up icon-feature grid ---
   Origin --sfl-* vars -> tokens: bg->section --bg, surface->--panel-2/--panel, text->--ink,
   dim->--dim, accent->--accent, border->--hair, radius->--radius, font->--font/--font-head.
   Two-column @media -> container queries (stacks on narrow, sticky lead drops); emoji icons ->
   S_ICONS stroke glyphs; entrance anims dropped (anims.js owns reveals); hover rides color only. */
.wsp-secfeaturelist .sfl-inner{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(36px,6cqw,80px); align-items:start; }
.wsp-secfeaturelist .sfl-lead{ position:sticky; top:32px; display:flex; flex-direction:column;
  align-items:flex-start; gap:14px; }
.wsp-secfeaturelist .sfl-lead .ws-h2{ font-size:clamp(23px,3.2cqw,32px); }
.wsp-secfeaturelist .sfl-lead .ws-sub{ margin:0; }
.wsp-secfeaturelist .sfl-cta{ margin-top:2px; }
.wsp-secfeaturelist .sfl-cta svg{ width:1em; height:1em; }
.wsp-secfeaturelist .sfl-grid{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3cqw,28px); }
.wsp-secfeaturelist .sfl-item{ display:flex; gap:14px; align-items:flex-start; }
.wsp-secfeaturelist .sfl-icon{ flex:none; display:grid; place-items:center; width:38px; height:38px;
  border-radius:10px; background:var(--panel-2,var(--panel)); border:var(--bw, 1px) solid var(--hair);
  color:var(--accent); transition:border-color 180ms ease; }
.wsp-secfeaturelist .sfl-icon svg{ width:18px; height:18px; }
.wsp-secfeaturelist .sfl-item:hover .sfl-icon{ border-color:color-mix(in srgb, var(--accent) 42%, var(--hair)); }
.wsp-secfeaturelist .sfl-item-body{ display:flex; flex-direction:column; gap:4px; padding-top:1px; min-width:0; }
.wsp-secfeaturelist .sfl-item-name{ font:700 14px/1.3 var(--font-head,var(--font)); color:var(--ink); }
.wsp-secfeaturelist .sfl-item-desc{ margin:0; font:400 12.5px/1.55 var(--font); color:var(--dim); }
@container site (max-width:860px){
  .wsp-secfeaturelist .sfl-inner{ grid-template-columns:1fr; gap:clamp(28px,5cqw,40px); }
  .wsp-secfeaturelist .sfl-lead{ position:static; top:auto; }
}
@container site (max-width:560px){
  .wsp-secfeaturelist .sfl-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfeaturelist .sfl-icon{ transition:none; }
}
/* --- secfeatureaccordion (SB_04 port) — sticky pitch + boxed, icon-led feature accordion ---
   Origin --sfa-* vars -> tokens: bg->--bg (via ws-sec), surface/open-bg->--panel/--panel-2 +
   an accent tint, text->--ink, dim->--dim/--faint, accent->--accent, border->--hair,
   font->--font/--font-head, radius->--radius. Entrance anims dropped (anims.js owns reveals);
   the reveal rides a JS-measured max-height, the chevron rotates, the open row tints and hover
   rides colour only (tint set instantly). Split narrow-stacks via the global 860px rule +
   the local one below; the sticky pitch releases on narrow. */
.wsp-secfeatureaccordion .ws-in.split{ grid-template-columns:0.92fr 1.08fr; gap:clamp(40px,6cqw,72px); align-items:start; }
.wsp-secfeatureaccordion .sfa-copy{ position:sticky; top:clamp(20px,4cqw,40px); }
.wsp-secfeatureaccordion .sfa-cta{ margin-top:clamp(18px,2.4cqw,26px); }
.wsp-secfeatureaccordion .sfa-cta svg{ width:14px; height:14px; }

.wsp-secfeatureaccordion .sfa-list{ display:flex; flex-direction:column; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  background:var(--panel); background-image:var(--surface-grad,none); }
.wsp-secfeatureaccordion .sfa-item{ border-top:var(--bw, 1px) solid var(--hair); }
.wsp-secfeatureaccordion .sfa-item:first-child{ border-top:0; }
.wsp-secfeatureaccordion .sfa-item[data-open="1"]{ background:color-mix(in srgb, var(--accent) 5%, transparent); }

.wsp-secfeatureaccordion .sfa-trig{ width:100%; display:flex; align-items:center; gap:14px;
  padding:clamp(15px,1.9cqw,19px) clamp(16px,2cqw,20px); background:none; border:0; cursor:pointer;
  text-align:left; color:var(--ink); font:700 clamp(13.5px,1.6cqw,15px)/1.35 var(--font); }
.wsp-secfeatureaccordion .sfa-trig:hover{ color:var(--accent); }
.wsp-secfeatureaccordion .sfa-trig:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px; }
.wsp-secfeatureaccordion .sfa-ico{ display:flex; flex:none; color:var(--accent); }
.wsp-secfeatureaccordion .sfa-ico svg{ width:19px; height:19px; }
.wsp-secfeatureaccordion .sfa-name{ flex:1; }
.wsp-secfeatureaccordion .sfa-chev{ display:flex; flex:none; color:var(--faint);
  transition:transform .25s var(--ease-pop, ease), color .15s ease; }
.wsp-secfeatureaccordion .sfa-chev svg{ width:17px; height:17px; }
.wsp-secfeatureaccordion .sfa-item[data-open="1"] .sfa-chev{ transform:rotate(180deg); color:var(--accent); }

.wsp-secfeatureaccordion .sfa-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.wsp-secfeatureaccordion .sfa-panel-in{ padding:0 clamp(16px,2cqw,20px) clamp(16px,2cqw,20px) calc(clamp(16px,2cqw,20px) + 33px); }
.wsp-secfeatureaccordion .sfa-body{ margin:0; max-width:60ch; color:var(--dim);
  font:400 clamp(12.5px,1.5cqw,14px)/1.7 var(--font); }

@container site (max-width:860px){
  .wsp-secfeatureaccordion .ws-in.split{ grid-template-columns:1fr; gap:clamp(26px,5cqw,40px); }
  .wsp-secfeatureaccordion .sfa-copy{ position:static; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfeatureaccordion .sfa-panel,
  .wsp-secfeatureaccordion .sfa-chev,
  .wsp-secfeatureaccordion .sfa-cta svg{ transition:none; }
}
/* --- secgridstats (SB_04 port) — bento grid of big count-up figures under a centered header ---
   Origin --sgs-* vars -> tokens: bg->section --bg (via ws-sec), surface->--panel-2/--panel,
   text->--ink, dim->--dim/--faint, accent->--accent, border->--hair, radius->--radius,
   font->--font/--font-head. The lead cell rides an accent-tinted border + faint accent wash;
   trend up/down use the semantic --ok/--bad tokens, neutral rides --faint. The count-up lives in
   mount() (whenVisible-gated, dropped under reduced-motion) so the only rest state is static.
   3-up grid -> 2-up -> 1-up via container queries; hover rides border + a small lift, both
   disabled under reduced-motion. */
.wsp-secgridstats .sgs-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6cqw,16px); }
.wsp-secgridstats .sgs-cell{ display:flex; flex-direction:column; gap:8px; min-width:0;
  padding:clamp(22px,2.8cqw,28px) clamp(20px,2.4cqw,24px);
  background:var(--panel-2,var(--panel)); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius,12px); transition:border-color 180ms ease, transform 180ms ease; }
.wsp-secgridstats .sgs-cell:hover{ border-color:color-mix(in srgb, var(--ink) 16%, var(--hair));
  transform:translateY(-2px); }
.wsp-secgridstats .sgs-cell.is-lead{ border-color:color-mix(in srgb, var(--accent) 30%, var(--hair));
  background:color-mix(in srgb, var(--accent) 6%, var(--panel-2,var(--panel))); }
.wsp-secgridstats .sgs-cell.is-lead:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }

.wsp-secgridstats .sgs-num{ display:flex; align-items:baseline; gap:2px; color:var(--ink);
  font:800 clamp(34px,5cqw,52px)/1 var(--font-head,var(--font)); letter-spacing:-.03em; }
.wsp-secgridstats .sgs-val{ font-weight:800; font-variant-numeric:tabular-nums; }
.wsp-secgridstats .sgs-unit{ font-size:.5em; font-weight:700; letter-spacing:-.01em; color:var(--accent); }
.wsp-secgridstats .sgs-label{ font:600 13px/1.35 var(--font); color:var(--dim); }
.wsp-secgridstats .sgs-trend{ margin-top:2px; font:600 11px/1.45 var(--font); color:var(--faint); }
.wsp-secgridstats .sgs-trend.d-up{ color:var(--ok, #5a9e7a); }
.wsp-secgridstats .sgs-trend.d-down{ color:var(--bad, #e5533c); }
.wsp-secgridstats .sgs-trend.d-neutral{ color:var(--faint); }
.wsp-secgridstats .sgs-arrow{ font-weight:700; }

@container site (max-width:860px){
  .wsp-secgridstats .sgs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container site (max-width:560px){
  .wsp-secgridstats .sgs-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secgridstats .sgs-cell{ transition:none; }
  .wsp-secgridstats .sgs-cell:hover{ transform:none; }
}
/* --- secfeaturecompare (SB_04 port) — us-vs-them feature matrix with a spotlightable column ---
   Origin --sfc-* vars -> tokens: bg->--bg (via ws-sec), surface->--panel(+--surface-grad),
   text->--ink, dim->--dim/--faint, accent->--accent, border->--hair, radius->--radius,
   font->--font/--font-head/--mono. Marks map to semantic ok/warn/bad (check / limited-dash /
   cross). Origin baked the "us" column as highlighted with zero JS; here .is-hl rides on whatever
   [data-col] the mount() spotlights — an accent-tinted vertical band with a top cap, and the
   .sfc-colbtn is a real focusable button (roving tabindex + aria-pressed). @media -> container
   queries; the matrix scrolls sideways inside .sfc-scroll on narrow panes rather than hiding a
   column. Entrance anims dropped (anims.js owns reveals); hover rides colour only. */
.wsp-secfeaturecompare .ws-shead{ margin-bottom:clamp(30px,4.4cqw,46px); }
.wsp-secfeaturecompare .sfc-wrap{ max-width:820px; margin-inline:auto; }

.wsp-secfeaturecompare .sfc-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  background:var(--panel); background-image:var(--surface-grad,none); }
.wsp-secfeaturecompare .sfc-table{ width:100%; border-collapse:collapse; text-align:center; }

/* head row — small mono caps; feature label left, the two scored columns centred */
.wsp-secfeaturecompare .sfc-th{ padding:14px clamp(13px,1.8cqw,20px); vertical-align:middle;
  font:700 10.5px/1.3 var(--mono,var(--font)); letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); border-bottom:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 3%, transparent); }
.wsp-secfeaturecompare .sfc-th-feat{ text-align:left; width:48%; }
.wsp-secfeaturecompare .sfc-th-them,
.wsp-secfeaturecompare .sfc-th-us{ width:26%; }

/* spotlight button — looks like the header label, behaves like a button */
.wsp-secfeaturecompare .sfc-colbtn{ font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; background:none; border:0; margin:0; padding:4px 8px; border-radius:7px;
  cursor:pointer; transition:color .15s ease, background-color .15s ease; }
.wsp-secfeaturecompare .sfc-colbtn:hover{ color:var(--ink);
  background:color-mix(in srgb, var(--ink) 5%, transparent); }
.wsp-secfeaturecompare .sfc-colbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-secfeaturecompare .sfc-colbtn[aria-pressed="true"]{ color:var(--accent); }

/* body */
.wsp-secfeaturecompare .sfc-row{ border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secfeaturecompare .sfc-row:last-child{ border-bottom:0; }
.wsp-secfeaturecompare .sfc-row:hover{ background:color-mix(in srgb, var(--ink) 3%, transparent); }
.wsp-secfeaturecompare .sfc-feat{ text-align:left; padding:13px clamp(13px,1.8cqw,20px);
  font:500 13.5px/1.4 var(--font); color:var(--ink); }
.wsp-secfeaturecompare .sfc-cell{ padding:13px clamp(13px,1.8cqw,20px); }

/* spotlit column — accent-tinted vertical band; the header carries a 2px accent top cap and the
   last cell closes the band along the bottom (box-shadow, so border-collapse can't fight it) */
.wsp-secfeaturecompare .sfc-cell.is-hl,
.wsp-secfeaturecompare .sfc-th.is-hl{ background:color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow:inset 1px 0 0 color-mix(in srgb, var(--accent) 26%, transparent),
             inset -1px 0 0 color-mix(in srgb, var(--accent) 26%, transparent); }
.wsp-secfeaturecompare .sfc-th.is-hl{ color:var(--accent);
  box-shadow:inset 1px 0 0 color-mix(in srgb, var(--accent) 26%, transparent),
             inset -1px 0 0 color-mix(in srgb, var(--accent) 26%, transparent),
             inset 0 2px 0 0 var(--accent); }
.wsp-secfeaturecompare .sfc-row:last-child .sfc-cell.is-hl{
  box-shadow:inset 1px 0 0 color-mix(in srgb, var(--accent) 26%, transparent),
             inset -1px 0 0 color-mix(in srgb, var(--accent) 26%, transparent),
             inset 0 -2px 0 0 color-mix(in srgb, var(--accent) 26%, transparent); }

/* marks — yes(check)=ok · partial(dash)=warn · no(cross)=bad, each on a soft tinted chip */
.wsp-secfeaturecompare .sfc-mark{ display:inline-grid; place-items:center; width:26px; height:26px;
  border-radius:50%; vertical-align:middle; }
.wsp-secfeaturecompare .sfc-mark svg{ width:15px; height:15px; }
.wsp-secfeaturecompare .sfc-mark.yes{ color:var(--ok,#4caf76);
  background:color-mix(in srgb, var(--ok,#4caf76) 16%, transparent); }
.wsp-secfeaturecompare .sfc-mark.partial{ color:var(--warn,#d99a3c);
  background:color-mix(in srgb, var(--warn,#d99a3c) 14%, transparent); }
.wsp-secfeaturecompare .sfc-mark.no{ color:var(--bad,#c76b5a);
  background:color-mix(in srgb, var(--bad,#c76b5a) 13%, transparent); }

/* CTA + visually-hidden aria-live region */
.wsp-secfeaturecompare .sfc-ctarow{ margin-top:clamp(24px,3.2cqw,34px); text-align:center; }
.wsp-secfeaturecompare .sfc-ctarow svg{ width:1em; height:1em; }
.wsp-secfeaturecompare .sfc-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@container site (max-width:860px){
  .wsp-secfeaturecompare .sfc-wrap{ max-width:none; }
}
@container site (max-width:560px){
  .wsp-secfeaturecompare .sfc-th{ padding:12px 12px; font-size:10px; letter-spacing:.1em; }
  .wsp-secfeaturecompare .sfc-feat,
  .wsp-secfeaturecompare .sfc-cell{ padding:11px 12px; }
  .wsp-secfeaturecompare .sfc-feat{ font-size:12.5px; }
  .wsp-secfeaturecompare .sfc-mark{ width:23px; height:23px; }
  .wsp-secfeaturecompare .sfc-mark svg{ width:14px; height:14px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfeaturecompare .sfc-colbtn{ transition:none; }
}
/* --- secgradientcta (SB_04 port) — a bold accent-gradient CTA band. The left column carries an
   eyebrow, an on-accent headline, a support line and a 2x2 feature-bullet grid; a floating neutral
   card on the right holds a LIVE work-email capture (validates inline through the shared
   ws-nlform / ws-nlrow / ws-nlmsg atoms, shows success/error, disables on success, never navigates),
   an avatar social-proof pile and a privacy note. Origin --sgc-* vars -> tokens: bg stays the theme's,
   surface->--panel, text + on-accent copy->--accent-text, dim->--dim/--faint, accent->--accent with
   --accent-grad painting the band, border->--hair, radius->--radius, font->--font. The origin's thin
   left accent stripe becomes the whole gradient band; the zero-JS origin form is now live-validating.
   Columns stack via container queries (not @media); nothing transitions at rest. */
.wsp-secgradientcta .sgc-band{ display:grid; grid-template-columns:1fr minmax(300px, 400px);
  gap:clamp(34px, 4.6cqw, 60px); align-items:center; padding:clamp(34px, 5.2cqw, 68px);
  border-radius:calc(var(--radius, 12px) * 1.6);
  background:var(--accent-grad, linear-gradient(135deg, var(--accent), var(--accent2, color-mix(in srgb, var(--accent) 60%, var(--ink)))));
  background-color:var(--accent); }
/* left column — on-accent copy */
.wsp-secgradientcta .sgc-copy{ min-width:0; }
.wsp-secgradientcta .sgc-kick{ color:var(--accent-text, #04121a); opacity:.72; margin-bottom:14px; }
.wsp-secgradientcta .sgc-title{ color:var(--accent-text, #04121a); font-weight:800; letter-spacing:-.02em; }
.wsp-secgradientcta .sgc-sub{ margin:14px 0 0; max-width:46ch;
  font:400 clamp(14px, 1.7cqw, 15.5px)/1.6 var(--font);
  color:color-mix(in srgb, var(--accent-text, #04121a) 82%, transparent); }
.wsp-secgradientcta .sgc-bullets{ list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:13px 22px; }
.wsp-secgradientcta .sgc-bullet{ display:flex; align-items:center; gap:10px; min-width:0;
  font:600 clamp(13px, 1.5cqw, 14px) var(--font); color:var(--accent-text, #04121a); }
.wsp-secgradientcta .sgc-bico{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:7px; color:var(--accent-text, #04121a);
  background:color-mix(in srgb, var(--accent-text, #04121a) 15%, transparent); }
.wsp-secgradientcta .sgc-bico svg{ width:14px; height:14px; }
/* right column — floating neutral card */
.wsp-secgradientcta .sgc-card{ display:flex; flex-direction:column; gap:16px;
  padding:clamp(22px, 2.6cqw, 30px); border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * 1.15);
  background:var(--panel); background-image:var(--surface-grad, none);
  box-shadow:0 22px 55px -18px rgba(0,0,0,.55), 0 6px 16px -8px rgba(0,0,0,.35); }
.wsp-secgradientcta .sgc-card-title{ font:700 clamp(15px, 1.8cqw, 17px) var(--font); color:var(--ink); }
.wsp-secgradientcta .sgc-form{ max-width:none; margin:0; gap:8px; text-align:left; }
.wsp-secgradientcta .sgc-label{ font:600 11.5px var(--font); letter-spacing:.02em; color:var(--dim); }
.wsp-secgradientcta .ws-nlrow{ background:var(--bg); }
.wsp-secgradientcta .ws-nlrow:focus-within{ border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
/* live invalid / valid feedback surfaced on the field itself */
.wsp-secgradientcta .sgc-form:has(.ws-nlmsg.bad) .ws-nlrow{ border-color:color-mix(in srgb, #f87171 60%, var(--hair)); }
.wsp-secgradientcta .sgc-form:has(.ws-nlmsg.ok) .ws-nlrow{ border-color:color-mix(in srgb, var(--accent) 60%, var(--hair)); }
.wsp-secgradientcta .ws-nlrow .ws-btn:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent-text, #fff) 72%, transparent); outline-offset:-3px; }
.wsp-secgradientcta .ws-btn:disabled{ opacity:.72; cursor:default; transform:none; }
.wsp-secgradientcta .ws-nlrow input:disabled{ color:var(--dim); -webkit-text-fill-color:var(--dim); }
.wsp-secgradientcta .ws-nlmsg{ margin-top:0; }
/* social proof + privacy */
.wsp-secgradientcta .sgc-social{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.wsp-secgradientcta .sgc-avatars{ display:inline-flex; }
.wsp-secgradientcta .sgc-av{ width:28px; height:28px; border-radius:50%; margin-right:-8px;
  display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--panel);
  background:var(--accent); font:800 9px var(--font); letter-spacing:.02em; color:var(--accent-text, #fff); }
.wsp-secgradientcta .sgc-av:nth-child(2){ background:color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.wsp-secgradientcta .sgc-av:nth-child(3){ background:var(--accent2, color-mix(in srgb, var(--accent) 56%, var(--ink))); }
.wsp-secgradientcta .sgc-av:nth-child(4){ background:color-mix(in srgb, var(--accent) 50%, var(--ink)); }
.wsp-secgradientcta .sgc-av:nth-child(5){ background:color-mix(in srgb, var(--accent) 34%, var(--ink)); }
.wsp-secgradientcta .sgc-social-label{ font:400 12.5px var(--font); color:var(--dim); }
.wsp-secgradientcta .sgc-privacy{ margin:2px 0 0; font:400 11.5px/1.55 var(--font); color:var(--faint); }
/* stack the two columns on narrow rails */
@container site (max-width:860px){
  .wsp-secgradientcta .sgc-band{ grid-template-columns:1fr; gap:clamp(28px, 5cqw, 38px); }
  .wsp-secgradientcta .sgc-sub{ max-width:none; }
}
@container site (max-width:560px){
  .wsp-secgradientcta .sgc-band{ padding:clamp(24px, 7cqw, 32px); }
  .wsp-secgradientcta .sgc-bullets{ grid-template-columns:1fr; gap:11px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secgradientcta .ws-btn{ transition:none; }
}
/* --- sechowitworks (SB_04 port) — numbered step flow with a connecting thread ---
   Origin --how-* vars -> tokens: bg->--bg (node fill + ring mask), surface->--panel,
   text->--ink, dim->--dim, accent->--accent, border->--hair, font->--font/--font-head.
   Emoji step-icons became S_ICONS strokes; the static <div> stack became a semantic
   <ol> (visible numerals aria-hidden, order carried by the list). Connector is a
   per-step ::after (robust for any 3-6 count) that runs through the node centres and
   flips vertical on narrow. Entrance anim dropped (site reveal owns it); only a hover
   colour shift at rest-nothing. Container queries, not viewport media. */
.wsp-sechowitworks{ --hiw-node:clamp(46px,5cqw,56px); --hiw-gap:clamp(16px,2.4cqw,34px); }
.wsp-sechowitworks .hiw-steps{ list-style:none; margin:clamp(6px,1.2cqw,14px) 0 0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--hiw-gap); }
.wsp-sechowitworks .hiw-step{ position:relative; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:clamp(12px,1.5cqw,16px); padding:0 clamp(6px,1cqw,14px); }
/* thread through the node centres — spans one column + one gap to the next node */
.wsp-sechowitworks .hiw-step:not(:last-child)::after{ content:''; position:absolute; z-index:0;
  pointer-events:none; top:calc(var(--hiw-node) / 2); left:50%; width:calc(100% + var(--hiw-gap));
  height:1px; transform:translateY(-0.5px);
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 46%, var(--hair)), color-mix(in srgb, var(--accent) 20%, var(--hair))); }

.wsp-sechowitworks .hiw-node{ position:relative; z-index:1; flex:none; display:grid; place-items:center;
  width:var(--hiw-node); height:var(--hiw-node); border-radius:50%;
  background:var(--bg); border:1px solid color-mix(in srgb, var(--accent) 32%, var(--hair));
  box-shadow:0 0 0 6px var(--bg); transition:border-color .2s ease; }
.wsp-sechowitworks .hiw-num{ font:800 clamp(15px,1.8cqw,18px)/1 var(--font-head,var(--font));
  color:var(--accent); letter-spacing:-0.01em; }
.wsp-sechowitworks .hiw-step:hover .hiw-node{ border-color:var(--accent); }

.wsp-sechowitworks .hiw-panel{ display:flex; flex-direction:column; align-items:center;
  gap:clamp(5px,0.8cqw,9px); min-width:0; }
.wsp-sechowitworks .hiw-ico{ display:grid; place-items:center; color:var(--accent); transition:color .2s ease; }
.wsp-sechowitworks .hiw-ico svg{ width:clamp(20px,2.2cqw,24px); height:clamp(20px,2.2cqw,24px); }
.wsp-sechowitworks .hiw-title{ margin:0; font:600 clamp(14px,1.6cqw,15px)/1.35 var(--font-head,var(--font)); color:var(--ink); }
.wsp-sechowitworks .hiw-desc{ margin:0; max-width:34ch; font:400 clamp(12.5px,1.4cqw,13.5px)/1.65 var(--font); color:var(--dim); }

@container site (max-width:860px){
  .wsp-sechowitworks .hiw-steps{ grid-auto-flow:row; grid-auto-columns:auto; gap:0; }
  .wsp-sechowitworks .hiw-step{ flex-direction:row; align-items:flex-start; text-align:left;
    gap:clamp(14px,3cqw,18px); padding:0 0 clamp(24px,4cqw,32px); }
  .wsp-sechowitworks .hiw-step:last-child{ padding-bottom:0; }
  .wsp-sechowitworks .hiw-panel{ align-items:flex-start; text-align:left; flex:1; padding-top:2px; }
  .wsp-sechowitworks .hiw-desc{ max-width:54ch; }
  /* thread runs vertically down the rail */
  .wsp-sechowitworks .hiw-step:not(:last-child)::after{ top:var(--hiw-node); left:calc(var(--hiw-node) / 2);
    width:1px; height:100%; transform:translateX(-0.5px);
    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, var(--hair)), color-mix(in srgb, var(--accent) 18%, var(--hair))); }
}
@container site (max-width:560px){
  .wsp-sechowitworks{ --hiw-node:44px; }
  .wsp-sechowitworks .hiw-step{ padding-bottom:clamp(20px,5cqw,26px); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-sechowitworks .hiw-node,
  .wsp-sechowitworks .hiw-ico{ transition:none; }
}
/* --- secimagecta (SB_04 port) — image-beside-CTA conversion band --- */
.wsp-secimagecta .sic-in{ align-items:center; }
.wsp-secimagecta .sic-copy{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; max-width:34rem; }
.wsp-secimagecta .sic-copy .ws-h2{ text-wrap:balance; }
.wsp-secimagecta .sic-copy .ws-sub{ margin-top:14px; }
.wsp-secimagecta .sic-actions.ws-ctarow{ margin-top:clamp(22px,3cqw,30px); }
.wsp-secimagecta.flip .sic-vis{ order:2; }

/* image panel — a real 4:3 box so it never collapses; token gradient placeholder,
   or a cover image when props.image is set. Nothing animates at rest. */
.wsp-secimagecta .sic-vis{ min-width:0; }
.wsp-secimagecta .sic-panel{ position:relative; overflow:hidden; width:100%; aspect-ratio:4 / 3;
  border-radius:calc(var(--radius,12px) + 4px); border:var(--bw, 1px) solid var(--hair);
  background:
    radial-gradient(130% 110% at 16% 14%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%),
    linear-gradient(135deg, var(--panel-2, var(--panel)) 0%, var(--panel) 58%, color-mix(in srgb, var(--accent) 14%, var(--panel)) 100%);
  box-shadow:0 16px 40px rgba(0,0,0,0.22);
  transition:transform .5s cubic-bezier(.2,.8,.25,1); }
.wsp-secimagecta .sic-panel.has-img{ background:var(--panel) center/cover no-repeat; }
.wsp-secimagecta .sic-glow{ position:absolute; width:46%; aspect-ratio:1; border-radius:50%;
  top:-13%; right:-9%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 68%); }
.wsp-secimagecta .sic-chip{ position:absolute; left:9%; bottom:13%; width:46%; height:32%;
  border-radius:calc(var(--radius,12px) * .8);
  background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 26%, var(--panel-2, var(--panel))) 0%, color-mix(in srgb, var(--ink) 5%, transparent) 100%);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:0 8px 22px rgba(0,0,0,0.22); }
.wsp-secimagecta .sic-vis:hover .sic-panel{ transform:translateY(-4px); }

@container site (max-width:860px){
  .wsp-secimagecta .ws-in.split{ grid-template-columns:1fr; gap:clamp(28px,5cqw,40px); }
  .wsp-secimagecta .sic-copy{ max-width:none; }
  .wsp-secimagecta.flip .sic-vis{ order:0; }
}
@container site (max-width:560px){
  .wsp-secimagecta .sic-panel{ aspect-ratio:16 / 10; }
  .wsp-secimagecta .sic-actions.ws-ctarow{ flex-direction:column; align-items:stretch; }
  .wsp-secimagecta .sic-actions.ws-ctarow .ws-btn{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secimagecta .sic-panel,
  .wsp-secimagecta .sic-vis:hover .sic-panel{ transition:none; transform:none; }
}

/* --- secimagegallery (SB_04 port) — masonry work gallery with hover caption + keyboard lightbox ---
   Origin --sig-* vars -> tokens: bg->section --bg, surface->--panel/--panel-2, text->--ink, dim->--dim,
   accent->--accent (+ --accent2), border->--hair, radius->--radius, font->--font/--font-head. Placeholder
   tiles are token gradients (data-tone 1..6, exposed as an inheritable --sig-grad) sitting in real grid
   rows so the masonry never collapses; a props.items {img} only paints when it's a data:/same-origin URL.
   Caption scrim + zoom chip reveal on hover/focus (opacity/transform only; scrim/nav backgrounds are set
   instantly). Media-overlay text is fixed light on a dark scrim (the one semantic-colour exception).
   Viewport media queries -> @container site; entrance anims dropped (anims.js owns reveals); the lightbox
   viewer is built in mount(). reduced-motion honoured. */
.wsp-secimagegallery .sig-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:clamp(148px,21cqw,206px); gap:clamp(10px,1.3cqw,14px); }
.wsp-secimagegallery .sig-tile{ position:relative; display:block; width:100%; height:100%; margin:0; padding:0;
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; cursor:pointer;
  background:var(--panel); color:#fff; isolation:isolate; }
.wsp-secimagegallery .sig-tile[data-span="tall"]{ grid-row:span 2; }
.wsp-secimagegallery .sig-tile[data-span="wide"]{ grid-column:span 2; }
.wsp-secimagegallery .sig-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* token-driven placeholder tones — inherited by .sig-img / set on the lightbox stage */
.wsp-secimagegallery [data-tone="1"]{ --sig-grad:linear-gradient(145deg, color-mix(in srgb, var(--accent) 30%, var(--panel-2,var(--panel))) 0%, var(--panel) 100%); }
.wsp-secimagegallery [data-tone="2"]{ --sig-grad:linear-gradient(145deg, color-mix(in srgb, var(--accent2,var(--accent)) 26%, var(--panel-2,var(--panel))) 0%, var(--panel) 100%); }
.wsp-secimagegallery [data-tone="3"]{ --sig-grad:radial-gradient(120% 130% at 78% 15%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%), var(--panel); }
.wsp-secimagegallery [data-tone="4"]{ --sig-grad:linear-gradient(120deg, color-mix(in srgb, var(--accent) 24%, var(--panel-2,var(--panel))), color-mix(in srgb, var(--accent2,var(--accent)) 22%, var(--panel))); }
.wsp-secimagegallery [data-tone="5"]{ --sig-grad:radial-gradient(130% 120% at 20% 85%, color-mix(in srgb, var(--accent2,var(--accent)) 34%, transparent), transparent 62%), var(--panel-2,var(--panel)); }
.wsp-secimagegallery [data-tone="6"]{ --sig-grad:linear-gradient(200deg, color-mix(in srgb, var(--accent) 20%, var(--panel-2,var(--panel))) 0%, var(--panel) 70%); }

.wsp-secimagegallery .sig-img{ position:absolute; inset:0; background-color:var(--panel);
  background-image:var(--sig-grad); background-size:cover; background-position:center;
  transform:scale(1); transition:transform .5s cubic-bezier(.2,.8,.25,1); }
.wsp-secimagegallery .sig-tile:hover .sig-img,
.wsp-secimagegallery .sig-tile:focus-visible .sig-img{ transform:scale(1.05); }

.wsp-secimagegallery .sig-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.14) 44%, transparent 68%);
  opacity:0; transition:opacity .25s ease; }
.wsp-secimagegallery .sig-cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:clamp(12px,1.5cqw,16px);
  opacity:0; transform:translateY(7px); transition:opacity .25s ease, transform .25s ease; }
.wsp-secimagegallery .sig-tile:hover .sig-scrim,
.wsp-secimagegallery .sig-tile:focus-visible .sig-scrim{ opacity:1; }
.wsp-secimagegallery .sig-tile:hover .sig-cap,
.wsp-secimagegallery .sig-tile:focus-visible .sig-cap{ opacity:1; transform:none; }
.wsp-secimagegallery .sig-cap-t{ font:600 clamp(13px,1.5cqw,14px)/1.3 var(--font-head,var(--font)); color:#fff; text-wrap:balance; }
.wsp-secimagegallery .sig-cap-c{ font:700 10px/1 var(--font); letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px; color:#fff;
  background:color-mix(in srgb, var(--accent) 42%, rgba(0,0,0,.34));
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.wsp-secimagegallery .sig-zoom{ position:absolute; top:10px; right:10px; z-index:1; display:grid; place-items:center;
  width:30px; height:30px; border-radius:8px; color:#fff; pointer-events:none;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.22);
  opacity:0; transform:scale(.9); transition:opacity .2s ease, transform .2s ease; }
.wsp-secimagegallery .sig-zoom svg{ width:15px; height:15px; }
.wsp-secimagegallery .sig-tile:hover .sig-zoom,
.wsp-secimagegallery .sig-tile:focus-visible .sig-zoom{ opacity:1; transform:none; }

/* lightbox viewer (built in mount) */
.wsp-secimagegallery .sig-lb[hidden]{ display:none; }
.wsp-secimagegallery .sig-lb{ position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  padding:clamp(16px,4cqw,48px); }
.wsp-secimagegallery .sig-lb-scrim{ position:absolute; inset:0; background:rgba(4,6,12,.82); cursor:zoom-out; }
.wsp-secimagegallery .sig-lb-panel{ position:relative; z-index:1; width:min(880px,100%); display:flex;
  flex-direction:column; gap:14px; }
.wsp-secimagegallery .sig-lb-stage{ position:relative; width:100%; aspect-ratio:16 / 10; overflow:hidden;
  border-radius:var(--radius,12px); border:var(--bw, 1px) solid var(--hair); background:var(--panel); }
.wsp-secimagegallery .sig-lb-img{ position:absolute; inset:0; background-color:var(--panel);
  background-image:var(--sig-grad); background-size:cover; background-position:center; }
.wsp-secimagegallery .sig-lb-btn{ position:absolute; z-index:2; display:grid; place-items:center; width:40px; height:40px;
  border-radius:10px; cursor:pointer; color:#fff; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.22);
  transition:transform .15s ease; }
.wsp-secimagegallery .sig-lb-btn:hover{ transform:scale(1.06); background:rgba(0,0,0,.64); }
.wsp-secimagegallery .sig-lb-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.wsp-secimagegallery .sig-lb-btn svg{ width:20px; height:20px; }
.wsp-secimagegallery .sig-lb-x{ top:10px; right:10px; }
.wsp-secimagegallery .sig-lb-prev{ left:10px; top:50%; transform:translateY(-50%); }
.wsp-secimagegallery .sig-lb-next{ right:10px; top:50%; transform:translateY(-50%); }
.wsp-secimagegallery .sig-lb-prev:hover{ transform:translateY(-50%) scale(1.06); }
.wsp-secimagegallery .sig-lb-next:hover{ transform:translateY(-50%) scale(1.06); }
.wsp-secimagegallery .sig-lb-cap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wsp-secimagegallery .sig-lb-t{ font:600 15px/1.3 var(--font-head,var(--font)); color:var(--ink); }
.wsp-secimagegallery .sig-lb-c{ font:700 10px/1 var(--font); letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 32%, var(--hair)); }
.wsp-secimagegallery .sig-lb-count{ margin-left:auto; font:500 12px/1 var(--mono,var(--font)); color:var(--dim); }

@media (hover: none){
  .wsp-secimagegallery .sig-scrim,
  .wsp-secimagegallery .sig-cap{ opacity:1; transform:none; }
}
@container site (max-width:860px){
  .wsp-secimagegallery .sig-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wsp-secimagegallery .sig-tile[data-span="wide"]{ grid-column:span 1; }
}
@container site (max-width:560px){
  .wsp-secimagegallery .sig-grid{ grid-template-columns:1fr; }
  .wsp-secimagegallery .sig-tile[data-span="tall"]{ grid-row:span 1; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secimagegallery .sig-img,
  .wsp-secimagegallery .sig-scrim,
  .wsp-secimagegallery .sig-cap,
  .wsp-secimagegallery .sig-zoom,
  .wsp-secimagegallery .sig-lb-btn{ transition:none; }
  .wsp-secimagegallery .sig-tile:hover .sig-img,
  .wsp-secimagegallery .sig-tile:focus-visible .sig-img{ transform:none; }
}
/* --- seclogobar (SB_04 port) — full-bleed trust strip: inline lead-in + one muted wordmark row --- */
.wsp-seclogobar{ padding:44px 0; }
.wsp-seclogobar .slb-band{ background:var(--panel); border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair);
  padding:20px 0; }
.wsp-seclogobar .slb-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px clamp(24px,3cqw,44px); }
.wsp-seclogobar .slb-lead{ flex:none; font:600 10px/1 var(--mono, var(--font)); letter-spacing:2.5px;
  text-transform:uppercase; color:var(--faint); }
.wsp-seclogobar .slb-marks{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px clamp(20px,2.4cqw,40px); }
.wsp-seclogobar .slb-mark{ font:700 15px/1 var(--font-head, var(--font)); letter-spacing:.3px; color:var(--faint);
  white-space:nowrap; cursor:default; transition:color .2s ease, transform .2s ease; }
.wsp-seclogobar .slb-mark:hover{ color:var(--ink); transform:translateY(-1px); }
@container site (max-width:860px){
  .wsp-seclogobar .slb-bar{ gap:14px 28px; }
  .wsp-seclogobar .slb-marks{ gap:10px 24px; }
  .wsp-seclogobar .slb-mark{ font-size:14px; }
}
@container site (max-width:560px){
  .wsp-seclogobar{ padding:32px 0; }
  .wsp-seclogobar .slb-band{ padding:16px 0; }
  .wsp-seclogobar .slb-bar{ flex-direction:column; gap:12px; }
  .wsp-seclogobar .slb-marks{ gap:10px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seclogobar .slb-mark{ transition:none; }
  .wsp-seclogobar .slb-mark:hover{ transform:none; }
}
/* --- secintegrationsshowcase (SB_04 port) --- */
.wsp-secintegrationsshowcase .sis-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6cqw,16px); margin-top:4px; }
.wsp-secintegrationsshowcase .sis-tile{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:clamp(18px,2.2cqw,24px) 14px; background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius,12px); transition:transform 200ms var(--ease-pop, ease-out), border-color 200ms ease; }
.wsp-secintegrationsshowcase .sis-tile:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); }
.wsp-secintegrationsshowcase .sis-mono{ display:grid; place-items:center; width:46px; height:46px; flex:0 0 auto;
  border-radius:calc(var(--radius,12px) * .82); background:var(--accent-fill, color-mix(in srgb, var(--accent) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent);
  font:700 20px/1 var(--font-head, var(--font)); letter-spacing:-.01em; }
.wsp-secintegrationsshowcase .sis-tile:hover .sis-mono{ background:color-mix(in srgb, var(--accent) 20%, transparent); }
.wsp-secintegrationsshowcase .sis-name{ font:700 13.5px var(--font-head, var(--font)); line-height:1.2; color:var(--ink); }
.wsp-secintegrationsshowcase .sis-cat{ font:500 10px var(--mono, var(--font)); letter-spacing:.6px; text-transform:uppercase; color:var(--dim); }
.wsp-secintegrationsshowcase .sis-foot{ margin-top:clamp(26px,3.4cqw,40px); }
@container site (max-width:860px){ .wsp-secintegrationsshowcase .sis-grid{ grid-template-columns:repeat(3,1fr); } }
@container site (max-width:560px){ .wsp-secintegrationsshowcase .sis-grid{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){
  .wsp-secintegrationsshowcase .sis-tile{ transition:none; }
  .wsp-secintegrationsshowcase .sis-tile:hover{ transform:none; }
}
/* --- secimagesplit (SB_04 port) — an image panel beside copy, accent-ticked points + CTA; flip swaps sides.
   Reuses ws-in.split (stacks on the global 860px rule) and ws-hpanel.ph for the themed placeholder.
   Origin --sis2-* vars map to tokens: bg->--bg, surface->--panel, text->--ink, dim->--dim,
   accent->--accent, border->--hair, radius->--radius, font->--font. Nothing at rest; hover rides
   transform/color only; honours prefers-reduced-motion. */
.wsp-secimagesplit .ws-in.split{ align-items:center; gap:clamp(32px,5cqw,64px); }
.wsp-secimagesplit .sis-media{ min-width:0; }
.wsp-secimagesplit .sis-frame{ width:100%; min-height:0; aspect-ratio:4 / 3; border-radius:var(--radius,14px);
  transition:transform .5s cubic-bezier(.2,.8,.25,1); }
.wsp-secimagesplit .sis-media:hover .sis-frame{ transform:translateY(-4px); }
.wsp-secimagesplit .sis-copy{ min-width:0; }
.wsp-secimagesplit .sis-copy .ws-kick{ margin-bottom:14px; }
.wsp-secimagesplit .sis-copy .ws-sub{ margin-top:14px; max-width:48ch; }
.wsp-secimagesplit .sis-checks{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.wsp-secimagesplit .sis-check{ display:flex; align-items:flex-start; gap:11px;
  font:400 clamp(13px,1.5cqw,14.5px)/1.55 var(--font); color:var(--dim); }
.wsp-secimagesplit .sis-tick{ display:inline-flex; flex:none; align-items:center; justify-content:center;
  margin-top:1px; width:18px; height:18px; border-radius:99px; color:var(--accent); background:var(--accent-fill); }
.wsp-secimagesplit .sis-tick svg{ width:12px; height:12px; }
.wsp-secimagesplit .ws-ctarow{ margin-top:26px; }
/* flip — image to the right */
.wsp-secimagesplit.flip .sis-media{ order:2; }
.wsp-secimagesplit.flip .sis-copy{ order:1; }
@container site (max-width:860px){
  .wsp-secimagesplit .ws-in.split{ gap:36px; }
  .wsp-secimagesplit.flip .sis-media, .wsp-secimagesplit.flip .sis-copy{ order:0; }
  .wsp-secimagesplit .sis-frame{ aspect-ratio:16 / 10; }
  .wsp-secimagesplit .sis-copy .ws-sub{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secimagesplit .sis-frame, .wsp-secimagesplit .sis-media:hover .sis-frame{ transform:none; transition:none; }
}

/* --- seclogomarquee (SB_04 port) — two-row partner-logo marquee, pure-CSS seamless loop --- */
.ws-sec.wsp-seclogomarquee{ padding:clamp(40px,6cqw,80px) 0; overflow:hidden; }
.wsp-seclogomarquee .lm-head{ margin-bottom:clamp(22px,3cqw,40px); }
.wsp-seclogomarquee .lm-head .ws-kick{ color:var(--accent); }

.wsp-seclogomarquee .lm-belt{ display:flex; flex-direction:column; gap:12px; width:100%; }

/* the rail clips the over-wide track (never spills to page scroll) + fades both edges to bg */
.wsp-seclogomarquee .lm-rail{ width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%); }

.wsp-seclogomarquee .lm-track{ display:flex; gap:12px; width:max-content; will-change:transform;
  animation:wsp-lm-marq 34s linear infinite; }
.wsp-seclogomarquee .lm-rail.rev .lm-track{ animation-duration:44s; animation-direction:reverse; }
.wsp-seclogomarquee .lm-belt:hover .lm-track{ animation-play-state:paused; }

.wsp-seclogomarquee .lm-chip{ flex-shrink:0; white-space:nowrap;
  background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:10px;
  padding:10px 22px; line-height:1; font-family:var(--font-head, var(--font));
  font-size:13px; font-weight:700; letter-spacing:-0.01em; color:var(--dim); }
.wsp-seclogomarquee .lm-chip:hover{ color:var(--ink);
  border-color:color-mix(in srgb, var(--ink) 18%, transparent); }

@keyframes wsp-lm-marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@container site (max-width:560px){
  .ws-sec.wsp-seclogomarquee{ padding:clamp(26px,7cqw,48px) 0; }
  .wsp-seclogomarquee .lm-belt{ gap:10px; }
  .wsp-seclogomarquee .lm-chip{ padding:8px 16px; font-size:12px; }
}

/* motion exception: a marquee may loop at rest, but must FREEZE to a static, readable row here */
@media (prefers-reduced-motion:reduce){
  .wsp-seclogomarquee .lm-track{ animation:none; transform:none; }
  .wsp-seclogomarquee .lm-rail{ -webkit-mask-image:none; mask-image:none; }
}
/* --- secjoblistings (SB_04 port) — careers list: centered head, department filter tabs, ruled role rows --- */
.wsp-secjoblistings .ws-shead{ margin-bottom:clamp(28px,3.4cqw,36px); }
.wsp-secjoblistings .jl-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2.6cqw,26px); }
.wsp-secjoblistings .jl-filter{ appearance:none; -webkit-appearance:none; }
.wsp-secjoblistings .jl-filter:not(.on):hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 30%, var(--hair)); }
.wsp-secjoblistings .jl-filter.on{ color:var(--accent); background:var(--accent-fill); border-color:color-mix(in srgb, var(--accent) 26%, var(--hair)); }

.wsp-secjoblistings .jl-list{ display:flex; flex-direction:column; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); overflow:hidden; }
.wsp-secjoblistings .jl-row{ display:flex; align-items:center; gap:16px; padding:18px 20px; border-top:var(--bw, 1px) solid var(--hair); transition:background 150ms ease; }
.wsp-secjoblistings .jl-row:first-child{ border-top:none; }
.wsp-secjoblistings .jl-row:hover{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
.wsp-secjoblistings .jl-hide{ display:none; }
.wsp-secjoblistings .jl-info{ flex:1 1 auto; min-width:0; }
.wsp-secjoblistings .jl-role{ display:block; font:600 15px var(--font); color:var(--ink); line-height:1.3; margin-bottom:8px; }
.wsp-secjoblistings .jl-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.wsp-secjoblistings .jl-dept{ flex:none; font:700 9.5px var(--mono); letter-spacing:.8px; text-transform:uppercase; color:var(--accent); background:var(--accent-fill); padding:3px 8px; border-radius:5px; white-space:nowrap; }
.wsp-secjoblistings .jl-loc, .wsp-secjoblistings .jl-type{ font:400 12.5px var(--font); color:var(--dim); white-space:nowrap; }
.wsp-secjoblistings .jl-apply{ flex:none; display:inline-flex; align-items:center; gap:6px; margin-left:auto; font:600 13px var(--font); color:var(--accent); text-decoration:none; cursor:pointer; white-space:nowrap; transition:opacity 140ms linear; }
.wsp-secjoblistings .jl-apply svg{ width:14px; height:14px; transition:transform 140ms ease-out; }
.wsp-secjoblistings .jl-apply:hover{ opacity:.72; }
.wsp-secjoblistings .jl-apply:hover svg, .wsp-secjoblistings .jl-row:hover .jl-apply svg{ transform:translateX(3px); }

@container site (max-width:860px){
  .wsp-secjoblistings .jl-row{ padding:16px 16px; }
}
@container site (max-width:560px){
  .wsp-secjoblistings .jl-row{ flex-wrap:wrap; gap:10px 12px; padding:16px 14px; }
  .wsp-secjoblistings .jl-apply{ margin-left:0; }
  .wsp-secjoblistings .jl-meta{ gap:8px; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-secjoblistings .jl-row,
  .wsp-secjoblistings .jl-apply,
  .wsp-secjoblistings .jl-apply svg{ transition:none; }
}

/* wsp-secmediamentions — SB_04 drafts/section-media-mentions → an "as seen in" press wall.
   Origin --smm-* vars → tokens: bg→section --bg (inherited), surface→--panel, text→--ink,
   dim→--dim, accent→--accent, border→--hair, radius→--radius, font→--font/--font-head. Each
   card carries a token wordmark chip (no remote logos), an optional editorial pull-quote, and a
   real "read article" link only when the item supplies an href. Hover lifts the card
   (transform/opacity only — the border colour is swapped instantly). Origin viewport media
   queries → @container site; the baked-in entrance is dropped (anims.js owns reveals);
   reduced-motion drops the lift. */
.wsp-secmediamentions .smm-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4cqw,16px); }
.wsp-secmediamentions .smm-card{ display:flex; flex-direction:column; align-items:flex-start;
  gap:14px; padding:clamp(18px,2cqw,24px); background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius,12px); transform:translateY(0);
  transition:transform .2s ease, border-color .2s ease; }
.wsp-secmediamentions .smm-card:hover{ transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--ink) 15%, var(--hair)); }
.wsp-secmediamentions .smm-pub{ align-self:flex-start; font:800 12px/1 var(--font-head,var(--font));
  letter-spacing:.01em; color:var(--ink); padding:7px 11px; border-radius:7px;
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, var(--hair)); }
.wsp-secmediamentions .smm-quote{ margin:0; font:italic 400 15px/1.6 var(--font-head,var(--font));
  color:var(--dim); text-wrap:pretty; }
.wsp-secmediamentions .smm-link{ margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font:700 12px/1 var(--font); color:var(--accent); text-decoration:none; transition:opacity .2s ease; }
.wsp-secmediamentions .smm-link:hover{ opacity:.72; }
.wsp-secmediamentions .smm-link svg{ width:13px; height:13px; }
.wsp-secmediamentions .smm-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
@container site (max-width:860px){
  .wsp-secmediamentions .smm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container site (max-width:560px){
  .wsp-secmediamentions .smm-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secmediamentions .smm-card,
  .wsp-secmediamentions .smm-link{ transition:none; }
  .wsp-secmediamentions .smm-card:hover{ transform:none; }
}
/* --- seclogocloud (SB_04 port · section-logo-cloud) --- */
.wsp-seclogocloud .ws-shead{ margin-bottom:clamp(30px,5cqw,46px); }
.wsp-seclogocloud .ws-shead .ws-h2{ margin-top:12px; }
.wsp-seclogocloud .ws-shead .ws-sub{ margin:12px auto 0; }
/* Contiguous bordered grid: the container carries the full outer hairline + radius and
   clips (overflow) the cells; each cell draws its own right/bottom hairline so internal
   gridlines tile seamlessly and partial last rows never leave a gap. Nothing at rest. */
.wsp-seclogocloud .slc-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  margin:0 auto; max-width:1040px; background:var(--panel);
  border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; }
.wsp-seclogocloud .slc-cell{ display:flex; align-items:center; justify-content:center;
  min-height:clamp(64px,7cqw,88px); padding:22px 16px;
  border-right:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-seclogocloud .slc-mark{ font:700 clamp(14px,1.7cqw,16px)/1 var(--font-head,var(--font));
  letter-spacing:-.01em; text-align:center; color:var(--dim); transition:color 200ms ease; }
.wsp-seclogocloud .slc-cell:hover .slc-mark{ color:var(--ink); }
@container site (max-width:860px){
  .wsp-seclogocloud .slc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container site (max-width:560px){
  .wsp-seclogocloud .slc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wsp-seclogocloud .slc-cell{ min-height:60px; padding:18px 12px; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-seclogocloud .slc-mark{ transition:none; }
}
/* --- secmetricrow (SB_04 port) — one horizontal band of big figures split by hairline rules ---
   Origin --smr-* vars -> tokens: bg->section --bg (via ws-sec), surface->--panel-2/--panel,
   text->--ink, dim->--dim, border->--hair, font->--font/--font-head. Delta up/down ride the
   semantic --ok/--bad tokens (with the origin's own greens/reds as fallback), neutral rides
   --faint. The origin is zero-JS / static, so there is NO count-up and NO hover here — nothing
   at rest, which is why no reduced-motion block is needed. The row is flex with vertical divider
   bars between metrics; on narrow panes it flips to a stacked column and the dividers become
   full-width horizontal rules (container queries, not viewport media) so they still behave once
   the row reflows. Card capped at the origin's ~1000px inner. */
.wsp-secmetricrow .smr-row{ display:flex; align-items:center; max-width:1000px; margin-inline:auto;
  background:var(--panel-2,var(--panel)); border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius,12px); padding:clamp(34px,4.4cqw,48px) clamp(22px,3cqw,32px); }
.wsp-secmetricrow .smr-metric{ flex:1; min-width:0; text-align:center; padding:0 clamp(10px,1.6cqw,16px); }

.wsp-secmetricrow .smr-num{ color:var(--ink); letter-spacing:-.03em; margin-bottom:8px;
  font:800 clamp(34px,4cqw,52px)/1 var(--font-head,var(--font)); font-variant-numeric:tabular-nums; }
.wsp-secmetricrow .smr-unit{ font-size:.55em; font-weight:700; vertical-align:super; letter-spacing:-.01em; }
.wsp-secmetricrow .smr-label{ font:600 14px/1.35 var(--font); color:var(--dim); margin-bottom:6px; }
.wsp-secmetricrow .smr-delta{ font:600 11px/1.45 var(--font); color:var(--faint); }
.wsp-secmetricrow .smr-delta.d-up{ color:var(--ok,#5a9e7a); }
.wsp-secmetricrow .smr-delta.d-down{ color:var(--bad,#e05a5a); }
.wsp-secmetricrow .smr-delta.d-neutral{ color:var(--faint); }
.wsp-secmetricrow .smr-arrow{ font-weight:700; }

.wsp-secmetricrow .smr-divider{ flex-shrink:0; width:1px; align-self:stretch; min-height:60px;
  background:var(--hair); }

/* stack to a column — dividers flip to full-width horizontal rules so they behave when the row wraps */
@container site (max-width:860px){
  .wsp-secmetricrow .smr-row{ flex-direction:column; align-items:stretch; gap:28px;
    padding:clamp(28px,5cqw,36px) clamp(20px,4cqw,28px); }
  .wsp-secmetricrow .smr-metric{ padding:0; }
  .wsp-secmetricrow .smr-divider{ width:auto; height:1px; min-height:0; align-self:stretch; }
}
@container site (max-width:560px){
  .wsp-secmetricrow .smr-row{ gap:24px; }
  .wsp-secmetricrow .smr-num{ margin-bottom:6px; }
}
/* --- secintegrationgrid (SB_04 port) --- integration/connected-tool cards in a
   container-queried grid; monogram tiles, real category filter, Connect cue on
   linked cards. Origin --sig2-* vars -> theme tokens. */
.wsp-secintegrationgrid .ig-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 clamp(24px,3cqw,34px); }
.wsp-secintegrationgrid .ig-filter{ appearance:none; -webkit-appearance:none; cursor:pointer;
  font:600 12.5px var(--font); color:var(--dim); background:transparent;
  border:var(--bw, 1px) solid var(--hair); border-radius:99px; padding:7px 15px;
  transition:color .18s ease, border-color .18s ease; }
.wsp-secintegrationgrid .ig-filter:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); }
.wsp-secintegrationgrid .ig-filter.on{ color:var(--accent); background:var(--accent-fill);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.wsp-secintegrationgrid .ig-filter:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wsp-secintegrationgrid .ig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6cqw,16px); }

.wsp-secintegrationgrid .ig-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:clamp(16px,1.9cqw,20px); background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px);
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .22s var(--ease-pop, ease-out), border-color .18s ease; }
.wsp-secintegrationgrid .ig-card.ig-hide{ display:none; }
.wsp-secintegrationgrid a.ig-card{ cursor:pointer; }
.wsp-secintegrationgrid a.ig-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.wsp-secintegrationgrid a.ig-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wsp-secintegrationgrid .ig-mark{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  background:color-mix(in srgb, var(--accent) 14%, var(--panel-2)); color:var(--accent);
  font:800 18px var(--font-head, var(--font)); }
.wsp-secintegrationgrid .ig-mark svg{ width:22px; height:22px; }
.wsp-secintegrationgrid .ig-mark.t1{ filter:hue-rotate(42deg); }
.wsp-secintegrationgrid .ig-mark.t2{ filter:hue-rotate(-40deg); }
.wsp-secintegrationgrid .ig-mark.t3{ filter:hue-rotate(84deg); }

.wsp-secintegrationgrid .ig-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.wsp-secintegrationgrid .ig-name{ font:700 14.5px var(--font); color:var(--ink); letter-spacing:-.01em; }
.wsp-secintegrationgrid .ig-blurb{ font:400 12.5px/1.5 var(--font); color:var(--dim); }

.wsp-secintegrationgrid .ig-connect{ display:inline-flex; align-items:center; gap:5px; margin-top:auto;
  font:700 12px var(--font); color:var(--accent);
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease; }
.wsp-secintegrationgrid .ig-connect svg{ width:14px; height:14px; }
.wsp-secintegrationgrid a.ig-card:hover .ig-connect,
.wsp-secintegrationgrid a.ig-card:focus-visible .ig-connect{ opacity:1; transform:translateY(0); }

@container site (max-width:860px){
  .wsp-secintegrationgrid .ig-grid{ grid-template-columns:repeat(3,1fr); }
}
@container site (max-width:560px){
  .wsp-secintegrationgrid .ig-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secintegrationgrid .ig-card,
  .wsp-secintegrationgrid .ig-filter,
  .wsp-secintegrationgrid .ig-connect{ transition:none; }
  .wsp-secintegrationgrid a.ig-card:hover{ transform:none; }
  .wsp-secintegrationgrid .ig-connect{ opacity:1; transform:none; }
}
/* --- seckpirow (SB_04 port) — full-bleed KPI strip: headline figures with a label and an
   optional up/down trend, hairline-divided, count-up on entry ---
   Origin --skr-* vars -> tokens: bg->section --bg, surface->--panel-2/--panel, text->--ink,
   dim->--dim/--faint, border->--hair, accent->--accent, font->--font/--font-head. The band is
   full-bleed (surface + top/bottom hairlines carried on the .ws-sec itself, which has no side
   padding); the figures sit in a centred max-width row. Dividers are centred hairline pseudo-rules
   on each cell's leading edge, hidden on the first cell of every visual row so they stay correct
   as the grid wraps 4/5/6-up -> 2-up -> 1-up (the hide set is monotonic and purely additive:
   {first} c {odds} c {all}, so no rule ever has to undo another). Wide column count follows the
   item count via --skr-cols. Container queries, not viewport media. Trend up/down take semantic
   --ok/--bad. Count-up lives in mount(), gated by whenVisible and skipped under reduced-motion;
   nothing animates at rest. */
.wsp-seckpirow{ padding-block:clamp(38px,5.6cqw,58px);
  background:var(--panel-2,var(--panel));
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-seckpirow .skr-head{ margin-bottom:clamp(26px,3.6cqw,38px); }

.wsp-seckpirow .skr-row{ display:grid; grid-template-columns:repeat(var(--skr-cols,4),minmax(0,1fr));
  align-items:center; }
.wsp-seckpirow .skr-kpi{ position:relative; display:flex; flex-direction:column; align-items:center;
  gap:5px; text-align:center; min-width:0; padding:clamp(4px,1cqw,10px) clamp(16px,3cqw,34px); }

/* centred hairline divider on each cell's leading edge; hidden on the first cell of each row */
.wsp-seckpirow .skr-kpi::before{ content:""; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:1px; height:clamp(30px,4.2cqw,48px); background:var(--hair); }
.wsp-seckpirow .skr-kpi:first-child::before{ background:transparent; }

.wsp-seckpirow .skr-val{ font:800 clamp(28px,4.4cqw,44px)/1 var(--font-head,var(--font));
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.wsp-seckpirow .skr-label{ font:500 12px/1.3 var(--font); color:var(--dim); letter-spacing:.01em; }
.wsp-seckpirow .skr-trend{ margin-top:2px; font:600 11px/1.4 var(--font); color:var(--faint); }
.wsp-seckpirow .skr-trend.d-up{ color:var(--ok,#5a9e7a); }
.wsp-seckpirow .skr-trend.d-down{ color:var(--bad,#e5533c); }
.wsp-seckpirow .skr-trend.d-neutral{ color:var(--faint); }
.wsp-seckpirow .skr-arrow{ font-style:normal; font-weight:700; }

@container site (max-width:860px){
  .wsp-seckpirow .skr-row{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(26px,5cqw,34px); }
  .wsp-seckpirow .skr-kpi:nth-child(2n+1)::before{ background:transparent; }
}
@container site (max-width:560px){
  .wsp-seckpirow .skr-row{ grid-template-columns:1fr; row-gap:0; }
  .wsp-seckpirow .skr-kpi::before{ background:transparent; }
  .wsp-seckpirow .skr-kpi + .skr-kpi{ border-top:var(--bw, 1px) solid var(--hair); padding-top:clamp(20px,6cqw,26px); }
  .wsp-seckpirow .skr-kpi{ padding-bottom:clamp(4px,3cqw,10px); }
}
/* --- secmetricdashboard (SB_04 port) — analytics panel: KPI tiles + sparkline/bar/donut/progress charts.
   origin --smd-* vars mapped to ZenOS tokens (bg→--bg, surface→--panel/--panel-2, text→--ink, dim→--dim/--faint,
   border→--hair, accent→--accent; semantic trend/series on --ok/--warn/--bad with hex fallbacks). Charts have real
   dimensions so nothing collapses; container queries (not viewport) fold the grids on narrow panes; the reveal lives
   in mount() and is skipped under reduced-motion (final state renders from inline --h/--w/dash values). --- */
.wsp-secmetricdashboard .smd-frame{ max-width:920px; margin:0 auto; border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 12px);
  background:var(--panel); overflow:hidden; box-shadow:0 26px 64px -38px rgba(0,0,0,.6); }
.wsp-secmetricdashboard .smd-bar{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:var(--bw, 1px) solid var(--hair);
  background:var(--panel-2); background-image:var(--surface-grad, none); }
.wsp-secmetricdashboard .smd-dots{ display:flex; gap:6px; flex:none; }
.wsp-secmetricdashboard .smd-dots i{ width:10px; height:10px; border-radius:50%; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.wsp-secmetricdashboard .smd-win-t{ font:600 12.5px var(--font-head, var(--font)); color:var(--ink); white-space:nowrap; }
.wsp-secmetricdashboard .smd-crumb{ font:500 11px var(--mono); color:var(--faint); letter-spacing:.02em; padding-left:2px;
  border-left:var(--bw, 1px) solid var(--hair); margin-left:2px; padding-left:12px; }
.wsp-secmetricdashboard .smd-range{ margin-left:auto; display:flex; gap:2px; padding:2px; border-radius:99px; border:var(--bw, 1px) solid var(--hair); flex:none; }
.wsp-secmetricdashboard .smd-range b{ font:600 10.5px var(--mono); letter-spacing:.04em; color:var(--faint); padding:3px 9px; border-radius:99px; }
.wsp-secmetricdashboard .smd-range b.on{ color:var(--ink); background:color-mix(in srgb, var(--accent) 18%, transparent); }
.wsp-secmetricdashboard .smd-live{ display:inline-flex; align-items:center; gap:6px; font:600 10px var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); flex:none; }
.wsp-secmetricdashboard .smd-live::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ok, #56c98a);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok, #56c98a) 22%, transparent); }
.wsp-secmetricdashboard .smd-body{ padding:clamp(14px, 2cqw, 20px); display:flex; flex-direction:column; gap:clamp(12px, 1.6cqw, 16px);
  background:radial-gradient(120% 130% at 100% 0, color-mix(in srgb, var(--accent) 6%, transparent), transparent 58%); }

.wsp-secmetricdashboard .smd-kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(10px, 1.4cqw, 14px); }
.wsp-secmetricdashboard .smd-kpi{ min-width:0; display:flex; flex-direction:column; gap:9px; padding:13px 14px 12px;
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .72); background:var(--panel-2); }
.wsp-secmetricdashboard .smd-kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wsp-secmetricdashboard .smd-kpi-k{ min-width:0; font:500 11.5px var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsp-secmetricdashboard .smd-trend{ flex:none; display:inline-flex; align-items:center; gap:3px; font:700 10.5px var(--mono);
  padding:2px 6px 2px 5px; border-radius:99px; white-space:nowrap; }
.wsp-secmetricdashboard .smd-trend svg{ width:8px; height:8px; fill:currentColor; }
.wsp-secmetricdashboard .smd-trend.ok{ color:var(--ok, #56c98a); background:color-mix(in srgb, var(--ok, #56c98a) 15%, transparent); }
.wsp-secmetricdashboard .smd-trend.bad{ color:var(--bad, #e56b7a); background:color-mix(in srgb, var(--bad, #e56b7a) 15%, transparent); }
.wsp-secmetricdashboard .smd-trend.warn{ color:var(--warn, #e2b657); background:color-mix(in srgb, var(--warn, #e2b657) 15%, transparent); }
.wsp-secmetricdashboard .smd-trend.flat{ color:var(--faint); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.wsp-secmetricdashboard .smd-kpi-v{ font:700 clamp(21px, 2.6cqw, 28px)/1 var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wsp-secmetricdashboard .smd-kpi-spark{ height:32px; }
.wsp-secmetricdashboard .smd-spark{ display:block; width:100%; height:100%; overflow:visible; }
.wsp-secmetricdashboard .smd-spark-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.wsp-secmetricdashboard .smd-spark-fill{ stroke:none; fill:color-mix(in srgb, var(--accent) 16%, transparent); }
.wsp-secmetricdashboard .smd-spark.tone-ok .smd-spark-line{ stroke:var(--ok, #56c98a); }
.wsp-secmetricdashboard .smd-spark.tone-ok .smd-spark-fill{ fill:color-mix(in srgb, var(--ok, #56c98a) 15%, transparent); }
.wsp-secmetricdashboard .smd-spark.tone-bad .smd-spark-line{ stroke:var(--bad, #e56b7a); }
.wsp-secmetricdashboard .smd-spark.tone-bad .smd-spark-fill{ fill:color-mix(in srgb, var(--bad, #e56b7a) 15%, transparent); }
.wsp-secmetricdashboard .smd-spark.tone-warn .smd-spark-line{ stroke:var(--warn, #e2b657); }
.wsp-secmetricdashboard .smd-spark.tone-warn .smd-spark-fill{ fill:color-mix(in srgb, var(--warn, #e2b657) 15%, transparent); }

.wsp-secmetricdashboard .smd-charts{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(10px, 1.4cqw, 14px); }
.wsp-secmetricdashboard .smd-panel{ min-width:0; padding:14px 16px 15px; border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * .72); background:var(--panel-2); }
.wsp-secmetricdashboard .smd-panel-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; }
.wsp-secmetricdashboard .smd-panel-h b{ font:600 13px var(--font-head, var(--font)); color:var(--ink); }
.wsp-secmetricdashboard .smd-panel-h span{ font:500 10.5px var(--mono); color:var(--faint); letter-spacing:.03em; white-space:nowrap; }

.wsp-secmetricdashboard .smd-plot{ display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; align-items:end; height:134px; }
.wsp-secmetricdashboard .smd-col{ min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; }
.wsp-secmetricdashboard .smd-col > i{ display:block; width:100%; max-width:26px; height:var(--h, 10%); transform-origin:bottom;
  border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, transparent), color-mix(in srgb, var(--accent) 34%, transparent)); }
.wsp-secmetricdashboard .smd-col.hi > i{ background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 52%, transparent));
  box-shadow:0 0 22px -6px var(--accent); }
.wsp-secmetricdashboard .smd-col span{ font:500 10px var(--mono); color:var(--faint); }

.wsp-secmetricdashboard .smd-donutwrap{ display:flex; align-items:center; gap:clamp(12px, 2cqw, 22px); }
.wsp-secmetricdashboard .smd-ringbox{ position:relative; width:118px; height:118px; flex:none; }
.wsp-secmetricdashboard .smd-ring{ display:block; width:100%; height:100%; }
.wsp-secmetricdashboard .smd-ring circle{ fill:none; stroke-width:4.4; }
.wsp-secmetricdashboard .smd-ring-bg{ stroke:color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-secmetricdashboard .smd-ring-c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.wsp-secmetricdashboard .smd-ring-c b{ font:700 19px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wsp-secmetricdashboard .smd-ring-c span{ font:500 9px var(--mono); color:var(--faint); letter-spacing:.08em; text-transform:uppercase; }
.wsp-secmetricdashboard .smd-legend{ list-style:none; margin:0; padding:0; min-width:0; flex:1; display:flex; flex-direction:column; gap:9px; }
.wsp-secmetricdashboard .smd-legend li{ display:flex; align-items:center; gap:9px; font:500 12px var(--font); color:var(--dim); }
.wsp-secmetricdashboard .smd-legend i{ width:10px; height:10px; border-radius:3px; flex:none; }
.wsp-secmetricdashboard .smd-legend span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsp-secmetricdashboard .smd-legend b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

.wsp-secmetricdashboard .smd-goal{ display:grid; grid-template-columns:120px 1fr 44px; align-items:center; gap:12px; }
.wsp-secmetricdashboard .smd-goal + .smd-goal{ margin-top:11px; }
.wsp-secmetricdashboard .smd-goal-k{ min-width:0; font:500 12px var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsp-secmetricdashboard .smd-goal-track{ height:8px; border-radius:99px; background:color-mix(in srgb, var(--ink) 9%, transparent); overflow:hidden; }
.wsp-secmetricdashboard .smd-goal-fill{ display:block; height:100%; width:var(--w, 0%); transform-origin:left center; border-radius:99px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); }
.wsp-secmetricdashboard .smd-goal-v{ text-align:right; font:600 12px var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }

@container site (max-width: 860px){
  .wsp-secmetricdashboard .smd-charts{ grid-template-columns:1fr; }
  .wsp-secmetricdashboard .smd-kpis{ grid-template-columns:repeat(2, 1fr); }
}
@container site (max-width: 560px){
  .wsp-secmetricdashboard .smd-kpis{ grid-template-columns:1fr; }
  .wsp-secmetricdashboard .smd-crumb{ display:none; }
  .wsp-secmetricdashboard .smd-plot{ height:112px; }
  .wsp-secmetricdashboard .smd-goal{ grid-template-columns:92px 1fr 40px; gap:10px; }
  .wsp-secmetricdashboard .smd-donutwrap{ gap:16px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secmetricdashboard .smd-col > i,
  .wsp-secmetricdashboard .smd-goal-fill,
  .wsp-secmetricdashboard .smd-donut-seg,
  .wsp-secmetricdashboard .smd-spark-line{ transition:none; }
}

/* abstract-hero — ported from SB_04 components/above-the-fold/abstract-hero (APEX's imageless
   "generative" artist hero: no photo, a pure CSS visual system — three drifting color orbs, a
   center-masked grid, grain and optional CRT scan lines behind a giant gradient name, a mono
   signal tag, a monospace data readout, twin CTAs and a live scroll cue). Net-new, richer sibling
   of v-abstract: the name's gradient and the scan lines are per-instance fields, and the scroll cue
   is a REAL focusable button that scrolls the site stage (mount()), not decoration. Origin --abh-*
   map to tokens: bg->--bg, text->--ink, muted->--faint, the two accents -> --accent + --accent2
   (fallback --accent), so the five origin palette presets become whatever the site's accents are;
   fonts -> --font-head (name) / --font (body) / --mono (signal · data · cue). The origin's heavy
   blur() orbs become soft radial gradients (nothing rides blur); entrance keyframes (fade / reveal
   / gradient-shift) are dropped — anims.js owns entrances. The ambient orb drift and the gentle
   scroll-line pulse run at rest like the ticker marquee / v-cinematic cue and stop under
   prefers-reduced-motion. Transform / opacity / color only. Container queries only. */
.ws-hero.v-abstract-hero { position:relative; overflow:hidden; isolation:isolate; text-align:center;
  min-height:clamp(500px, 86cqh, 840px); display:grid; place-items:center; padding:96px 24px; background:var(--bg); }
.v-abstract-hero .agh-in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.v-abstract-hero .agh-sub { margin-top:20px; margin-inline:auto; max-width:44ch; color:var(--faint); }
.v-abstract-hero .ws-ctarow { margin-top:28px; }
.agh-field { position:absolute; inset:0; z-index:0; pointer-events:none; }
.agh-orb { position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.agh-orb.o1 { width:60cqw; height:60cqw; min-width:360px; min-height:360px; top:-16%; left:-10%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent) 9%, transparent) 42%, transparent 70%);
  animation:aghDrift1 20s ease-in-out infinite alternate; }
.agh-orb.o2 { width:52cqw; height:52cqw; min-width:320px; min-height:320px; bottom:-20%; right:-14%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 8%, transparent) 42%, transparent 70%);
  animation:aghDrift2 25s ease-in-out infinite alternate; }
.agh-orb.o3 { width:42cqw; height:42cqw; min-width:260px; min-height:260px; top:30%; left:40%;
  background:radial-gradient(circle,
    color-mix(in srgb, color-mix(in srgb, var(--accent) 50%, var(--accent2, var(--accent))) 20%, transparent) 0%, transparent 66%);
  animation:aghDrift3 15s ease-in-out infinite alternate; }
.agh-grid { position:absolute; inset:0; opacity:.05;
  background-image:linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 80%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 80%); }
.agh-noise { position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='aghn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23aghn)'/%3E%3C/svg%3E"); }
.agh-scan { position:absolute; inset:0; opacity:.04; background:repeating-linear-gradient(0deg,
  transparent 0 2px, color-mix(in srgb, var(--ink) 55%, transparent) 2px, color-mix(in srgb, var(--ink) 55%, transparent) 4px); }
.agh-signal { display:inline-flex; align-items:center; gap:.75em; margin-bottom:10px; color:var(--accent);
  font:400 clamp(9px, 1.1cqw, 11px)/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; }
.agh-signal::before, .agh-signal::after { content:''; width:1.6em; height:1px;
  background:color-mix(in srgb, var(--accent) 50%, transparent); }
.agh-name { max-width:none; text-transform:uppercase; letter-spacing:-0.04em; color:var(--ink);
  font:800 clamp(46px, 13cqw, 150px)/0.86 var(--font-head, var(--font)); }
.agh-name.grad { background:linear-gradient(135deg, var(--ink) 0%, var(--accent) 52%, var(--accent2, var(--accent)) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.agh-data { display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin-top:32px; }
.agh-stat { display:flex; flex-direction:column; align-items:center; gap:3px; }
.agh-stat b { font:500 15px var(--mono); letter-spacing:.04em; color:var(--ink); }
.agh-stat i { font:400 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-style:normal; }
.agh-scroll { position:absolute; left:50%; bottom:18px; transform:translate(-50%, 0); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 10px;
  background:none; border:0; cursor:pointer; color:var(--faint); transition:color .2s ease, transform .2s ease; }
.agh-scroll:hover { color:var(--ink); transform:translate(-50%, 3px); }
.agh-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.agh-scroll span { font:400 9px var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.agh-scroll i { width:1px; height:30px; transform-origin:top;
  background:linear-gradient(180deg, currentColor, transparent); animation:aghScroll 2s ease-in-out infinite; }
@keyframes aghDrift1 { from { transform:translate(0,0) scale(1); } to { transform:translate(9%,7%) scale(1.08); } }
@keyframes aghDrift2 { from { transform:translate(0,0) scale(1); } to { transform:translate(-7%,-5%) scale(1.05); } }
@keyframes aghDrift3 { from { transform:translate(0,0) scale(1); } to { transform:translate(-5%,8%) scale(0.92); } }
@keyframes aghScroll { 0%, 100% { opacity:.2; transform:scaleY(.5); } 50% { opacity:.7; transform:scaleY(1); } }
@container site (max-width: 560px) {
  .ws-hero.v-abstract-hero { min-height:clamp(440px, 80cqh, 640px); padding:76px 18px; }
  .agh-name { font-size:clamp(40px, 17cqw, 96px); }
  .agh-data { gap:18px; }
}
@media (prefers-reduced-motion: reduce) {
  .agh-orb, .agh-scroll i { animation:none; }
}
/* --- contentsplit (SB_04 port · components/sections/content-split) ---
   Editorial copy + ticked checklist beside a framed media panel. An OPEN split
   (no card frame, unlike featurespotlight): flip to lead with the visual, or
   tint the band. All theme tokens; nothing animates at rest. */
.wsp-contentsplit .cs-in{ align-items:stretch; gap:clamp(36px, 5cqw, 72px); }
.wsp-contentsplit.is-tint{ background:var(--panel); }

/* copy column */
.wsp-contentsplit .cs-content{ min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; }
.wsp-contentsplit .cs-content .ws-kick{ margin-bottom:16px; }
.wsp-contentsplit .cs-title{ margin:0 0 16px; letter-spacing:-0.02em; text-wrap:balance; }
.wsp-contentsplit .cs-desc{ margin:0; max-width:48ch;
  font:400 clamp(14px, 1.6cqw, 16px)/1.7 var(--font); color:var(--dim); }
.wsp-contentsplit .cs-checks{ list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-direction:column; gap:13px; }
.wsp-contentsplit .cs-checks li{ display:flex; align-items:flex-start; gap:12px;
  font:500 clamp(13px, 1.5cqw, 15px)/1.5 var(--font); color:var(--ink); }
.wsp-contentsplit .cs-check{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-top:1px; border-radius:999px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); }
.wsp-contentsplit .cs-check svg{ width:12px; height:12px; }
.wsp-contentsplit .cs-link{ margin-top:30px; }

/* framed visual column */
.wsp-contentsplit .cs-visual{ position:relative; overflow:hidden; align-self:stretch;
  min-height:clamp(240px, 30cqw, 400px);
  border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) + 2px);
  background:linear-gradient(155deg, var(--panel-2, var(--panel)), var(--panel));
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; }
.wsp-contentsplit .cs-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0, #000, transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 0, #000, transparent 78%); }
.wsp-contentsplit .cs-glow{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(72%, 340px); aspect-ratio:1; border-radius:50%; pointer-events:none; opacity:.6;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent), transparent 66%); }
.wsp-contentsplit .cs-ph{ position:relative; font:600 11px/1 var(--font);
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.wsp-contentsplit .cs-cap{ position:absolute; left:14px; bottom:12px; margin:0; padding:6px 12px;
  font:600 10px var(--mono, var(--font)); letter-spacing:2px; text-transform:uppercase; color:var(--dim);
  background:linear-gradient(to right, color-mix(in srgb, var(--bg) 70%, transparent), transparent);
  border-radius:999px; }
.wsp-contentsplit .cs-visual.has-img .cs-grid,
.wsp-contentsplit .cs-visual.has-img .cs-glow,
.wsp-contentsplit .cs-visual.has-img .cs-ph{ display:none; }

/* flip — the visual leads */
.wsp-contentsplit .cs-in.flip .cs-content{ order:2; }
.wsp-contentsplit .cs-in.flip .cs-visual{ order:1; }

/* narrow: stack, visual on top */
@container site (max-width: 720px){
  .wsp-contentsplit .cs-in, .wsp-contentsplit .cs-in.flip{ grid-template-columns:1fr; gap:26px; }
  .wsp-contentsplit .cs-in.flip .cs-content, .wsp-contentsplit .cs-in.flip .cs-visual{ order:0; }
  .wsp-contentsplit .cs-visual{ order:-1; align-self:auto; min-height:0; aspect-ratio:16 / 10; }
  .wsp-contentsplit .cs-desc{ max-width:none; }
}
/* logo-cloud (SB_04 · sections/logo-cloud) — a soft cloud of muted wordmark/image
   logos that warm to full ink on hover; optional top/bottom rules + tinted panel */
.ws-logos.v-cloud { padding:56px 0; }
.ws-logos.v-cloud.is-bordered { border-block:var(--bw, 1px) solid var(--hair); }
.ws-logos.v-cloud.is-tint { background:color-mix(in srgb, var(--panel) 42%, var(--bg)); }
.ws-logocloud { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:22px 52px; margin-top:26px; }
.ws-logochip { display:inline-flex; align-items:center; justify-content:center; color:var(--dim);
  transition:color 140ms linear, transform 140ms ease; }
.ws-logochip.is-text { font:700 17px var(--font-head, var(--font)); letter-spacing:-0.01em; }
.ws-logochip img { height:26px; width:auto; display:block; filter:grayscale(1); opacity:.62;
  transition:opacity 140ms linear; }
.ws-logochip:hover { color:var(--ink); transform:translateY(-1px); }
.ws-logochip:hover img { filter:grayscale(0); opacity:1; }
@container site (max-width: 560px) {
  .ws-logos.v-cloud { padding:44px 0; }
  .ws-logocloud { gap:15px 30px; margin-top:20px; }
  .ws-logochip.is-text { font-size:14px; }
  .ws-logochip img { height:20px; }
}
/* --- faq / faq-accordion (SB_04 · components/sections/faq-accordion) — hairline-ruled native <details> --- */
.v-faqline .ws-shead .ws-sub{ margin-inline:auto; max-width:52ch; }
.v-faqline .fql-list{ display:flex; flex-direction:column; }
.v-faqline .fql-item{ border-bottom:var(--bw, 1px) solid var(--hair); }
.v-faqline .fql-item:first-child{ border-top:var(--bw, 1px) solid var(--hair); }
.v-faqline .fql-q{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1.1rem,2.2cqw,1.5rem) 2px; cursor:pointer; list-style:none;
  font:500 clamp(0.95rem,1.9cqw,1.05rem)/1.45 var(--font); color:var(--ink);
  -webkit-user-select:none; user-select:none; transition:color .2s ease; }
.v-faqline .fql-q::-webkit-details-marker{ display:none; }
.v-faqline .fql-q:hover{ color:var(--accent); }
.v-faqline .fql-item:focus-within .fql-q{ color:var(--accent); }
.v-faqline .fql-q:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.v-faqline .fql-qt{ flex:1; }
.v-faqline .fql-icon{ position:relative; flex-shrink:0; width:1.2rem; height:1.2rem; color:var(--dim); }
.v-faqline .fql-icon::before, .v-faqline .fql-icon::after{ content:''; position:absolute; background:currentColor;
  transition:transform .3s ease, opacity .3s ease; }
.v-faqline .fql-icon::before{ top:50%; left:10%; right:10%; height:1.5px; transform:translateY(-50%); }
.v-faqline .fql-icon::after{ left:50%; top:10%; bottom:10%; width:1.5px; transform:translateX(-50%); }
.v-faqline .fql-q:hover .fql-icon{ color:var(--accent); }
.v-faqline .fql-item[open] .fql-icon{ color:var(--accent); }
.v-faqline .fql-item[open] .fql-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.v-faqline .fql-a{ padding:0 2px clamp(1.15rem,2.2cqw,1.4rem); max-width:60ch;
  font:400 clamp(0.88rem,1.6cqw,0.95rem)/1.7 var(--font); color:var(--dim); }
@container site (max-width:640px){
  .v-faqline .fql-q{ padding:1.05rem 2px; gap:.75rem; }
  .v-faqline .fql-a{ padding-bottom:1.1rem; }
}
@media (prefers-reduced-motion: reduce){
  .v-faqline .fql-q, .v-faqline .fql-icon::before, .v-faqline .fql-icon::after{ transition:none; }
}
/* pricing-table (SB_04 port · components/sections/pricing-table) — three tiers, a FILLED, raised
   featured card (SB_04's inverted highlight re-read through --accent / --accent-text), and a
   monthly/annual toggle whose mount() swaps every price. Own pxt-* family so it never collides with
   the ptb-* draft. Container-queried; only transform/opacity/color transition, nothing at rest. */
.v-pricingtable .ws-shead{ text-align:center; max-width:720px; margin:0 auto; }
.v-pricingtable .ws-shead .ws-sub{ margin-inline:auto; }
.v-pricingtable .pxt-toggle{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:26px; }
.v-pricingtable .pxt-tlabel{ display:inline-flex; align-items:center; gap:8px; font:600 13.5px var(--font); color:var(--dim); transition:color .2s ease; }
.v-pricingtable .pxt-tlabel.m{ color:var(--ink); }
.v-pricingtable.is-annual .pxt-tlabel.m{ color:var(--dim); }
.v-pricingtable.is-annual .pxt-tlabel.a{ color:var(--ink); }
.v-pricingtable .pxt-save{ font:700 10px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:3px 8px; border-radius:999px; }
.v-pricingtable .pxt-switch{ position:relative; flex:none; width:50px; height:28px; padding:0; margin:0; border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:var(--panel-2); cursor:pointer; -webkit-appearance:none; appearance:none; transition:border-color .2s ease; }
.v-pricingtable .pxt-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.v-pricingtable .pxt-switch[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); }
.v-pricingtable .pxt-thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--ink); pointer-events:none; transition:transform .2s ease, background .2s ease; }
.v-pricingtable .pxt-switch[aria-checked="true"] .pxt-thumb{ transform:translateX(22px); background:var(--accent-text, var(--bg)); }

.v-pricingtable .pxt-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch; margin-top:44px; }
.v-pricingtable .pxt-card{ position:relative; display:flex; flex-direction:column; padding:30px 26px;
  border-radius:calc(var(--radius, 12px) + 2px); border:var(--bw, 1px) solid var(--hair);
  background:var(--panel); background-image:var(--surface-grad, none); color:var(--ink);
  transition:transform .2s ease, border-color .2s ease; }
.v-pricingtable .pxt-card:hover{ border-color:color-mix(in srgb, var(--accent) 38%, var(--hair)); }
/* featured = SB_04's inverted highlight: a solid accent block, raised, contents in --accent-text */
.v-pricingtable .pxt-card.is-hot{ border-color:var(--accent); transform:translateY(-8px);
  background:var(--accent-grad, var(--accent)); background-color:var(--accent); color:var(--accent-text, #04121a); }
.v-pricingtable .pxt-badge{ position:absolute; top:0; left:50%; transform:translate(-50%, -50%);
  font:700 10px var(--font); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  color:var(--accent-text, var(--bg)); background:var(--accent); padding:4px 12px; border-radius:999px; }
.v-pricingtable .pxt-card.is-hot .pxt-badge{ color:var(--accent); background:var(--accent-text, var(--bg)); }
.v-pricingtable .pxt-plan{ font:600 12px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.v-pricingtable .pxt-card.is-hot .pxt-plan{ color:color-mix(in srgb, var(--accent-text, #04121a) 78%, transparent); }
.v-pricingtable .pxt-price{ display:flex; align-items:baseline; gap:5px; margin:12px 0 0; }
.v-pricingtable .pxt-amt{ font:800 clamp(30px, 5cqw, 44px) var(--font-head, var(--font)); line-height:1; letter-spacing:-.02em; color:inherit; font-variant-numeric:tabular-nums; transition:opacity .15s ease; }
.v-pricingtable .pxt-per{ font:500 13px var(--font); color:var(--faint); }
.v-pricingtable .pxt-card.is-hot .pxt-per{ color:color-mix(in srgb, var(--accent-text, #04121a) 60%, transparent); }
.v-pricingtable .pxt-plandesc{ margin:10px 0 18px; padding-bottom:18px; border-bottom:var(--bw, 1px) solid var(--hair);
  font:400 13px/1.5 var(--font); color:var(--dim); }
.v-pricingtable .pxt-card.is-hot .pxt-plandesc{ color:color-mix(in srgb, var(--accent-text, #04121a) 66%, transparent);
  border-bottom-color:color-mix(in srgb, var(--accent-text, #04121a) 22%, transparent); }
.v-pricingtable .pxt-feats{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1 1 auto; }
.v-pricingtable .pxt-feat{ display:flex; align-items:flex-start; gap:10px; font:400 13px/1.45 var(--font); color:var(--dim); }
.v-pricingtable .pxt-feat svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--accent); }
.v-pricingtable .pxt-feat span{ min-width:0; }
.v-pricingtable .pxt-card.is-hot .pxt-feat{ color:color-mix(in srgb, var(--accent-text, #04121a) 82%, transparent); }
.v-pricingtable .pxt-card.is-hot .pxt-feat svg{ color:var(--accent-text, #04121a); }
.v-pricingtable .pxt-card .ws-btn{ width:100%; justify-content:center; margin-top:auto; }
@container site (max-width: 860px){
  .v-pricingtable .pxt-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .v-pricingtable .pxt-card.is-hot{ transform:none; order:-1; }
}
@container site (max-width: 560px){
  .v-pricingtable .pxt-grid{ margin-top:32px; }
  .v-pricingtable .pxt-toggle{ gap:10px; }
}
@media (prefers-reduced-motion: reduce){
  .v-pricingtable .pxt-card, .v-pricingtable .pxt-amt, .v-pricingtable .pxt-switch,
  .v-pricingtable .pxt-thumb, .v-pricingtable .pxt-tlabel{ transition:none; }
}
/* Newsletter · Bordered — ported from SB_04 components/newsletter/bordered.
   An outlined (ghost) email-capture card: a hairline frame on the page bg (no
   --panel fill), a pill kicker, centered copy, a joined email field + button and a
   live-validated privacy line — the bordered twin of the filled .ws-cta.v-newsletter
   card. Origin --nl-* vars → theme tokens; baked entrance anim dropped (the reveal
   system owns entrances); wiring (validEmail + per-site memory) lives in convert.js.
   All selectors namespaced .v-nlbd / .nlbd-* (wave tsk_mrj94pw3zz2). */
.ws-cta.v-nlbd .ws-in { max-width:760px; }
.ws-cta.v-nlbd .nlbd-card { text-align:center; padding:clamp(36px, 6cqw, 60px) clamp(22px, 5cqw, 48px);
  border-radius:calc(var(--radius, 12px) * 1.25); border:var(--bw, 1px) solid var(--hair); background:transparent; }
.ws-cta.v-nlbd .nlbd-copy { max-width:520px; margin:0 auto; }
.ws-cta.v-nlbd .nlbd-card .ws-h2 { margin-top:14px; }
.ws-cta.v-nlbd .nlbd-card .ws-sub { margin-top:12px; }
.ws-cta.v-nlbd .nlbd-form { max-width:480px; margin:26px auto 0; display:flex; flex-direction:column; gap:10px; }
.ws-cta.v-nlbd .nlbd-row { display:flex; gap:0; align-items:stretch;
  border-radius:calc(var(--radius, 12px) * .75); overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); transition:border-color 160ms ease-out; }
.ws-cta.v-nlbd .nlbd-row:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.ws-cta.v-nlbd .nlbd-row input { flex:1; min-width:0; padding:12px 14px; border:none; outline:none;
  background:transparent; color:var(--ink); font:400 13px var(--font); }
.ws-cta.v-nlbd .nlbd-row input::placeholder { color:var(--faint); }
.ws-cta.v-nlbd .nlbd-row .ws-btn { border-radius:0; flex-shrink:0; }
.ws-cta.v-nlbd .nlbd-fine { font:400 11.5px/1.55 var(--font); color:var(--faint); margin:0; }
.ws-cta.v-nlbd .nlbd-msg { display:block; min-height:1.4em; font:500 12px var(--font); font-style:normal; margin-top:2px; }
.ws-cta.v-nlbd .nlbd-msg.ok  { color:var(--accent); }
.ws-cta.v-nlbd .nlbd-msg.bad { color:#f87171; }
@container site (max-width: 480px) {
  .ws-cta.v-nlbd .nlbd-row { flex-direction:column; }
  .ws-cta.v-nlbd .nlbd-row .ws-btn { justify-content:center; }
}
/* --- newsletter · inline (SB_04 port: components/newsletter/inline) --- */
.wsp-nlinline .nli-copy{ max-width:560px; margin-inline:auto; }
.wsp-nlinline .nli-label{ display:inline-block; margin-bottom:16px; padding:5px 13px;
  font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  border:var(--bw, 1px) solid var(--hair); border-radius:99px; }
.wsp-nlinline .nli-copy .ws-h2{ margin:0; }
.wsp-nlinline .nli-desc{ margin-top:12px; margin-inline:auto; max-width:48ch; }

.wsp-nlinline .nli-form{ width:min(480px, 100%); margin:28px auto 0; display:flex;
  flex-direction:column; gap:12px; }
.wsp-nlinline .nli-row{ display:flex; align-items:stretch; gap:0; overflow:hidden;
  border:var(--bw, 1px) solid var(--hair); background:var(--panel);
  border-radius:calc(var(--radius, 12px) * .7);
  transition:border-color .18s ease, box-shadow .18s ease; }
.wsp-nlinline .nli-row:focus-within{ border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 3px var(--accent-fill); }
.wsp-nlinline .nli-input{ flex:1 1 auto; min-width:0; background:transparent; border:none;
  outline:none; color:var(--ink); font:400 14px var(--font); padding:13px 16px; text-align:left;
  -webkit-appearance:none; appearance:none; }
.wsp-nlinline .nli-input::placeholder{ color:var(--faint); }
.wsp-nlinline .nli-input:disabled{ opacity:.55; }
.wsp-nlinline .nli-btn{ flex:0 0 auto; border-radius:0; }
.wsp-nlinline .nli-btn::after{ content:" \2192"; margin-left:.15em; }

.wsp-nlinline .nli-fine{ margin:0 auto; max-width:46ch;
  font:400 11.5px/1.55 var(--font); color:var(--faint); }
.wsp-nlinline .nli-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  transition:color .18s ease; }
.wsp-nlinline .nli-link:hover{ color:var(--ink); }
.wsp-nlinline .nli-msg{ margin-top:2px; }

/* inline success — the form collapses into a confirmation row */
.wsp-nlinline .nli-done{ display:none; align-items:center; justify-content:center; gap:10px;
  width:min(480px, 100%); margin:28px auto 0; padding:13px 18px; color:var(--ink);
  font:500 14px var(--font); border-radius:calc(var(--radius, 12px) * .7);
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--hair)); background:var(--accent-fill); }
.wsp-nlinline .nli-check{ display:flex; flex:0 0 auto; color:var(--accent); }
.wsp-nlinline .nli-check svg{ width:18px; height:18px; }
.wsp-nlinline .nli-form.is-done .nli-row,
.wsp-nlinline .nli-form.is-done .nli-fine,
.wsp-nlinline .nli-form.is-done .nli-msg{ display:none; }
.wsp-nlinline .nli-form.is-done .nli-done{ display:flex; animation:nli-rise .3s ease both; }
@keyframes nli-rise{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

@container site (max-width:460px){
  .wsp-nlinline .nli-row{ flex-direction:column; overflow:visible; border:none;
    background:transparent; box-shadow:none; }
  .wsp-nlinline .nli-row:focus-within{ box-shadow:none; }
  .wsp-nlinline .nli-input{ border:var(--bw, 1px) solid var(--hair); background:var(--panel);
    border-radius:calc(var(--radius, 12px) * .6); text-align:center; }
  .wsp-nlinline .nli-input:focus{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
  .wsp-nlinline .nli-btn{ border-radius:calc(var(--radius, 12px) * .6); width:100%;
    justify-content:center; margin-top:10px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-nlinline .nli-form.is-done .nli-done{ animation:none; }
}
/* --- portfoliogrid · variant "portfolio-grid" (SB_04 components/sections port) --- */
.wsp-pgwork .ws-shead{ margin-bottom:clamp(22px,2.8cqw,32px); }

.wsp-pgwork .pgw-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:clamp(26px,3.4cqw,40px); }
.wsp-pgwork .pgw-fbtn{ font:500 12.5px/1.4 var(--font); letter-spacing:.3px; color:var(--dim); background:transparent; border:var(--bw, 1px) solid var(--hair); border-radius:999px; padding:.5em 1.15em; cursor:pointer; appearance:none; -webkit-appearance:none; transition:color .25s ease, border-color .25s ease; }
.wsp-pgwork .pgw-fbtn:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.wsp-pgwork .pgw-fbtn.on{ color:var(--accent-text, var(--bg)); background:var(--accent); border-color:var(--accent); }
.wsp-pgwork .pgw-fbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wsp-pgwork .pgw-grid{ display:grid; grid-template-columns:1fr; gap:clamp(16px,2.2cqw,24px); }
.wsp-pgwork .pgw-card{ position:relative; display:flex; flex-direction:column; background:var(--panel); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; transition:transform .3s ease, border-color .25s ease; }
.wsp-pgwork .pgw-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.wsp-pgwork .pgw-card.is-hidden{ display:none; }

.wsp-pgwork .pgw-thumb{ position:relative; aspect-ratio:3 / 2; overflow:hidden; background:radial-gradient(130% 130% at 85% 8%, var(--accent-fill2, var(--accent-fill)) 0%, transparent 58%), var(--panel-2, var(--panel)); }
.wsp-pgwork .pgw-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.wsp-pgwork .pgw-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 clamp(30px,7cqw,52px)/1 var(--font-head, var(--font)); letter-spacing:2px; color:var(--faint); opacity:.5; transition:transform .4s ease; }
.wsp-pgwork .pgw-card:hover .pgw-img,
.wsp-pgwork .pgw-card:hover .pgw-ph{ transform:scale(1.05); }

.wsp-pgwork .pgw-ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(6,9,16,.68); opacity:0; transition:opacity .3s ease; }
.wsp-pgwork .pgw-card:hover .pgw-ov,
.wsp-pgwork .pgw-card:focus-within .pgw-ov{ opacity:1; }
.wsp-pgwork .pgw-view{ font:600 11px/1.4 var(--font); letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.92); text-decoration:none; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:.6em 1.5em; transition:color .25s ease, border-color .25s ease; }
.wsp-pgwork a.pgw-view:hover,
.wsp-pgwork a.pgw-view:focus-visible{ color:#fff; border-color:rgba(255,255,255,.78); outline:none; }

.wsp-pgwork .pgw-body{ padding:clamp(14px,2cqw,18px); display:flex; flex-direction:column; gap:8px; flex:1; }
.wsp-pgwork .pgw-tag{ align-self:flex-start; font:600 10px/1.3 var(--mono, var(--font)); letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); background:color-mix(in srgb, var(--ink) 8%, transparent); border:var(--bw, 1px) solid var(--hair-soft, var(--hair)); border-radius:5px; padding:.4em .68em; }
.wsp-pgwork .pgw-title{ margin:0; font:600 clamp(15px,1.9cqw,18px)/1.3 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-pgwork .pgw-desc{ margin:0; font:400 clamp(13px,1.5cqw,14px)/1.55 var(--font); color:var(--dim); }

@container site (min-width:560px){
  .wsp-pgwork .pgw-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (min-width:900px){
  .wsp-pgwork .pgw-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-pgwork .pgw-img,
  .wsp-pgwork .pgw-ph,
  .wsp-pgwork .pgw-ov,
  .wsp-pgwork .pgw-view,
  .wsp-pgwork .pgw-fbtn,
  .wsp-pgwork .pgw-card{ transition:none; }
  .wsp-pgwork .pgw-card:hover{ transform:none; }
  .wsp-pgwork .pgw-card:hover .pgw-img,
  .wsp-pgwork .pgw-card:hover .pgw-ph{ transform:none; }
}
/* --- featuredisplay · "Photo Showcase" variant (SB_04 · components/sections/feature-display port) --- */
.wsp-fdphoto .fdp-rows{ display:flex; flex-direction:column; gap:clamp(32px,5cqw,64px); margin-top:clamp(30px,4cqw,52px); }
.wsp-fdphoto .fdp-row{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(32px,5.4cqw,76px); align-items:center; }
.wsp-fdphoto .fdp-row + .fdp-row{ border-top:var(--bw, 1px) solid var(--hair); padding-top:clamp(30px,4.6cqw,58px); }
.wsp-fdphoto .fdp-row.flip{ grid-template-columns:0.85fr 1.15fr; }
.wsp-fdphoto .fdp-row.flip .fdp-vis{ order:2; }
.wsp-fdphoto .fdp-row.flip .fdp-text{ order:1; }

/* image side — a real 4:3 product frame, always */
.wsp-fdphoto .fdp-vis{ display:flex; justify-content:center; min-width:0; }
.wsp-fdphoto .fdp-frame{ position:relative; width:100%; max-width:600px; aspect-ratio:4 / 3;
  border-radius:14px; overflow:hidden; border:var(--bw, 1px) solid var(--hair);
  background:var(--panel) center/cover no-repeat; box-shadow:0 14px 40px rgba(0,0,0,0.24);
  transform:perspective(1100px) rotateY(2.5deg);
  transition:transform 0.5s cubic-bezier(.2,.8,.25,1), box-shadow 0.5s ease; }
.wsp-fdphoto .fdp-row.flip .fdp-frame{ transform:perspective(1100px) rotateY(-2.5deg); }
/* glass gloss overlay */
.wsp-fdphoto .fdp-frame::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 6%, transparent) 0%, transparent 44%); }
/* glow border on hover */
.wsp-fdphoto .fdp-frame::after{ content:''; position:absolute; inset:-1px; z-index:1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, var(--accent-fill, color-mix(in srgb, var(--accent) 22%, transparent)) 50%, transparent 100%);
  opacity:0; transition:opacity 0.45s ease; }
.wsp-fdphoto .fdp-row:hover .fdp-frame{ transform:perspective(1100px) rotateY(0deg) translateY(-5px); box-shadow:0 22px 54px rgba(0,0,0,0.3); }
.wsp-fdphoto .fdp-row:hover .fdp-frame::after{ opacity:1; }
/* themed placeholder when no photo is set */
.wsp-fdphoto .fdp-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 100% at 22% 16%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--panel-2, var(--panel)) 0%, var(--panel) 100%); }
.wsp-fdphoto .fdp-ph svg{ width:38px; height:38px; color:var(--accent); opacity:0.26; }

/* text side */
.wsp-fdphoto .fdp-text{ display:flex; flex-direction:column; gap:clamp(12px,1.6cqw,18px); max-width:520px; min-width:0; }
.wsp-fdphoto .fdp-title{ margin:0; position:relative; padding-bottom:16px; width:fit-content; text-wrap:balance;
  font:700 clamp(21px,3.1cqw,32px)/1.16 var(--font-head, var(--font)); letter-spacing:-0.01em; color:var(--ink);
  background:linear-gradient(135deg, var(--accent), var(--accent2, var(--accent-dim, var(--accent))));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wsp-fdphoto .fdp-title::after{ content:''; position:absolute; left:0; bottom:0; width:56px; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent); opacity:0.6; }
.wsp-fdphoto .fdp-desc{ margin:0; font:400 clamp(14px,1.7cqw,16px)/1.7 var(--font); color:var(--dim); }

/* solid accent CTA with a shine sweep */
.wsp-fdphoto .fdp-cta{ display:inline-flex; align-items:center; width:fit-content; margin-top:8px; cursor:pointer;
  text-decoration:none; padding:12px 24px; border-radius:calc(var(--radius, 12px) * .55);
  font:600 clamp(13px,1.4cqw,14px) var(--font); position:relative; overflow:hidden;
  color:var(--accent-text, #04121a); background:var(--accent); border:1px solid transparent;
  transition:transform 0.2s ease, box-shadow 0.25s ease; }
.wsp-fdphoto .fdp-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent); }
.wsp-fdphoto .fdp-cta:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-fdphoto .fdp-cta::before{ content:''; position:absolute; inset:0; transform:translateX(-100%); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); transition:transform 0.6s ease; }
.wsp-fdphoto .fdp-cta:hover::before{ transform:translateX(100%); }

@container site (max-width:720px){
  .wsp-fdphoto .fdp-row, .wsp-fdphoto .fdp-row.flip{ grid-template-columns:1fr; gap:24px; }
  .wsp-fdphoto .fdp-row.flip .fdp-vis, .wsp-fdphoto .fdp-vis{ order:0; }
  .wsp-fdphoto .fdp-row.flip .fdp-text, .wsp-fdphoto .fdp-text{ order:0; max-width:none; align-items:center; text-align:center; }
  .wsp-fdphoto .fdp-frame, .wsp-fdphoto .fdp-row.flip .fdp-frame{ transform:none; max-width:100%; }
  .wsp-fdphoto .fdp-title{ margin-inline:auto; }
  .wsp-fdphoto .fdp-title::after{ left:50%; transform:translateX(-50%); width:72px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-fdphoto .fdp-frame, .wsp-fdphoto .fdp-row.flip .fdp-frame,
  .wsp-fdphoto .fdp-row:hover .fdp-frame{ transform:none; transition:none; }
  .wsp-fdphoto .fdp-frame::after, .wsp-fdphoto .fdp-cta, .wsp-fdphoto .fdp-cta::before{ transition:none; }
}
/* --- newsletter · dark (SB_04 port: components/newsletter/dark) ---
   A self-contained midnight contrast BAND: it paints its own deep-charcoal rounded surface so it
   reads as an intentional dark section on ANY site theme (distinct from the theme-following inline
   variant and the ghost-outline bordered card). Brand --accent still cascades in to tint the ambient
   glow, the label pill, the focus ring and links; the submit button is the signature inverted light
   fill (readable on the dark band + on light/dark themes alike). Only hover/transform + the success
   collapse move — the ambient glow is static and reduced-motion is honored; entrances belong to the
   site reveal system. Own wsp-nldark / nld-* family. */
.wsp-nldark .nld-band{ position:relative; overflow:hidden; isolation:isolate;
  max-width:min(1120px, 92cqw); margin-inline:auto;
  /* forced dark surface — the variant's signature; a hint of brand accent bleeds through */
  --nld-surface:color-mix(in srgb, #0b0d12 90%, var(--accent));
  --nld-ink:#f4f5f7; --nld-dim:#9aa2ad; --nld-hair:color-mix(in srgb, #ffffff 12%, transparent);
  background:var(--nld-surface); color:var(--nld-ink);
  border:1px solid color-mix(in srgb, #ffffff 8%, transparent);
  border-radius:var(--radius, 14px);
  padding:clamp(40px, 7cqi, 88px) clamp(20px, 5cqi, 56px); }
.wsp-nldark .nld-glow{ position:absolute; inset:-45% 0 auto 0; height:75%; z-index:0; pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 70%); }
/* bound the column to the BAND's content box, not the stage's 88cqw (which overflows the band on narrow widths) */
.wsp-nldark .nld-in{ position:relative; z-index:1; width:100%; max-width:600px; margin-inline:auto; }
.wsp-nldark .nld-copy{ max-width:560px; margin-inline:auto; }
.wsp-nldark .nld-label{ display:inline-block; margin-bottom:16px; padding:5px 13px;
  font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 78%, #ffffff);
  border:1px solid var(--nld-hair); border-radius:99px; }
.wsp-nldark .nld-title{ margin:0; color:var(--nld-ink); }
.wsp-nldark .nld-desc{ margin-top:12px; margin-inline:auto; max-width:48ch; color:var(--nld-dim); }

.wsp-nldark .nld-form{ width:min(480px, 100%); margin:28px auto 0; display:flex;
  flex-direction:column; gap:12px; }
.wsp-nldark .nld-row{ display:flex; align-items:stretch; gap:0; overflow:hidden;
  border:1px solid var(--nld-hair); background:color-mix(in srgb, #ffffff 6%, transparent);
  border-radius:calc(var(--radius, 12px) * .7);
  transition:border-color .18s ease, box-shadow .18s ease; }
.wsp-nldark .nld-row:focus-within{ border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.wsp-nldark .nld-input{ flex:1 1 auto; min-width:0; background:transparent; border:none;
  outline:none; color:var(--nld-ink); font:400 14px var(--font); padding:13px 16px; text-align:left;
  -webkit-appearance:none; appearance:none; }
.wsp-nldark .nld-input::placeholder{ color:color-mix(in srgb, var(--nld-dim) 78%, transparent); }
.wsp-nldark .nld-input:disabled{ opacity:.55; }
/* signature inverted light-fill submit — always readable on the dark band */
.wsp-nldark .nld-btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:0; cursor:pointer; white-space:nowrap;
  padding:13px 22px; font:600 13.5px var(--font); letter-spacing:.01em;
  color:#0b0d12; background:var(--nld-ink);
  transition:background-color .18s ease, transform .12s ease; }
.wsp-nldark .nld-btn:hover{ background:#ffffff; }
.wsp-nldark .nld-btn:active{ transform:scale(.98); }
.wsp-nldark .nld-btn:disabled{ opacity:.6; cursor:default; }
.wsp-nldark .nld-btn::after{ content:" \2192"; margin-left:.35em; }

.wsp-nldark .nld-fine{ margin:0 auto; max-width:46ch;
  font:400 11.5px/1.55 var(--font); color:color-mix(in srgb, var(--nld-dim) 76%, transparent); }
.wsp-nldark .nld-link{ color:color-mix(in srgb, var(--accent) 80%, #ffffff);
  text-decoration:underline; text-underline-offset:2px; transition:color .18s ease; }
.wsp-nldark .nld-link:hover{ color:#ffffff; }
.wsp-nldark .nld-msg{ margin-top:2px; }
.wsp-nldark .nld-msg.ok{ color:color-mix(in srgb, var(--accent) 80%, #ffffff); }

/* success — the form collapses into a confirmation row */
.wsp-nldark .nld-done{ display:none; align-items:center; justify-content:center; gap:10px;
  width:min(480px, 100%); margin:28px auto 0; padding:13px 18px; color:var(--nld-ink);
  font:500 14px var(--font); border-radius:calc(var(--radius, 12px) * .7);
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--nld-hair));
  background:color-mix(in srgb, var(--accent) 16%, transparent); }
.wsp-nldark .nld-check{ display:flex; flex:0 0 auto; color:color-mix(in srgb, var(--accent) 82%, #ffffff); }
.wsp-nldark .nld-check svg{ width:18px; height:18px; }
.wsp-nldark .nld-form.is-done .nld-row,
.wsp-nldark .nld-form.is-done .nld-fine,
.wsp-nldark .nld-form.is-done .nld-msg{ display:none; }
.wsp-nldark .nld-form.is-done .nld-done{ display:flex; animation:nld-rise .3s ease both; }
@keyframes nld-rise{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

@container site (max-width:460px){
  .wsp-nldark .nld-band{ border-radius:calc(var(--radius, 14px) * .8); padding:36px 18px; }
  .wsp-nldark .nld-row{ flex-direction:column; overflow:visible; border:none;
    background:transparent; box-shadow:none; }
  .wsp-nldark .nld-row:focus-within{ box-shadow:none; }
  .wsp-nldark .nld-input{ border:1px solid var(--nld-hair);
    background:color-mix(in srgb, #ffffff 6%, transparent);
    border-radius:calc(var(--radius, 12px) * .6); text-align:center; }
  .wsp-nldark .nld-input:focus{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
  .wsp-nldark .nld-btn{ border-radius:calc(var(--radius, 12px) * .6); width:100%; margin-top:10px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-nldark .nld-btn, .wsp-nldark .nld-row{ transition:none; }
  .wsp-nldark .nld-form.is-done .nld-done{ animation:none; }
}
/* Newsletter · Dark Card — ported from SB_04 components/newsletter/dark-card.
   A filled, RAISED surface card (var(--panel-2) fill + hairline + soft lift), the
   solid twin of the bordered ghost card (.ws-cta.v-nlbd): outline label pill,
   centered copy, a joined email field recessed to the page bg + subscribe button,
   and a live-validated privacy line that collapses into an inline confirmation.
   Origin --nl-dark/--nl-card palette → theme tokens (the "dark" look comes from
   the theme, not a baked hex, so it reads on light themes too); baked entrance
   anim dropped (the reveal system owns entrances); wiring (validEmail + per-site
   memory) lives in convert.js. All selectors namespaced .v-nldc / .nldc-* (wave2 tsk_mrj94pw3zz2). */
.ws-cta.v-nldc .ws-in { max-width:760px; }
.ws-cta.v-nldc .nldc-card { text-align:center;
  padding:clamp(38px, 6cqw, 64px) clamp(24px, 5cqw, 52px);
  border-radius:calc(var(--radius, 12px) * 1.4);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel-2, var(--panel));
  box-shadow:0 18px 50px rgba(0,0,0,.28); }
.ws-cta.v-nldc .nldc-copy { max-width:520px; margin:0 auto; }
.ws-cta.v-nldc .nldc-label { display:inline-block; margin-bottom:16px; padding:5px 13px;
  font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  border:var(--bw, 1px) solid var(--hair); border-radius:99px; }
.ws-cta.v-nldc .nldc-card .ws-h2 { margin:0; }
.ws-cta.v-nldc .nldc-desc { margin-top:12px; margin-inline:auto; max-width:48ch; }
.ws-cta.v-nldc .nldc-form { max-width:480px; margin:26px auto 0; display:flex; flex-direction:column; gap:12px; }
.ws-cta.v-nldc .nldc-row { display:flex; gap:0; align-items:stretch; overflow:hidden;
  border-radius:calc(var(--radius, 12px) * .7);
  border:var(--bw, 1px) solid var(--hair); background:var(--bg);
  transition:border-color 160ms ease-out, box-shadow 160ms ease-out; }
.ws-cta.v-nldc .nldc-row:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 3px var(--accent-fill); }
.ws-cta.v-nldc .nldc-input { flex:1 1 auto; min-width:0; padding:13px 16px; border:none; outline:none;
  background:transparent; color:var(--ink); font:400 14px var(--font); text-align:left;
  -webkit-appearance:none; appearance:none; }
.ws-cta.v-nldc .nldc-input::placeholder { color:var(--faint); }
.ws-cta.v-nldc .nldc-input:disabled { opacity:.55; }
.ws-cta.v-nldc .nldc-btn { flex:0 0 auto; border-radius:0; }
.ws-cta.v-nldc .nldc-btn::after { content:" \2192"; margin-left:.15em; }
.ws-cta.v-nldc .nldc-fine { margin:0 auto; max-width:46ch; font:400 11.5px/1.55 var(--font); color:var(--faint); }
.ws-cta.v-nldc .nldc-link { color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  transition:color .18s ease; }
.ws-cta.v-nldc .nldc-link:hover { color:var(--ink); }
.ws-cta.v-nldc .nldc-msg { display:block; min-height:1.4em; font:500 12px var(--font); font-style:normal; margin-top:2px; }
.ws-cta.v-nldc .nldc-msg.ok  { color:var(--accent); }
.ws-cta.v-nldc .nldc-msg.bad { color:#f87171; }
/* success — the form collapses into a confirmation row */
.ws-cta.v-nldc .nldc-done { display:none; align-items:center; justify-content:center; gap:10px;
  max-width:480px; margin:26px auto 0; padding:13px 18px; color:var(--ink);
  font:500 14px var(--font); border-radius:calc(var(--radius, 12px) * .7);
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--hair)); background:var(--accent-fill); }
.ws-cta.v-nldc .nldc-check { display:flex; flex:0 0 auto; color:var(--accent); }
.ws-cta.v-nldc .nldc-check svg { width:18px; height:18px; }
.ws-cta.v-nldc .nldc-form.is-done .nldc-row,
.ws-cta.v-nldc .nldc-form.is-done .nldc-fine,
.ws-cta.v-nldc .nldc-form.is-done .nldc-msg { display:none; }
.ws-cta.v-nldc .nldc-form.is-done .nldc-done { display:flex; animation:nldc-rise .3s ease both; }
@keyframes nldc-rise { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@container site (max-width: 480px) {
  .ws-cta.v-nldc .nldc-row { flex-direction:column; overflow:visible; border:none; background:transparent; box-shadow:none; }
  .ws-cta.v-nldc .nldc-row:focus-within { box-shadow:none; }
  .ws-cta.v-nldc .nldc-input { border:var(--bw, 1px) solid var(--hair); background:var(--bg);
    border-radius:calc(var(--radius, 12px) * .6); text-align:center; }
  .ws-cta.v-nldc .nldc-input:focus { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
  .ws-cta.v-nldc .nldc-btn { border-radius:calc(var(--radius, 12px) * .6); width:100%; justify-content:center; margin-top:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-cta.v-nldc .nldc-form.is-done .nldc-done { animation:none; }
  .ws-cta.v-nldc .nldc-row { transition:none; }
}
/* you-know-lately (SB_04 port · components/full-page/you-know-lately) — a full-bleed
   vertical "thought stream": each card fills the site stage in its own chained
   colourway, diagonal clip-path edges wipe between them as you scroll, and a working
   inverted-palette menu slides in. The overlay rides the blessed sticky-top/height:0 +
   cqh panel pattern (mirrors .ws-menu) so it never escapes the scaled builder preview —
   no position:fixed, no blur. Per-card colours arrive as inline --yb/--yt vars. */
.ws-hero.v-ykl { padding:0; overflow:visible; }          /* full-bleed; sticky menu + edges resolve to the stage */
.v-ykl .ykl-stream { position:relative; }
.v-ykl .ykl-card { position:relative; min-height:100cqh; background:var(--yb, #141414); color:var(--yt, #ffffff);
  font-family:var(--font-head, var(--font)); }
/* diagonal divider — a triangle of THIS card's colour reaching up over the card above (origin's .card-edge) */
.v-ykl .ykl-edge { position:absolute; left:0; right:0; bottom:calc(100% - 1px); height:clamp(44px, 8cqh, 84px);
  background:var(--yb, #141414); clip-path:polygon(100% 0, 100% 100%, 0 100%); pointer-events:none; }
.v-ykl .ykl-card:first-of-type .ykl-edge { display:none; }
/* pinned frame — nav up top, the thought centred, the label footer down low */
.v-ykl .ykl-pin { position:relative; min-height:100cqh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(72px, 14cqh, 120px) clamp(24px, 5cqw, 56px); text-align:center; }
.v-ykl .ykl-nav { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(15px, 2.4cqh, 22px) clamp(20px, 3cqw, 32px); }
.v-ykl .ykl-logo { font-weight:900; font-size:clamp(15px, 1.7cqw, 20px); letter-spacing:.08em; text-transform:uppercase; }
.v-ykl .ykl-proj { font-weight:700; font-size:clamp(11px, 1.2cqw, 14px); letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.v-ykl .ykl-burger { display:flex; flex-direction:column; gap:6px; padding:6px; background:none; border:0; cursor:pointer; color:inherit; }
.v-ykl .ykl-burger span { display:block; width:30px; height:3px; background:currentColor; border-radius:2px;
  transition:transform .3s ease, opacity .2s linear; }
.v-ykl .ykl-burger.ykl-on span:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.v-ykl .ykl-burger.ykl-on span:nth-child(2) { opacity:0; }
.v-ykl .ykl-burger.ykl-on span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }
.v-ykl .ykl-heading { margin:0; font-weight:900; font-size:clamp(40px, 11cqw, 116px); line-height:.95; letter-spacing:-0.03em; }
.v-ykl .ykl-foot { position:absolute; left:0; right:0; bottom:clamp(26px, 6cqh, 74px); display:flex; align-items:baseline;
  justify-content:center; gap:10px; font-family:var(--font); font-weight:700; font-size:clamp(11px, 1.2cqw, 14px);
  letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.v-ykl .ykl-num { font-variant-numeric:tabular-nums; opacity:.85; }
.v-ykl .ykl-end .ykl-pin { justify-content:flex-end; padding-bottom:clamp(32px, 8cqh, 64px); }
.v-ykl .ykl-endmsg { margin:0; font-family:var(--font); font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.55; }
/* menu overlay — sticky/height:0 anchor + absolute cqh panel (mirrors .ws-menu; never position:fixed) */
.v-ykl .ykl-menu { position:sticky; top:0; height:0; z-index:60; }
.v-ykl .ykl-mpanel { position:absolute; left:0; top:0; width:100%; height:100cqh;
  background:var(--ymb, var(--ink)); color:var(--ymt, var(--bg)); font-family:var(--font-head, var(--font));
  display:flex; flex-direction:column; justify-content:center; padding:0 clamp(24px, 5cqw, 56px);
  clip-path:inset(0 0 0 100%); transition:clip-path .5s cubic-bezier(.25, .46, .45, .94);
  pointer-events:none; visibility:hidden; }
.v-ykl .ykl-menu.open .ykl-mpanel { clip-path:inset(0 0 0 0); pointer-events:auto; visibility:visible; }
.v-ykl .ykl-menubar { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(15px, 2.4cqh, 22px) clamp(20px, 3cqw, 32px); }
.v-ykl .ykl-close { display:flex; flex-direction:column; gap:6px; padding:6px; background:none; border:0; cursor:pointer; color:inherit; }
.v-ykl .ykl-close span { display:block; width:30px; height:3px; background:currentColor; border-radius:2px;
  transition:transform .3s ease, opacity .2s linear; }
.v-ykl .ykl-close span:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.v-ykl .ykl-close span:nth-child(2) { opacity:0; }
.v-ykl .ykl-close span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }
.v-ykl .ykl-menunav { display:flex; flex-direction:column; gap:clamp(6px, 1.4cqh, 16px); }
.v-ykl .ykl-menunav a { width:max-content; max-width:100%; font-weight:900; font-size:clamp(40px, 11cqw, 116px);
  line-height:.95; letter-spacing:-0.03em; text-transform:lowercase; color:inherit; text-decoration:none;
  transition:opacity .2s linear; }
.v-ykl .ykl-menunav a:hover { opacity:.6; }
/* narrow: left-align the thought, hide the project label (origin's mobile behaviour) */
@container site (max-width: 860px) {
  .v-ykl .ykl-pin { text-align:left; align-items:flex-start; }
  .v-ykl .ykl-foot { justify-content:flex-start; }
  .v-ykl .ykl-proj { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-ykl .ykl-mpanel { transition:none; }
  .v-ykl .ykl-burger span, .v-ykl .ykl-close span, .v-ykl .ykl-menunav a { transition:none; }
}
/* --- secstatsrow (SB_04 port) --- */
.wsp-secstatsrow .sr-items{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(28px,3.5cqw,40px) clamp(20px,2.5cqw,32px); width:min(72rem,92cqw); margin:0 auto; text-align:center; }
.wsp-secstatsrow .sr-stat{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; min-width:0; }
.wsp-secstatsrow .sr-value{ font-family:var(--font-head,var(--font)); font-size:clamp(2.2rem,6cqw,3.75rem); font-weight:700; letter-spacing:-0.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.wsp-secstatsrow .sr-label{ font-size:0.75rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); line-height:1.35; }
@container site (max-width:640px){
  .wsp-secstatsrow .sr-items{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,6cqw,38px) 1.5rem; width:min(30rem,94cqw); }
}

/* --- secteamgrid (SB_04 port) --- */
.wsp-secteamgrid{ --tgav:clamp(82px, 8cqw, 112px); --tgcols:4; }
.wsp-secteamgrid .ws-shead{ max-width:36rem; margin-bottom:clamp(40px, 4.6cqw, 60px); }
.wsp-secteamgrid .tg-grid{ display:grid; grid-template-columns:repeat(var(--tgcols), 1fr);
  gap:clamp(30px, 3.4cqw, 48px) clamp(18px, 2.2cqw, 30px); }
.wsp-secteamgrid .tg-card{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.wsp-secteamgrid .tg-avatar{ width:var(--tgav); height:var(--tgav); border-radius:50%;
  display:grid; place-items:center; overflow:hidden; margin-bottom:16px;
  background:var(--panel-2, var(--panel)); border:2px solid var(--hair);
  transition:border-color .3s ease, transform .3s ease; }
.wsp-secteamgrid .tg-card:hover .tg-avatar{ border-color:var(--accent); transform:scale(1.05); }
.wsp-secteamgrid .tg-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.wsp-secteamgrid .tg-initials{ font:600 clamp(18px, 1.9cqw, 24px)/1 var(--font-head, var(--font));
  letter-spacing:.04em; color:color-mix(in srgb, var(--ink) 58%, var(--accent)); }
.wsp-secteamgrid .tg-name{ font:600 15px var(--font); color:var(--ink); margin-bottom:3px; }
.wsp-secteamgrid .tg-role{ font:400 12.5px var(--font); color:var(--dim); margin-bottom:11px; }
.wsp-secteamgrid .tg-social{ display:flex; gap:8px; justify-content:center; }
.wsp-secteamgrid .tg-social .ws-social{ width:30px; height:30px; border:none; border-radius:50%;
  color:var(--faint); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.wsp-secteamgrid .tg-social .ws-social:hover{ color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.wsp-secteamgrid .tg-social .ws-social svg{ width:15px; height:15px; }
@container site (max-width:900px){ .wsp-secteamgrid{ --tgcols:3; } }
@container site (max-width:620px){ .wsp-secteamgrid{ --tgcols:2; } }
@container site (max-width:430px){ .wsp-secteamgrid{ --tgcols:1; } }
@media (prefers-reduced-motion: reduce){
  .wsp-secteamgrid .tg-avatar{ transition:none; }
  .wsp-secteamgrid .tg-card:hover .tg-avatar{ transform:none; }
}

/* --- sectimelinesection (SB_04 port) --- */
.wsp-sectimelinesection .tl-track{ position:relative; width:min(920px,100%); margin:0 auto; padding:0 0 24px; }
.wsp-sectimelinesection .tl-track::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--hair); transform:translateX(-50%); }
.wsp-sectimelinesection .tl-item{ display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; gap:0 24px; margin-bottom:56px; }
.wsp-sectimelinesection .tl-item:last-child{ margin-bottom:0; }
.wsp-sectimelinesection .tl-item.is-left .tl-content{ grid-column:1; text-align:right; padding-right:8px; }
.wsp-sectimelinesection .tl-item.is-left .tl-node{ grid-column:2; }
.wsp-sectimelinesection .tl-item.is-right .tl-node{ grid-column:2; }
.wsp-sectimelinesection .tl-item.is-right .tl-content{ grid-column:3; text-align:left; padding-left:8px; }

.wsp-sectimelinesection .tl-node{ width:14px; height:14px; border-radius:50%; background:var(--panel); border:2px solid var(--hair); margin:0 auto; position:relative; z-index:1; transition:transform .25s ease, border-color .25s ease; }
.wsp-sectimelinesection .tl-node.is-active{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

.wsp-sectimelinesection .tl-content{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius, 12px); padding:24px 28px; transition:transform .25s ease, border-color .25s ease; }
.wsp-sectimelinesection .tl-content:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.wsp-sectimelinesection .tl-year{ display:inline-block; font:700 11px/1 var(--mono, var(--font)); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.wsp-sectimelinesection .tl-etitle{ margin:0 0 8px; font:600 17px/1.3 var(--font-head, var(--font)); letter-spacing:-.01em; color:var(--ink); }
.wsp-sectimelinesection .tl-ebody{ margin:0; font:400 14px/1.65 var(--font); color:var(--dim); }

@container site (max-width:680px){
  .wsp-sectimelinesection .tl-track{ width:100%; }
  .wsp-sectimelinesection .tl-track::before{ left:20px; transform:none; }
  .wsp-sectimelinesection .tl-item{ grid-template-columns:40px 1fr; }
  .wsp-sectimelinesection .tl-item.is-left .tl-content,
  .wsp-sectimelinesection .tl-item.is-right .tl-content{ grid-column:2; grid-row:1; text-align:left; padding:22px 24px; }
  .wsp-sectimelinesection .tl-item.is-left .tl-node,
  .wsp-sectimelinesection .tl-item.is-right .tl-node{ grid-column:1; grid-row:1; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-sectimelinesection .tl-node,
  .wsp-sectimelinesection .tl-content{ transition:none; }
  .wsp-sectimelinesection .tl-content:hover{ transform:none; }
}

/* --- secvideosection (SB_04 port) --- */
.wsp-secvideosection .vs-player{ position:relative; width:100%; aspect-ratio:16/9; margin:0 auto; display:grid; place-items:center; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; cursor:pointer; }
.wsp-secvideosection .vs-player:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-secvideosection .vs-poster{ position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, var(--panel) 0%, var(--panel-2,var(--panel)) 52%, var(--bg-deep,var(--bg)) 100%); }
.wsp-secvideosection .vs-poster::after{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size:60px 60px; }
.wsp-secvideosection .vs-play{ position:relative; z-index:2; width:clamp(58px,10cqw,72px); height:clamp(58px,10cqw,72px); border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); color:#fff; transition:transform .2s ease, color .2s ease; }
.wsp-secvideosection .vs-play svg{ width:clamp(24px,4.4cqw,28px); height:clamp(24px,4.4cqw,28px); margin-left:3px; }
.wsp-secvideosection .vs-play rect{ margin-left:0; }
.wsp-secvideosection .vs-player:hover .vs-play, .wsp-secvideosection .vs-player:focus-visible .vs-play{ background:var(--accent); color:var(--accent-text,#08121f); transform:scale(1.08); }
.wsp-secvideosection .vs-play::before{ content:''; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--accent); opacity:.55; animation:wsp-vspulse 2.4s ease-in-out infinite; }
@keyframes wsp-vspulse{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.16); opacity:0; } }
.wsp-secvideosection .vs-dur{ position:absolute; z-index:2; bottom:16px; right:18px; font:600 12px/1 var(--mono,var(--font)); letter-spacing:.04em; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.78); background:rgba(0,0,0,.55); padding:4px 8px; border-radius:6px; }
.wsp-secvideosection .vs-progress{ position:absolute; z-index:3; left:0; bottom:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:var(--accent); opacity:0; transition:opacity .2s ease; }
.wsp-secvideosection .vs-embed{ position:absolute; inset:0; z-index:4; }
.wsp-secvideosection .vs-embed video, .wsp-secvideosection .vs-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.wsp-secvideosection .vs-player.playing .vs-play::before{ animation:none; opacity:0; }
.wsp-secvideosection .vs-player.playing:not(.demo) .vs-poster, .wsp-secvideosection .vs-player.playing:not(.demo) .vs-play, .wsp-secvideosection .vs-player.playing:not(.demo) .vs-dur{ opacity:0; visibility:hidden; }
.wsp-secvideosection .vs-caps{ display:flex; margin-top:24px; border:1px solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; }
.wsp-secvideosection .vs-cap{ flex:1; display:flex; flex-direction:column; gap:5px; padding:15px 20px; text-align:left; background:transparent; border:0; border-right:1px solid var(--hair); box-shadow:inset 0 0 0 0 var(--accent); cursor:pointer; font:inherit; color:inherit; transition:color .15s ease, box-shadow .15s ease; }
.wsp-secvideosection .vs-cap:last-child{ border-right:none; }
.wsp-secvideosection .vs-cap:hover{ background:var(--panel); }
.wsp-secvideosection .vs-cap:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.wsp-secvideosection .vs-cap.on{ background:var(--panel); box-shadow:inset 0 2px 0 0 var(--accent); }
.wsp-secvideosection .vs-cap-t{ font:700 11px/1 var(--mono,var(--font)); font-variant-numeric:tabular-nums; letter-spacing:.04em; color:var(--accent); }
.wsp-secvideosection .vs-cap-x{ font-size:13px; line-height:1.42; color:var(--dim); }
@container site (max-width:600px){
  .wsp-secvideosection .vs-caps{ flex-direction:column; }
  .wsp-secvideosection .vs-cap{ border-right:none; border-bottom:1px solid var(--hair); }
  .wsp-secvideosection .vs-cap:last-child{ border-bottom:none; }
  .wsp-secvideosection .vs-cap.on{ box-shadow:inset 2px 0 0 0 var(--accent); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secvideosection .vs-play::before{ animation:none; }
}

/* --- secquoteblock (SB_04 port) --- */
.wsp-secquoteblock{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.wsp-secquoteblock .ws-in{ width:min(820px, 88cqw); }
.wsp-secquoteblock .qb-mark{ display:block; font-family:var(--font-head, var(--font)); font-size:clamp(72px, 16cqw, 200px); line-height:0.7; color:var(--accent); opacity:0.14; margin-bottom:-18px; user-select:none; }
.wsp-secquoteblock .qb-quote{ margin:0; border:none; padding:0; }
.wsp-secquoteblock .qb-text{ margin:0 0 40px; font-family:var(--font-head, var(--font)); font-size:clamp(20px, 3.6cqw, 38px); font-weight:400; font-style:italic; line-height:1.4; letter-spacing:-0.01em; color:var(--ink); }
.wsp-secquoteblock .qb-attr{ display:flex; align-items:center; gap:20px; }
.wsp-secquoteblock .qb-attr::before{ content:''; display:block; width:40px; height:1px; background:var(--accent); flex-shrink:0; }
.wsp-secquoteblock .qb-cite{ font-style:normal; display:flex; flex-direction:column; gap:3px; }
.wsp-secquoteblock .qb-author{ font-size:15px; font-weight:500; color:var(--ink); }
.wsp-secquoteblock .qb-role{ font-size:13px; color:var(--dim); }
@container site (max-width:540px){
  .wsp-secquoteblock .qb-text{ margin-bottom:32px; }
  .wsp-secquoteblock .qb-mark{ margin-bottom:-12px; }
  .wsp-secquoteblock .qb-attr{ gap:16px; }
}

/* --- seccareersection (SB_04 port) --- */
.wsp-seccareersection .cs-head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:48px; }
.wsp-seccareersection .cs-head-text .ws-kick{ margin-bottom:12px; }
.wsp-seccareersection .cs-head-text .ws-h2{ margin-bottom:12px; }
.wsp-seccareersection .cs-head-text .ws-sub{ max-width:52ch; }

.wsp-seccareersection .cs-perks{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-self:center; }
.wsp-seccareersection .cs-perk{ display:flex; align-items:center; gap:10px; font-size:13px; line-height:1.4; color:var(--dim); }
.wsp-seccareersection .cs-perk-ico{ font-size:18px; line-height:1; flex:none; }

.wsp-seccareersection .cs-roles{ border:1px solid var(--hair); border-radius:var(--radius,12px); overflow:hidden; margin-bottom:24px; }
.wsp-seccareersection .cs-role{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px; border-bottom:1px solid var(--hair); text-decoration:none; color:inherit; cursor:pointer; }
.wsp-seccareersection .cs-role:last-child{ border-bottom:none; }
.wsp-seccareersection .cs-role:hover{ background:var(--panel-2); }
.wsp-seccareersection .cs-role:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.wsp-seccareersection .cs-role-info{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.wsp-seccareersection .cs-role-title{ margin:0; font-size:16px; font-weight:600; line-height:1.3; color:var(--ink); }
.wsp-seccareersection .cs-role-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.wsp-seccareersection .cs-tag{ font-size:11px; font-weight:500; letter-spacing:.04em; padding:3px 10px; border-radius:100px; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); white-space:nowrap; }
.wsp-seccareersection .cs-role-arrow{ font-size:18px; line-height:1; color:var(--dim); flex:none; transition:color .15s ease, transform .15s ease; }
.wsp-seccareersection .cs-role:hover .cs-role-arrow{ color:var(--accent); transform:translateX(4px); }

.wsp-seccareersection .cs-foot{ display:flex; align-items:center; gap:16px; padding:0 4px; }
.wsp-seccareersection .cs-foot-text{ margin:0; font-size:14px; line-height:1.5; color:var(--dim); }
.wsp-seccareersection .cs-foot-link{ font-size:14px; font-weight:500; color:var(--accent); text-decoration:none; white-space:nowrap; cursor:pointer; transition:opacity .2s ease; }
.wsp-seccareersection .cs-foot-link:hover{ opacity:.75; }

@container site (max-width:768px){
  .wsp-seccareersection .cs-head{ grid-template-columns:1fr; gap:32px; }
  .wsp-seccareersection .cs-foot{ flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccareersection .cs-role-arrow{ transition:color .15s ease; }
  .wsp-seccareersection .cs-role:hover .cs-role-arrow{ transform:none; }
}

/* --- secpricingbento (SB_04 port) --- */
.wsp-secpricingbento .pb-grid{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:12px; margin-top:8px; }
.wsp-secpricingbento .pb-card{ position:relative; background:var(--panel); border:var(--bw,1px) solid var(--hair); border-radius:var(--radius,12px); padding:36px; }
.wsp-secpricingbento .pb-card--pro{ background:var(--panel-2); border-color:var(--accent); grid-row:span 2; }
.wsp-secpricingbento .pb-card--stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px; }
.wsp-secpricingbento .pb-card--guarantee{ display:flex; align-items:flex-start; gap:16px; grid-column:span 2; padding:28px 36px; }

.wsp-secpricingbento .pb-badge{ position:absolute; top:20px; right:20px; font:600 11px/1 var(--font); letter-spacing:0.06em; text-transform:uppercase; background:var(--accent); color:var(--accent-text, var(--bg)); padding:5px 11px; border-radius:100px; }
.wsp-secpricingbento .pb-plan{ display:block; font:600 13px/1 var(--font); letter-spacing:0.04em; text-transform:uppercase; color:var(--dim); }
.wsp-secpricingbento .pb-pricerow{ display:flex; align-items:baseline; gap:4px; margin:8px 0 24px; }
.wsp-secpricingbento .pb-price{ font:700 clamp(30px,4cqw,52px)/1 var(--font-head, var(--font)); letter-spacing:-0.03em; color:var(--ink); }
.wsp-secpricingbento .pb-period{ font:400 14px/1 var(--font); color:var(--dim); }

.wsp-secpricingbento .pb-feats{ list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:10px; }
.wsp-secpricingbento .pb-feats li{ display:flex; align-items:flex-start; gap:9px; font:400 14px/1.4 var(--font); color:var(--dim); }
.wsp-secpricingbento .pb-feats li svg{ flex:none; width:14px; height:14px; margin-top:1px; color:var(--accent); }
.wsp-secpricingbento .pb-card--pro .pb-feats li{ color:var(--ink); }

.wsp-secpricingbento .pb-cta{ display:block; text-align:center; padding:13px 24px; border-radius:8px; font:600 14px/1.2 var(--font); text-decoration:none; cursor:pointer; background:var(--accent); color:var(--accent-text, #fff); border:var(--bw,1px) solid transparent; transition:opacity .2s ease, color .18s ease, border-color .18s ease; }
.wsp-secpricingbento .pb-cta:hover{ opacity:0.85; }
.wsp-secpricingbento .pb-cta--outline{ background:transparent; border-color:var(--hair); color:var(--ink); }

.wsp-secpricingbento .pb-statval{ font:700 clamp(40px,5cqw,64px)/1 var(--font-head, var(--font)); letter-spacing:-0.03em; color:var(--ink); }
.wsp-secpricingbento .pb-statlabel{ margin-top:8px; font:400 13px/1.3 var(--font); color:var(--dim); }

.wsp-secpricingbento .pb-entbody{ margin:16px 0 28px; font:400 14px/1.6 var(--font); color:var(--dim); }

.wsp-secpricingbento .pb-gico{ flex:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--accent-fill, color-mix(in srgb, var(--accent) 14%, transparent)); border:var(--bw,1px) solid color-mix(in srgb, var(--accent) 32%, transparent); }
.wsp-secpricingbento .pb-gico svg{ width:16px; height:16px; }
.wsp-secpricingbento .pb-gtext{ padding-top:6px; font:400 14px/1.6 var(--font); color:var(--dim); }

@container site (max-width:900px){
  .wsp-secpricingbento .pb-grid{ grid-template-columns:1fr; }
  .wsp-secpricingbento .pb-card--pro{ grid-row:auto; }
  .wsp-secpricingbento .pb-card--guarantee{ grid-column:auto; }
}
@container site (max-width:560px){
  .wsp-secpricingbento .pb-card{ padding:28px 24px; }
  .wsp-secpricingbento .pb-card--guarantee{ padding:24px; }
}

/* --- secintegrationsgrid (SB_04 port) --- */
.wsp-secintegrationsgrid .ig-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto clamp(28px,3.4cqw,40px); }
.wsp-secintegrationsgrid .ig-chip{ appearance:none; -webkit-appearance:none; background:transparent; border:1px solid var(--hair); color:var(--dim); padding:7px 16px; border-radius:999px; font:500 .8rem var(--font); letter-spacing:.01em; cursor:pointer; transition:color .18s ease, border-color .18s ease, transform .18s ease; }
.wsp-secintegrationsgrid .ig-chip:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 38%, var(--hair)); }
.wsp-secintegrationsgrid .ig-chip.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-text, var(--bg)); }
.wsp-secintegrationsgrid .ig-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wsp-secintegrationsgrid .ig-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6cqw,32px); align-items:start; }
.wsp-secintegrationsgrid .ig-cats.is-solo{ display:flex; justify-content:center; }
.wsp-secintegrationsgrid .ig-cats.is-solo .ig-cat{ width:min(560px,100%); }

.wsp-secintegrationsgrid .ig-cat-label{ display:block; font:700 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--hair); }
.wsp-secintegrationsgrid .ig-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wsp-secintegrationsgrid .ig-tile{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:12px 14px; cursor:pointer; transition:border-color .15s ease, transform .15s ease; }
.wsp-secintegrationsgrid .ig-tile:hover{ background:var(--panel-2, var(--panel)); border-color:color-mix(in srgb, var(--accent) 34%, var(--hair)); transform:translateY(-1px); }
.wsp-secintegrationsgrid .ig-tile-ico{ font-size:20px; line-height:1; flex-shrink:0; }
.wsp-secintegrationsgrid .ig-tile-name{ font:500 13px var(--font); color:var(--ink); }

.wsp-secintegrationsgrid .ig-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.2cqw,40px); padding:20px 0 0; border-top:1px solid var(--hair); }
.wsp-secintegrationsgrid .ig-count{ font:400 14px var(--font); color:var(--dim); }
.wsp-secintegrationsgrid .ig-link{ display:inline-flex; align-items:center; gap:6px; font:500 14px var(--font); color:var(--accent); text-decoration:none; cursor:pointer; transition:opacity .2s ease; }
.wsp-secintegrationsgrid .ig-link:hover{ opacity:.75; }
.wsp-secintegrationsgrid .ig-link i{ font-style:normal; transition:transform .2s ease; }
.wsp-secintegrationsgrid .ig-link:hover i{ transform:translateX(3px); }
.wsp-secintegrationsgrid .ig-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

@container site (max-width:760px){
  .wsp-secintegrationsgrid .ig-cats{ grid-template-columns:1fr; gap:24px; }
  .wsp-secintegrationsgrid .ig-cats.is-solo .ig-cat{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secintegrationsgrid .ig-chip, .wsp-secintegrationsgrid .ig-tile, .wsp-secintegrationsgrid .ig-link, .wsp-secintegrationsgrid .ig-link i{ transition:none; }
  .wsp-secintegrationsgrid .ig-tile:hover, .wsp-secintegrationsgrid .ig-chip:hover, .wsp-secintegrationsgrid .ig-link:hover i{ transform:none; }
}

/* --- secfeaturebento (SB_04 port) --- */
.wsp-secfeaturebento .fb-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; grid-template-rows:auto auto; gap:12px; }
.wsp-secfeaturebento .fb-cell{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:clamp(22px,3cqw,32px); transition:border-color .2s ease, transform .2s ease; }
.wsp-secfeaturebento .fb-cell:hover{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.wsp-secfeaturebento .fb-cell--featured{ grid-row:span 2; background:var(--panel-2); border-color:color-mix(in srgb, var(--accent) 20%, transparent); }
.wsp-secfeaturebento .fb-ico{ display:flex; align-items:center; color:var(--accent); margin-bottom:20px; }
.wsp-secfeaturebento .fb-ico svg{ width:28px; height:28px; }
.wsp-secfeaturebento .fb-cell--featured .fb-ico svg{ width:34px; height:34px; }
.wsp-secfeaturebento .fb-title{ margin:0 0 12px; font:600 18px/1.3 var(--font-head, var(--font)); letter-spacing:-0.01em; color:var(--ink); }
.wsp-secfeaturebento .fb-cell--featured .fb-title{ font-size:22px; }
.wsp-secfeaturebento .fb-body{ margin:0; font:400 14px/1.65 var(--font); color:var(--dim); }
.wsp-secfeaturebento .fb-cell--featured .fb-body{ font-size:15px; margin-bottom:28px; flex-grow:1; }
.wsp-secfeaturebento .fb-link{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; font:500 13px var(--font); color:var(--accent); text-decoration:none; transition:opacity .2s ease; }
.wsp-secfeaturebento .fb-link:hover{ opacity:.75; }
.wsp-secfeaturebento .fb-link svg{ width:15px; height:15px; transition:transform .2s ease; }
.wsp-secfeaturebento .fb-link:hover svg{ transform:translateX(3px); }
@container site (max-width:900px){
  .wsp-secfeaturebento .fb-grid{ grid-template-columns:1fr 1fr; }
  .wsp-secfeaturebento .fb-cell--featured{ grid-row:auto; grid-column:span 2; }
}
@container site (max-width:540px){
  .wsp-secfeaturebento .fb-grid{ grid-template-columns:1fr; }
  .wsp-secfeaturebento .fb-cell--featured{ grid-column:auto; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secfeaturebento .fb-cell, .wsp-secfeaturebento .fb-link, .wsp-secfeaturebento .fb-link svg{ transition:none; }
  .wsp-secfeaturebento .fb-link:hover svg{ transform:none; }
}

/* --- sectrustbadges (SB_04 port) --- */
.wsp-sectrustbadges{ border-top:1px solid var(--hair); }
.wsp-sectrustbadges .tb-head{ text-align:center; font-size:0.875rem; line-height:1.5; color:var(--dim); letter-spacing:0.01em; margin:0 auto 40px; max-width:640px; }
.wsp-sectrustbadges .tb-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.wsp-sectrustbadges .tb-badge{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:24px 16px; transition:border-color .2s ease; }
.wsp-sectrustbadges .tb-badge:hover{ border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.wsp-sectrustbadges .tb-ico{ font-size:1.5rem; line-height:1; }
.wsp-sectrustbadges .tb-title{ font-size:0.8125rem; font-weight:600; color:var(--ink); }
.wsp-sectrustbadges .tb-sub{ font-size:0.6875rem; font-weight:500; color:var(--accent); letter-spacing:0.04em; text-transform:uppercase; }
@container site (max-width:900px){
  .wsp-sectrustbadges .tb-grid{ grid-template-columns:repeat(3,1fr); }
}
@container site (max-width:540px){
  .wsp-sectrustbadges .tb-grid{ grid-template-columns:repeat(2,1fr); }
}

/* --- seccontentsplit (SB_04 port) --- */
.wsp-seccontentsplit .cs-copy{ display:flex; flex-direction:column; align-items:flex-start; }
.wsp-seccontentsplit .cs-copy .ws-kick{ margin-bottom:16px; }
.wsp-seccontentsplit .cs-copy .ws-sub{ margin-top:14px; max-width:48ch; }
.wsp-seccontentsplit .cs-list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.wsp-seccontentsplit .cs-li{ display:flex; align-items:flex-start; gap:11px; font:500 14.5px/1.5 var(--font); color:var(--dim); }
.wsp-seccontentsplit .cs-tick{ display:flex; flex:0 0 auto; margin-top:1px; color:var(--accent); }
.wsp-seccontentsplit .cs-tick svg{ width:16px; height:16px; }
.wsp-seccontentsplit .cs-cta{ margin-top:30px; }
.wsp-seccontentsplit .cs-visual{ position:relative; aspect-ratio:4 / 3; padding:32px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--hair); border-radius:var(--radius, 12px); background:var(--panel); }
.wsp-seccontentsplit .cs-visual-bg{ position:absolute; inset:0; background:linear-gradient(135deg, var(--panel) 0%, color-mix(in srgb, var(--accent) 12%, var(--panel-2)) 100%); }
.wsp-seccontentsplit .cs-card{ position:relative; z-index:1; width:80%; padding:24px; display:flex; flex-direction:column; gap:12px; border:1px solid var(--hair); border-radius:calc(var(--radius, 12px) * .66); background:color-mix(in srgb, var(--ink) 5%, transparent); transition:transform 240ms ease-out; }
.wsp-seccontentsplit .cs-visual:hover .cs-card{ transform:translateY(-4px); }
.wsp-seccontentsplit .cs-line{ height:10px; border-radius:5px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-seccontentsplit .cs-line--short{ width:60%; }
.wsp-seccontentsplit .cs-line--accent{ background:color-mix(in srgb, var(--accent) 42%, transparent); animation:wsp-seccontentsplit-blink 2.8s ease-in-out infinite; }
@keyframes wsp-seccontentsplit-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@container site (max-width:860px){
  .wsp-seccontentsplit .cs-copy .ws-sub{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-seccontentsplit .cs-card,
  .wsp-seccontentsplit .cs-visual:hover .cs-card{ transition:none; transform:none; }
  .wsp-seccontentsplit .cs-line--accent{ animation:none; }
}

/* --- secmediamarquee (SB_04 port) --- */
.wsp-secmediamarquee{ --mm-gap:16px; --mm-speed:40s; overflow:hidden; }
.wsp-secmediamarquee .mm-wrap{ display:flex; flex-direction:column; gap:var(--mm-gap); width:min(1320px,92cqw); margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%); }
.wsp-secmediamarquee .mm-track{ overflow:hidden; }
.wsp-secmediamarquee .mm-row{ display:flex; gap:var(--mm-gap); width:max-content; will-change:transform; }
.wsp-secmediamarquee .mm-track.fwd .mm-row{ animation:secmediamarquee-scroll var(--mm-speed) linear infinite; }
.wsp-secmediamarquee .mm-track.rev .mm-row{ animation:secmediamarquee-scroll var(--mm-speed) linear infinite reverse; }
.wsp-secmediamarquee .mm-track:hover .mm-row{ animation-play-state:paused; }
.wsp-secmediamarquee.mm-off .mm-row{ animation-play-state:paused; }
@keyframes secmediamarquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.wsp-secmediamarquee .mm-card{ flex-shrink:0; background:var(--panel); border:1px solid var(--hair);
  border-radius:var(--radius); padding:20px 24px; max-width:380px; font-size:0.9rem; line-height:1.55;
  color:var(--dim); font-style:italic; }
.wsp-secmediamarquee .mm-card.alt{ background:var(--panel-2); }
.wsp-secmediamarquee .mm-src{ display:block; margin-top:8px; font-style:normal; font-size:0.78rem;
  font-weight:600; letter-spacing:0.04em; color:var(--accent); font-family:var(--font); }
@media (prefers-reduced-motion: reduce){
  .wsp-secmediamarquee .mm-track.fwd .mm-row,
  .wsp-secmediamarquee .mm-track.rev .mm-row{ animation:none; }
}
@container site (max-width:640px){
  .wsp-secmediamarquee .mm-wrap{ width:94cqw; }
  .wsp-secmediamarquee .mm-card{ max-width:260px; padding:16px 18px; font-size:0.85rem; }
}

/* --- secusecasestabs (SB_04 port) --- */
.wsp-secusecasestabs .uct-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; width:fit-content; max-width:100%; margin:0 auto clamp(28px,5cqw,44px); padding:4px; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); }
.wsp-secusecasestabs .uct-tab{ appearance:none; -webkit-appearance:none; padding:.62rem 1.35rem; border:1px solid transparent; border-radius:calc(var(--radius) - 2px); background:transparent; cursor:pointer; font:500 .9rem var(--font); color:var(--dim); white-space:nowrap; transition:color .2s ease, border-color .2s ease; }
.wsp-secusecasestabs .uct-tab:hover{ color:var(--ink); }
.wsp-secusecasestabs .uct-tab.on{ background:var(--accent-fill); border-color:var(--accent); color:var(--ink); }
.wsp-secusecasestabs .uct-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wsp-secusecasestabs .uct-panels{ position:relative; }
.wsp-secusecasestabs .uct-panel{ display:none; }
.wsp-secusecasestabs .uct-panel.on{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5cqw,4rem); align-items:center; }

.wsp-secusecasestabs .uct-copy{ display:flex; flex-direction:column; align-items:flex-start; }
.wsp-secusecasestabs .uct-h3{ margin:0 0 1rem; font:600 clamp(1.35rem,3cqw,1.9rem)/1.25 var(--font-head, var(--font)); letter-spacing:-.02em; color:var(--ink); }
.wsp-secusecasestabs .uct-body{ margin:0 0 1.5rem; font:400 .98rem/1.7 var(--font); color:var(--dim); }
.wsp-secusecasestabs .uct-list{ list-style:none; margin:0 0 1.75rem; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.wsp-secusecasestabs .uct-list li{ position:relative; padding-left:1.5rem; font-size:.9rem; line-height:1.5; color:var(--dim); }
.wsp-secusecasestabs .uct-list li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; font-size:.78rem; }
.wsp-secusecasestabs .uct-cta{ display:inline-flex; align-items:center; gap:.4rem; font:600 .9rem var(--font); color:var(--accent); text-decoration:none; cursor:pointer; transition:opacity .2s ease; }
.wsp-secusecasestabs .uct-cta:hover{ opacity:.72; }
.wsp-secusecasestabs .uct-cta svg{ width:1rem; height:1rem; }

.wsp-secusecasestabs .uct-visual{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; padding:2rem; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); }
.wsp-secusecasestabs .uct-mockup{ width:80%; display:flex; flex-direction:column; gap:.75rem; }
.wsp-secusecasestabs .uct-row{ height:10px; border-radius:5px; background:var(--hair); }
.wsp-secusecasestabs .uct-row.short{ width:65%; }
.wsp-secusecasestabs .uct-row.accent{ height:12px; background:var(--accent); opacity:.6; }

@container site (max-width:768px){
  .wsp-secusecasestabs .uct-nav{ width:100%; }
  .wsp-secusecasestabs .uct-panel.on{ grid-template-columns:1fr; gap:2rem; }
  .wsp-secusecasestabs .uct-visual{ order:-1; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-secusecasestabs .uct-tab,
  .wsp-secusecasestabs .uct-cta{ transition:none; }
}

/* --- secchangelogstrip (SB_04 port) --- */
.wsp-secchangelogstrip .ws-in{ width:min(880px, 88cqw); }
.wsp-secchangelogstrip .cls-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin-bottom:40px; }
.wsp-secchangelogstrip .cls-head .ws-kick{ margin-bottom:8px; }
.wsp-secchangelogstrip .cls-head-main{ min-width:0; }
.wsp-secchangelogstrip .cls-seeall{ white-space:nowrap; }

.wsp-secchangelogstrip .cls-entries{ border:1px solid var(--hair); border-radius:10px; overflow:hidden; }
.wsp-secchangelogstrip .cls-entry{ display:grid; grid-template-columns:78px 108px 92px 1fr; gap:0 20px; align-items:start; padding:24px; border-bottom:1px solid var(--hair); }
.wsp-secchangelogstrip .cls-entry:last-child{ border-bottom:none; }

.wsp-secchangelogstrip .cls-ver{ font:600 12px var(--mono); color:var(--dim); padding-top:2px; }
.wsp-secchangelogstrip .cls-date{ font-size:12px; color:var(--dim); padding-top:2px; }
.wsp-secchangelogstrip .cls-tag{ display:inline-flex; align-items:center; justify-self:start; font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; height:fit-content; }
.wsp-secchangelogstrip .cls-tag--new{ background:rgba(90,158,122,0.15); color:#5a9e7a; }
.wsp-secchangelogstrip .cls-tag--imp{ background:rgba(200,180,120,0.15); color:#c8b478; }
.wsp-secchangelogstrip .cls-tag--fix{ background:rgba(200,90,90,0.15); color:#e07070; }
.wsp-secchangelogstrip .cls-tag--misc{ background:var(--accent-fill); color:var(--accent); }

.wsp-secchangelogstrip .cls-etitle{ margin:0 0 6px; font-size:14px; font-weight:600; color:var(--ink); line-height:1.4; }
.wsp-secchangelogstrip .cls-ebody{ margin:0; font-size:13px; color:var(--dim); line-height:1.6; }

@container site (max-width:640px){
  .wsp-secchangelogstrip .cls-entry{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:20px; }
  .wsp-secchangelogstrip .cls-ver, .wsp-secchangelogstrip .cls-date{ padding-top:0; }
  .wsp-secchangelogstrip .cls-entry-main{ flex:1 1 100%; }
}

/* --- secimpactnumbers (SB_04 port) --- */
.wsp-secimpactnumbers .ws-in.split{ grid-template-columns:1fr 1fr; gap:clamp(40px,6cqw,80px); align-items:center; }
.wsp-secimpactnumbers .in-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wsp-secimpactnumbers .in-card{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,12px); padding:clamp(20px,3cqw,28px); display:flex; flex-direction:column; gap:6px; }
.wsp-secimpactnumbers .in-card.is-feat{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); background:color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.wsp-secimpactnumbers .in-val{ font:800 clamp(30px,4.4cqw,46px)/1 var(--font-head, var(--font)); letter-spacing:-0.03em; color:var(--ink); }
.wsp-secimpactnumbers .in-card.is-feat .in-val{ color:var(--accent); }
.wsp-secimpactnumbers .in-label{ font:600 14px var(--font); color:var(--ink); }
.wsp-secimpactnumbers .in-detail{ font:400 12px var(--font); color:var(--faint); }
@container site (max-width:720px){
  .wsp-secimpactnumbers .ws-in.split{ grid-template-columns:1fr; gap:36px; }
}
@container site (max-width:430px){
  .wsp-secimpactnumbers .in-grid{ grid-template-columns:1fr; }
}

/* --- secresourcecards (SB_04 port) --- */
.wsp-secresourcecards .rc-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:16px; margin-top:8px; }
.wsp-secresourcecards .rc-card{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,12px); padding:28px; text-decoration:none; cursor:pointer; transition:border-color .2s ease, transform .2s ease; }
.wsp-secresourcecards .rc-card:hover{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); transform:translateY(-2px); }
.wsp-secresourcecards .rc-card--featured{ padding:36px; }
.wsp-secresourcecards .rc-type{ margin-bottom:16px; }
.wsp-secresourcecards .rc-tag{ display:inline-block; font:700 10px/1 var(--font); letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-fill); padding:3px 10px; border-radius:4px; }
.wsp-secresourcecards .rc-title{ flex-grow:1; margin:0; font:600 15px/1.4 var(--font); letter-spacing:-0.01em; color:var(--ink); }
.wsp-secresourcecards .rc-card--featured .rc-title{ font-size:18px; margin-bottom:12px; }
.wsp-secresourcecards .rc-body{ flex-grow:1; margin:0 0 20px; font:400 13px/1.6 var(--font); color:var(--dim); }
.wsp-secresourcecards .rc-meta{ display:flex; align-items:center; gap:6px; margin-top:16px; font:400 11px/1 var(--font); color:var(--dim); }
.wsp-secresourcecards .rc-dot{ opacity:.4; }
.wsp-secresourcecards .rc-seeall{ flex:none; }
@container site (max-width:900px){
  .wsp-secresourcecards .rc-grid{ grid-template-columns:1fr 1fr; }
  .wsp-secresourcecards .rc-card--featured{ grid-column:span 2; }
}
@container site (max-width:640px){
  .wsp-secresourcecards .ws-shead.left.row{ flex-direction:column; align-items:flex-start; gap:10px; }
}
@container site (max-width:540px){
  .wsp-secresourcecards .rc-grid{ grid-template-columns:1fr; }
  .wsp-secresourcecards .rc-card--featured{ grid-column:auto; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secresourcecards .rc-card{ transition:border-color .2s ease; }
  .wsp-secresourcecards .rc-card:hover{ transform:none; }
}

/* --- secpartnerlogos (SB_04 port) --- */
.wsp-secpartnerlogos{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); overflow:hidden; }
.wsp-secpartnerlogos .pl-head{ margin-bottom:clamp(22px,4cqw,40px); }
.wsp-secpartnerlogos .pl-marquee{ display:flex; flex-direction:column; gap:clamp(12px,2cqw,18px); width:min(1320px,100%); margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.wsp-secpartnerlogos .pl-row{ overflow:hidden; }
.wsp-secpartnerlogos .pl-track{ display:flex; width:max-content; align-items:center;
  animation:pl-scroll-secpartnerlogos var(--pl-dur,35s) linear infinite; will-change:transform; }
.wsp-secpartnerlogos .pl-row.rev .pl-track{ animation-direction:reverse; }
.wsp-secpartnerlogos .pl-row:hover .pl-track{ animation-play-state:paused; }
.wsp-secpartnerlogos .pl-logo{ flex-shrink:0; height:32px; display:flex; align-items:center; white-space:nowrap;
  margin-inline-end:clamp(32px,6cqw,52px);
  font-family:var(--font-head,var(--font)); font-weight:700; font-size:clamp(14px,2.4cqw,15px); letter-spacing:-0.02em;
  color:var(--faint); transition:color .2s ease; cursor:default; }
.wsp-secpartnerlogos .pl-logo:hover{ color:var(--ink); }
@keyframes pl-scroll-secpartnerlogos{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@container site (max-width:640px){
  .wsp-secpartnerlogos .pl-marquee{ gap:12px; }
  .wsp-secpartnerlogos .pl-logo{ height:28px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-secpartnerlogos .pl-track{ animation:none; }
}

/* --- secpricingfaq (SB_04 port) --- */
.wsp-secpricingfaq .pf-grid{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:clamp(32px,5cqw,60px); align-items:start; margin-top:6px; }
.wsp-secpricingfaq .pf-cta{ position:sticky; top:24px; }
.wsp-secpricingfaq .pf-card{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,12px); padding:clamp(24px,3cqw,32px); }
.wsp-secpricingfaq .pf-card .ws-kick{ margin:0 0 12px; }
.wsp-secpricingfaq .pf-plan{ font:700 22px/1.2 var(--font-head,var(--font)); color:var(--ink); margin-bottom:6px; }
.wsp-secpricingfaq .pf-desc{ margin:0 0 22px; font-size:.82rem; line-height:1.6; color:var(--dim); }
.wsp-secpricingfaq .pf-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:22px; }
.wsp-secpricingfaq .pf-amt{ font:800 clamp(38px,5cqw,48px)/1 var(--font-head,var(--font)); letter-spacing:-.03em; color:var(--ink); }
.wsp-secpricingfaq .pf-per{ font-size:.9rem; color:var(--dim); }
.wsp-secpricingfaq .pf-feats{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.wsp-secpricingfaq .pf-feat{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--dim); }
.wsp-secpricingfaq .pf-check{ width:18px; height:18px; flex:0 0 auto; border-radius:50%; background:var(--accent-fill,rgba(124,196,255,.14)); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.wsp-secpricingfaq .pf-check svg{ width:11px; height:11px; }
.wsp-secpricingfaq .pf-btn{ width:100%; justify-content:center; }
.wsp-secpricingfaq .pf-note{ margin:12px 0 0; font-size:.72rem; color:var(--faint); text-align:center; }
.wsp-secpricingfaq .pf-faq{ min-width:0; }
.wsp-secpricingfaq .pf-h{ margin:0 0 8px; }
.wsp-secpricingfaq .pf-faqsub{ margin:0 0 26px; }
.wsp-secpricingfaq .pf-list{ border-top:1px solid var(--hair); }
.wsp-secpricingfaq .pf-item{ border-bottom:1px solid var(--hair); }
.wsp-secpricingfaq .pf-q{ all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 2px; font:500 .96rem/1.4 var(--font); color:var(--ink); }
.wsp-secpricingfaq .pf-q:hover{ color:var(--accent); }
.wsp-secpricingfaq .pf-q:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.wsp-secpricingfaq .pf-chev{ width:18px; height:18px; flex:0 0 auto; color:var(--faint); transition:transform .25s ease, color .25s ease; }
.wsp-secpricingfaq .pf-item.open .pf-chev{ transform:rotate(180deg); color:var(--accent); }
.wsp-secpricingfaq .pf-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.wsp-secpricingfaq .pf-item.open .pf-a{ grid-template-rows:1fr; }
.wsp-secpricingfaq .pf-a-in{ overflow:hidden; min-height:0; }
.wsp-secpricingfaq .pf-atext{ margin:0; padding:0 2px 20px; font-size:.9rem; line-height:1.7; color:var(--dim); }
@media (prefers-reduced-motion: reduce){
  .wsp-secpricingfaq .pf-a{ transition:none; }
  .wsp-secpricingfaq .pf-chev{ transition:none; }
}
@container site (max-width:860px){
  .wsp-secpricingfaq .pf-grid{ grid-template-columns:1fr; gap:36px; }
  .wsp-secpricingfaq .pf-cta{ position:static; }
}

/* --- secstatsgrid (SB_04 port) --- */
.wsp-secstatsgrid .ssg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wsp-secstatsgrid .ssg-stat{ background:var(--panel); border:var(--bw,1px) solid var(--hair); border-radius:var(--radius,12px); padding:28px 24px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s ease; }
.wsp-secstatsgrid .ssg-stat:hover{ border-color:color-mix(in srgb, var(--ink) 22%, var(--hair)); }
.wsp-secstatsgrid .ssg-stat--feat{ grid-column:span 2; flex-direction:row; align-items:center; gap:40px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%); border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
.wsp-secstatsgrid .ssg-main{ flex:1; min-width:0; }
.wsp-secstatsgrid .ssg-label{ margin:0 0 6px; font:600 12px var(--font); letter-spacing:0.04em; text-transform:uppercase; color:var(--dim); }
.wsp-secstatsgrid .ssg-value{ margin:0 0 8px; font:800 clamp(32px,4cqw,52px)/1 var(--font-head, var(--font)); letter-spacing:-0.04em; color:var(--ink); }
.wsp-secstatsgrid .ssg-stat--feat .ssg-value{ color:var(--accent); }
.wsp-secstatsgrid .ssg-delta{ display:inline-flex; align-items:center; gap:4px; font:600 12px var(--font); }
.wsp-secstatsgrid .ssg-delta--up{ color:#5a9e7a; }
.wsp-secstatsgrid .ssg-delta--down{ color:#e05a7a; }
.wsp-secstatsgrid .ssg-arw{ font-size:13px; line-height:1; }
.wsp-secstatsgrid .ssg-period{ margin-left:2px; font-weight:400; font-size:11px; color:var(--dim); }
.wsp-secstatsgrid .ssg-note{ font:400 12px var(--font); color:var(--dim); }
.wsp-secstatsgrid .ssg-spark{ display:flex; align-items:flex-end; gap:3px; height:32px; min-width:80px; flex:0 0 auto; }
.wsp-secstatsgrid .ssg-bar{ flex:1; min-height:2px; border-radius:2px; background:color-mix(in srgb, var(--accent) 22%, transparent); }
.wsp-secstatsgrid .ssg-stat--feat .ssg-bar{ background:color-mix(in srgb, var(--accent) 30%, transparent); }
.wsp-secstatsgrid .ssg-stat--feat:hover .ssg-bar{ background:color-mix(in srgb, var(--accent) 50%, transparent); }
@container site (max-width:760px){
  .wsp-secstatsgrid .ssg-grid{ grid-template-columns:1fr 1fr; }
  .wsp-secstatsgrid .ssg-stat--feat{ grid-column:span 2; flex-direction:column; align-items:stretch; gap:16px; }
}
@container site (max-width:480px){
  .wsp-secstatsgrid .ssg-grid{ grid-template-columns:1fr; }
  .wsp-secstatsgrid .ssg-stat--feat{ grid-column:span 1; }
}

/* --- secpricingcards (SB_04 port) --- */
.wsp-secpricingcards .spc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; width:min(1080px,88cqw); margin:0 auto; }
.wsp-secpricingcards .spc-card{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:32px 28px; transition:transform .25s ease, border-color .25s ease; }
.wsp-secpricingcards .spc-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 30%, var(--hair)); }
.wsp-secpricingcards .spc-card.hot{ position:relative; margin-top:-12px; padding-top:44px; border-color:color-mix(in srgb, var(--accent) 42%, transparent); background:linear-gradient(175deg, var(--accent-fill) 0%, var(--panel) 42%); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 12px 40px color-mix(in srgb, var(--accent) 12%, transparent); }
.wsp-secpricingcards .spc-popular{ position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--accent-text); font:700 10px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; padding:6px 16px; border-radius:0 0 8px 8px; }
.wsp-secpricingcards .spc-plan{ font:700 13px/1 var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.wsp-secpricingcards .spc-card.hot .spc-plan{ color:var(--accent); }
.wsp-secpricingcards .spc-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.wsp-secpricingcards .spc-price b{ font:800 clamp(32px,5cqw,42px)/1 var(--font-head, var(--font)); letter-spacing:-.04em; color:var(--ink); }
.wsp-secpricingcards .spc-per{ font:400 14px/1 var(--font); color:var(--dim); }
.wsp-secpricingcards .spc-desc{ margin:6px 0 24px; font-size:13px; line-height:1.6; color:var(--dim); }
.wsp-secpricingcards .spc-feats{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:10px; }
.wsp-secpricingcards .spc-feat{ display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.45; color:var(--dim); }
.wsp-secpricingcards .spc-ico{ flex-shrink:0; display:flex; margin-top:1px; color:var(--accent); }
.wsp-secpricingcards .spc-ico svg{ width:15px; height:15px; }
.wsp-secpricingcards .spc-feat.off{ color:var(--faint); }
.wsp-secpricingcards .spc-feat.off .spc-ico{ color:var(--faint); }
.wsp-secpricingcards .spc-cta{ display:block; margin-top:auto; text-align:center; padding:12px; border-radius:8px; font:600 14px/1.2 var(--font); text-decoration:none; cursor:pointer; transition:opacity .2s ease, transform .2s ease; }
.wsp-secpricingcards .spc-cta:hover{ opacity:.85; }
.wsp-secpricingcards .spc-cta.ghost{ border:1px solid var(--hair); color:var(--ink); }
.wsp-secpricingcards .spc-cta.primary{ background:var(--accent); color:var(--accent-text); }
.wsp-secpricingcards .spc-cta.outline{ border:1px solid color-mix(in srgb, var(--accent) 42%, transparent); color:var(--accent); }
.wsp-secpricingcards .spc-foot{ margin-top:32px; text-align:center; font-size:13px; color:var(--dim); }
.wsp-secpricingcards .spc-footlink{ color:var(--accent); text-decoration:none; cursor:pointer; }
.wsp-secpricingcards .spc-footlink:hover{ text-decoration:underline; }
@container site (max-width:800px){
  .wsp-secpricingcards .spc-grid{ grid-template-columns:1fr; }
  .wsp-secpricingcards .spc-card.hot{ margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-secpricingcards .spc-card{ transition:none; }
  .wsp-secpricingcards .spc-card:hover{ transform:none; }
}

/* --- secopenpositions (SB_04 port) --- */
.wsp-secopenpositions .ws-in{ width:min(900px, 88cqw); }
.wsp-secopenpositions .sop-head{ margin-bottom:36px; }
.wsp-secopenpositions .sop-head .ws-kick{ margin-bottom:12px; }
.wsp-secopenpositions .sop-head .ws-sub{ margin-top:10px; }

/* department filter tabs */
.wsp-secopenpositions .sop-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px; }
.wsp-secopenpositions .sop-tab{ appearance:none; -webkit-appearance:none; padding:7px 14px; border-radius:7px;
  font:600 12px var(--font); background:transparent; border:var(--bw, 1px) solid var(--hair); color:var(--dim);
  cursor:pointer; transition:color .15s linear, border-color .15s linear, background .15s linear; }
.wsp-secopenpositions .sop-tab:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--ink) 18%, var(--hair)); }
.wsp-secopenpositions .sop-tab.on{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  background:var(--accent-fill); }
.wsp-secopenpositions .sop-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* bordered, grouped list box */
.wsp-secopenpositions .sop-list{ border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); overflow:hidden; }
.wsp-secopenpositions .sop-group{ font:700 10px var(--mono); letter-spacing:1.2px; text-transform:uppercase;
  color:var(--faint); padding:11px 20px 9px; background:color-mix(in srgb, var(--ink) 2.5%, transparent);
  border-bottom:var(--bw, 1px) solid var(--hair); }
.wsp-secopenpositions .sop-role{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; border-bottom:var(--bw, 1px) solid var(--hair); text-decoration:none; color:inherit;
  cursor:pointer; transition:background .15s linear; }
.wsp-secopenpositions .sop-role:last-child{ border-bottom:none; }
.wsp-secopenpositions .sop-role:hover{ background:color-mix(in srgb, var(--ink) 3%, transparent); }
.wsp-secopenpositions .sop-role:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.wsp-secopenpositions .sop-role.sop-hide{ display:none; }
.wsp-secopenpositions .sop-role-left{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.wsp-secopenpositions .sop-role-title{ font:600 15px var(--font); color:var(--ink); line-height:1.3; }
.wsp-secopenpositions .sop-role-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.wsp-secopenpositions .sop-tag{ font:600 10px var(--font); letter-spacing:.3px; padding:3px 8px; border-radius:5px;
  background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--dim); }
.wsp-secopenpositions .sop-tag--remote{ background:rgba(105,181,143,0.13); color:#69b58f; }
.wsp-secopenpositions .sop-role-arrow{ flex:none; display:flex; color:var(--faint);
  transition:transform .2s ease-out, color .2s linear; }
.wsp-secopenpositions .sop-role-arrow svg{ width:16px; height:16px; }
.wsp-secopenpositions .sop-role:hover .sop-role-arrow{ transform:translateX(4px); color:var(--accent); }

@container site (max-width:640px){
  .wsp-secopenpositions .sop-head{ margin-bottom:28px; }
  .wsp-secopenpositions .sop-role{ padding:16px; }
  .wsp-secopenpositions .sop-group{ padding:10px 16px 8px; }
}

/* --- secprocesssteps (SB_04 port) --- */
.wsp-secprocesssteps .sps-list{ display:flex; flex-direction:column; gap:22px; margin-top:8px; }
.wsp-secprocesssteps .sps-step{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--panel); transition:border-color 180ms linear; }
.wsp-secprocesssteps .sps-step:hover{ border-color:var(--accent-dim); }
.wsp-secprocesssteps .sps-step.flip .sps-visual{ order:2; }
.wsp-secprocesssteps .sps-visual{ position:relative; min-height:236px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:
    radial-gradient(130% 150% at 22% 12%, var(--accent-fill2), transparent 62%),
    linear-gradient(135deg, var(--panel-3), var(--panel-2));
  filter:hue-rotate(var(--sps-h, 0deg)); }
.wsp-secprocesssteps .sps-num{ font:800 clamp(56px,11cqw,84px)/1 var(--font-head, var(--font)); letter-spacing:-0.04em; color:var(--ink); opacity:0.12; user-select:none; }
.wsp-secprocesssteps .sps-body{ padding:clamp(26px,3.4cqw,42px) clamp(24px,3.6cqw,48px); display:flex; flex-direction:column; justify-content:center; background:var(--panel); }
.wsp-secprocesssteps .sps-stitle{ margin:0; font:700 clamp(18px,2.2cqw,22px)/1.2 var(--font-head, var(--font)); letter-spacing:-0.02em; color:var(--ink); }
.wsp-secprocesssteps .sps-ssub{ margin:12px 0 0; font:400 clamp(13px,1.6cqw,14.5px)/1.7 var(--font); color:var(--dim); }
.wsp-secprocesssteps .sps-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:18px; }
.wsp-secprocesssteps .sps-tag{ font:700 10px/1 var(--mono, var(--font)); letter-spacing:0.05em; text-transform:uppercase; padding:4px 10px; border-radius:6px; background:var(--accent-fill); color:var(--accent); border:1px solid var(--accent-fill2); }
@media (prefers-reduced-motion:no-preference){
  .wsp-secprocesssteps .sps-step{ transition:transform 180ms ease, border-color 180ms linear; }
  .wsp-secprocesssteps .sps-step:hover{ transform:translateY(-3px); }
}
@container site (max-width:680px){
  .wsp-secprocesssteps .sps-step{ grid-template-columns:1fr; }
  .wsp-secprocesssteps .sps-step.flip .sps-visual{ order:0; }
  .wsp-secprocesssteps .sps-visual{ min-height:132px; }
  .wsp-secprocesssteps .sps-body{ padding:24px; }
}

/* --- secstatscounter (SB_04 port) --- */
.wsp-secstatscounter .ssc-grid{ display:grid; grid-template-columns:repeat(4,1fr); width:min(900px,100%); margin:0 auto; }
.wsp-secstatscounter .ssc-stat{ padding:clamp(22px,3cqw,32px) clamp(14px,2.2cqw,24px); text-align:center; }
.wsp-secstatscounter .ssc-stat:not(:last-child){ border-right:1px solid var(--hair); }
.wsp-secstatscounter .ssc-ico{ display:block; font-size:clamp(24px,3.4cqw,28px); line-height:1; margin-bottom:12px; }
.wsp-secstatscounter .ssc-num{ display:block; font:800 clamp(34px,4.6cqw,54px)/1 var(--font-head,var(--font)); letter-spacing:-0.04em; color:var(--ink); font-variant-numeric:tabular-nums; margin-bottom:8px; }
.wsp-secstatscounter .ssc-lbl{ display:block; font-size:13px; line-height:1.4; color:var(--dim); margin-bottom:8px; }
.wsp-secstatscounter .ssc-delta{ display:inline-block; font:700 10px var(--font); letter-spacing:.02em; padding:2px 8px; border-radius:5px; background:rgba(90,158,122,.14); color:#5fb389; }
.wsp-secstatscounter .ssc-delta.is-neutral{ background:var(--panel-2); color:var(--dim); }
@container site (max-width:760px){
  .wsp-secstatscounter .ssc-grid{ grid-template-columns:1fr 1fr; }
  .wsp-secstatscounter .ssc-stat:not(:last-child){ border-right:none; }
  .wsp-secstatscounter .ssc-stat:nth-child(odd){ border-right:1px solid var(--hair); }
  .wsp-secstatscounter .ssc-stat:not(:nth-last-child(-n+2)){ border-bottom:1px solid var(--hair); }
}
@container site (max-width:440px){
  .wsp-secstatscounter .ssc-grid{ grid-template-columns:1fr; }
  .wsp-secstatscounter .ssc-stat:nth-child(odd){ border-right:none; }
  .wsp-secstatscounter .ssc-stat:not(:last-child){ border-right:none; border-bottom:1px solid var(--hair); }
}

/* --- secblogfeatured (SB_04 port) --- */
.wsp-secblogfeatured .sbf-hero{ display:grid; grid-template-columns:1fr 1fr; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; margin-bottom:12px; text-decoration:none; transition:border-color .2s ease; }
.wsp-secblogfeatured .sbf-hero:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.wsp-secblogfeatured .sbf-img{ display:block; background-color:var(--panel-2); background-size:cover; background-position:center; }
.wsp-secblogfeatured .sbf-img.i0{ background-image:linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, var(--panel)) 0%, color-mix(in srgb, var(--accent) 7%, var(--panel)) 100%); }
.wsp-secblogfeatured .sbf-img.i1{ background-image:linear-gradient(145deg, color-mix(in srgb, var(--accent2, var(--accent)) 22%, var(--panel)) 0%, var(--panel) 100%); }
.wsp-secblogfeatured .sbf-img.i2{ background-image:radial-gradient(85% 85% at 70% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%), var(--panel); }
.wsp-secblogfeatured .sbf-hero .sbf-img{ min-height:280px; }
.wsp-secblogfeatured .sbf-body{ padding:clamp(24px, 3cqw, 36px) clamp(20px, 2.6cqw, 32px); display:flex; flex-direction:column; justify-content:space-between; gap:22px; }
.wsp-secblogfeatured .sbf-cat{ display:inline-block; font:700 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:5px; margin-bottom:14px; background:var(--accent-fill); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.wsp-secblogfeatured .sbf-title{ display:block; margin:0 0 14px; font:700 20px/1.3 var(--font-head, var(--font)); letter-spacing:-0.02em; color:var(--ink); transition:color .18s ease; }
.wsp-secblogfeatured .sbf-hero:hover .sbf-title, .wsp-secblogfeatured .sbf-card:hover .sbf-title{ color:var(--accent); }
.wsp-secblogfeatured .sbf-excerpt{ margin:0; font:400 14px/1.7 var(--font); color:var(--dim); }
.wsp-secblogfeatured .sbf-meta{ display:flex; align-items:center; gap:10px; }
.wsp-secblogfeatured .sbf-av{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-text, #04121a); display:flex; align-items:center; justify-content:center; font:700 10px var(--font); letter-spacing:.02em; }
.wsp-secblogfeatured .sbf-byline{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wsp-secblogfeatured .sbf-byline b{ font:600 12px var(--font); color:var(--ink); }
.wsp-secblogfeatured .sbf-byline i{ font:400 11px var(--font); font-style:normal; color:var(--dim); }
.wsp-secblogfeatured .sbf-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wsp-secblogfeatured .sbf-card{ display:block; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; text-decoration:none; transition:border-color .2s ease; }
.wsp-secblogfeatured .sbf-card:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }
.wsp-secblogfeatured .sbf-card .sbf-img{ height:150px; }
.wsp-secblogfeatured .sbf-cbody{ padding:20px; }
.wsp-secblogfeatured .sbf-cbody .sbf-title{ font-size:15px; }
@container site (max-width:768px){
  .wsp-secblogfeatured .sbf-hero{ grid-template-columns:1fr; }
  .wsp-secblogfeatured .sbf-hero .sbf-img{ min-height:180px; }
}
@container site (max-width:560px){
  .wsp-secblogfeatured .sbf-cards{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secblogfeatured .sbf-hero, .wsp-secblogfeatured .sbf-card, .wsp-secblogfeatured .sbf-title{ transition:none; }
}

/* --- sectimeline (SB_04 port) --- */
.wsp-sectimeline .stl-list{ position:relative; width:min(900px,100%); margin:0 auto; }
.wsp-sectimeline .stl-rail{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--hair); transform:translateX(-50%); }
.wsp-sectimeline .stl-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:var(--accent); }

.wsp-sectimeline .stl-item{ display:grid; grid-template-columns:1fr 48px 1fr; align-items:start; margin-bottom:48px; }
.wsp-sectimeline .stl-item:last-child{ margin-bottom:0; }
.wsp-sectimeline .stl-item.is-left .stl-card{ grid-column:1; grid-row:1; text-align:right; }
.wsp-sectimeline .stl-item.is-right .stl-card{ grid-column:3; grid-row:1; }

.wsp-sectimeline .stl-card{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,10px); padding:22px 24px; transition:border-color .2s ease; }
.wsp-sectimeline .stl-card:hover{ border-color:var(--accent-dim,var(--accent)); }
.wsp-sectimeline .stl-date{ font:700 10px/1 var(--mono,var(--font)); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.wsp-sectimeline .stl-etitle{ margin:0 0 8px; font:700 15px/1.3 var(--font-head,var(--font)); color:var(--ink); }
.wsp-sectimeline .stl-edesc{ margin:0; font:400 13px/1.65 var(--font); color:var(--dim); }

.wsp-sectimeline .stl-dot{ grid-column:2; grid-row:1; width:48px; height:48px; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.wsp-sectimeline .stl-dot::before{ content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--panel); border:2px solid var(--hair); transition:border-color .25s ease; }
.wsp-sectimeline .stl-dot span{ position:relative; z-index:1; font-size:16px; line-height:1; }
.wsp-sectimeline .stl-dot.on::before, .wsp-sectimeline .stl-dot.is-active::before{ border-color:var(--accent); background:var(--accent-fill,transparent); }

@container site (max-width:640px){
  .wsp-sectimeline .stl-rail{ left:24px; }
  .wsp-sectimeline .stl-item, .wsp-sectimeline .stl-item.is-left, .wsp-sectimeline .stl-item.is-right{ grid-template-columns:48px 1fr; }
  .wsp-sectimeline .stl-item.is-left .stl-card, .wsp-sectimeline .stl-item.is-right .stl-card{ grid-column:2; grid-row:1; text-align:left; }
  .wsp-sectimeline .stl-dot{ grid-column:1; grid-row:1; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-sectimeline .stl-card, .wsp-sectimeline .stl-dot::before{ transition:none; }
}

/* --- secsplitcta (SB_04 port) --- */
.wsp-secsplitcta .sca-card{ display:grid; grid-template-columns:1fr 1px 1fr; gap:0 clamp(28px,4.6cqw,56px); align-items:center; background:var(--panel); border:1px solid var(--hair); border-radius:calc(var(--radius, 12px) + 4px); padding:clamp(28px,4.4cqw,56px); }
.wsp-secsplitcta .sca-left{ min-width:0; }
.wsp-secsplitcta .sca-right{ min-width:0; }
.wsp-secsplitcta .sca-left .ws-sub{ margin-top:16px; max-width:44ch; }
.wsp-secsplitcta .sca-div{ background:var(--hair); align-self:stretch; }
.wsp-secsplitcta .sca-feats{ list-style:none; display:flex; flex-direction:column; gap:18px; margin:0; padding:0; min-width:0; }
.wsp-secsplitcta .sca-feat{ display:flex; align-items:flex-start; gap:12px; }
.wsp-secsplitcta .sca-ico{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, transparent); }
.wsp-secsplitcta .sca-ico svg{ width:12px; height:12px; stroke-width:2.6; }
.wsp-secsplitcta .sca-ft{ font-size:.86rem; font-weight:700; color:var(--ink); line-height:1.3; }
.wsp-secsplitcta .sca-fd{ margin-top:3px; font-size:.8rem; color:var(--dim); line-height:1.5; }
@container site (max-width:700px){
  .wsp-secsplitcta .sca-card{ grid-template-columns:1fr; grid-template-rows:auto 1px auto; gap:34px 0; padding:clamp(24px,6cqw,34px); }
  .wsp-secsplitcta .sca-div{ width:100%; height:1px; align-self:auto; }
}

/* --- secsectionpartnerlogos (SB_04 port) --- */
.wsp-secsectionpartnerlogos{ --spl-speed:28s; }
.wsp-secsectionpartnerlogos .spl-wrap{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:4px 0; margin:34px auto 0; width:min(1000px,92cqw); }
.wsp-secsectionpartnerlogos .spl-fade{ position:absolute; top:0; bottom:0; width:clamp(48px,10cqw,120px); z-index:2; pointer-events:none; }
.wsp-secsectionpartnerlogos .spl-fade.l{ left:0; background:linear-gradient(to right, var(--bg), transparent); }
.wsp-secsectionpartnerlogos .spl-fade.r{ right:0; background:linear-gradient(to left, var(--bg), transparent); }
.wsp-secsectionpartnerlogos .spl-track{ display:flex; width:max-content; will-change:transform; }
.wsp-secsectionpartnerlogos .spl-track.fwd{ animation:wsp-sspl-fwd var(--spl-speed) linear infinite; }
.wsp-secsectionpartnerlogos .spl-track.rev{ animation:wsp-sspl-rev var(--spl-speed) linear infinite; }
.wsp-secsectionpartnerlogos .spl-track:hover{ animation-play-state:paused; }
.wsp-secsectionpartnerlogos .spl-logos{ display:flex; align-items:center; }
.wsp-secsectionpartnerlogos .spl-logo{ display:inline-flex; align-items:center; justify-content:center; padding:10px 32px; font-size:15px; font-weight:800; letter-spacing:-0.02em; color:var(--dim); opacity:.6; white-space:nowrap; transition:opacity .2s, color .2s; border-right:1px solid var(--hair); }
.wsp-secsectionpartnerlogos .spl-logo:hover{ opacity:1; color:var(--ink); }
@keyframes wsp-sspl-fwd{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes wsp-sspl-rev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){
  .wsp-secsectionpartnerlogos .spl-track.fwd,
  .wsp-secsectionpartnerlogos .spl-track.rev{ animation:none; }
}
@container site (max-width:640px){
  .wsp-secsectionpartnerlogos .spl-wrap{ width:94cqw; margin-top:26px; }
  .wsp-secsectionpartnerlogos .spl-logo{ padding:8px 22px; font-size:13px; }
  .wsp-secsectionpartnerlogos .spl-fade{ width:clamp(28px,8cqw,64px); }
}

/* --- secvideoshowcase (SB_04 port) --- */
.wsp-secvideoshowcase .svs-wrap{ width:min(860px,92cqw); margin:clamp(28px,4cqw,44px) auto 0; border-radius:calc(var(--radius) + 2px); overflow:hidden; border:1px solid var(--hair); box-shadow:0 24px 64px rgba(0,0,0,0.5); }
.wsp-secvideoshowcase .svs-thumb{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/9; padding:0; margin:0; border:0; cursor:pointer; background:var(--panel); overflow:hidden; color:var(--ink); font:inherit; }
.wsp-secvideoshowcase .svs-poster{ position:absolute; inset:0; background:linear-gradient(135deg, var(--panel-2) 0%, var(--panel) 38%, var(--bg) 100%); background-size:cover; background-position:center; }
.wsp-secvideoshowcase .svs-poster::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 55% at 28% 38%, var(--accent-fill2), transparent 70%), radial-gradient(ellipse 55% 60% at 74% 66%, var(--accent-fill), transparent 70%); }
.wsp-secvideoshowcase .svs-poster::after{ content:''; position:absolute; inset:0; opacity:.5; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 40px); }
.wsp-secvideoshowcase .svs-play{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:clamp(58px,9cqw,74px); height:clamp(58px,9cqw,74px); border-radius:50%; background:var(--accent); color:var(--accent-text); box-shadow:0 8px 32px rgba(0,0,0,.35); transition:transform .16s ease; }
.wsp-secvideoshowcase .svs-play svg{ width:38%; height:38%; margin-left:8%; display:block; }
.wsp-secvideoshowcase .svs-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); opacity:.45; animation:wsp-svs-pulse 2s ease-out infinite; }
.wsp-secvideoshowcase .svs-thumb:hover .svs-play, .wsp-secvideoshowcase .svs-thumb:focus-visible .svs-play{ transform:scale(1.06); }
.wsp-secvideoshowcase .svs-thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-secvideoshowcase .svs-badge{ position:absolute; z-index:2; right:14px; bottom:14px; padding:4px 8px; border-radius:6px; font:700 11px var(--mono, var(--font)); letter-spacing:.04em; color:var(--ink); background:rgba(0,0,0,.6); }
.wsp-secvideoshowcase .svs-foot{ margin-top:clamp(18px,2.4cqw,26px); text-align:center; }
.wsp-secvideoshowcase .svs-cap{ margin:0 0 16px; font:400 13px/1.5 var(--font); color:var(--dim); }
.wsp-secvideoshowcase .svs-pills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.wsp-secvideoshowcase .svs-pill{ font:600 12px var(--font); padding:5px 12px; border-radius:999px; color:var(--dim); background:var(--panel-2); border:1px solid var(--hair); }

@keyframes wsp-svs-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.8); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .wsp-secvideoshowcase .svs-ring{ animation:none; }
  .wsp-secvideoshowcase .svs-play{ transition:none; }
}

/* lightbox — position:fixed, scoped by the site container's containing block (container-type),
   so it covers the preview pane, never the raw viewport. No blur/backdrop-filter. */
.wsp-secvideoshowcase .svs-lightbox{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:clamp(16px,5cqw,52px); opacity:0; transition:opacity .2s ease; }
.wsp-secvideoshowcase .svs-lightbox.on{ opacity:1; }
.wsp-secvideoshowcase .svs-lb-back{ position:absolute; inset:0; background:rgba(0,0,0,.82); border:0; cursor:pointer; }
.wsp-secvideoshowcase .svs-lb-frame{ position:relative; z-index:1; width:min(1000px,100%); }
.wsp-secvideoshowcase .svs-lb-stage{ position:relative; aspect-ratio:16/9; width:100%; background:#000; border-radius:calc(var(--radius) + 2px); overflow:hidden; border:1px solid var(--hair); box-shadow:0 30px 80px rgba(0,0,0,.6); transform:translateY(8px); transition:transform .2s ease; }
.wsp-secvideoshowcase .svs-lightbox.on .svs-lb-stage{ transform:translateY(0); }
.wsp-secvideoshowcase .svs-lb-stage iframe, .wsp-secvideoshowcase .svs-lb-stage video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
.wsp-secvideoshowcase .svs-lb-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; background:linear-gradient(135deg, var(--panel-2), var(--bg)); }
.wsp-secvideoshowcase .svs-lb-empty b{ font:600 16px var(--font); color:var(--ink); }
.wsp-secvideoshowcase .svs-lb-empty span{ font:400 13px/1.55 var(--font); color:var(--dim); max-width:34ch; }
.wsp-secvideoshowcase .svs-lb-x{ position:absolute; top:-44px; right:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--hair); background:var(--panel); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; transition:transform .15s ease; }
.wsp-secvideoshowcase .svs-lb-x:hover{ transform:scale(1.08); }

@container site (max-width:640px){
  .wsp-secvideoshowcase .svs-wrap{ width:min(860px,94cqw); }
  .wsp-secvideoshowcase .svs-cap{ padding:0 6px; }
  .wsp-secvideoshowcase .svs-lb-x{ top:-40px; }
}

/* --- secproductroadmap (SB_04 port) --- */
.wsp-secproductroadmap .sprm-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto clamp(22px,3cqw,30px); }
.wsp-secproductroadmap .sprm-chip{ appearance:none; -webkit-appearance:none; cursor:pointer; font:600 11px/1 var(--font); letter-spacing:.04em; color:var(--dim); background:transparent; border:1px solid var(--hair); border-radius:999px; padding:8px 15px; transition:color .18s ease, border-color .18s ease; }
.wsp-secproductroadmap .sprm-chip:hover{ color:var(--ink); border-color:var(--faint); }
.wsp-secproductroadmap .sprm-chip.on{ color:var(--accent); border-color:var(--accent); background:var(--accent-fill); }
.wsp-secproductroadmap .sprm-grid{ display:grid; grid-template-columns:repeat(var(--sprm-cols,4),minmax(0,1fr)); gap:16px; align-items:start; }
.wsp-secproductroadmap .sprm-col{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.wsp-secproductroadmap .sprm-col--future{ opacity:.7; }
.wsp-secproductroadmap .sprm-col-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px 12px; border-bottom:1px solid var(--hair); }
.wsp-secproductroadmap .sprm-quarter{ font:700 13px/1 var(--font); color:var(--ink); }
.wsp-secproductroadmap .sprm-col-count{ font:500 11px/1 var(--font); color:var(--dim); white-space:nowrap; }
.wsp-secproductroadmap .sprm-card{ text-align:left; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,8px); padding:14px; transition:border-color .16s ease, transform .16s ease; }
.wsp-secproductroadmap .sprm-card.is-hidden{ display:none; }
.wsp-secproductroadmap .sprm-card:hover{ border-color:var(--faint); transform:translateY(-2px); }
.wsp-secproductroadmap .sprm-card--shipped{ border-color:rgba(90,158,122,.30); }
.wsp-secproductroadmap .sprm-card--inprogress{ border-color:var(--accent-dim); }
.wsp-secproductroadmap .sprm-badge{ display:inline-block; margin-bottom:8px; font:700 9px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:3px; }
.wsp-secproductroadmap .sprm-badge--shipped{ background:rgba(90,158,122,.16); color:#5fa683; }
.wsp-secproductroadmap .sprm-badge--inprogress{ background:var(--accent-fill); color:var(--accent); }
.wsp-secproductroadmap .sprm-badge--planned{ background:var(--panel-2); color:var(--dim); }
.wsp-secproductroadmap .sprm-badge--idea{ background:rgba(200,168,114,.14); color:#c8a872; }
.wsp-secproductroadmap .sprm-card-title{ font:700 13px/1.3 var(--font); color:var(--ink); margin-bottom:5px; }
.wsp-secproductroadmap .sprm-card-desc{ font:400 12px/1.55 var(--font); color:var(--dim); }
.wsp-secproductroadmap .sprm-none{ display:none; font:500 11px/1 var(--font); color:var(--faint); padding:6px 2px; }
.wsp-secproductroadmap .sprm-col.is-empty .sprm-none{ display:block; }
@container site (max-width:820px){
  .wsp-secproductroadmap .sprm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container site (max-width:480px){
  .wsp-secproductroadmap .sprm-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secproductroadmap .sprm-card, .wsp-secproductroadmap .sprm-chip{ transition:none; }
  .wsp-secproductroadmap .sprm-card:hover{ transform:none; }
}

/* --- secsectionteamgrid (SB_04 port) --- */
.wsp-secsectionteamgrid .stg-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px auto 0; max-width:640px; }
.wsp-secsectionteamgrid .stg-chip{ appearance:none; -webkit-appearance:none; }
.wsp-secsectionteamgrid .stg-chip:not(.on):hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 32%, var(--hair)); }
.wsp-secsectionteamgrid .stg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; width:min(960px,92cqw); margin:32px auto 0; }
.wsp-secsectionteamgrid .stg-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:24px 20px; background:var(--panel); border:var(--bw,1px) solid var(--hair); border-radius:var(--radius,12px); transition:border-color 160ms ease, transform 160ms ease; }
.wsp-secsectionteamgrid .stg-card:hover{ border-color:color-mix(in srgb, var(--accent) 42%, var(--hair)); transform:translateY(-2px); }
.wsp-secsectionteamgrid .stg-avatar{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 16px/1 var(--font-head, var(--font)); letter-spacing:-.02em; color:#fff; margin-bottom:4px; flex:none; }
.wsp-secsectionteamgrid .stg-name{ font:700 13.5px var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-secsectionteamgrid .stg-role{ font:400 12px var(--font); color:var(--dim); }
.wsp-secsectionteamgrid .stg-dept{ margin-top:2px; padding:3px 9px; border-radius:5px; font:700 9px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.wsp-secsectionteamgrid .stg-hide{ display:none; }
@container site (max-width:720px){
  .wsp-secsectionteamgrid .stg-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:430px){
  .wsp-secsectionteamgrid .stg-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secsectionteamgrid .stg-card{ transition:border-color 160ms ease; }
  .wsp-secsectionteamgrid .stg-card:hover{ transform:none; }
}

/* --- secawardsstrip (SB_04 port) --- */
.wsp-secawardsstrip .aw-label{ margin-bottom:20px; }
.wsp-secawardsstrip .aw-strip{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; width:min(1000px,88cqw); margin:0 auto; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:28px 32px; }
.wsp-secawardsstrip .aw-item{ display:flex; align-items:center; gap:12px; padding:0 28px; flex:1; min-width:160px; transition:opacity .2s; }
.wsp-secawardsstrip .aw-item:hover{ opacity:.85; }
.wsp-secawardsstrip .aw-icon{ font-size:24px; line-height:1; flex-shrink:0; }
.wsp-secawardsstrip .aw-award{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.wsp-secawardsstrip .aw-body{ font-size:11px; color:var(--dim); }
.wsp-secawardsstrip .aw-divider{ width:1px; align-self:stretch; min-height:40px; background:var(--hair); flex-shrink:0; }
@container site (max-width:700px){
  .wsp-secawardsstrip .aw-strip{ flex-direction:column; gap:16px; padding:24px; }
  .wsp-secawardsstrip .aw-divider{ width:100%; height:1px; min-height:0; }
  .wsp-secawardsstrip .aw-item{ padding:0; }
}

/* --- secquotewall (SB_04 port) --- */
.wsp-secquotewall .qw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; width:min(960px,100%); margin:0 auto; }
.wsp-secquotewall .qw-col{ display:flex; flex-direction:column; gap:16px; }
.wsp-secquotewall .qw-card{ position:relative; overflow:hidden; height:100%;
  display:flex; flex-direction:column; gap:16px; padding:32px;
  border:1px solid var(--hair); border-radius:var(--radius,12px); background:var(--panel);
  transition:border-color .2s ease; }
.wsp-secquotewall .qw-card:hover{ border-color:color-mix(in srgb, var(--ink) 16%, transparent); }
.wsp-secquotewall .qw-mark{ position:absolute; top:16px; left:22px; pointer-events:none;
  font:italic 800 80px/0.7 var(--font-head, var(--font)); color:var(--accent); opacity:.18; }
.wsp-secquotewall .qw-quote{ position:relative; flex:1; margin:0; padding-top:24px;
  font:italic 400 clamp(18px,2.3cqw,20px)/1.65 var(--font-head, var(--font)); color:var(--ink); }
.wsp-secquotewall .qw-card.tall .qw-quote{ font-size:clamp(19px,2.6cqw,22px); }
.wsp-secquotewall .qw-who{ display:flex; align-items:center; gap:10px; }
.wsp-secquotewall .qw-av{ display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--accent-fill, color-mix(in srgb, var(--accent) 16%, transparent)); color:var(--accent);
  font:800 12px var(--font); letter-spacing:.02em; }
.wsp-secquotewall .qw-meta{ display:flex; flex-direction:column; }
.wsp-secquotewall .qw-name{ font:700 13px var(--font); color:var(--ink); margin-bottom:1px; }
.wsp-secquotewall .qw-role{ font:400 11px var(--font); color:var(--dim); }
@container site (max-width:640px){
  .wsp-secquotewall .qw-grid{ grid-template-columns:1fr; }
  .wsp-secquotewall .qw-card{ padding:26px; }
}
@media (prefers-reduced-motion:reduce){
  .wsp-secquotewall .qw-card{ transition:none; }
}

/* --- secsectiontrustbadges (SB_04 port) --- */
.wsp-secsectiontrustbadges .stb-badges{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; width:min(960px,88cqw); margin:0 auto; }
.wsp-secsectiontrustbadges .stb-badge{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:20px 16px; transition:border-color .2s ease; }
.wsp-secsectiontrustbadges .stb-badge:hover{ border-color:color-mix(in srgb, var(--ink) 14%, transparent); }
.wsp-secsectiontrustbadges .stb-shield{ font-size:1.5rem; line-height:1; }
.wsp-secsectiontrustbadges .stb-badge-name{ font-size:0.75rem; font-weight:800; letter-spacing:-0.01em; color:var(--ink); }
.wsp-secsectiontrustbadges .stb-badge-sub{ font-size:0.6875rem; color:var(--dim); }
@container site (max-width:740px){
  .wsp-secsectiontrustbadges .stb-badges{ grid-template-columns:repeat(3,1fr); }
}
@container site (max-width:440px){
  .wsp-secsectiontrustbadges .stb-badges{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secsectiontrustbadges .stb-badge{ transition:none; }
}

/* --- secstepsnumbered (SB_04 port) --- */
.wsp-secstepsnumbered .ssn-steps{ display:flex; align-items:flex-start; gap:0; margin-top:8px; }
.wsp-secstepsnumbered .ssn-step{ flex:1; padding:0 clamp(10px,1.6cqw,16px); text-align:left; }
.wsp-secstepsnumbered .ssn-num-wrap{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.wsp-secstepsnumbered .ssn-num{ font:900 clamp(34px,5cqw,46px)/1 var(--font-head, var(--font)); letter-spacing:-0.05em; color:color-mix(in srgb, var(--accent) 15%, transparent); flex-shrink:0; font-variant-numeric:tabular-nums; transition:color .5s ease; }
.wsp-secstepsnumbered .ssn-icon{ display:flex; flex-shrink:0; color:var(--dim); transition:color .5s ease, transform .5s ease; }
.wsp-secstepsnumbered .ssn-icon svg{ width:clamp(22px,3.4cqw,28px); height:clamp(22px,3.4cqw,28px); }
.wsp-secstepsnumbered .ssn-body{ min-width:0; }
.wsp-secstepsnumbered .ssn-step-title{ margin:0 0 10px; font:700 clamp(15px,1.7cqw,17px)/1.3 var(--font); color:var(--ink); }
.wsp-secstepsnumbered .ssn-step-desc{ margin:0; font:400 clamp(13px,1.5cqw,14px)/1.7 var(--font); color:var(--dim); }
.wsp-secstepsnumbered .ssn-connector{ width:clamp(24px,4cqw,44px); flex-shrink:0; margin-top:clamp(20px,2.6cqw,28px); height:1px; background:var(--hair); position:relative; }
.wsp-secstepsnumbered .ssn-connector::after{ content:'›'; position:absolute; right:-5px; top:-9px; font-size:16px; line-height:1; color:var(--dim); }
.wsp-secstepsnumbered .ssn-step.is-on .ssn-num{ color:color-mix(in srgb, var(--accent) 32%, transparent); }
.wsp-secstepsnumbered .ssn-step.is-on .ssn-icon{ color:var(--accent); transform:translateY(-1px) scale(1.06); }
.wsp-secstepsnumbered .ssn-cta-row{ text-align:center; margin-top:clamp(32px,4cqw,48px); }
.wsp-secstepsnumbered .ssn-cta{ display:inline-flex; align-items:center; gap:7px; font:700 14px/1 var(--font); color:var(--accent); text-decoration:none; }
.wsp-secstepsnumbered .ssn-cta .ssn-arw{ transition:transform .25s ease; }
.wsp-secstepsnumbered .ssn-cta:hover{ text-decoration:underline; }
.wsp-secstepsnumbered .ssn-cta:hover .ssn-arw{ transform:translateX(3px); }
@container site (max-width:680px){
  .wsp-secstepsnumbered .ssn-steps{ flex-direction:column; gap:clamp(26px,5cqw,34px); }
  .wsp-secstepsnumbered .ssn-step{ padding:0; }
  .wsp-secstepsnumbered .ssn-connector{ width:1px; height:24px; margin:0 0 0 18px; }
  .wsp-secstepsnumbered .ssn-connector::after{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secstepsnumbered .ssn-num, .wsp-secstepsnumbered .ssn-icon, .wsp-secstepsnumbered .ssn-cta .ssn-arw{ transition:none; }
}

/* --- secopensource (SB_04 port) --- */
.wsp-secopensource .ws-in{ width:min(620px,90cqw); }
.wsp-secopensource .sos-card{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,12px); padding:24px; display:flex; flex-direction:column; gap:16px; text-align:left; }
.wsp-secopensource .sos-top{ display:flex; align-items:center; gap:12px; }
.wsp-secopensource .sos-ico{ display:flex; color:var(--dim); }
.wsp-secopensource .sos-ico svg{ width:20px; height:20px; }
.wsp-secopensource .sos-info{ flex:1; min-width:0; }
.wsp-secopensource .sos-org{ font:400 12px var(--mono); color:var(--dim); }
.wsp-secopensource .sos-name{ font:800 16px var(--mono); color:var(--accent); word-break:break-word; }
.wsp-secopensource .sos-license{ flex-shrink:0; font:700 9px var(--font); letter-spacing:0.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--dim); border:1px solid var(--hair); }
.wsp-secopensource .sos-desc{ margin:0; font:400 13px/1.6 var(--font); color:var(--dim); }
.wsp-secopensource .sos-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.wsp-secopensource .sos-lang{ display:inline-flex; align-items:center; gap:5px; font:400 12px var(--font); color:var(--dim); }
.wsp-secopensource .sos-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.wsp-secopensource .sos-stat{ display:inline-flex; align-items:center; gap:5px; font:400 12px var(--font); color:var(--dim); }
.wsp-secopensource .sos-stat svg{ width:13px; height:13px; }
.wsp-secopensource .sos-contrib{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.wsp-secopensource .sos-avs{ display:flex; }
.wsp-secopensource .sos-av{ width:24px; height:24px; border-radius:50%; border:2px solid var(--panel); margin-right:-6px; display:flex; align-items:center; justify-content:center; font:800 8px var(--font); color:rgba(255,255,255,0.92); }
.wsp-secopensource .sos-contrib-label{ font:400 12px var(--font); color:var(--dim); padding-left:10px; }
.wsp-secopensource .sos-actions{ margin-top:0; }
.wsp-secopensource .sos-actions .ws-btn{ font-size:13px; padding:10px 18px; }
@container site (max-width:560px){
  .wsp-secopensource .sos-actions{ flex-direction:column; align-items:stretch; }
  .wsp-secopensource .sos-actions .ws-btn{ width:100%; justify-content:center; }
}

/* --- secsocialproof (SB_04 port) --- */
.wsp-secsocialproof{ --ssp-star:#c8a872; }
.wsp-secsocialproof .ssp-rating-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.wsp-secsocialproof .ssp-stars{ font-size:18px; color:var(--ssp-star); letter-spacing:2px; line-height:1; }
.wsp-secsocialproof .ssp-rating-text{ font-size:13px; color:var(--dim); }
.wsp-secsocialproof .ssp-rating-text b{ color:var(--ink); font-weight:600; }

.wsp-secsocialproof .ssp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:4px; }
.wsp-secsocialproof .ssp-card{ display:flex; flex-direction:column; gap:16px; padding:24px; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); transition:transform 160ms ease, border-color 160ms linear; }
.wsp-secsocialproof .ssp-card:hover{ transform:translateY(-3px); border-color:var(--accent); }
.wsp-secsocialproof .ssp-card-stars{ font-size:13px; color:var(--ssp-star); letter-spacing:1px; line-height:1; }
.wsp-secsocialproof .ssp-card-stars i{ color:var(--hair); font-style:normal; }
.wsp-secsocialproof .ssp-quote{ margin:0; font-size:14px; line-height:1.7; color:var(--dim); flex:1 1 auto; }
.wsp-secsocialproof .ssp-author{ display:flex; align-items:center; gap:12px; margin:0; }
.wsp-secsocialproof .ssp-avatar{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; flex:none; font:800 11px var(--font); background:var(--accent-fill); color:var(--accent); }
.wsp-secsocialproof .ssp-author-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wsp-secsocialproof .ssp-author-name{ font-size:13px; font-weight:700; color:var(--ink); }
.wsp-secsocialproof .ssp-author-role{ font-size:11px; color:var(--dim); font-style:normal; }

.wsp-secsocialproof .ssp-press{ display:flex; align-items:center; justify-content:center; gap:16px 24px; flex-wrap:wrap; margin-top:48px; }
.wsp-secsocialproof .ssp-press-label{ font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.wsp-secsocialproof .ssp-press-logos{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center; }
.wsp-secsocialproof .ssp-press-logos .ws-mark{ font-size:14px; }

@container site (max-width:720px){
  .wsp-secsocialproof .ssp-cards{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secsocialproof .ssp-card{ transition:none; }
  .wsp-secsocialproof .ssp-card:hover{ transform:none; }
}

/* --- secproductdemo (SB_04 port) --- */
.wsp-secproductdemo .spd-win{ position:relative; width:min(900px,92cqw); margin:clamp(30px,4cqw,44px) auto 0; border-radius:calc(var(--radius,12px) + 2px); overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--hair)); background:var(--panel); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), 0 30px 70px color-mix(in srgb, var(--bg) 62%, transparent); }
.wsp-secproductdemo .spd-bar{ display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--hair); background:var(--panel-2, var(--panel)); }
.wsp-secproductdemo .spd-dot{ width:10px; height:10px; border-radius:50%; flex:none; background:color-mix(in srgb, var(--ink) 18%, transparent); }
.wsp-secproductdemo .spd-addr{ margin-left:10px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 11.5px var(--mono); color:var(--faint); letter-spacing:.2px; }

.wsp-secproductdemo .spd-screen{ position:relative; aspect-ratio:16 / 9; display:flex; align-items:center; justify-content:center; overflow:hidden; background-color:var(--bg); background-image:repeating-linear-gradient(0deg, transparent, transparent 39px, color-mix(in srgb, var(--ink) 6%, transparent) 39px, color-mix(in srgb, var(--ink) 6%, transparent) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, color-mix(in srgb, var(--ink) 6%, transparent) 39px, color-mix(in srgb, var(--ink) 6%, transparent) 40px), linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--bg)) 0%, color-mix(in srgb, var(--accent) 8%, var(--bg)) 44%, var(--bg) 100%); }

.wsp-secproductdemo .spd-poster{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity 240ms ease; }
.wsp-secproductdemo .spd-win.is-playing .spd-poster{ opacity:0; pointer-events:none; }
.wsp-secproductdemo .spd-playwrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.wsp-secproductdemo .spd-ring{ position:absolute; width:76px; height:76px; border-radius:50%; background:color-mix(in srgb, var(--accent) 30%, transparent); pointer-events:none; animation:spd-pulse 2s ease-out infinite; }
.wsp-secproductdemo .spd-play{ position:relative; z-index:1; width:66px; height:66px; border-radius:50%; border:0; cursor:pointer; appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:center; color:var(--accent-text, var(--bg)); background:var(--accent); box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 42%, transparent); transition:transform 160ms ease; }
.wsp-secproductdemo .spd-play svg{ width:26px; height:26px; margin-left:3px; }
.wsp-secproductdemo .spd-play:hover{ transform:scale(1.08); }
.wsp-secproductdemo .spd-play:active{ transform:scale(1); }
.wsp-secproductdemo .spd-play:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
@keyframes spd-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(2.2); opacity:0; } }

.wsp-secproductdemo .spd-film{ position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; transition:opacity 260ms ease; display:flex; flex-direction:column; gap:clamp(8px,1.6cqw,14px); padding:clamp(14px,3cqw,26px); padding-bottom:clamp(42px,6cqw,56px); }
.wsp-secproductdemo .spd-win.is-playing .spd-film{ opacity:1; }
.wsp-secproductdemo .spd-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.6cqw,14px); flex:none; }
.wsp-secproductdemo .spd-kpi{ padding:clamp(8px,1.6cqw,14px); border-radius:calc(var(--radius,12px) * .7); background:color-mix(in srgb, var(--ink) 6%, transparent); border:1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.wsp-secproductdemo .spd-kn{ font:700 clamp(14px,2.6cqw,22px)/1 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.02em; }
.wsp-secproductdemo .spd-kl{ margin-top:5px; font:500 clamp(9px,1.3cqw,11px) var(--mono); color:var(--dim); letter-spacing:.4px; }
.wsp-secproductdemo .spd-chart{ flex:1; min-height:0; display:flex; align-items:flex-end; gap:clamp(5px,1.2cqw,10px); }
.wsp-secproductdemo .spd-cbar{ flex:1; height:100%; border-radius:5px 5px 0 0; transform-origin:bottom; transform:scaleY(0.08); background:linear-gradient(to top, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent) 40%, transparent)); }
.wsp-secproductdemo .spd-cap{ display:inline-flex; align-items:center; gap:8px; flex:none; font:600 clamp(10px,1.5cqw,12px) var(--font); color:var(--ink); }
.wsp-secproductdemo .spd-cdot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

.wsp-secproductdemo .spd-ctrls{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:12px; padding:10px 14px; opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity 220ms ease, transform 220ms ease; background:linear-gradient(to top, color-mix(in srgb, var(--bg) 80%, transparent), transparent); }
.wsp-secproductdemo .spd-win.is-playing .spd-ctrls{ opacity:1; pointer-events:auto; transform:none; }
.wsp-secproductdemo .spd-toggle{ flex:none; width:30px; height:30px; border-radius:50%; border:0; cursor:pointer; appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:center; color:var(--accent-text, var(--bg)); background:var(--accent); transition:transform 150ms ease; }
.wsp-secproductdemo .spd-toggle:hover{ transform:scale(1.08); }
.wsp-secproductdemo .spd-toggle svg{ width:14px; height:14px; }
.wsp-secproductdemo .spd-track{ flex:1; height:5px; border-radius:99px; background:color-mix(in srgb, var(--ink) 20%, transparent); cursor:pointer; position:relative; }
.wsp-secproductdemo .spd-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:99px; background:var(--accent); }
.wsp-secproductdemo .spd-time{ flex:none; min-width:66px; text-align:right; font:600 10.5px var(--mono); color:var(--ink); letter-spacing:.3px; }

.wsp-secproductdemo .spd-calls{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:clamp(24px,3.2cqw,32px); }
.wsp-secproductdemo .spd-call{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px; background:var(--panel); border:1px solid var(--hair); font:600 13px var(--font); color:var(--ink); }
.wsp-secproductdemo .spd-cico{ display:inline-flex; color:var(--accent); }
.wsp-secproductdemo .spd-cico svg{ width:15px; height:15px; }

@media (prefers-reduced-motion: reduce){
  .wsp-secproductdemo .spd-ring{ animation:none; opacity:.4; }
}
@container site (max-width:560px){
  .wsp-secproductdemo .spd-calls{ flex-direction:column; align-items:stretch; }
  .wsp-secproductdemo .spd-call{ justify-content:center; }
  .wsp-secproductdemo .spd-kl{ letter-spacing:0; }
}

/* --- sectestimonialfeatured (SB_04 port) --- */
.wsp-sectestimonialfeatured .stf-card{ position:relative; max-width:760px; margin-inline:auto; text-align:center;
  background:var(--panel); background-image:var(--surface-grad,none);
  border:var(--bw,1px) solid var(--hair); border-radius:var(--radius,16px);
  padding:clamp(34px,5cqw,56px) clamp(24px,5cqw,52px); }
.wsp-sectestimonialfeatured .stf-mark{ display:block; margin-bottom:clamp(6px,1.4cqw,20px);
  font:italic 400 clamp(96px,14cqw,140px)/0.7 Georgia,'Times New Roman',serif;
  color:var(--accent); opacity:.2; user-select:none; }
.wsp-sectestimonialfeatured .stf-quote{ margin:0 0 clamp(26px,4cqw,40px); quotes:none;
  font:italic 400 clamp(1.25rem,3cqw,1.875rem)/1.55 Georgia,'Times New Roman',serif;
  color:var(--ink); text-wrap:balance; }
.wsp-sectestimonialfeatured .stf-author{ display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; }
.wsp-sectestimonialfeatured .stf-avatar{ width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; font:800 13px var(--font); letter-spacing:.02em;
  color:var(--accent-text,var(--bg)); background:var(--accent); }
.wsp-sectestimonialfeatured .stf-meta{ display:flex; flex-direction:column; gap:2px; text-align:left; min-width:0; }
.wsp-sectestimonialfeatured .stf-name{ font:700 14px var(--font); color:var(--ink); }
.wsp-sectestimonialfeatured .stf-role{ font:400 12px var(--font); color:var(--dim); }
.wsp-sectestimonialfeatured .stf-stars{ margin-left:auto; display:inline-flex; line-height:1;
  font-size:16px; letter-spacing:2px; color:#c8a872; }
.wsp-sectestimonialfeatured .stf-stars i{ color:var(--hair); font-style:normal; }
@container site (max-width:560px){
  .wsp-sectestimonialfeatured .stf-card{ padding:clamp(30px,7cqw,40px) clamp(22px,6cqw,28px); }
  .wsp-sectestimonialfeatured .stf-stars{ margin-left:0; }
}

/* --- secusagelimits (SB_04 port) --- */
.wsp-secusagelimits .ws-in{ width:min(600px,90cqw); }
.wsp-secusagelimits .sul-panel{ background:var(--panel); border:1px solid var(--hair); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:20px; margin:6px 0 2px; text-align:left; }
.wsp-secusagelimits .sul-meter{ display:flex; flex-direction:column; gap:7px; }
.wsp-secusagelimits .sul-mtop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.wsp-secusagelimits .sul-mlabel{ font-size:13px; font-weight:600; color:var(--ink); }
.wsp-secusagelimits .sul-mval{ font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.wsp-secusagelimits .sul-track{ height:6px; background:color-mix(in srgb, var(--ink) 8%, transparent); border-radius:3px; overflow:hidden; }
.wsp-secusagelimits .sul-fill{ display:block; height:100%; max-width:100%; border-radius:3px; background:var(--accent); }
.wsp-secusagelimits .sul-fill.warn{ background:#c8a872; }
.wsp-secusagelimits .sul-fill.danger{ background:#e05a5a; }
.wsp-secusagelimits .sul-note{ font-size:11px; color:var(--dim); }
.wsp-secusagelimits .sul-note.warn{ color:#c8a872; }
.wsp-secusagelimits .sul-note.danger{ color:#e05a5a; }
.wsp-secusagelimits .sul-cta{ align-items:center; }
.wsp-secusagelimits .sul-ctanote{ font-size:12px; color:var(--dim); }
@container site (max-width:560px){
  .wsp-secusagelimits .sul-panel{ padding:20px 16px; }
}

/* --- sectimelinesteps (SB_04 port) --- */
.wsp-sectimelinesteps .sts-timeline{ width:min(600px,100%); margin:0 auto; text-align:left; display:flex; flex-direction:column; }
.wsp-sectimelinesteps .sts-step{ display:flex; gap:20px; }
.wsp-sectimelinesteps .sts-step-left{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:36px; }
.wsp-sectimelinesteps .sts-num{ width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color:var(--accent); font:800 14px/1 var(--font);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease; }
.wsp-sectimelinesteps .sts-num svg{ width:16px; height:16px; }
.wsp-sectimelinesteps .sts-num--done{ background:color-mix(in srgb, #5a9e7a 14%, transparent);
  border-color:color-mix(in srgb, #5a9e7a 34%, transparent); color:#5a9e7a; }
.wsp-sectimelinesteps .sts-step:hover .sts-num{ transform:translateY(-2px); }
.wsp-sectimelinesteps .sts-connector{ flex:1; width:1px; background:var(--hair); margin:4px 0; min-height:48px; }

.wsp-sectimelinesteps .sts-step-body{ padding-bottom:40px; flex:1; min-width:0; }
.wsp-sectimelinesteps .sts-step--last .sts-step-body{ padding-bottom:0; }
.wsp-sectimelinesteps .sts-step-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px; margin-top:5px; }
.wsp-sectimelinesteps .sts-step-title{ font:700 16px/1.3 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-sectimelinesteps .sts-tag{ font:700 9px/1 var(--font); text-transform:uppercase; letter-spacing:.05em;
  padding:4px 8px; border-radius:4px; background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--dim); }
.wsp-sectimelinesteps .sts-tag--done{ background:color-mix(in srgb, #5a9e7a 16%, transparent); color:#5a9e7a; }
.wsp-sectimelinesteps .sts-step-desc{ margin:0; font:400 14px/1.65 var(--font); color:var(--dim); }

@container site (max-width:560px){
  .wsp-sectimelinesteps .sts-step{ gap:16px; }
  .wsp-sectimelinesteps .sts-step-body{ padding-bottom:32px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-sectimelinesteps .sts-num{ transition:none; }
  .wsp-sectimelinesteps .sts-step:hover .sts-num{ transform:none; }
}

/* --- secbentofeatures (SB_04 port) --- */
.wsp-secbentofeatures .bf-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:14px; width:min(900px,100%); margin:0 auto; }
.wsp-secbentofeatures .bf-tile{ display:flex; flex-direction:column; gap:12px; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:clamp(20px,3cqw,24px); transition:border-color .2s ease, transform .2s ease; }
.wsp-secbentofeatures .bf-tile:hover{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); transform:translateY(-2px); }
.wsp-secbentofeatures .bf-tile--hero{ grid-column:1 / 3; background:color-mix(in srgb, var(--accent) 8%, transparent); border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
.wsp-secbentofeatures .bf-ico{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:color-mix(in srgb, var(--ink) 6%, transparent); border:1px solid var(--hair); color:var(--accent); }
.wsp-secbentofeatures .bf-ico svg{ width:18px; height:18px; }
.wsp-secbentofeatures .bf-tile--hero .bf-ico{ width:48px; height:48px; border-radius:12px; }
.wsp-secbentofeatures .bf-tile--hero .bf-ico svg{ width:24px; height:24px; }
.wsp-secbentofeatures .bf-name{ margin:0; font:700 15px/1.3 var(--font-head, var(--font)); letter-spacing:-0.01em; color:var(--ink); }
.wsp-secbentofeatures .bf-tile--hero .bf-name{ font-size:18px; }
.wsp-secbentofeatures .bf-desc{ margin:0; font:400 13px/1.6 var(--font); color:var(--dim); }
@container site (max-width:720px){
  .wsp-secbentofeatures .bf-grid{ grid-template-columns:1fr 1fr; }
  .wsp-secbentofeatures .bf-tile--hero{ grid-column:span 2; }
}
@container site (max-width:480px){
  .wsp-secbentofeatures .bf-grid{ grid-template-columns:1fr; }
  .wsp-secbentofeatures .bf-tile--hero{ grid-column:auto; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secbentofeatures .bf-tile{ transition:border-color .2s ease; }
  .wsp-secbentofeatures .bf-tile:hover{ transform:none; }
}

/* --- sectwocoltext (SB_04 port) --- */
.wsp-sectwocoltext .ws-in.split{ align-items:start; gap:clamp(40px,7cqw,80px); }
.wsp-sectwocoltext .ws-h2{ letter-spacing:-0.025em; }
.wsp-sectwocoltext .stt-rule{ display:block; height:3px; width:48px; margin-top:26px; border-radius:2px; background:var(--accent); }
.wsp-sectwocoltext .stt-right{ display:flex; flex-direction:column; gap:20px; padding-top:4px; }
.wsp-sectwocoltext .stt-body{ max-width:54ch; line-height:1.8; }
.wsp-sectwocoltext .stt-link{ align-self:flex-start; margin-top:6px; transition:opacity 140ms ease; }
.wsp-sectwocoltext .stt-link:hover{ opacity:0.78; }
@container site (max-width:640px){
  .wsp-sectwocoltext .ws-in.split{ grid-template-columns:1fr; gap:34px; align-items:start; }
  .wsp-sectwocoltext .stt-right{ padding-top:0; }
}

/* --- secteamvalues (SB_04 port) --- */
.wsp-secteamvalues .stv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:min(960px,88cqw); margin:0 auto; }
.wsp-secteamvalues .stv-card{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,12px); padding:28px 24px; display:flex; flex-direction:column; gap:12px; text-align:left; transition:border-color .2s ease, transform .2s ease; }
.wsp-secteamvalues .stv-card:hover{ border-color:color-mix(in srgb, var(--ink) 16%, var(--hair)); transform:translateY(-3px); }
.wsp-secteamvalues .stv-icon{ width:44px; height:44px; border-radius:10px; background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 20%, transparent); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:0 0 auto; }
.wsp-secteamvalues .stv-icon svg{ width:20px; height:20px; }
.wsp-secteamvalues .stv-name{ margin:0; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
.wsp-secteamvalues .stv-desc{ margin:0; font-size:13px; line-height:1.65; color:var(--dim); }
@container site (max-width:680px){
  .wsp-secteamvalues .stv-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:440px){
  .wsp-secteamvalues .stv-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secteamvalues .stv-card{ transition:none; }
  .wsp-secteamvalues .stv-card:hover{ transform:none; }
}

/* --- secnumbersticker (SB_04 port) --- */
.wsp-secnumbersticker .ws-in{ width:min(920px,88cqw); }
.wsp-secnumbersticker .ws-shead.center{ margin-bottom:clamp(38px,5cqw,56px); }
.wsp-secnumbersticker .ws-statrow{ align-items:center; }
.wsp-secnumbersticker .ws-stat{ position:relative; gap:10px; padding:6px clamp(14px,3cqw,32px); }
.wsp-secnumbersticker .ws-stat b{ font-size:clamp(38px,5.2cqw,64px); line-height:1; letter-spacing:-0.04em; color:var(--ink); font-variant-numeric:tabular-nums; }
.wsp-secnumbersticker .ws-stat i{ font-size:13px; color:var(--dim); }
.wsp-secnumbersticker .ws-stat + .ws-stat::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:1px; height:64px; background:var(--hair); }
@container site (max-width:560px){
  .wsp-secnumbersticker .ws-stat + .ws-stat::before{ display:none; }
  .wsp-secnumbersticker .ws-stat{ padding:12px 8px; }
  .wsp-secnumbersticker .ws-stat b{ font-size:clamp(34px,11cqw,48px); }
}

/* --- secprocessflow (SB_04 port) --- */
.wsp-secprocessflow .spf-steps{ display:flex; align-items:flex-start; gap:0; width:min(960px,88cqw); margin:0 auto; }
.wsp-secprocessflow .spf-step{ flex:1; min-width:0; text-align:center; padding:0 16px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.wsp-secprocessflow .spf-conn{ flex-shrink:0; align-self:flex-start; width:clamp(24px,4cqw,44px); margin-top:28px; border-top:2px dashed var(--hair); }
.wsp-secprocessflow .spf-circle{
  width:56px; height:56px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:800 20px/1 var(--font-head, var(--font));
  color:var(--accent);
  background:color-mix(in oklab, var(--accent) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  filter:hue-rotate(var(--spf-rot,0deg));
  transition:transform .3s ease;
}
.wsp-secprocessflow .spf-step:hover .spf-circle{ transform:translateY(-3px); }
.wsp-secprocessflow .spf-step-title{ font:700 15px/1.3 var(--font-head, var(--font)); color:var(--ink); }
.wsp-secprocessflow .spf-step-desc{ font-size:13px; line-height:1.65; color:var(--dim); max-width:24ch; }
@container site (max-width:640px){
  .wsp-secprocessflow .spf-steps{ flex-direction:column; align-items:center; gap:22px; }
  .wsp-secprocessflow .spf-step{ padding:0; }
  .wsp-secprocessflow .spf-step-desc{ max-width:34ch; }
  .wsp-secprocessflow .spf-conn{ width:2px; height:22px; margin-top:0; align-self:center; border-top:none; border-left:2px dashed var(--hair); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secprocessflow .spf-circle{ transition:none; }
  .wsp-secprocessflow .spf-step:hover .spf-circle{ transform:none; }
}

/* --- secstatusroadmap (SB_04 port) --- */
.wsp-secstatusroadmap .ssr-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; width:min(960px,100%); margin:44px auto 0; text-align:left; }
.wsp-secstatusroadmap .ssr-col-label{ display:inline-flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; line-height:1; padding:8px 14px; border-radius:6px; margin-bottom:12px; }
.wsp-secstatusroadmap .ssr-col-label .m{ font-size:.9em; line-height:1; }
.wsp-secstatusroadmap .ssr-col-label.now{ background:rgba(90,158,122,0.12); color:#5a9e7a; }
.wsp-secstatusroadmap .ssr-col-label.next{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.wsp-secstatusroadmap .ssr-col-label.later{ background:color-mix(in srgb, var(--dim) 14%, transparent); color:var(--dim); }
.wsp-secstatusroadmap .ssr-cards{ display:flex; flex-direction:column; gap:10px; }
.wsp-secstatusroadmap .ssr-card{ display:flex; align-items:flex-start; gap:12px; background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:14px 16px; transition:border-color .2s ease, transform .2s ease; }
.wsp-secstatusroadmap .ssr-card:hover{ border-color:color-mix(in srgb, var(--ink) 16%, transparent); transform:translateY(-1px); }
.wsp-secstatusroadmap .ssr-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.wsp-secstatusroadmap .ssr-dot.shipped{ background:#5a9e7a; box-shadow:0 0 5px rgba(90,158,122,0.5); }
.wsp-secstatusroadmap .ssr-dot.progress{ background:#c8a872; box-shadow:0 0 5px rgba(200,168,114,0.5); }
.wsp-secstatusroadmap .ssr-dot.planned{ background:color-mix(in srgb, var(--ink) 24%, transparent); }
.wsp-secstatusroadmap .ssr-feat{ font-size:.84rem; font-weight:700; color:var(--ink); margin-bottom:4px; }
.wsp-secstatusroadmap .ssr-desc{ font-size:.74rem; color:var(--dim); line-height:1.6; }
@container site (max-width:680px){
  .wsp-secstatusroadmap .ssr-cols{ grid-template-columns:1fr; gap:12px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secstatusroadmap .ssr-card{ transition:none; }
  .wsp-secstatusroadmap .ssr-card:hover{ transform:none; }
}

/* --- secawardbadges (SB_04 port) --- */
.wsp-secawardbadges .ab-grid{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; width:min(960px,100%); margin:0 auto; }
.wsp-secawardbadges .ab-badge{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,12px); padding:28px 20px; text-align:center; min-width:150px; flex:1 1 150px; max-width:180px; display:flex; flex-direction:column; align-items:center; gap:10px; transition:border-color .2s ease, transform .2s ease; }
.wsp-secawardbadges .ab-badge:hover{ border-color:var(--accent); transform:translateY(-3px); }
.wsp-secawardbadges .ab-ico{ font-size:28px; line-height:1; }
.wsp-secawardbadges .ab-award{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; }
.wsp-secawardbadges .ab-source{ font-size:11px; color:var(--dim); letter-spacing:.2px; }
@container site (max-width:600px){
  .wsp-secawardbadges .ab-badge{ min-width:0; max-width:none; flex:1 1 calc(50% - 8px); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secawardbadges .ab-badge{ transition:none; }
  .wsp-secawardbadges .ab-badge:hover{ transform:none; }
}

/* --- secpartnergrid (SB_04 port) --- */
.wsp-secpartnergrid .spg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:min(900px,100%); margin:0 auto; }
.wsp-secpartnergrid .spg-tile{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:18px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; transition:border-color .2s ease, transform .2s ease; }
.wsp-secpartnergrid .spg-tile:hover{ border-color:var(--accent); transform:translateY(-2px); }
.wsp-secpartnergrid .spg-ico{ font-size:22px; line-height:1; }
.wsp-secpartnergrid .spg-name{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
.wsp-secpartnergrid .spg-cat{ font-size:10px; color:var(--dim); }
.wsp-secpartnergrid .spg-footer{ text-align:center; margin-top:32px; }
.wsp-secpartnergrid .spg-all{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--accent); text-decoration:none; transition:opacity .2s ease; }
.wsp-secpartnergrid .spg-all:hover{ opacity:0.8; }
.wsp-secpartnergrid .spg-all:hover .spg-arw{ transform:translateX(3px); }
.wsp-secpartnergrid .spg-arw{ transition:transform .2s ease; }
@container site (max-width:720px){
  .wsp-secpartnergrid .spg-grid{ grid-template-columns:repeat(3,1fr); }
}
@container site (max-width:480px){
  .wsp-secpartnergrid .spg-grid{ grid-template-columns:repeat(2,1fr); }
}

/* --- secnewsletterembed (SB_04 port) --- */
.wsp-secnewsletterembed .sne-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.4cqw,48px); align-items:center; width:min(880px,100%); margin:0 auto; }
.wsp-secnewsletterembed .sne-copy .ws-kick{ margin-bottom:14px; }
.wsp-secnewsletterembed .sne-copy .ws-h2{ margin-bottom:12px; }
.wsp-secnewsletterembed .sne-freq{ margin:0; }
.wsp-secnewsletterembed .sne-card{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius,12px); padding:clamp(20px,3cqw,28px); }
.wsp-secnewsletterembed .sne-form{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.wsp-secnewsletterembed .sne-input{ width:100%; background:var(--bg); border:1px solid var(--hair); border-radius:calc(var(--radius,12px) * .66); padding:12px 14px; color:var(--ink); font:400 14px var(--font); outline:none; transition:border-color .18s ease; }
.wsp-secnewsletterembed .sne-input::placeholder{ color:var(--faint); }
.wsp-secnewsletterembed .sne-input:focus{ border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.wsp-secnewsletterembed .sne-input:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px; }
.wsp-secnewsletterembed .sne-input:disabled{ color:var(--dim); -webkit-text-fill-color:var(--dim); opacity:1; }
.wsp-secnewsletterembed .sne-submit{ width:100%; justify-content:center; font-weight:700; }
.wsp-secnewsletterembed .sne-submit:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent-text, #fff) 72%, transparent); outline-offset:-3px; }
.wsp-secnewsletterembed .sne-privacy{ margin:0; font:400 11px/1.5 var(--font); color:var(--dim); }
.wsp-secnewsletterembed .sne-form.is-done .sne-input{ opacity:.7; }
.wsp-secnewsletterembed .ws-nlmsg{ margin-top:8px; }
@container site (max-width:680px){
  .wsp-secnewsletterembed .sne-grid{ grid-template-columns:1fr; gap:28px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secnewsletterembed .sne-input{ transition:none; }
}

/* --- sectrustbanner (SB_04 port) --- */
.wsp-sectrustbanner{ padding:44px 0; }
.wsp-sectrustbanner .stb-band{ background:var(--panel); border-top:var(--bw, 1px) solid var(--hair);
  border-bottom:var(--bw, 1px) solid var(--hair); padding:22px 0; }
.wsp-sectrustbanner .stb-bar{ display:flex; align-items:center; gap:24px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; }
.wsp-sectrustbanner .stb-bar::-webkit-scrollbar{ display:none; }
.wsp-sectrustbanner .stb-label{ flex:none; font:700 10px/1 var(--mono, var(--font)); letter-spacing:2.5px;
  text-transform:uppercase; color:var(--dim); }
.wsp-sectrustbanner .stb-logos{ display:flex; align-items:center; gap:clamp(20px,2.8cqw,30px); flex:1 0 auto; }
.wsp-sectrustbanner .stb-logo{ font:700 14px/1 var(--font-head, var(--font)); letter-spacing:.3px;
  color:var(--faint); white-space:nowrap; cursor:default; transition:color .2s ease, transform .2s ease; }
.wsp-sectrustbanner .stb-logo:hover{ color:var(--ink); transform:translateY(-1px); }
@container site (max-width:860px){
  .wsp-sectrustbanner .stb-logos{ gap:24px; }
}
@container site (max-width:560px){
  .wsp-sectrustbanner{ padding:32px 0; }
  .wsp-sectrustbanner .stb-band{ padding:16px 0; }
  .wsp-sectrustbanner .stb-bar{ gap:18px;
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
    mask-image:linear-gradient(90deg,#000 84%,transparent); }
  .wsp-sectrustbanner .stb-logos{ gap:20px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-sectrustbanner .stb-logo{ transition:none; }
  .wsp-sectrustbanner .stb-logo:hover{ transform:none; }
}

/* --- sectechstack (SB_04 port) --- */
.wsp-sectechstack .sts-groups{ display:flex; flex-direction:column; gap:24px; margin-top:6px; }
.wsp-sectechstack .sts-group{ display:flex; align-items:flex-start; gap:20px; }
.wsp-sectechstack .sts-label{ flex-shrink:0; width:104px; padding-top:7px; font:700 11px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.wsp-sectechstack .sts-pills{ display:flex; flex:1; flex-wrap:wrap; gap:8px; }
.wsp-sectechstack .sts-pill{ padding:6px 14px; border-radius:8px; background:var(--panel); border:1px solid var(--hair); color:var(--ink); font:600 12px var(--font); transition:border-color 160ms linear, color 160ms linear, transform 160ms var(--ease-pop, ease-out); }
.wsp-sectechstack .sts-pill:hover{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); transform:translateY(-1px); }
@container site (max-width:600px){
  .wsp-sectechstack .sts-group{ flex-direction:column; gap:8px; }
  .wsp-sectechstack .sts-label{ width:auto; padding-top:0; }
}

/* --- secpriceanchor (SB_04 port) --- */
.wsp-secpriceanchor .spa-wrap{ display:flex; justify-content:center; }
.wsp-secpriceanchor .spa-card{ width:min(440px,92cqw); background:var(--panel); border:1px solid var(--hair); border-radius:calc(var(--radius,12px) + 4px); box-shadow:var(--elev,none); padding:clamp(26px,4cqw,36px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.wsp-secpriceanchor .spa-badge{ font:800 11px/1 var(--font); letter-spacing:.04em; text-transform:uppercase; color:#5a9e7a; background:rgba(90,158,122,0.15); padding:5px 12px; border-radius:20px; }
.wsp-secpriceanchor .spa-prices{ display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; }
.wsp-secpriceanchor .spa-was{ font-size:clamp(20px,3cqw,24px); font-weight:700; color:var(--dim); text-decoration:line-through; }
.wsp-secpriceanchor .spa-now{ font:800 clamp(38px,7cqw,48px)/1 var(--font-head,var(--font)); letter-spacing:-0.03em; color:var(--ink); }
.wsp-secpriceanchor .spa-per{ font-size:14px; color:var(--dim); }
.wsp-secpriceanchor .spa-label{ margin-top:-6px; font-size:12.5px; color:var(--dim); }
.wsp-secpriceanchor .spa-feats{ list-style:none; margin:6px 0; padding:0; width:100%; display:flex; flex-direction:column; gap:9px; text-align:left; }
.wsp-secpriceanchor .spa-feat{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.5; color:var(--dim); }
.wsp-secpriceanchor .spa-feat svg{ flex:0 0 auto; width:15px; height:15px; margin-top:2px; color:var(--accent); }
.wsp-secpriceanchor .spa-card .ws-btn{ width:100%; justify-content:center; margin-top:2px; }
.wsp-secpriceanchor .spa-note{ font-size:11.5px; line-height:1.5; color:var(--faint); }
@container site (max-width:480px){
  .wsp-secpriceanchor .spa-card{ width:100%; padding:24px 20px; }
}

/* --- secvideoembed (SB_04 port) --- */
.wsp-secvideoembed .sve-frame{ position:relative; width:100%; max-width:840px; margin:8px auto 0; aspect-ratio:16/9; border-radius:var(--radius, 12px); overflow:hidden; border:1px solid var(--hair); background:var(--panel); cursor:pointer; }
.wsp-secvideoembed .sve-poster{ position:absolute; inset:0; background-color:var(--panel); background-image:
    radial-gradient(120% 92% at 78% 16%, var(--accent-fill2, var(--accent-fill)), transparent 60%),
    radial-gradient(90% 80% at 14% 98%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 55%),
    linear-gradient(135deg, var(--panel-2, var(--panel)), var(--panel));
  background-size:cover; background-position:center; transition:transform .5s ease; }
.wsp-secvideoembed .sve-poster.has-img{ background-blend-mode:normal; }
.wsp-secvideoembed .sve-poster::after{ content:''; position:absolute; inset:0; opacity:.55; background:
    repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--ink) 3%, transparent) 46px 47px),
    repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in srgb, var(--ink) 3%, transparent) 46px 47px); }
.wsp-secvideoembed .sve-poster.has-img::after{ display:none; }
.wsp-secvideoembed .sve-frame:hover .sve-poster{ transform:scale(1.035); }
.wsp-secvideoembed .sve-scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--bg-deep, var(--bg)) 72%, transparent)); }
.wsp-secvideoembed .sve-play{ position:absolute; top:50%; left:50%; width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px color-mix(in srgb, var(--bg-deep, #05070d) 55%, transparent); transition:transform .2s ease; }
.wsp-secvideoembed .sve-play::before{ content:''; width:0; height:0; margin-left:4px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--accent-text, #04121a); }
.wsp-secvideoembed .sve-play::after{ content:''; position:absolute; inset:-9px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); opacity:0; transition:opacity .2s ease, transform .2s ease; }
.wsp-secvideoembed .sve-frame:hover .sve-play{ transform:scale(1.09); }
.wsp-secvideoembed .sve-frame:hover .sve-play::after{ opacity:1; transform:scale(1.14); }
.wsp-secvideoembed .sve-frame.is-armed .sve-play{ transform:scale(0.94); }
.wsp-secvideoembed .sve-frame:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-secvideoembed .sve-meta{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; text-align:left; pointer-events:none; }
.wsp-secvideoembed .sve-vtitle{ font:600 13px/1.3 var(--font); color:var(--ink); text-shadow:0 1px 12px rgba(0,0,0,0.55); max-width:70%; }
.wsp-secvideoembed .sve-dur{ flex:none; font:600 11px var(--mono); letter-spacing:.5px; color:var(--ink); background:color-mix(in srgb, var(--bg-deep, var(--bg)) 62%, transparent); border:1px solid var(--hair); padding:3px 8px; border-radius:6px; }
.wsp-secvideoembed .sve-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.wsp-secvideoembed .sve-caption{ margin:18px auto 0; text-align:center; font:400 13px/1.6 var(--font); color:var(--dim); max-width:60ch; }
@container site (max-width:560px){
  .wsp-secvideoembed .sve-play{ width:56px; height:56px; margin:-28px 0 0 -28px; }
  .wsp-secvideoembed .sve-play::before{ border-width:9px 0 9px 15px; }
  .wsp-secvideoembed .sve-vtitle{ font-size:12px; max-width:62%; }
  .wsp-secvideoembed .sve-meta{ padding:12px 13px; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secvideoembed .sve-poster, .wsp-secvideoembed .sve-play, .wsp-secvideoembed .sve-play::after{ transition:none; }
}

/* --- secsecuritybadges (SB_04 port) --- */
.wsp-secsecuritybadges .ssb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; width:min(900px,88cqw); margin:0 auto; }
.wsp-secsecuritybadges .ssb-card{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 18px; text-align:center; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); transition:border-color .2s ease, transform .2s ease; }
.wsp-secsecuritybadges .ssb-card:hover{ border-color:var(--accent-dim); transform:translateY(-2px); }
.wsp-secsecuritybadges .ssb-ico{ display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--accent-fill); color:var(--accent); }
.wsp-secsecuritybadges .ssb-ico svg{ width:24px; height:24px; }
.wsp-secsecuritybadges .ssb-name{ margin:0; font:700 14px/1.3 var(--font-head, var(--font)); color:var(--ink); }
.wsp-secsecuritybadges .ssb-desc{ margin:0; font-size:12px; line-height:1.55; color:var(--dim); }
@container site (max-width:640px){
  .wsp-secsecuritybadges .ssb-grid{ grid-template-columns:repeat(2,1fr); }
}
@container site (max-width:400px){
  .wsp-secsecuritybadges .ssb-grid{ grid-template-columns:1fr; }
}

/* --- sectabsfeatures (SB_04 port) --- */
.wsp-sectabsfeatures .stf-tabs{ display:flex; gap:6px; width:100%; margin:24px auto 0; }
.wsp-sectabsfeatures .stf-tab{ flex:1 1 0; min-width:0; padding:10px 8px; border-radius:8px;
  font:700 13px var(--font); color:var(--dim); background:transparent; border:1px solid var(--hair);
  cursor:pointer; text-align:center; transition:color .15s ease; }
.wsp-sectabsfeatures .stf-tab:hover:not(.on){ color:var(--ink); }
.wsp-sectabsfeatures .stf-tab.on{ color:var(--accent); background:var(--accent-fill); border-color:var(--accent-fill2); }
.wsp-sectabsfeatures .stf-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-sectabsfeatures .stf-panels{ width:100%; margin:14px auto 0; }
.wsp-sectabsfeatures .stf-panel{ display:none; }
.wsp-sectabsfeatures .stf-panel.on{ display:flex; flex-direction:column; gap:14px;
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius);
  padding:clamp(24px,4cqw,32px); }
.wsp-sectabsfeatures .stf-ico{ display:flex; color:var(--accent); }
.wsp-sectabsfeatures .stf-ico svg{ width:30px; height:30px; }
.wsp-sectabsfeatures .stf-h3{ margin:0; font:700 clamp(18px,2.4cqw,21px)/1.2 var(--font-head,var(--font));
  color:var(--ink); letter-spacing:-0.01em; }
.wsp-sectabsfeatures .stf-desc{ margin:0; font:400 14px/1.7 var(--font); color:var(--dim); }
.wsp-sectabsfeatures .stf-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.wsp-sectabsfeatures .stf-list li{ position:relative; padding-left:20px; font:400 13px/1.5 var(--font); color:var(--dim); }
.wsp-sectabsfeatures .stf-list li::before{ content:'\2713'; position:absolute; left:0; color:#5a9e7a; font-weight:700; }
@container site (max-width:520px){
  .wsp-sectabsfeatures .stf-tabs{ gap:4px; }
  .wsp-sectabsfeatures .stf-tab{ padding:9px 4px; font-size:12px; }
  .wsp-sectabsfeatures .stf-panel.on{ padding:22px 20px; }
}

/* --- secpricingtoggledark (SB_04 port) --- */
.wsp-secpricingtoggledark .sptd-toggle{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:22px; font:600 13px var(--font); }
.wsp-secpricingtoggledark .sptd-tlabel{ display:inline-flex; align-items:center; gap:8px; color:var(--dim); transition:color .2s ease; }
.wsp-secpricingtoggledark .sptd-tlabel.m{ color:var(--ink); }
.wsp-secpricingtoggledark.is-annual .sptd-tlabel.m{ color:var(--dim); }
.wsp-secpricingtoggledark.is-annual .sptd-tlabel.a{ color:var(--ink); }
.wsp-secpricingtoggledark .sptd-save{ font:700 10px var(--font); letter-spacing:.05em; color:var(--accent); background:var(--accent-fill); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); padding:2px 7px; border-radius:999px; }
.wsp-secpricingtoggledark .sptd-switch{ position:relative; flex:none; width:44px; height:24px; padding:0; margin:0; border:var(--bw, 1px) solid var(--hair); border-radius:999px; background:var(--panel-2); cursor:pointer; -webkit-appearance:none; appearance:none; transition:background .2s ease, border-color .2s ease; }
.wsp-secpricingtoggledark .sptd-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wsp-secpricingtoggledark .sptd-switch[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); }
.wsp-secpricingtoggledark .sptd-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--ink); transition:transform .2s ease, background .2s ease; pointer-events:none; }
.wsp-secpricingtoggledark .sptd-switch[aria-checked="true"] .sptd-thumb{ transform:translateX(20px); background:var(--accent-text, var(--bg)); }

.wsp-secpricingtoggledark .sptd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:min(940px, 100%); margin:0 auto; align-items:start; }
.wsp-secpricingtoggledark .sptd-card{ display:flex; flex-direction:column; gap:16px; padding:clamp(22px, 2.6cqw, 28px); background:var(--panel); background-image:var(--surface-grad, none); border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius, 14px); }
.wsp-secpricingtoggledark .sptd-card.hot{ background:var(--accent-fill); background-image:none; border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.wsp-secpricingtoggledark .sptd-plan{ font:700 14px var(--font-head, var(--font)); color:var(--ink); }
.wsp-secpricingtoggledark .sptd-pop{ font:800 9px var(--font); letter-spacing:.04em; text-transform:uppercase; background:var(--accent); color:var(--accent-text, var(--bg)); padding:2px 7px; border-radius:999px; vertical-align:middle; margin-left:6px; }
.wsp-secpricingtoggledark .sptd-price{ display:flex; align-items:baseline; gap:4px; margin:2px 0; }
.wsp-secpricingtoggledark .sptd-amt{ font:800 clamp(30px, 3.4cqw, 36px)/1 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-0.03em; transition:opacity .15s ease; }
.wsp-secpricingtoggledark .sptd-per{ font:500 14px var(--font); color:var(--dim); }
.wsp-secpricingtoggledark .sptd-feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.wsp-secpricingtoggledark .sptd-feats li{ display:flex; align-items:center; gap:9px; font:400 13px var(--font); color:var(--dim); }
.wsp-secpricingtoggledark .sptd-chk{ display:inline-flex; flex:none; color:var(--accent); }
.wsp-secpricingtoggledark .sptd-chk svg{ width:14px; height:14px; }
.wsp-secpricingtoggledark .sptd-cta{ display:block; text-align:center; padding:11px; border-radius:calc(var(--radius, 12px) * .6); font:700 13px var(--font); color:var(--ink); text-decoration:none; transition:opacity .2s ease, border-color .2s ease, background-color .2s ease; }
.wsp-secpricingtoggledark .sptd-cta.primary{ background:var(--accent); color:var(--accent-text, var(--bg)); }
.wsp-secpricingtoggledark .sptd-cta.primary:hover{ opacity:.9; }
.wsp-secpricingtoggledark .sptd-cta.ghost{ border:var(--bw, 1px) solid var(--hair); }
.wsp-secpricingtoggledark .sptd-cta.ghost:hover{ border-color:color-mix(in srgb, var(--ink) 22%, transparent); }
@container site (max-width:720px){
  .wsp-secpricingtoggledark .sptd-grid{ grid-template-columns:1fr; width:min(360px, 100%); }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secpricingtoggledark .sptd-switch, .wsp-secpricingtoggledark .sptd-thumb, .wsp-secpricingtoggledark .sptd-tlabel, .wsp-secpricingtoggledark .sptd-amt{ transition:none; }
}

/* --- sectestimonialstrip (SB_04 port) --- */
.wsp-sectestimonialstrip.ws-sec{ padding:clamp(30px,5cqw,56px) 0; overflow:hidden; }
.wsp-sectestimonialstrip .sts-band{ position:relative; width:100%; background:var(--panel);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:clamp(14px,2.4cqw,22px) 0; overflow:hidden; }
.wsp-sectestimonialstrip .sts-track{ display:flex; align-items:center; width:max-content; will-change:transform; }
.wsp-sectestimonialstrip .sts-cell{ display:inline-flex; align-items:center; gap:12px; flex:0 0 auto;
  padding:0 clamp(22px,3.4cqw,44px); white-space:nowrap; border-right:1px solid var(--hair-soft,var(--hair)); }
.wsp-sectestimonialstrip .sts-stars{ flex:none; display:inline-flex; align-items:center; letter-spacing:2px;
  font-size:14px; line-height:1; }
.wsp-sectestimonialstrip .sts-star{ color:var(--accent); }
.wsp-sectestimonialstrip .sts-star.off{ color:var(--accent); opacity:.26; }
.wsp-sectestimonialstrip .sts-quote{ font-style:italic; color:var(--dim);
  font-size:clamp(13px,1.55cqw,15px); line-height:1.4; }
.wsp-sectestimonialstrip .sts-author{ display:inline-flex; align-items:center; gap:8px; flex:none; }
.wsp-sectestimonialstrip .ws-avatar.sts-av{ width:26px; height:26px; font:800 10px var(--font); }
.wsp-sectestimonialstrip .sts-name{ font-size:12.5px; font-weight:600; color:var(--ink); }
.wsp-sectestimonialstrip .sts-role{ font-weight:500; color:var(--dim); }
.wsp-sectestimonialstrip .sts-fade{ position:absolute; top:0; bottom:0; right:0; width:clamp(26px,5cqw,60px);
  pointer-events:none; z-index:2; background:linear-gradient(to right,transparent,var(--panel)); }
.wsp-sectestimonialstrip.is-static .sts-track{ transform:none !important; }
@container site (max-width:600px){
  .wsp-sectestimonialstrip.ws-sec{ padding:clamp(22px,7cqw,40px) 0; }
  .wsp-sectestimonialstrip .sts-cell{ padding:0 18px; gap:10px; }
  .wsp-sectestimonialstrip .sts-quote{ font-size:13px; }
}

/* --- secblueprintdetails (SB_04 port) --- */
.wsp-secblueprintdetails{
  --bd-line: var(--hair);
  --bd-surface: color-mix(in srgb, var(--accent) 4%, transparent);
  --bd-surface-hot: color-mix(in srgb, var(--accent) 8%, transparent);
  --bd-red: #ff6a5c;
  --bd-track: 0.14em;
  font-family: var(--mono);
  border-top: 1px solid color-mix(in srgb, var(--accent) 9%, transparent);
}
.wsp-secblueprintdetails .bd-head{ max-width:62ch; margin-bottom:clamp(34px,5cqw,54px); }
.wsp-secblueprintdetails .bd-kick{ text-transform:uppercase; margin-bottom:14px; }
.wsp-secblueprintdetails .bd-kick::before{ content:"\25C9 "; }
.wsp-secblueprintdetails .bd-title{ font-family:var(--mono); text-transform:uppercase; letter-spacing:-0.005em; }
.wsp-secblueprintdetails .bd-sub{ font-family:var(--font); margin-top:14px; max-width:60ch; }

.wsp-secblueprintdetails .bd-layout{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4cqw,48px); align-items:start; }

/* plan drawing with pins */
.wsp-secblueprintdetails .bd-plan{ position:relative; border:1px solid var(--bd-line); background:var(--bd-surface); padding:16px; }
.wsp-secblueprintdetails .bd-plan-tag{ position:absolute; top:0; left:0; transform:translateY(-50%); margin-left:16px; background:var(--bg); border:1px solid var(--bd-line); color:var(--accent); font-size:9px; letter-spacing:var(--bd-track); text-transform:uppercase; padding:4px 8px; }
.wsp-secblueprintdetails .bd-plan svg{ display:block; width:100%; height:auto; color:var(--accent); }
.wsp-secblueprintdetails .bd-pin{ position:absolute; left:var(--px); top:var(--py); transform:translate(-50%,-50%); width:32px; height:32px; padding:0; border:1px solid var(--accent); border-radius:50%; background:var(--bg); color:var(--accent); font-family:var(--mono); font-size:11px; font-weight:700; line-height:1; cursor:pointer; transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.wsp-secblueprintdetails .bd-pin:hover, .wsp-secblueprintdetails .bd-pin.is-hot{ box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.wsp-secblueprintdetails .bd-pin[aria-pressed="true"]{ background:var(--accent); color:var(--bg); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }

/* detail plates */
.wsp-secblueprintdetails .bd-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wsp-secblueprintdetails .bd-card{ position:relative; border:1px solid var(--bd-line); background:var(--bd-surface); padding:24px; overflow:hidden; transition:border-color 0.15s ease, background 0.15s ease; }
.wsp-secblueprintdetails .bd-card::after{ content:""; position:absolute; top:0; right:0; width:40px; height:40px; clip-path:polygon(100% 0, 0 0, 100% 100%); background:repeating-linear-gradient(45deg, var(--bd-line) 0 1px, transparent 1px 5px); opacity:0.7; pointer-events:none; }
.wsp-secblueprintdetails .bd-card.is-hot, .wsp-secblueprintdetails .bd-card:hover{ border-color:var(--accent); background:var(--bd-surface-hot); }
.wsp-secblueprintdetails .bd-card.is-active{ border-color:var(--bd-red); }
.wsp-secblueprintdetails .bd-card.is-active .bd-num{ border-color:var(--bd-red); color:var(--bd-red); }
.wsp-secblueprintdetails .bd-cardhead{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.wsp-secblueprintdetails .bd-num{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--accent); border-radius:50%; color:var(--accent); font-size:11px; font-weight:700; transition:border-color 0.15s ease, color 0.15s ease; }
.wsp-secblueprintdetails .bd-scale{ font-size:9px; letter-spacing:var(--bd-track); text-transform:uppercase; color:var(--dim); }
.wsp-secblueprintdetails .bd-name{ font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin:0 0 8px; color:var(--ink); }
.wsp-secblueprintdetails .bd-text{ font-family:var(--font); font-size:13px; line-height:1.6; color:var(--dim); margin:0; }
.wsp-secblueprintdetails .bd-text code{ font-family:var(--mono); font-size:0.92em; color:var(--accent); }

@container site (max-width:960px){
  .wsp-secblueprintdetails .bd-layout{ grid-template-columns:1fr; }
  .wsp-secblueprintdetails .bd-plan{ max-width:560px; }
}
@container site (max-width:640px){
  .wsp-secblueprintdetails .bd-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secblueprintdetails .bd-pin, .wsp-secblueprintdetails .bd-card, .wsp-secblueprintdetails .bd-num{ transition:none; }
}

/* --- secthresholdcrossing (SB_04 port) --- */
.ws-sec.wsp-secthresholdcrossing{
  padding:0;
  --tc-bg-a:var(--panel);
  --tc-text-a:var(--ink);
  --tc-dim-a:var(--dim);
  --tc-accent-a:var(--accent);
  --tc-bg-b:var(--bg-deep, var(--bg));
  --tc-accent-b:var(--accent);
  --tc-glitch:var(--accent2, var(--accent));
  --tc-title-size:clamp(1.15rem, 5.4cqw, 3.2rem);
  --tc-pad-x:clamp(1.25rem, 5cqw, 5rem);
  --tc-p:1;
  --tc-mid:0;
}
.wsp-secthresholdcrossing .tc-stage{
  position:relative; overflow:hidden;
  min-height:clamp(440px, 82cqh, 660px);
  display:grid; place-items:center;
  border-block:var(--bw, 1px) solid var(--hair);
  background:color-mix(in oklab, var(--tc-bg-a) calc(100% - var(--tc-p) * 100%), var(--tc-bg-b));
}
.wsp-secthresholdcrossing .tc-orb{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--tc-accent-a) 26%, transparent), transparent 62%);
  opacity:calc(1 - var(--tc-p) * 1.4);
  transform:scale(calc(1 - var(--tc-p) * 0.35));
}
.wsp-secthresholdcrossing .tc-orb--a{ width:44cqw; height:44cqw; min-width:260px; min-height:260px; top:2%; left:5%; }
.wsp-secthresholdcrossing .tc-orb--b{ width:32cqw; height:32cqw; min-width:200px; min-height:200px; bottom:4%; right:7%; }
.wsp-secthresholdcrossing .tc-portal{
  position:absolute; inset:0;
  clip-path:circle(calc(var(--tc-p) * 80%) at 50% 52%);
  background:
    linear-gradient(color-mix(in srgb, var(--tc-accent-b) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tc-accent-b) 6%, transparent) 1px, transparent 1px),
    var(--tc-bg-b);
  background-size:46px 46px, 46px 46px, auto;
}
.wsp-secthresholdcrossing .tc-portal-glow{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--tc-accent-b) 16%, transparent), transparent 55%);
}
.wsp-secthresholdcrossing .tc-ring{
  position:absolute; top:52%; left:50%;
  width:min(560px, 78%); aspect-ratio:1; border-radius:50%; padding:1px;
  background:conic-gradient(from 0deg, var(--tc-accent-b), transparent 30%, var(--tc-glitch) 50%, transparent 70%, var(--tc-accent-b));
  -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;
  opacity:calc(var(--tc-p) * 0.9 + var(--tc-mid) * 0.1);
  transform:translate(-50%, -50%) scale(calc(0.55 + var(--tc-p) * 0.45));
  animation:tc-ring-spin 16s linear infinite;
  pointer-events:none;
}
@keyframes tc-ring-spin{ from{ rotate:0deg; } to{ rotate:360deg; } }
.wsp-secthresholdcrossing .tc-center{
  position:relative; z-index:2; text-align:center;
  padding:0 var(--tc-pad-x); max-width:100%;
}
.wsp-secthresholdcrossing .tc-eyebrow{
  font:600 0.68rem/1 var(--mono); letter-spacing:0.3em; text-transform:uppercase;
  color:color-mix(in oklab, var(--tc-accent-a) calc(100% - var(--tc-p) * 100%), var(--tc-accent-b));
  margin:0 0 1.3rem; opacity:calc(0.92 - var(--tc-mid) * 0.5);
}
.wsp-secthresholdcrossing .tc-title{
  position:relative; margin:0;
  font:700 var(--tc-title-size)/1.22 var(--mono);
  letter-spacing:0.1em;
  color:color-mix(in oklab, var(--tc-text-a) calc(100% - var(--tc-p) * 100%), var(--tc-accent-b));
  text-shadow:
    calc(var(--tc-mid) * 5px) 0 0 color-mix(in srgb, var(--tc-glitch) calc(var(--tc-mid) * 75%), transparent),
    calc(var(--tc-mid) * -5px) 0 0 color-mix(in srgb, var(--tc-accent-b) calc(var(--tc-mid) * 75%), transparent);
}
.wsp-secthresholdcrossing .tc-title::before,
.wsp-secthresholdcrossing .tc-title::after{
  content:attr(data-glitch); position:absolute; inset:0;
  opacity:var(--tc-mid); text-shadow:none; pointer-events:none;
}
.wsp-secthresholdcrossing .tc-title::before{
  color:var(--tc-glitch); clip-path:inset(0 0 62% 0);
  transform:translateX(calc(var(--tc-mid) * 14px));
}
.wsp-secthresholdcrossing .tc-title::after{
  color:var(--tc-accent-b); clip-path:inset(64% 0 0 0);
  transform:translateX(calc(var(--tc-mid) * -14px));
}
.wsp-secthresholdcrossing .tc-title.is-glitching{ animation:tc-jitter 0.28s steps(2) infinite; }
@keyframes tc-jitter{
  0%{ translate:0 0; } 25%{ translate:2px -1px; } 50%{ translate:-2px 1px; }
  75%{ translate:1px 2px; } 100%{ translate:0 0; }
}
.wsp-secthresholdcrossing .tc-cue{
  font:400 0.7rem/1.4 var(--mono); letter-spacing:0.14em;
  color:var(--tc-dim-a); margin:1.5rem 0 0;
  opacity:calc(1 - var(--tc-p) * 2.2);
}
.wsp-secthresholdcrossing .tc-readout{
  position:absolute; bottom:1.8rem; left:var(--tc-pad-x); right:var(--tc-pad-x);
  z-index:2; display:flex; align-items:center; gap:1rem;
}
.wsp-secthresholdcrossing .tc-signal{
  font:500 0.68rem/1 var(--mono); letter-spacing:0.2em; white-space:nowrap;
  color:color-mix(in oklab, var(--tc-dim-a) calc(100% - var(--tc-p) * 100%), var(--tc-accent-b));
}
.wsp-secthresholdcrossing .tc-bar{
  flex:1; height:1px; overflow:hidden;
  background:color-mix(in srgb, var(--tc-accent-b) 16%, transparent);
}
.wsp-secthresholdcrossing .tc-bar-fill{
  display:block; height:100%; width:calc(var(--tc-p) * 100%);
  background:linear-gradient(90deg, var(--tc-accent-a), var(--tc-accent-b));
}
@container site (max-width:640px){
  .wsp-secthresholdcrossing .tc-stage{ min-height:clamp(380px, 80cqh, 560px); }
  .wsp-secthresholdcrossing .tc-ring{ width:min(360px, 82%); }
  .wsp-secthresholdcrossing .tc-center{ padding:0 clamp(1.1rem, 6cqw, 2.4rem); }
  .wsp-secthresholdcrossing .tc-readout{ bottom:1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secthresholdcrossing .tc-ring{ animation:none; }
  .wsp-secthresholdcrossing .tc-title.is-glitching{ animation:none; }
  .wsp-secthresholdcrossing .tc-cue{ display:none; }
}

/* --- sectransitfeature (SB_04 port) --- */
.wsp-sectransitfeature{
  --tf-a: var(--accent);
  --tf-b: #3ddc84;                 /* B-line livery — a semantic ok-green kept literal */
  --tf-x: var(--ink);
  --tf-dot-x: 50%;
  --tf-progress: 1;                /* RESTING = completed journey (headless-safe) */
}
.wsp-sectransitfeature .tf-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font:600 10px var(--mono); letter-spacing:2.6px; text-transform:uppercase; color:var(--dim);
}
.wsp-sectransitfeature .tf-pin{
  width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font:800 9px var(--font); font-style:normal;
}
.wsp-sectransitfeature .tf-pin--a{ background:var(--tf-a); color:var(--accent-text, var(--bg)); }
.wsp-sectransitfeature .tf-pin--b{ background:var(--tf-b); color:#06180d; }
.wsp-sectransitfeature .ws-h2{ text-transform:uppercase; letter-spacing:-0.01em; }
.wsp-sectransitfeature .ws-sub{ max-width:60ch; }

/* the map */
.wsp-sectransitfeature .tf-map{ position:relative; margin-top:8px; }
.wsp-sectransitfeature .tf-lines{ position:absolute; top:6px; bottom:6px; left:var(--tf-dot-x); width:0; pointer-events:none; }
.wsp-sectransitfeature .tf-lines span{ position:absolute; top:0; bottom:0; width:4px; border-radius:2px; }
.wsp-sectransitfeature .tf-line--a{ left:-8px; background:color-mix(in srgb, var(--tf-a) 22%, transparent); }
.wsp-sectransitfeature .tf-line--b{ left:4px;  background:color-mix(in srgb, var(--tf-b) 22%, transparent); }
.wsp-sectransitfeature .tf-fill--a,
.wsp-sectransitfeature .tf-fill--b{ transform:scaleY(var(--tf-progress, 1)); transform-origin:top; }
.wsp-sectransitfeature .tf-fill--a{ left:-8px; background:var(--tf-a); box-shadow:0 0 12px color-mix(in srgb, var(--tf-a) 45%, transparent); }
.wsp-sectransitfeature .tf-fill--b{ left:4px;  background:var(--tf-b); box-shadow:0 0 12px color-mix(in srgb, var(--tf-b) 45%, transparent); }

/* fare-zone gates */
.wsp-sectransitfeature .tf-zone{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; margin:24px 0; }
.wsp-sectransitfeature .tf-zone::before, .wsp-sectransitfeature .tf-zone::after{ content:""; flex:1; border-top:1px dashed var(--hair); }
.wsp-sectransitfeature .tf-zone span{
  font:600 9px var(--mono); letter-spacing:2.4px; text-transform:uppercase; color:var(--dim);
  background:var(--panel); border:1px solid var(--hair); border-radius:999px; padding:4px 14px;
}

.wsp-sectransitfeature .tf-stops{ list-style:none; margin:0; padding:0; display:grid; gap:24px; }
.wsp-sectransitfeature .tf-station{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr); align-items:start; }
.wsp-sectransitfeature .tf-dot{
  position:absolute; left:var(--tf-dot-x); top:26px; width:14px; height:14px; border-radius:50%;
  background:var(--panel); border:3px solid var(--hair);
  transition:border-color .3s ease, box-shadow .3s ease; z-index:1;
}
.wsp-sectransitfeature .tf-dot--a{ transform:translateX(calc(-50% - 6px)); border-color:var(--tf-a); box-shadow:0 0 10px color-mix(in srgb, var(--tf-a) 50%, transparent); }
.wsp-sectransitfeature .tf-dot--b{ transform:translateX(calc(-50% + 6px)); border-color:var(--tf-b); box-shadow:0 0 10px color-mix(in srgb, var(--tf-b) 50%, transparent); }
.wsp-sectransitfeature .tf-dot--x{ width:26px; height:15px; border-radius:8px; transform:translateX(-50%); border-color:var(--tf-x); box-shadow:0 0 12px color-mix(in srgb, var(--tf-x) 35%, transparent); }

.wsp-sectransitfeature .tf-card{
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius);
  padding:20px 24px; max-width:430px; width:100%;
  transition:opacity .4s ease, transform .4s ease, border-color .4s ease;
}
.wsp-sectransitfeature .tf-card--a{ border-color:color-mix(in srgb, var(--tf-a) 35%, transparent); }
.wsp-sectransitfeature .tf-card--b{ border-color:color-mix(in srgb, var(--tf-b) 35%, transparent); }
.wsp-sectransitfeature .tf-card--x{ border-color:color-mix(in srgb, var(--tf-x) 35%, transparent); }
.wsp-sectransitfeature .tf-station--l .tf-card{ grid-column:1; justify-self:end; text-align:right; }
.wsp-sectransitfeature .tf-station--r .tf-card{ grid-column:3; justify-self:start; text-align:left; }

.wsp-sectransitfeature .tf-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.wsp-sectransitfeature .tf-station--l .tf-tags{ justify-content:flex-end; }
.wsp-sectransitfeature .tf-station--r .tf-tags{ justify-content:flex-start; }
.wsp-sectransitfeature .tf-code{
  font:600 9px var(--mono); letter-spacing:1.2px; padding:2px 6px; border-radius:4px;
  border:1px solid var(--hair); color:var(--dim); transition:color .3s ease, border-color .3s ease;
}
.wsp-sectransitfeature .tf-card--a .tf-code{ color:var(--tf-a); border-color:color-mix(in srgb, var(--tf-a) 45%, transparent); }
.wsp-sectransitfeature .tf-card--b .tf-code{ color:var(--tf-b); border-color:color-mix(in srgb, var(--tf-b) 45%, transparent); }
.wsp-sectransitfeature .tf-card--x .tf-code{ color:var(--tf-x); border-color:color-mix(in srgb, var(--tf-x) 45%, transparent); }
.wsp-sectransitfeature .tf-badge{
  font:600 9px var(--mono); letter-spacing:1.2px; text-transform:uppercase; color:var(--ink);
  background:color-mix(in srgb, var(--ink) 12%, transparent); border-radius:999px; padding:2px 8px;
}
.wsp-sectransitfeature .tf-name{ margin:0; font:800 clamp(17px,2.2cqw,21px)/1.15 var(--font-head, var(--font)); letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
.wsp-sectransitfeature .tf-desc{ margin:8px 0 0; font:400 13px/1.6 var(--font); color:var(--dim); }

/* terminus marker */
.wsp-sectransitfeature .tf-terminus{ position:relative; z-index:1; display:flex; justify-content:center; margin-top:32px; }
.wsp-sectransitfeature .tf-terminus span{
  font:600 9px var(--mono); letter-spacing:2.4px; text-transform:uppercase; color:var(--dim);
  background:var(--panel); border:1px solid var(--hair); border-radius:999px; padding:6px 16px;
}

/* LIVE mode — only added by mount() on a real in-view frame; animates from empty. */
.wsp-sectransitfeature .tf-map.is-live{ --tf-progress:0; }
.wsp-sectransitfeature .tf-map.is-live .tf-card{ opacity:.55; transform:translateY(6px); }
.wsp-sectransitfeature .tf-map.is-live .tf-station.is-reached .tf-card{ opacity:1; transform:none; }
.wsp-sectransitfeature .tf-map.is-live .tf-dot{ border-color:var(--hair); box-shadow:none; }
.wsp-sectransitfeature .tf-map.is-live .tf-station.is-reached .tf-dot--a{ border-color:var(--tf-a); box-shadow:0 0 10px color-mix(in srgb, var(--tf-a) 50%, transparent); }
.wsp-sectransitfeature .tf-map.is-live .tf-station.is-reached .tf-dot--b{ border-color:var(--tf-b); box-shadow:0 0 10px color-mix(in srgb, var(--tf-b) 50%, transparent); }
.wsp-sectransitfeature .tf-map.is-live .tf-station.is-reached .tf-dot--x{ border-color:var(--tf-x); box-shadow:0 0 12px color-mix(in srgb, var(--tf-x) 35%, transparent); }
.wsp-sectransitfeature .tf-map.is-live .tf-code{ color:var(--dim); border-color:var(--hair); }
.wsp-sectransitfeature .tf-map.is-live .tf-station.is-reached .tf-card--a .tf-code{ color:var(--tf-a); border-color:color-mix(in srgb, var(--tf-a) 45%, transparent); }
.wsp-sectransitfeature .tf-map.is-live .tf-station.is-reached .tf-card--b .tf-code{ color:var(--tf-b); border-color:color-mix(in srgb, var(--tf-b) 45%, transparent); }
.wsp-sectransitfeature .tf-map.is-live .tf-station.is-reached .tf-card--x .tf-code{ color:var(--tf-x); border-color:color-mix(in srgb, var(--tf-x) 45%, transparent); }

@container site (max-width:880px){
  .wsp-sectransitfeature{ --tf-dot-x:24px; }
  .wsp-sectransitfeature .tf-station{ grid-template-columns:56px minmax(0,1fr); }
  .wsp-sectransitfeature .tf-station--l .tf-card,
  .wsp-sectransitfeature .tf-station--r .tf-card{ grid-column:2; justify-self:start; text-align:left; max-width:none; }
  .wsp-sectransitfeature .tf-station--l .tf-tags{ justify-content:flex-start; }
  .wsp-sectransitfeature .tf-zone::before{ flex:0 0 40px; }
  .wsp-sectransitfeature .tf-terminus{ justify-content:flex-start; padding-left:40px; }
}
@container site (max-width:480px){
  .wsp-sectransitfeature{ --tf-dot-x:18px; }
  .wsp-sectransitfeature .tf-station{ grid-template-columns:44px minmax(0,1fr); }
  .wsp-sectransitfeature .tf-card{ padding:16px; }
  .wsp-sectransitfeature .tf-zone::before{ flex:0 0 30px; }
  .wsp-sectransitfeature .tf-terminus{ padding-left:30px; }
}

/* --- sectracklist (SB_04 port) --- */
.wsp-sectracklist, .wsp-sectracklist *{ box-sizing:border-box; }
.wsp-sectracklist .trk-inner{ display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:clamp(2rem,6cqw,4.5rem); align-items:start; }

.wsp-sectracklist .trk-side{ position:sticky; top:clamp(1rem,4cqh,3rem); }
.wsp-sectracklist .trk-disc{ position:relative; width:100%; max-width:320px; aspect-ratio:1/1; border-radius:50%; background:color-mix(in srgb, var(--bg) 78%, #000); box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }
.wsp-sectracklist .trk-disc-face{ position:absolute; inset:0; border-radius:50%;
  background:
    conic-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 0 5deg, transparent 5deg 48deg,
      color-mix(in srgb, var(--ink) 3%, transparent) 48deg 56deg, transparent 56deg 172deg,
      color-mix(in srgb, var(--ink) 5%, transparent) 172deg 179deg, transparent 179deg 292deg,
      color-mix(in srgb, var(--ink) 3%, transparent) 292deg 299deg, transparent 299deg 360deg),
    repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ink) 5%, transparent) 0 1.6px, transparent 1.6px 3.2px);
  animation:wsp-sectracklist-spin 1.8s linear infinite; animation-play-state:paused; }
.wsp-sectracklist .trk-disc.is-spinning .trk-disc-face{ animation-play-state:running; }
.wsp-sectracklist .trk-disc-sheen{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(120% 120% at 28% 18%, color-mix(in srgb, var(--ink) 12%, transparent), transparent 42%),
    radial-gradient(100% 100% at 50% 50%, transparent 58%, rgba(0,0,0,.5) 100%); }
.wsp-sectracklist .trk-disc-label{ position:absolute; left:50%; top:50%; width:37%; aspect-ratio:1/1; transform:translate(-50%,-50%); border-radius:50%; background:var(--panel-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 2px color-mix(in srgb, var(--bg) 60%, #000); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3em; text-align:center; padding:8%; font-family:var(--mono); }
.wsp-sectracklist .trk-disc-cat{ font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); }
.wsp-sectracklist .trk-disc-now{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); line-height:1.5; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wsp-sectracklist .trk-disc-hole{ position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:color-mix(in srgb, var(--bg) 50%, #000); box-shadow:0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); }
.wsp-sectracklist .trk-meta{ margin:1.8rem 0 0; padding:0; border-top:1px solid var(--hair); font-family:var(--mono); }
.wsp-sectracklist .trk-meta > div{ display:flex; justify-content:space-between; gap:1rem; padding:.68rem .1rem; border-bottom:1px solid var(--hair); }
.wsp-sectracklist .trk-meta dt{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }
.wsp-sectracklist .trk-meta dd{ margin:0; font-size:.72rem; letter-spacing:.1em; color:var(--ink); }

.wsp-sectracklist .trk-eyebrow{ margin:0 0 1rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); }
.wsp-sectracklist .trk-title{ margin:0; font-family:var(--font-head, var(--font)); font-size:clamp(2rem,5.4cqw,3.6rem); font-weight:700; line-height:1.04; letter-spacing:-.02em; text-wrap:balance; color:var(--ink); }
.wsp-sectracklist .trk-sub{ margin:1rem 0 0; max-width:52ch; font-size:.96rem; line-height:1.65; color:var(--dim); }
.wsp-sectracklist .trk-list{ list-style:none; margin:2.4rem 0 0; padding:0; border-top:1px solid var(--hair); }
.wsp-sectracklist .trk-row{ display:grid; grid-template-columns:3.2rem minmax(0,1fr) auto 3.9rem; gap:clamp(.7rem,2.5cqw,1.4rem); align-items:center; width:100%; padding:.95rem .65rem; background:transparent; border:0; border-bottom:1px solid var(--hair); border-radius:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.wsp-sectracklist .trk-row:hover{ background:color-mix(in srgb, var(--ink) 5%, transparent); }
.wsp-sectracklist .trk-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.wsp-sectracklist .trk-row.is-playing{ background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); box-shadow:inset 2px 0 0 var(--accent); }
.wsp-sectracklist .trk-idx{ position:relative; display:block; height:16px; }
.wsp-sectracklist .trk-num{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; color:var(--dim); font-variant-numeric:tabular-nums; }
.wsp-sectracklist .trk-row:hover .trk-num{ color:var(--accent); }
.wsp-sectracklist .trk-eq{ display:none; align-items:flex-end; gap:2.5px; height:15px; }
.wsp-sectracklist .trk-eq i{ width:3px; height:100%; background:var(--accent); transform-origin:bottom; border-radius:1px; }
.wsp-sectracklist .trk-eq i:nth-child(1){ animation:wsp-sectracklist-eq .82s ease-in-out -.2s infinite alternate; }
.wsp-sectracklist .trk-eq i:nth-child(2){ animation:wsp-sectracklist-eq .64s ease-in-out -.5s infinite alternate; }
.wsp-sectracklist .trk-eq i:nth-child(3){ animation:wsp-sectracklist-eq .9s ease-in-out -.35s infinite alternate; }
.wsp-sectracklist .trk-eq i:nth-child(4){ animation:wsp-sectracklist-eq .71s ease-in-out -.65s infinite alternate; }
.wsp-sectracklist .trk-row.is-playing .trk-num{ display:none; }
.wsp-sectracklist .trk-row.is-playing .trk-eq{ display:inline-flex; }
.wsp-sectracklist .trk-name{ min-width:0; font-size:clamp(.98rem,2.6cqw,1.12rem); font-weight:550; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.wsp-sectracklist .trk-name em{ display:block; margin-top:.18em; font-style:normal; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.wsp-sectracklist .trk-row.is-playing .trk-name{ color:var(--accent); }
.wsp-sectracklist .trk-keybpm{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--dim); white-space:nowrap; }
.wsp-sectracklist .trk-dur{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; }
.wsp-sectracklist .trk-row.is-playing .trk-dur{ color:var(--accent); }

.wsp-sectracklist .trk-links{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.wsp-sectracklist .trk-link{ padding:.6em 1.15em; border:1px solid var(--hair); border-radius:999px; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); text-decoration:none; transition:color .18s ease, border-color .18s ease; }
.wsp-sectracklist .trk-link:hover{ color:var(--accent); border-color:var(--accent); }
.wsp-sectracklist .trk-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@container site (max-width:880px){
  .wsp-sectracklist .trk-inner{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
  .wsp-sectracklist .trk-side{ position:static; display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr); gap:1.6rem; align-items:center; }
  .wsp-sectracklist .trk-disc{ max-width:220px; }
  .wsp-sectracklist .trk-meta{ margin:0; }
}
@container site (max-width:600px){
  .wsp-sectracklist .trk-keybpm{ display:none; }
  .wsp-sectracklist .trk-row{ grid-template-columns:2.6rem minmax(0,1fr) 3.6rem; }
  .wsp-sectracklist .trk-side{ grid-template-columns:minmax(0,1fr); }
  .wsp-sectracklist .trk-disc{ max-width:190px; }
}

@media (prefers-reduced-motion: reduce){
  .wsp-sectracklist .trk-disc-face{ animation:none; }
  .wsp-sectracklist .trk-eq i{ animation:none; }
  .wsp-sectracklist .trk-eq i:nth-child(1){ transform:scaleY(.45); }
  .wsp-sectracklist .trk-eq i:nth-child(2){ transform:scaleY(.95); }
  .wsp-sectracklist .trk-eq i:nth-child(3){ transform:scaleY(.3); }
  .wsp-sectracklist .trk-eq i:nth-child(4){ transform:scaleY(.7); }
  .wsp-sectracklist .trk-link{ transition:none; }
}
@keyframes wsp-sectracklist-eq{ from{ transform:scaleY(.22); } to{ transform:scaleY(1); } }
@keyframes wsp-sectracklist-spin{ to{ transform:rotate(360deg); } }

/* --- secdarkroomfeature (SB_04 port) --- */
.wsp-secdarkroomfeature{
  --dk-film:#060404; --dk-frame:#100b0a;
  --dk-ink:#e9e2d6; --dk-dim:#a1978a;
  --dk-line-soft:rgba(233,226,214,0.07);
  --dk-sprocket:rgba(237,229,216,0.12);
}
.wsp-secdarkroomfeature :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.wsp-secdarkroomfeature .dk-head{ max-width:62ch; }
.wsp-secdarkroomfeature .dk-head .ws-kick{ margin-bottom:14px; }
.wsp-secdarkroomfeature .dk-head .ws-sub{ margin-top:14px; max-width:52ch; }
.wsp-secdarkroomfeature .dk-meta{
  display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:22px;
  font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }

/* ---- the sheet ---- */
.wsp-secdarkroomfeature .dk-sheet{
  position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px,2.2cqw,22px); margin-top:clamp(28px,5cqw,48px); padding:clamp(14px,2.4cqw,26px);
  background:var(--dk-film); border:1px solid var(--dk-line-soft); border-radius:4px; }
.wsp-secdarkroomfeature .dk-sheet::before,
.wsp-secdarkroomfeature .dk-sheet::after{
  content:""; position:absolute; left:0; right:0; height:6px;
  background-image:repeating-linear-gradient(90deg, transparent 0 8px, var(--dk-sprocket) 8px 18px, transparent 18px 26px); }
.wsp-secdarkroomfeature .dk-sheet::before{ top:4px; }
.wsp-secdarkroomfeature .dk-sheet::after{ bottom:4px; }

/* ---- frames ---- */
.wsp-secdarkroomfeature .dk-frame{
  position:relative; display:flex; flex-direction:column; padding:12px;
  background:var(--dk-frame); border:1px solid var(--dk-line-soft); border-radius:2px;
  transition:border-color 0.22s ease; }
.wsp-secdarkroomfeature .dk-frame:hover,
.wsp-secdarkroomfeature .dk-frame:focus-within{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); }

.wsp-secdarkroomfeature .dk-rebate{
  display:flex; justify-content:space-between; gap:16px; padding-bottom:8px;
  font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--dk-dim); opacity:0.75; transition:color 0.22s ease, opacity 0.22s ease; }
.wsp-secdarkroomfeature .dk-frame:hover .dk-rebate,
.wsp-secdarkroomfeature .dk-frame:focus-within .dk-rebate{ color:var(--accent); opacity:1; }

.wsp-secdarkroomfeature .dk-photo{
  position:relative; aspect-ratio:3 / 2; overflow:hidden; border:4px solid var(--dk-film); background:var(--dk-film); }
.wsp-secdarkroomfeature .dk-neg{
  position:absolute; inset:0; filter:grayscale(1) contrast(1.05);
  transition:transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.wsp-secdarkroomfeature .dk-photo::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(135% 115% at 50% 45%, rgba(6,4,3,0) 55%, rgba(6,4,3,0.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:auto, 140px 140px; mix-blend-mode:overlay; opacity:0.85; pointer-events:none; }
.wsp-secdarkroomfeature .dk-frame:hover .dk-neg,
.wsp-secdarkroomfeature .dk-frame:focus-within .dk-neg{ transform:scale(1.09); }

/* six CSS photographs (bespoke gradient negatives) */
.wsp-secdarkroomfeature .dk-neg--dune{
  background:
    linear-gradient(168deg, rgba(20,15,12,0) 46%, rgba(20,15,12,0.88) 47%, rgba(20,15,12,0.55) 72%, rgba(20,15,12,0.92) 100%),
    linear-gradient(115deg, #efe9dc 0%, #b7ae9f 40%, #6d655a 68%, #2a221c 100%); }
.wsp-secdarkroomfeature .dk-neg--sea{
  background:
    radial-gradient(16% 24% at 68% 30%, #f5f1e8 0%, rgba(245,241,232,0.5) 36%, rgba(245,241,232,0) 64%),
    linear-gradient(180deg, rgba(243,239,230,0) 55%, rgba(243,239,230,0.18) 57%, rgba(243,239,230,0.04) 82%, rgba(243,239,230,0) 95%),
    linear-gradient(180deg, #cfc8bb 0%, #a49a8b 38%, #5f574d 54%, #221c17 58%, #100c09 100%); }
.wsp-secdarkroomfeature .dk-neg--window{
  background:
    linear-gradient(0deg, rgba(222,214,198,0.14) 0%, rgba(222,214,198,0) 38%),
    linear-gradient(78deg, rgba(25,19,16,0) 30%, #ded6c6 30.5%, #d4cbb8 43%, rgba(25,19,16,0) 43.5%, rgba(25,19,16,0) 55%, #cfc6b4 55.5%, #c2b8a4 65%, rgba(25,19,16,0) 65.5%),
    #191310; }
.wsp-secdarkroomfeature .dk-neg--portrait{
  background:
    linear-gradient(0deg, #16100c 0%, #16100c 20%, rgba(22,16,12,0) 46%),
    radial-gradient(38% 52% at 50% 62%, #16100c 0%, #16100c 58%, rgba(22,16,12,0) 62%),
    radial-gradient(120% 90% at 50% 8%, #ddd5c5 0%, #a99f8e 55%, #6f665a 100%); }
.wsp-secdarkroomfeature .dk-neg--forest{
  background:
    linear-gradient(180deg, rgba(233,226,214,0.32) 0%, rgba(233,226,214,0.06) 45%, rgba(233,226,214,0) 70%),
    repeating-linear-gradient(93deg, #0d0a08 0 13px, #453d33 13px 19px, #171210 19px 34px, #2c251e 34px 39px, #0f0c09 39px 55px); }
.wsp-secdarkroomfeature .dk-neg--stairs{
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(6,4,3,0) 40%, rgba(6,4,3,0.72) 100%),
    repeating-linear-gradient(45deg, #ddd5c4 0 24px, #241d17 24px 48px); }

/* copy under each frame */
.wsp-secdarkroomfeature .dk-name{ margin-top:16px; font-size:1rem; font-weight:700; letter-spacing:-0.01em; color:var(--dk-ink); }
.wsp-secdarkroomfeature .dk-desc{ margin-top:8px; font-size:0.8125rem; line-height:1.6; color:var(--dk-dim); flex:1; }
.wsp-secdarkroomfeature .dk-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; padding-top:10px;
  border-top:1px solid var(--dk-line-soft);
  font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dk-dim); }
.wsp-secdarkroomfeature .dk-foot em{ font-style:normal; color:var(--dk-ink); }

/* ---- the select: grease-pencil circle + note ---- */
.wsp-secdarkroomfeature .dk-frame--select{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.wsp-secdarkroomfeature .dk-circle{ position:absolute; top:6%; left:2%; width:96%; height:52%; pointer-events:none; transform:rotate(-2.5deg); }
.wsp-secdarkroomfeature .dk-circle path{ fill:none; stroke:var(--accent); stroke-width:3.2; stroke-linecap:round; opacity:0.85; }
.wsp-secdarkroomfeature .dk-note{
  position:absolute; top:4px; right:12px; transform:rotate(2deg);
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:0.14em; color:var(--accent); text-transform:uppercase; }
.wsp-secdarkroomfeature .dk-link{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:700;
  color:var(--accent); letter-spacing:0.14em; cursor:pointer; transition:gap 0.2s ease; }
.wsp-secdarkroomfeature .dk-link::after{ content:"\25B8"; }
.wsp-secdarkroomfeature .dk-link:hover{ gap:10px; }

@container site (max-width:1020px){ .wsp-secdarkroomfeature .dk-sheet{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@container site (max-width:640px){ .wsp-secdarkroomfeature .dk-sheet{ grid-template-columns:minmax(0,1fr); } }

@media (prefers-reduced-motion: reduce){
  .wsp-secdarkroomfeature .dk-frame:hover .dk-neg,
  .wsp-secdarkroomfeature .dk-frame:focus-within .dk-neg{ transform:none; }
}

/* --- secscrollytell (SB_04 port) --- */
.ws-sec.wsp-secscrollytell{ overflow:visible; }   /* .ws-sec's overflow:hidden would un-pin the sticky panel */

.wsp-secscrollytell .sst-body{ margin-top:clamp(8px,2cqw,20px); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5cqw,64px); align-items:start; }

/* ---- pinned visual panel ---- */
.wsp-secscrollytell .sst-visual{ position:sticky; top:clamp(12px,5cqh,40px); background:var(--panel);
  border:1px solid var(--hair); border-radius:var(--radius,16px); padding:clamp(14px,2cqw,22px);
  display:flex; flex-direction:column; gap:14px; }
.wsp-secscrollytell .sst-scene{ display:block; width:100%; height:auto; }
.wsp-secscrollytell .sst-meta{ display:flex; align-items:center; gap:14px; }
.wsp-secscrollytell .sst-dots{ display:flex; gap:7px; }
.wsp-secscrollytell .sst-dot{ width:12px; height:12px; border-radius:50%; padding:0; background:transparent;
  border:1.5px solid var(--faint); cursor:pointer;
  transition:background-color .3s ease, border-color .3s ease, transform .3s ease; }
.wsp-secscrollytell .sst-dot:hover{ border-color:var(--accent); }
.wsp-secscrollytell .sst-dot[aria-current="true"]{ background:var(--accent); border-color:var(--accent); transform:scale(1.15); }
.wsp-secscrollytell .sst-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wsp-secscrollytell .sst-track{ flex:1; height:3px; border-radius:2px; background:var(--hair); overflow:hidden; }
.wsp-secscrollytell .sst-thread{ display:block; height:100%; width:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .15s linear; }
.wsp-secscrollytell .sst-chapter{ font:600 11px var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- chapters (compact + fully legible at rest) ---- */
.wsp-secscrollytell .sst-steps{ display:flex; flex-direction:column; gap:clamp(16px,2.4cqw,26px); }
.wsp-secscrollytell .sst-step{ padding:2px 0 2px 20px; border-left:2px solid var(--hair); }
.wsp-secscrollytell .sst-num{ margin:0 0 9px; font:700 clamp(11px,1.4cqw,13px) var(--mono); letter-spacing:.18em; color:var(--accent); }
.wsp-secscrollytell .sst-step h3{ margin:0 0 8px; font:700 clamp(18px,2.4cqw,26px)/1.12 var(--font-head,var(--font)); letter-spacing:-.01em; color:var(--ink); }
.wsp-secscrollytell .sst-step p{ margin:0; max-width:44ch; font:400 clamp(14px,1.5cqw,16px)/1.65 var(--font); color:var(--dim); }

/* ---- LIVE only: mount adds .sst-live on the first REAL on-screen frame (never in the
   non-animating headless render), turning the compact list into the tall pinned scrollytell ---- */
.wsp-secscrollytell.sst-live .sst-step{ min-height:64cqh; display:flex; flex-direction:column; justify-content:center;
  opacity:.32; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.wsp-secscrollytell.sst-live .sst-step:first-child{ min-height:52cqh; }
.wsp-secscrollytell.sst-live .sst-step:last-child{ min-height:56cqh; }
.wsp-secscrollytell.sst-live .sst-step.is-active{ opacity:1; transform:none; border-left-color:var(--accent); }

/* ---- SVG scene state machine (transitions ride transform/opacity/fill/stroke only) ---- */
.wsp-secscrollytell .sst-scene .sv{ transform-box:fill-box; transform-origin:center;
  transition:transform .75s cubic-bezier(.22,1,.36,1), opacity .6s ease, fill .6s ease, stroke .6s ease; }
.wsp-secscrollytell .sv-frame{ fill:none; stroke:var(--faint); stroke-width:1.5; }
.wsp-secscrollytell .sv-block{ fill:color-mix(in srgb, var(--ink) 4%, transparent); stroke:var(--faint); stroke-width:1.5; }
.wsp-secscrollytell .sv-line{ fill:var(--faint); }
.wsp-secscrollytell .sv-orb{ fill:var(--faint); opacity:.2; }
.wsp-secscrollytell .sv-bracket{ fill:none; stroke:var(--accent2); stroke-width:2.5; stroke-linecap:round; opacity:0; }
.wsp-secscrollytell .sv-chip{ fill:var(--accent2); font:700 13px var(--mono); letter-spacing:.08em; opacity:0; }
.wsp-secscrollytell .sv-badge{ fill:var(--accent); opacity:0; transform:scale(.4); }
.wsp-secscrollytell .sv-check{ fill:none; stroke:var(--bg); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:48; stroke-dashoffset:48; opacity:0; transition:stroke-dashoffset .6s ease .35s, opacity .1s ease .3s; }
.wsp-secscrollytell .sv-spark{ fill:var(--accent2); opacity:0; }

/* state 1 — draft: scattered wireframe */
.wsp-secscrollytell [data-state="1"] .sv-hero{ transform:translate(-14px,-9px) rotate(-2deg); }
.wsp-secscrollytell [data-state="1"] .sv-card1{ transform:translate(11px,13px) rotate(1.6deg); }
.wsp-secscrollytell [data-state="1"] .sv-card2{ transform:translate(-7px,19px) rotate(-1.2deg); }
.wsp-secscrollytell [data-state="1"] .sv-cta{ transform:translate(20px,6px) rotate(2deg); }
.wsp-secscrollytell [data-state="1"] .sv-line{ opacity:.5; }

/* state 2 — pressure-test: aligned + viewport brackets squeeze */
.wsp-secscrollytell [data-state="2"] .sv-bracket{ opacity:1; }
.wsp-secscrollytell [data-state="2"] .sv-bracketL{ transform:translateX(10px); }
.wsp-secscrollytell [data-state="2"] .sv-bracketR{ transform:translateX(-10px); }
.wsp-secscrollytell [data-state="2"] .sv-chip{ opacity:1; }
.wsp-secscrollytell [data-state="2"] .sv-hero,
.wsp-secscrollytell [data-state="2"] .sv-card1,
.wsp-secscrollytell [data-state="2"] .sv-card2{ transform:scaleX(.94); stroke:var(--ink); }

/* states 3+4 — theme: fills bloom */
.wsp-secscrollytell [data-state="3"] .sv-hero,
.wsp-secscrollytell [data-state="4"] .sv-hero{ fill:var(--accent-fill); stroke:transparent; }
.wsp-secscrollytell [data-state="3"] .sv-card1,
.wsp-secscrollytell [data-state="4"] .sv-card1,
.wsp-secscrollytell [data-state="3"] .sv-card2,
.wsp-secscrollytell [data-state="4"] .sv-card2{ fill:color-mix(in srgb, var(--ink) 7%, transparent); stroke:transparent; }
.wsp-secscrollytell [data-state="3"] .sv-line,
.wsp-secscrollytell [data-state="4"] .sv-line{ fill:var(--ink); }
.wsp-secscrollytell [data-state="3"] .sv-cta,
.wsp-secscrollytell [data-state="4"] .sv-cta{ fill:var(--accent); stroke:transparent; }
.wsp-secscrollytell [data-state="3"] .sv-orb,
.wsp-secscrollytell [data-state="4"] .sv-orb{ fill:var(--accent2); opacity:1; }

/* state 4 — ship: badge stamps, check draws, sparks */
.wsp-secscrollytell [data-state="4"] .sv-frame{ stroke:var(--accent); }
.wsp-secscrollytell [data-state="4"] .sv-badge{ opacity:1; transform:scale(1); }
.wsp-secscrollytell [data-state="4"] .sv-check{ stroke-dashoffset:0; opacity:1; }
.wsp-secscrollytell [data-state="4"] .sv-spark{ opacity:1; }
.wsp-secscrollytell [data-state="4"] .sv-spark1{ transform:translate(-6px,-10px); }
.wsp-secscrollytell [data-state="4"] .sv-spark2{ transform:translate(8px,-6px); }
.wsp-secscrollytell [data-state="4"] .sv-spark3{ transform:translate(4px,10px); }

/* ---- responsive: @container site (sections render in panes of any width) ---- */
@container site (max-width:820px){
  .wsp-secscrollytell .sst-body{ grid-template-columns:1fr; gap:20px; }
  .wsp-secscrollytell .sst-visual{ top:8px; z-index:2; }
  .wsp-secscrollytell .sst-scene{ max-height:40cqh; }
  .wsp-secscrollytell .sst-steps{ gap:16px; }
}
@container site (max-width:440px){
  .wsp-secscrollytell .sst-chapter{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-secscrollytell .sst-scene .sv,
  .wsp-secscrollytell .sst-dot,
  .wsp-secscrollytell .sst-thread{ transition-duration:.01s; transition-delay:0s; }
  .wsp-secscrollytell .sv-check{ transition-duration:.01s,.01s; }
  .wsp-secscrollytell.sst-live .sst-step{ transform:none; transition-duration:.01s; }
}

/* @@SB04-SEC-PORT-CSS-SLOT@@ ported section CSS inserts ABOVE this line — batch tsk_mrj94prrn4d */
/* album-art-hero (SB_04 port · components/above-the-fold/album-art-hero) — the release cover
   floods the whole viewport: album art (or a generative --accent field when no image is set)
   behind a massive artist name, mono meta row, a floating tracklist and a live scroll cue.
   Bottom-anchored content over a readability gradient. Own aah-* family (the aa-* draft is a
   different, split-layout hero). All theme tokens; only the ambient dot + scroll line move,
   both killed under reduced-motion; entrances belong to the site reveal system. */
.ws-hero.v-album-art-hero { position:relative; overflow:hidden; isolation:isolate; padding:0;
  min-height:clamp(520px, 88cqh, 860px); display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--bg); color:var(--ink); font-family:var(--font); }
/* the album art IS the hero — a real image, or a generative accent field when none is set */
.v-album-art-hero .aah-visual { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  background-image:radial-gradient(ellipse 120% 82% at 50% 26%,
    color-mix(in srgb, var(--accent) 66%, var(--bg)) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 30%, var(--bg)) 40%,
    var(--bg) 80%); }
/* readability gradient — keeps the bottom copy legible over any art */
.v-album-art-hero .aah-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,
  var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 16%,
  color-mix(in srgb, var(--bg) 32%, transparent) 42%, transparent 62%,
  color-mix(in srgb, var(--bg) 22%, transparent) 100%); }
/* film grain over everything */
.v-album-art-hero .aah-grain { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.07;
  mix-blend-mode:overlay; background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='aahn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23aahn)'/%3E%3C/svg%3E"); }
/* bottom-anchored content */
.v-album-art-hero .aah-content { position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:flex-start; gap:16px; max-width:min(100%, 900px);
  padding:clamp(28px, 5cqw, 72px) clamp(22px, 5cqw, 80px) clamp(28px, 4cqw, 60px); }
/* release tag */
.v-album-art-hero .aah-tag { display:inline-flex; align-items:center; gap:.6em; color:var(--accent);
  font:500 clamp(9px, 1.1cqw, 11px)/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.v-album-art-hero .aah-dot { width:6px; height:6px; border-radius:50%; background:var(--accent);
  animation:aahDot 2s ease-in-out infinite; }
/* artist name — the centerpiece */
.v-album-art-hero .aah-artist { max-width:none; margin:0; color:var(--ink); text-transform:uppercase;
  letter-spacing:-0.03em; font:800 clamp(52px, 14cqw, 168px)/0.86 var(--font-head, var(--font)); }
.v-album-art-hero .aah-album { margin:0; color:var(--dim); text-transform:uppercase; letter-spacing:.08em;
  font:300 clamp(15px, 3.4cqw, 30px)/1.1 var(--font-head, var(--font)); }
/* meta row */
.v-album-art-hero .aah-meta { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px, 1.6cqw, 22px); margin-top:4px; }
.v-album-art-hero .aah-metaitem { font:400 clamp(9px, 1cqw, 11px)/1 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
.v-album-art-hero .aah-metaitem strong { color:var(--ink); font-weight:500; }
.v-album-art-hero .aah-metadiv { width:1px; height:12px; background:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-album-art-hero .aah-actions { margin-top:12px; }
/* floating tracklist (wide only) */
.v-album-art-hero .aah-tracklist { position:absolute; top:50%; right:clamp(22px, 5cqw, 80px); transform:translateY(-50%);
  z-index:2; display:flex; flex-direction:column; gap:7px; text-align:right; }
.v-album-art-hero .aah-track { font:400 clamp(9px, .95cqw, 11px)/1.3 var(--mono); letter-spacing:.06em;
  color:var(--faint); white-space:nowrap; transition:color .18s ease, transform .18s ease; }
.v-album-art-hero .aah-track:hover { color:var(--ink); transform:translateX(-3px); }
.v-album-art-hero .aah-tracknum { display:inline-block; width:2.4em; text-align:right; margin-right:.9em;
  color:color-mix(in srgb, var(--accent) 68%, transparent); }
/* scroll cue */
.v-album-art-hero .aah-scroll { position:absolute; right:clamp(22px, 5cqw, 80px); bottom:16px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 8px;
  background:none; border:0; cursor:pointer; color:var(--faint); transition:color .2s ease, transform .2s ease; }
.v-album-art-hero .aah-scroll:hover { color:var(--ink); transform:translateY(3px); }
.v-album-art-hero .aah-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.v-album-art-hero .aah-scroll span { font:400 9px var(--mono); letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-lr; }
.v-album-art-hero .aah-scroll i { width:1px; height:34px; transform-origin:top;
  background:linear-gradient(180deg, currentColor, transparent); animation:aahScroll 2s ease-in-out infinite; }
@keyframes aahDot { 0%, 100% { opacity:1; } 50% { opacity:.3; } }
@keyframes aahScroll { 0%, 100% { opacity:.25; transform:scaleY(.55); } 50% { opacity:.8; transform:scaleY(1); } }
@container site (max-width: 820px) {
  .v-album-art-hero .aah-tracklist { display:none; }
}
@container site (max-width: 560px) {
  .ws-hero.v-album-art-hero { min-height:clamp(460px, 84cqh, 680px); }
  .v-album-art-hero .aah-artist { font-size:clamp(44px, 18cqw, 104px); }
  .v-album-art-hero .aah-content { gap:13px; }
  .v-album-art-hero .aah-scroll { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-album-art-hero .aah-dot, .v-album-art-hero .aah-scroll i { animation:none; }
  .v-album-art-hero .aah-track { transition:none; }
}
/* atmospheric-portrait-hero — ported from SB_04 components/above-the-fold/atmospheric-portrait-hero.
   Full-viewport moody artist opener: a portrait layer (themed silhouette placeholder until an img is set),
   a vignette, a BLUR-FREE gradient fog haze, film grain, corner crop-marks, and a bottom-anchored
   italic-serif name. Origin --aph-* vars map to tokens: bg->--bg, text->--ink, muted->--dim/--faint,
   accent->--accent, fog->--ink mix, display font->--font-head, mono->--mono. Two deliberate upgrades over
   the origin: (1) the origin's blur(40-60px) fog bands become soft layered radial gradients — no filter,
   honoring the no-blur rule; (2) the decorative scroll indicator becomes a REAL button that scrolls the
   pane (see mount). All entrance / drift keyframes dropped (anims.js owns entrances) — every layer is
   static. Reuses ws-in for the measure and ws-kick / ws-h1 / ws-sub / ws-ctarow + btn(). Container queries
   hide the scroll cue (860) and crop marks (560) and shrink the name (560). */
.ws-hero.v-atmospheric-portrait-hero { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(560px, 88vh, 900px); display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--bg); --apxh-fog:color-mix(in srgb, var(--ink) 5%, transparent); }
.v-atmospheric-portrait-hero .apxh-portrait { position:absolute; inset:0; z-index:0; border:0; border-radius:0;
  background-size:cover; background-position:center top; background-repeat:no-repeat; }
.v-atmospheric-portrait-hero .apxh-portrait.ph { background-position:center;
  background-image:radial-gradient(ellipse 52% 78% at 55% 34%, color-mix(in srgb, var(--accent) 15%, var(--bg)), var(--bg) 70%); }
.v-atmospheric-portrait-hero .apxh-vignette { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 92% 82% at 50% 38%, transparent 22%, color-mix(in srgb, var(--bg) 55%, transparent) 62%, var(--bg) 92%),
    linear-gradient(0deg, var(--bg), color-mix(in srgb, var(--bg) 72%, transparent) 20%, transparent 52%, color-mix(in srgb, var(--bg) 42%, transparent)); }
.v-atmospheric-portrait-hero .apxh-fog { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 40% at 28% 72%, var(--apxh-fog), transparent 62%),
    radial-gradient(150% 36% at 74% 26%, var(--apxh-fog), transparent 60%); }
.v-atmospheric-portrait-hero .apxh-grain { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.12;
  mix-blend-mode:overlay; background-repeat:repeat; background-size:256px 256px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='apxhgn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23apxhgn)'/%3E%3C/svg%3E"); }
.v-atmospheric-portrait-hero .apxh-frame { position:absolute; z-index:4;
  width:clamp(2.4rem, 3.4cqw, 3.5rem); height:clamp(2.4rem, 3.4cqw, 3.5rem); }
.v-atmospheric-portrait-hero .apxh-frame::before, .v-atmospheric-portrait-hero .apxh-frame::after { content:'';
  position:absolute; background:color-mix(in srgb, var(--accent) 34%, transparent); }
.v-atmospheric-portrait-hero .apxh-frame::before { width:100%; height:1px; }
.v-atmospheric-portrait-hero .apxh-frame::after { width:1px; height:100%; }
.v-atmospheric-portrait-hero .apxh-tl { top:clamp(1.4rem, 2.4cqw, 2rem); left:clamp(1.4rem, 2.4cqw, 2rem); }
.v-atmospheric-portrait-hero .apxh-tl::before, .v-atmospheric-portrait-hero .apxh-tl::after { top:0; left:0; }
.v-atmospheric-portrait-hero .apxh-tr { top:clamp(1.4rem, 2.4cqw, 2rem); right:clamp(1.4rem, 2.4cqw, 2rem); }
.v-atmospheric-portrait-hero .apxh-tr::before, .v-atmospheric-portrait-hero .apxh-tr::after { top:0; right:0; }
.v-atmospheric-portrait-hero .apxh-bl { bottom:clamp(1.4rem, 2.4cqw, 2rem); left:clamp(1.4rem, 2.4cqw, 2rem); }
.v-atmospheric-portrait-hero .apxh-bl::before, .v-atmospheric-portrait-hero .apxh-bl::after { bottom:0; left:0; }
.v-atmospheric-portrait-hero .apxh-br { bottom:clamp(1.4rem, 2.4cqw, 2rem); right:clamp(1.4rem, 2.4cqw, 2rem); }
.v-atmospheric-portrait-hero .apxh-br::before, .v-atmospheric-portrait-hero .apxh-br::after { bottom:0; right:0; }
.v-atmospheric-portrait-hero .apxh-content { position:relative; z-index:5; padding:0 0 clamp(2.6rem, 5cqw, 5rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(.55rem, 1cqw, .9rem); }
.v-atmospheric-portrait-hero .apxh-kick { color:var(--dim); }
.v-atmospheric-portrait-hero .apxh-name { margin:0; font-family:var(--font-head, var(--font)); font-style:italic;
  font-weight:400; line-height:.92; letter-spacing:-.02em; color:var(--ink); font-size:clamp(3rem, 12cqw, 9rem); }
.v-atmospheric-portrait-hero .apxh-tagline { margin:0; max-width:38ch; color:var(--dim); font-weight:300; line-height:1.7; }
.v-atmospheric-portrait-hero .apxh-content .ws-ctarow { margin-top:clamp(.5rem, 1.4cqw, 1.1rem); }
.v-atmospheric-portrait-hero .apxh-scroll { position:absolute; z-index:6; right:clamp(1.4rem, 3cqw, 3rem);
  bottom:clamp(1.4rem, 2.4cqw, 2rem); display:flex; flex-direction:column; align-items:center; gap:.5rem;
  margin:0; padding:6px 4px; border:0; background:transparent; cursor:pointer; color:var(--faint);
  transition:color 160ms ease; }
.v-atmospheric-portrait-hero .apxh-scroll:hover { color:var(--ink); }
.v-atmospheric-portrait-hero .apxh-scroll-text { writing-mode:vertical-lr; font:400 9px var(--mono);
  letter-spacing:2px; text-transform:uppercase; color:inherit; }
.v-atmospheric-portrait-hero .apxh-scroll-line { width:1px; height:2.4rem;
  background:linear-gradient(180deg, currentColor, transparent); }
@container site (max-width: 860px) {
  .v-atmospheric-portrait-hero { min-height:clamp(480px, 80vh, 720px); }
  .v-atmospheric-portrait-hero .apxh-scroll { display:none; }
}
@container site (max-width: 560px) {
  .v-atmospheric-portrait-hero .apxh-name { font-size:clamp(2.4rem, 14cqw, 4.4rem); }
  .v-atmospheric-portrait-hero .apxh-frame { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-atmospheric-portrait-hero .apxh-scroll { transition:none; }
}
/* card-hero — ported from SB_04 components/above-the-fold/card-hero (v2.0, approved). Editorial data-card
   manifesto: a pulsing "signal" eyebrow + serif headline over an asymmetric grid of numbered, hairline-ruled
   artifact cards whose gradient accent bar reveals on hover, on a drifting-orb + grain atmosphere. SB_04's
   five baked palettes (void/violet · amber · moss · chrome · neon) collapse into the theme system; the
   --hero-* vars map to ZenOS tokens (--bg/--panel/--ink/--dim/--faint/--hair/--accent/--accent2/--font-head/
   --mono). Orbs are soft radial gradients (no blur filter, like v-abstract-hero) so they stay theme-portable;
   the staggered card-entrance keyframes are dropped (anims.js owns entrances); orb drift + signal-dot pulse
   are ambient loops that stop under prefers-reduced-motion; card hover keeps border-color shift + accent-bar
   reveal (opacity/color only, surface flips instantly). Namespaced .v-card-hero / .cdh-*. Container queries only. */
.ws-hero.v-card-hero { position:relative; overflow:hidden; isolation:isolate; background:var(--bg); }
.v-card-hero .cdh-field { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v-card-hero .cdh-orb { position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.v-card-hero .cdh-orb.o1 { width:52cqw; height:52cqw; min-width:320px; min-height:320px; top:-20%; left:-10%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent) 9%, transparent) 42%, transparent 70%);
  animation:cdhDrift1 21s ease-in-out infinite alternate; }
.v-card-hero .cdh-orb.o2 { width:44cqw; height:44cqw; min-width:280px; min-height:280px; bottom:-16%; right:-6%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 8%, transparent) 42%, transparent 70%);
  animation:cdhDrift2 26s ease-in-out infinite alternate; }
.v-card-hero .cdh-noise { position:absolute; inset:0; z-index:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cdhn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cdhn)'/%3E%3C/svg%3E"); }
.v-card-hero .cdh-wrap { position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(32px, 5cqw, 58px); }
.v-card-hero .cdh-head { display:flex; flex-direction:column; align-items:flex-start; }
.v-card-hero .cdh-head > * { margin:0; }
.v-card-hero .cdh-signal { display:inline-flex; align-items:center; gap:0.7em; text-transform:uppercase; margin-bottom:clamp(16px, 2.2cqw, 28px); }
.v-card-hero .cdh-dot { width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); animation:cdhPulse 2.6s ease-in-out infinite; }
.v-card-hero .cdh-h { max-width:20ch; margin-bottom:clamp(14px, 1.8cqw, 22px); }
.v-card-hero .cdh-sub { max-width:52ch; }
.v-card-hero .cdh-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(10px, 1.3cqw, 14px); }
.v-card-hero .cdh-card { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:0.7rem;
  padding:clamp(22px, 2.7cqw, 40px); border:var(--bw, 1px) solid var(--hair); background:var(--panel); transition:border-color 200ms linear; }
.v-card-hero .cdh-card > * { margin:0; }
.v-card-hero .cdh-card:hover { border-color:color-mix(in srgb, var(--accent) 38%, var(--hair));
  background:color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.v-card-hero .cdh-accent { position:absolute; top:0; left:0; right:0; height:2px; opacity:0; transition:opacity 220ms linear;
  background:linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent2, var(--accent)) 70%, transparent); }
.v-card-hero .cdh-card:hover .cdh-accent { opacity:1; }
.v-card-hero .cdh-index { font:700 11px var(--mono); letter-spacing:2px; color:var(--accent); opacity:0.7; }
.v-card-hero .cdh-ctitle { font:700 clamp(16px, 1.7cqw, 19px)/1.3 var(--font); letter-spacing:-0.01em; color:var(--ink); }
.v-card-hero .cdh-desc { font:400 clamp(13px, 1.4cqw, 14.5px)/1.65 var(--font); color:var(--dim); max-width:42ch; }
.v-card-hero .cdh-meta { margin-top:0.3rem; padding-top:0.7rem; border-top:var(--bw, 1px) solid var(--hair);
  font:400 10.5px var(--mono); letter-spacing:0.5px; text-transform:lowercase; color:var(--faint); }
.v-card-hero .cdh-baseline { position:absolute; left:10%; right:10%; bottom:clamp(26px, 4cqw, 50px); height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent2, var(--accent)) 75%, transparent); opacity:0.3; pointer-events:none; }
.v-card-hero.cdh-stacked .cdh-grid { grid-template-columns:1fr; max-width:44rem; }
@keyframes cdhPulse { 0%, 100% { opacity:1; } 50% { opacity:0.35; } }
@keyframes cdhDrift1 { from { transform:translate(0,0) scale(1); } to { transform:translate(4%,5%) scale(1.04); } }
@keyframes cdhDrift2 { from { transform:translate(0,0) scale(1); } to { transform:translate(-5%,-4%) scale(1.06); } }
@container site (max-width: 860px) {
  .v-card-hero .cdh-grid { grid-template-columns:1fr; }
}
@container site (max-width: 560px) {
  .v-card-hero .cdh-card { padding:clamp(18px, 5cqw, 26px); }
  .v-card-hero .cdh-desc { max-width:100%; }
  .v-card-hero .cdh-baseline { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-card-hero .cdh-dot, .v-card-hero .cdh-orb { animation:none; }
}
/* centered-hero — ported from SB_04 components/above-the-fold/centered-hero (the "approved" full
   centered SaaS opener: a bordered accent PILL eyebrow, a big balanced headline, twin CTAs, and an
   optional social-proof BAND pinned to a full-width fold hairline at the bottom). Its own row next
   to the earlier 'centered' draft — this one adds the pill eyebrow, the padded bottom proof band
   (vs the draft's inline trust) and accent-ring proof dots. Reuses ws-in.center + ws-h1/gradLast +
   ws-sub + ws-ctarow + btn(). Origin --hero-* vars map to tokens: bg->--bg, text->--ink,
   text-secondary->--dim, accent->--accent, border->--hair, fonts->--font/--font-head. Baked
   fade-up entrances dropped (anims.js owns reveals); container queries only, no blur. */
.v-centered-hero { display:flex; flex-direction:column; min-height:460px; padding-bottom:clamp(28px, 4cqw, 48px); }
.v-centered-hero .chp-wrap { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.v-centered-hero .chp-pill { display:inline-flex; align-items:center; gap:8px; margin-bottom:clamp(18px, 2.2cqw, 26px);
  font:600 clamp(10px, 1.05cqw, 11.5px)/1 var(--mono, var(--font)); letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); padding:7px 13px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background:color-mix(in srgb, var(--accent) 8%, transparent); }
.v-centered-hero .chp-pdot { width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }
.v-centered-hero .chp-h { max-width:20ch; margin-inline:auto; letter-spacing:-0.03em; line-height:1.08; text-wrap:balance; }
.v-centered-hero .chp-sub { max-width:52ch; margin-top:clamp(16px, 1.9cqw, 22px); text-wrap:balance; }
.v-centered-hero .chp-wrap .ws-ctarow { margin-top:clamp(26px, 3cqw, 34px); }
.v-centered-hero .chp-fold { margin-top:clamp(40px, 6cqw, 76px); padding-top:clamp(18px, 2.6cqw, 28px);
  border-top:var(--bw, 1px) solid var(--hair); }
.v-centered-hero .chp-trust { width:min(1080px, 88cqw); margin:0 auto; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:clamp(16px, 2.6cqw, 30px); }
.v-centered-hero .chp-item { display:inline-flex; align-items:center; gap:9px; letter-spacing:.03em;
  font:500 clamp(11px, 1.15cqw, 12.5px)/1 var(--font); color:var(--dim); }
.v-centered-hero .chp-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
@container site (max-width: 560px) {
  .v-centered-hero .chp-fold { margin-top:clamp(30px, 8cqw, 48px); }
  .v-centered-hero .chp-trust { flex-direction:column; gap:12px; }
}
/* cinematic-hero — ported from SB_04 components/above-the-fold/cinematic-hero. Full-bleed film-noir
   opener: a CSS-only atmosphere (off-center radial light + a slow diagonal light-sweep) over a deep
   vignette and film grain, framing an editorial italic headline with an accent last word, a leading-line
   overline, a tagline, twin CTAs and a real scroll button; an optional background image floods behind the
   atmosphere and a poster mode centers the column. SB_04's --hero-* vars + five baked palettes
   (noir/warm/cold/mono/editorial) map to the theme system: bg->--bg, text->--ink, secondary->--dim/--faint,
   accent->--accent, display font->--font-head, body->--font/--mono; the warm/cold/mono recolors are just
   theme/accent changes now and --centered becomes the `center` field. Two upgrades over the origin: an
   `img` prop that floods a photo behind the vignette (the origin only noted image support as future work),
   and the decorative scroll indicator becomes a REAL button that scrolls the pane (see mount). The origin's
   staggered fade-up / reveal entrance keyframes are dropped (anims.js owns entrances); the radial drift +
   light sweep are ambient loops and the scroll line pulses at rest — all three stop under
   prefers-reduced-motion. The origin's mix-blend multiply vignette becomes a layered gradient toward
   --bg/#000 so it composites cleanly over an image; transitions ride transform / opacity / color only, no
   blur. Reuses ws-in / ws-kick / ws-h1 + gradLast / ws-sub / ws-ctarow + btn. Namespaced
   .v-cinematic-hero / .cineh-*. Container queries only. */
.ws-hero.v-cinematic-hero { position:relative; overflow:hidden; isolation:isolate; padding:0;
  min-height:clamp(520px, 88cqh, 860px); display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; background:var(--bg); color:var(--ink); }
/* atmosphere base — an optional photo, else deep --bg; carries the drifting radial light */
.v-cinematic-hero .cineh-atmos { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; }
.v-cinematic-hero .cineh-atmos::before { content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 70% 20%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 60%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 50%);
  animation:cinehDrift 20s ease-in-out infinite alternate; will-change:transform; }
/* slow diagonal light sweep */
.v-cinematic-hero .cineh-sweep { position:absolute; inset:0; mix-blend-mode:screen;
  background:linear-gradient(175deg, transparent 0%, transparent 34%,
    color-mix(in srgb, var(--accent) 8%, transparent) 50%, transparent 66%, transparent 100%);
  animation:cinehSweep 25s ease-in-out infinite alternate; will-change:transform, opacity; }
/* vignette — deepens edges toward --bg/#000, keeps content legible over any image */
.v-cinematic-hero .cineh-vignette { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 100% 100% at 50% 45%, transparent 38%, color-mix(in srgb, var(--bg) 58%, #000) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 42%, transparent), transparent 42%); }
/* film grain */
.v-cinematic-hero .cineh-grain { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.06;
  mix-blend-mode:overlay; background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cinehn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cinehn)'/%3E%3C/svg%3E"); }
/* content */
.v-cinematic-hero .cineh-in { position:relative; z-index:3; display:flex; flex-direction:column;
  align-items:flex-start; padding-block:clamp(2.4rem, 6cqw, 5rem); }
.v-cinematic-hero.cineh-center .cineh-in { align-items:center; }
/* leading-line overline */
.v-cinematic-hero .cineh-over { display:inline-flex; align-items:center; gap:.85em; color:var(--accent);
  margin-bottom:clamp(1rem, 2cqw, 1.6rem); }
.v-cinematic-hero .cineh-over::before { content:''; width:2em; height:1px; background:var(--accent); flex:none; }
.v-cinematic-hero.cineh-center .cineh-over::before { display:none; }
/* editorial italic headline; accent word rides gradLast's gradient span */
.v-cinematic-hero .cineh-h { max-width:16ch; font-family:var(--font-head, var(--font)); font-style:italic;
  font-weight:700; line-height:.98; letter-spacing:-.02em; color:var(--ink);
  font-size:clamp(2.6rem, 9cqw, 6.4rem); }
.v-cinematic-hero.cineh-center .cineh-h { max-width:18ch; }
.v-cinematic-hero .cineh-tag { margin-top:clamp(1rem, 1.8cqw, 1.4rem); max-width:42ch; color:var(--dim);
  font-weight:300; line-height:1.7; }
.v-cinematic-hero.cineh-center .cineh-tag { max-width:52ch; }
.v-cinematic-hero .cineh-in .ws-ctarow { margin-top:clamp(1.4rem, 2.6cqw, 2.2rem); }
/* scroll cue — real button, bottom-right, vertical label */
.v-cinematic-hero .cineh-scroll { position:absolute; z-index:4; right:clamp(1.4rem, 3cqw, 2.4rem);
  bottom:clamp(1.2rem, 2.4cqw, 1.8rem); display:flex; flex-direction:column; align-items:center; gap:.5rem;
  margin:0; padding:6px; border:0; background:none; cursor:pointer; color:var(--faint);
  transition:color .2s ease, transform .2s ease; }
.v-cinematic-hero .cineh-scroll:hover { color:var(--ink); transform:translateY(3px); }
.v-cinematic-hero .cineh-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.v-cinematic-hero .cineh-scroll span { writing-mode:vertical-lr; font:400 9px var(--mono);
  letter-spacing:.2em; text-transform:uppercase; }
.v-cinematic-hero .cineh-scroll i { width:1px; height:2.6rem; transform-origin:top;
  background:linear-gradient(180deg, currentColor, transparent); animation:cinehPulse 2s ease-in-out infinite; }
/* bottom accent divider */
.v-cinematic-hero .cineh-divider { position:absolute; left:0; right:0; bottom:0; z-index:3; height:1px;
  background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 34%, transparent) 30%,
    color-mix(in srgb, var(--accent) 34%, transparent) 70%, transparent 100%); }
@keyframes cinehDrift { from { transform:scale(1) translate(0,0); } to { transform:scale(1.05) translate(-2%,3%); } }
@keyframes cinehSweep { from { opacity:.4; transform:translateX(-5%); } to { opacity:1; transform:translateX(5%); } }
@keyframes cinehPulse { 0%, 100% { opacity:.3; transform:scaleY(.6); } 50% { opacity:1; transform:scaleY(1); } }
@container site (max-width: 860px) {
  .ws-hero.v-cinematic-hero { min-height:clamp(460px, 82cqh, 720px); }
  .v-cinematic-hero .cineh-scroll { display:none; }
}
@container site (max-width: 560px) {
  .v-cinematic-hero .cineh-h { font-size:clamp(2.3rem, 13cqw, 4rem); }
  .v-cinematic-hero .cineh-divider { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-cinematic-hero .cineh-atmos::before, .v-cinematic-hero .cineh-sweep, .v-cinematic-hero .cineh-scroll i { animation:none; }
  .v-cinematic-hero .cineh-scroll { transition:none; }
}
/* editorial-hero — ported from SB_04 components/above-the-fold/editorial-hero (its OWN variant row: a
   full-bleed magazine opener — category/issue rule bar, an oversized italic-serif headline with an
   accent emphasis word, a bold full-width rule, standfirst + right-set byline + underlined arrow CTA,
   a volume tag and a real scroll-to-content button, plus a faint vertical accent rule and a giant
   ghosted issue number). Origin --hero-* vars map to tokens: bg->--bg, text->--ink, muted->--dim,
   bold rule/border->--ink, hairline bars->--hair, accent->--accent, display font->--font-head (kept
   italic as the editorial signature), body->--font, tracked labels->--mono. Baked staggered fade-up
   entrances dropped (anims.js owns reveals) and the origin's infinite scroll-pulse dropped (rest-state
   motion); hover rides transform/color only; container queries, no blur. Namespaced under .edh-. */
.ws-hero.v-editorial-hero { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(460px, 78vh, 760px); background:var(--bg); color:var(--ink);
  display:grid; grid-template-rows:auto 1fr auto; }
.v-editorial-hero .edh-topbar, .v-editorial-hero .edh-bottombar { position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem, 2.4cqw, 1.5rem) clamp(1.5rem, 4.5cqw, 4rem);
  font:500 clamp(9.5px, 1cqw, 11px)/1 var(--mono, var(--font)); letter-spacing:.15em; text-transform:uppercase; }
.v-editorial-hero .edh-topbar { border-bottom:var(--bw, 1px) solid var(--hair); }
.v-editorial-hero .edh-bottombar { align-items:flex-end; border-top:var(--bw, 1px) solid var(--hair); color:var(--dim); }
.v-editorial-hero .edh-cat { color:var(--accent); }
.v-editorial-hero .edh-issue { color:var(--dim); }
.v-editorial-hero .edh-body { position:relative; z-index:1; align-content:center;
  display:grid; grid-template-columns:1fr; gap:0;
  padding:clamp(2rem, 4cqw, 3rem) clamp(1.5rem, 4.5cqw, 4rem); }
.v-editorial-hero .edh-headline { margin:0; color:var(--ink); max-width:none;
  font-family:var(--font-head, var(--font)); font-weight:400; font-style:italic;
  font-size:clamp(3rem, 11cqw, 8.5rem); line-height:.94; letter-spacing:-0.03em; text-wrap:balance; }
.v-editorial-hero .edh-em { font-style:normal; color:var(--accent); }
.v-editorial-hero .edh-rule { display:block; width:100%; height:3px; border:0; background:var(--ink);
  margin:clamp(1.25rem, 2.6cqw, 2rem) 0; }
.v-editorial-hero .edh-meta { display:grid; grid-template-columns:1fr; align-items:start;
  gap:clamp(1.25rem, 2.4cqw, 1.5rem); }
.v-editorial-hero .edh-subhead { margin:0; max-width:50ch; color:var(--dim);
  font:300 clamp(1rem, 1.8cqw, 1.25rem)/1.6 var(--font); }
.v-editorial-hero .edh-byline { display:flex; flex-direction:column; gap:.25rem; }
.v-editorial-hero .edh-author { color:var(--ink); letter-spacing:.08em; text-transform:uppercase;
  font:600 clamp(11px, 1.1cqw, 13px)/1.2 var(--mono, var(--font)); }
.v-editorial-hero .edh-date { color:var(--dim); letter-spacing:.05em;
  font:400 clamp(10px, 1cqw, 12px)/1.2 var(--mono, var(--font)); }
.v-editorial-hero .edh-cta { display:inline-flex; align-items:center; gap:.75rem; align-self:start;
  padding:.75rem 0; border-bottom:2px solid var(--ink); cursor:pointer; text-decoration:none; color:var(--ink);
  font:600 clamp(11px, 1.1cqw, 12px)/1 var(--mono, var(--font)); letter-spacing:.15em; text-transform:uppercase;
  transition:color .3s ease, border-color .3s ease; }
.v-editorial-hero .edh-cta:hover { color:var(--accent); border-bottom-color:var(--accent); }
.v-editorial-hero .edh-cta-arrow { position:relative; width:1.5rem; height:1px; background:currentColor; flex:none;
  transition:transform .3s ease; }
.v-editorial-hero .edh-cta-arrow::after { content:''; position:absolute; right:0; top:50%; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:translateY(-50%) rotate(45deg); }
.v-editorial-hero .edh-cta:hover .edh-cta-arrow { transform:translateX(6px); }
.v-editorial-hero .edh-scroll { display:inline-flex; align-items:center; gap:.5rem; margin:0; padding:4px 2px;
  border:0; background:transparent; cursor:pointer; color:var(--dim);
  font:400 clamp(9px, .95cqw, 10.5px)/1 var(--mono, var(--font)); letter-spacing:.2em; text-transform:uppercase;
  transition:color 160ms ease; }
.v-editorial-hero .edh-scroll:hover { color:var(--ink); }
.v-editorial-hero .edh-scroll-line { width:1px; height:2rem; flex:none;
  background:linear-gradient(180deg, currentColor, transparent); }
.v-editorial-hero .edh-deco { position:absolute; z-index:0; pointer-events:none; }
.v-editorial-hero .edh-vline { top:0; right:15%; width:1px; height:100%; display:none;
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 22%, transparent) 30%,
    color-mix(in srgb, var(--accent) 22%, transparent) 70%, transparent 100%); }
.v-editorial-hero .edh-bignum { right:-3%; bottom:-6%; display:none; user-select:none; line-height:1;
  font-family:var(--font-head, var(--font)); font-style:italic; font-weight:400;
  font-size:clamp(10rem, 30cqw, 24rem); color:color-mix(in srgb, var(--ink) 6%, transparent); }
@container site (min-width: 680px) {
  .v-editorial-hero .edh-meta { grid-template-columns:1fr auto; align-items:end; gap:clamp(1.5rem, 4cqw, 3rem); }
  .v-editorial-hero .edh-byline { text-align:right; }
  .v-editorial-hero .edh-vline { display:block; }
}
@container site (min-width: 1000px) {
  .v-editorial-hero .edh-body { grid-template-columns:2fr 1fr; column-gap:clamp(2rem, 4cqw, 4rem); row-gap:0; }
  .v-editorial-hero .edh-headline { grid-column:1 / -1; }
  .v-editorial-hero .edh-rule { grid-column:1 / -1; }
  .v-editorial-hero .edh-meta { grid-column:1 / -1; grid-template-columns:1fr auto auto; align-items:start;
    gap:clamp(2rem, 4cqw, 4rem); }
  .v-editorial-hero .edh-byline { text-align:left; border-left:var(--bw, 1px) solid var(--hair);
    padding-left:clamp(1rem, 2cqw, 2rem); }
  .v-editorial-hero .edh-cta { align-self:center; }
  .v-editorial-hero .edh-bignum { display:block; }
}
/* exhibition-hero — SB_04 · components/above-the-fold/exhibition-hero (wave2, ported by sprint).
   Text-only monospace gallery entrance. The origin's --eh-* vars map onto ZenOS theme tokens
   (mono/ink/dim/faint/hair/accent) so brands + light/dark themes cascade; the ambient glow and
   CTA hover fill use color-mix on the accent (the origin review's own v2 suggestion). Baked
   entrance stagger dropped — anims.js owns entrances; each dead --active span is now a real,
   click/keyboard-selectable control driving a live "Viewing" readout. Namespaced under xhb-. */
.v-exhibition-hero { position:relative; overflow:hidden; display:flex; flex-direction:column;
  justify-content:center; align-items:center; min-height:clamp(560px, 84cqh, 900px);
  padding:80px 0 60px; font-family:var(--mono); text-align:center; }
.v-exhibition-hero .xhb-ambient { position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 40% at 50% 55%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.v-exhibition-hero .xhb-in { position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:28px; max-width:720px; }
.v-exhibition-hero .xhb-label { font-family:var(--mono); font-size:9px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--faint); }
.v-exhibition-hero .xhb-title { margin:0; max-width:22ch; font:400 clamp(22px, 3cqw, 29px)/1.3 var(--mono);
  letter-spacing:0; color:var(--ink); }
.v-exhibition-hero .xhb-tag { margin:0; font:400 clamp(13px, 1.3cqw, 15px)/1.7 var(--mono); color:var(--accent); }
.v-exhibition-hero .xhb-rule { width:48px; height:1px; background:var(--hair); }
.v-exhibition-hero .xhb-stmt { margin:0; max-width:52ch; font:400 clamp(13px, 1.3cqw, 15px)/1.7 var(--mono); color:var(--dim); }
/* the arc — every work is a real, selectable control */
.v-exhibition-hero .xhb-arc { display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-top:-6px; }
.v-exhibition-hero .xhb-exp { appearance:none; -webkit-appearance:none; border:0; background:none; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:6px; padding:5px 10px; border-radius:3px;
  transition:transform 120ms var(--ease-pop, ease-out); }
.v-exhibition-hero .xhb-exp:hover { transform:translateY(-1px); }
.v-exhibition-hero .xhb-exp:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.v-exhibition-hero .xhb-num { font:400 9px/1 var(--mono); letter-spacing:0.15em; color:var(--faint); transition:color 140ms linear; }
.v-exhibition-hero .xhb-name { font:400 12px/1 var(--mono); letter-spacing:0.05em; color:var(--dim); transition:color 140ms linear; }
.v-exhibition-hero .xhb-exp:hover .xhb-num, .v-exhibition-hero .xhb-exp:hover .xhb-name { color:var(--accent); }
.v-exhibition-hero .xhb-exp.on .xhb-num, .v-exhibition-hero .xhb-exp.on .xhb-name { color:var(--accent); }
.v-exhibition-hero .xhb-exp.on { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.v-exhibition-hero .xhb-now { margin:-14px 0 0; font:400 10px/1.6 var(--mono); letter-spacing:0.15em;
  text-transform:uppercase; color:var(--faint); }
.v-exhibition-hero .xhb-now b { font-weight:400; color:var(--accent); }
/* CTA — bordered, square, accent, uppercase; hover fills with a faint accent wash (origin review v2) */
.v-exhibition-hero .xhb-ctarow { margin-top:2px; }
.v-exhibition-hero .xhb-ctarow .ws-btn.ghost { border-radius:0; border:var(--bw, 1px) solid var(--hair); color:var(--accent);
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; padding:12px 26px; }
.v-exhibition-hero .xhb-ctarow .ws-btn.ghost:hover { border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 15%, transparent); }
.v-exhibition-hero .xhb-meta { position:relative; z-index:1; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:24px; margin-top:52px; }
.v-exhibition-hero .xhb-meta span { font:400 9px/1 var(--mono); letter-spacing:0.15em; text-transform:uppercase; color:var(--faint); }
@container site (max-width: 560px) {
  .v-exhibition-hero { min-height:0; padding:56px 0 44px; }
  .v-exhibition-hero .xhb-in { gap:20px; }
  .v-exhibition-hero .xhb-exp { padding:4px 6px; }
  .v-exhibition-hero .xhb-meta { flex-direction:column; gap:8px; margin-top:36px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-exhibition-hero .xhb-exp, .v-exhibition-hero .xhb-num, .v-exhibition-hero .xhb-name { transition:none; }
}
/* featured-hero — ported from SB_04 components/above-the-fold/featured-hero (image-forward editorial
   fold: a ruled eyebrow + serif headline + standfirst + CTAs left, a tall portrait image that fills the
   fold right, an on-image credit chip, a bottom meta strip and a full-width baseline rule). Distinct
   from the contained `featured` draft: this drops the hero's vertical padding so the image fills the
   viewport and IS the argument. Origin --hero-* vars -> theme tokens (bg->--bg, text->--ink, secondary
   ->--dim/--faint, border->--hair, accent->--accent via btn()/rule, fonts->--font-head/--font/--mono).
   The origin's staggered fade/slide entrances are dropped (anims.js owns entrances); its backdrop-filter
   credit chip is reinterpreted as an opaque dark scrim — readable over any photo, no blur anywhere.
   Narrow stacks image-first via container queries, matching the origin's mobile order. */
.ws-hero.v-featured-hero { padding:0; }
.v-featured-hero .fhx-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto;
  align-items:stretch; min-height:clamp(540px, 82svh, 860px); }
.v-featured-hero .fhx-copy { grid-column:1; grid-row:1; display:flex; flex-direction:column;
  justify-content:center; gap:20px; min-width:0;
  padding:clamp(56px, 7cqw, 128px) clamp(30px, 4cqw, 64px) clamp(28px, 3cqw, 48px) clamp(30px, 6cqw, 104px); }
.v-featured-hero .fhx-kick { display:inline-flex; align-items:center; gap:12px; margin:0; }
.v-featured-hero .fhx-kick::before { content:''; width:26px; height:2px; flex:none; background:var(--accent); }
.v-featured-hero .fhx-h { max-width:18ch; letter-spacing:-0.01em; }
.v-featured-hero .fhx-sub { max-width:46ch; }
.v-featured-hero .fhx-cta { margin-top:6px; }
/* figure — a tall portrait filling the fold height; inset on three sides (flush toward the copy),
   echoing the origin, on the ws-hpanel atom (themed .ph placeholder + optional img). */
.v-featured-hero .fhx-fig { grid-column:2; grid-row:1 / -1; position:relative; margin:0; display:flex;
  padding:clamp(20px, 2.4cqw, 38px) clamp(20px, 2.4cqw, 38px) clamp(20px, 2.4cqw, 38px) 0; }
.v-featured-hero .fhx-img { width:100%; height:100%; min-height:0; align-self:stretch; }
/* credit chip — opaque dark scrim reinterpreting the origin's backdrop-filter (no blur). */
.v-featured-hero .fhx-cap { position:absolute; top:clamp(26px, 3.2cqw, 50px); right:clamp(26px, 3.2cqw, 50px);
  margin:0; font:600 10px/1 var(--font); letter-spacing:.09em; text-transform:uppercase; color:#fff;
  background:color-mix(in srgb, #000 55%, transparent); border-radius:calc(var(--radius, 14px) / 3);
  padding:6px 11px; }
/* meta strip — the origin hid this below 768px; here it is real content pinned to the bottom-left. */
.v-featured-hero .fhx-meta { grid-column:1; grid-row:2; display:flex; flex-wrap:wrap; gap:14px 44px;
  margin:0; padding:clamp(16px, 2cqw, 26px) clamp(30px, 4cqw, 64px) clamp(32px, 4cqw, 56px) clamp(30px, 6cqw, 104px); }
.v-featured-hero .fhx-mi { display:flex; flex-direction:column; gap:5px; }
.v-featured-hero .fhx-mi dt { font:600 10px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.v-featured-hero .fhx-mi dd { margin:0; font:500 13px/1.3 var(--font); color:var(--ink); }
/* baseline rule — the origin's full-width divider pinned to the section's bottom edge. */
.v-featured-hero .fhx-rule { position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair); }
@container site (max-width: 860px) {
  .v-featured-hero .fhx-grid { grid-template-columns:1fr; grid-template-rows:auto auto auto; min-height:0; }
  .v-featured-hero .fhx-copy { grid-column:1; grid-row:2; padding:clamp(30px, 6cqw, 48px) clamp(24px, 6cqw, 40px) 8px; }
  .v-featured-hero .fhx-fig { grid-column:1; grid-row:1; padding:clamp(16px, 4cqw, 24px) clamp(16px, 4cqw, 24px) 0; }
  .v-featured-hero .fhx-img { aspect-ratio:21 / 9; height:auto; }
  .v-featured-hero .fhx-h { max-width:none; }
  .v-featured-hero .fhx-meta { grid-column:1; grid-row:3; padding:clamp(18px, 4cqw, 24px) clamp(24px, 6cqw, 40px) clamp(28px, 6cqw, 44px); }
  .v-featured-hero .fhx-cap { top:auto; bottom:clamp(14px, 3cqw, 22px); right:clamp(14px, 3cqw, 22px); }
}
@container site (max-width: 560px) {
  .v-featured-hero .fhx-img { aspect-ratio:16 / 10; }
  .v-featured-hero .fhx-meta { gap:12px 30px; }
}
/* --- gradient-hero (SB_04 port · components/above-the-fold/gradient-hero) ---
   Stripe/Linear-style imageless SaaS opener: a four-orb mesh-gradient field + grain behind a
   pill badge (live dot), a massive headline with a gradient tail phrase, subhead, twin CTAs and
   a gradient baseline hairline. Origin --hero-*/--hero-grad-* vars -> theme tokens: the mesh hues
   derive from --accent/--accent2 (brands cascade) instead of the baked violet/blue/cyan/emerald;
   bg->--bg, text->--ink, secondary->--faint, border->--hair. The origin's frosted (backdrop-filter)
   badge becomes a translucent color-mix pill — no blur anywhere. Staggered fade-up entrances are
   dropped (anims.js owns entrances); ambient orb drift + dot pulse stay, honouring reduced-motion.
   CTAs use the native btn() atoms so brand button-sets/radius cascade. Container queries drive the
   narrow layout — no viewport media queries. */
.ws-hero.v-gradient-hero { position:relative; overflow:hidden; isolation:isolate; text-align:center;
  min-height:clamp(500px, 86cqh, 860px); display:grid; place-items:center; padding:96px 24px; background:var(--bg); }
.v-gradient-hero .gdh-in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
/* mesh field — four drifting orbs derive their hue from the accent tokens */
.v-gradient-hero .gdh-mesh { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.85; }
.v-gradient-hero .gdh-orb { position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.v-gradient-hero .gdh-orb.o1 { width:66cqw; height:66cqw; min-width:380px; min-height:380px; top:-24%; left:-14%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 44%, transparent 70%);
  animation:gdhOrb1 18s ease-in-out infinite alternate; }
.v-gradient-hero .gdh-orb.o2 { width:58cqw; height:58cqw; min-width:340px; min-height:340px; top:-10%; right:-18%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 9%, transparent) 44%, transparent 70%);
  animation:gdhOrb2 22s ease-in-out infinite alternate; }
.v-gradient-hero .gdh-orb.o3 { width:52cqw; height:52cqw; min-width:300px; min-height:300px; bottom:-22%; left:16%;
  background:radial-gradient(circle,
    color-mix(in srgb, color-mix(in srgb, var(--accent) 50%, var(--accent2, var(--accent))) 26%, transparent) 0%, transparent 68%);
  animation:gdhOrb3 26s ease-in-out infinite alternate; }
.v-gradient-hero .gdh-orb.o4 { width:38cqw; height:38cqw; min-width:220px; min-height:220px; top:28%; left:8%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 24%, transparent) 0%, transparent 66%);
  animation:gdhOrb4 15s ease-in-out infinite alternate; }
.v-gradient-hero .gdh-noise { position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='gdhn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gdhn)'/%3E%3C/svg%3E"); }
/* pill badge — origin's frosted glass reinterpreted as a translucent color-mix fill (no blur) */
.v-gradient-hero .gdh-badge { display:inline-flex; align-items:center; gap:.6em; margin-bottom:26px;
  padding:.5em 1.1em; border-radius:999px; border:var(--bw, 1px) solid var(--hair);
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  font:500 clamp(11px, 1.3cqw, 13px)/1 var(--font); letter-spacing:.02em; color:var(--ink); }
.v-gradient-hero .gdh-dot { width:.5em; height:.5em; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation:gdhPulse 2.4s ease-in-out infinite; }
/* headline + gradient tail phrase (ws-grad); subhead; CTA spacing */
.v-gradient-hero .gdh-h { max-width:16ch; margin-inline:auto; letter-spacing:-0.04em; line-height:1.0;
  font-weight:800; font-size:clamp(42px, 11cqw, 118px); text-wrap:balance; }
.v-gradient-hero .gdh-sub { margin:22px auto 0; max-width:52ch; color:var(--faint); }
.v-gradient-hero .ws-ctarow { margin-top:30px; }
/* baseline — origin's bottom accent line as a gradient hairline */
.v-gradient-hero .gdh-baseline { position:absolute; left:10%; right:10%; bottom:0; height:1px; z-index:1; opacity:.5;
  background:linear-gradient(90deg, transparent 0%, var(--accent) 24%,
    color-mix(in srgb, var(--accent) 50%, var(--accent2, var(--accent))) 50%, var(--accent2, var(--accent)) 76%, transparent 100%); }
@keyframes gdhOrb1 { from { transform:translate(0,0) scale(1); } to { transform:translate(7%,8%) scale(1.06); } }
@keyframes gdhOrb2 { from { transform:translate(0,0) scale(1); } to { transform:translate(-6%,5%) scale(1.04); } }
@keyframes gdhOrb3 { from { transform:translate(0,0) scale(1); } to { transform:translate(8%,-5%) scale(1.07); } }
@keyframes gdhOrb4 { from { transform:translate(0,0) scale(1); } to { transform:translate(10%,-8%) scale(1.09); } }
@keyframes gdhPulse { 0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50% { box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); } }
@container site (max-width: 560px) {
  .ws-hero.v-gradient-hero { min-height:clamp(440px, 80cqh, 640px); padding:76px 18px; }
  .v-gradient-hero .gdh-h { font-size:clamp(38px, 15cqw, 82px); max-width:14ch; }
  .v-gradient-hero .gdh-baseline { left:6%; right:6%; }
}
@media (prefers-reduced-motion: reduce) {
  .v-gradient-hero .gdh-orb, .v-gradient-hero .gdh-dot { animation:none; }
}
/* minimal-hero — ported from SB_04 components/above-the-fold/minimal-hero. Typography-first full-viewport
   opener: a big restrained monochrome statement, twin CTAs (reused ws-btn atoms), a corner-pinned status/meta
   bar and one full-bleed hairline closing the fold. Origin --hero-* vars -> theme tokens: bg->--bg, text->--ink,
   secondary->--dim/--faint, border->--hair, accent->--accent (via btn()), fonts->--font-head/--font/--mono.
   The origin's staggered fade-up entrances are dropped (anims.js owns section entrances); no gradient tail —
   the plain headline IS the aesthetic. Copy left-aligns in a vertically-centred ws-in column; meta + rule pin
   to the section floor and align to that column. Narrow container drops the width caps, stacks CTAs full-width
   and collapses the meta to one left-aligned column. */
.ws-hero.v-minimal-hero { position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(520px, 84svh, 900px); padding:clamp(60px, 8cqw, 112px) 0 clamp(88px, 10cqw, 140px); overflow:hidden; }
.v-minimal-hero .mhero-in { display:flex; flex-direction:column; align-items:flex-start; }
.v-minimal-hero .mhero-h { max-width:20ch; margin:0; font-weight:600; font-size:clamp(30px, 7cqw, 76px);
  line-height:1.08; letter-spacing:-0.03em; text-wrap:balance; }
.v-minimal-hero .mhero-sub { max-width:42ch; margin-top:clamp(16px, 2cqw, 26px); }
.v-minimal-hero .ws-ctarow { margin-top:clamp(24px, 3cqw, 40px); }
/* meta strip — origin's bottom-anchored status/location, pinned to the floor and aligned to the ws-in copy column. */
.v-minimal-hero .mhero-meta { position:absolute; left:50%; bottom:clamp(20px, 3cqw, 40px); transform:translateX(-50%);
  width:min(1080px, 88cqw); margin:0; display:flex; justify-content:space-between; align-items:flex-end; gap:18px 44px; }
.v-minimal-hero .mhero-mi { display:flex; flex-direction:column; gap:4px; }
.v-minimal-hero .mhero-ml { font:600 10px/1.2 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.v-minimal-hero .mhero-mv { margin:0; font:500 12.5px/1.3 var(--font); color:var(--dim); letter-spacing:0.02em; }
/* baseline rule — origin's single full-bleed hairline marking the transition to the content below. */
.v-minimal-hero .mhero-rule { position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair); }
@container site (max-width: 860px) {
  .v-minimal-hero .mhero-h { max-width:none; }
  .v-minimal-hero .mhero-sub { max-width:60ch; }
}
@container site (max-width: 560px) {
  .ws-hero.v-minimal-hero { min-height:clamp(440px, 78svh, 720px); padding:clamp(48px, 12cqw, 72px) 0 clamp(72px, 16cqw, 96px); }
  .v-minimal-hero .mhero-meta { flex-direction:column; align-items:flex-start; gap:13px; }
  .v-minimal-hero .ws-ctarow { width:100%; }
  .v-minimal-hero .ws-ctarow > .ws-btn { flex:1 1 auto; justify-content:center; }
}
/* --- parallax-hero (SB_04 port · components/above-the-fold/parallax-hero) ---
   Layered-depth opener: four soft accent orbs spread across three planes (back / mid / front),
   a faint noise wash on the mid plane and a radial legibility veil, behind a centered kicker /
   gradient headline / sub / twin CTAs and a real scroll-cue button. The origin's scroll-jack and
   its heavy blur() orbs are both gone — the planes drift with the POINTER at different rates in
   mount() (transform only, whenVisible-driven, settles under reduced-motion), and the orbs are soft
   radial gradients so nothing rides blur, like v-abstract-hero. The dark / light / warm presets
   become the theme system; --ph-* map to tokens (bg->--bg, text->--ink, muted->--faint,
   accent->--accent + --accent2 fallback; fonts->--font-head / --font / --mono). Transform /
   opacity / color only. Container queries only. */
.ws-hero.v-parallax-hero { position:relative; overflow:hidden; isolation:isolate; text-align:center;
  min-height:clamp(500px, 86cqh, 840px); display:grid; place-items:center; padding:96px 24px; background:var(--bg); }
.v-parallax-hero .plxh-fg { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.v-parallax-hero .plxh-kick { color:var(--accent); }
.v-parallax-hero .plxh-title { max-width:18ch; }
.v-parallax-hero .plxh-sub { margin-top:20px; margin-inline:auto; max-width:46ch; color:var(--faint); }
.v-parallax-hero .ws-ctarow { margin-top:28px; }
.plxh-stage { position:absolute; inset:0; z-index:0; pointer-events:none; }
.plxh-layer { position:absolute; inset:-9% -5%; will-change:transform; }
.plxh-orb { position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.plxh-orb.o1 { width:56cqw; height:56cqw; min-width:340px; min-height:340px; top:4%; left:-12%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent) 0%,
    color-mix(in srgb, var(--accent) 9%, transparent) 44%, transparent 70%);
  animation:plxhDrift1 22s ease-in-out infinite alternate; }
.plxh-orb.o2 { width:38cqw; height:38cqw; min-width:240px; min-height:240px; top:22%; right:-8%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2, var(--accent)) 28%, transparent) 0%,
    color-mix(in srgb, var(--accent2, var(--accent)) 8%, transparent) 44%, transparent 70%);
  animation:plxhDrift2 27s ease-in-out infinite alternate; }
.plxh-orb.o3 { width:48cqw; height:48cqw; min-width:300px; min-height:300px; bottom:2%; left:16%;
  background:radial-gradient(circle,
    color-mix(in srgb, color-mix(in srgb, var(--accent) 50%, var(--accent2, var(--accent))) 22%, transparent) 0%, transparent 66%);
  animation:plxhDrift3 18s ease-in-out infinite alternate; }
.plxh-orb.o4 { width:30cqw; height:30cqw; min-width:190px; min-height:190px; top:44%; right:22%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 64%);
  animation:plxhDrift2 20s ease-in-out infinite alternate; }
.plxh-noise { position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='plxhn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23plxhn)'/%3E%3C/svg%3E"); }
.plxh-veil { position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 64% 60% at 50% 50%, transparent 0%, color-mix(in srgb, var(--bg) 64%, transparent) 100%); }
.plxh-scroll { position:absolute; left:50%; bottom:18px; transform:translate(-50%, 0); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 10px;
  background:none; border:0; cursor:pointer; color:var(--faint); transition:color .2s ease, transform .2s ease; }
.plxh-scroll:hover { color:var(--ink); transform:translate(-50%, 3px); }
.plxh-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.plxh-scroll span { font:400 9px var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.plxh-scroll i { width:1px; height:30px; transform-origin:top;
  background:linear-gradient(180deg, currentColor, transparent); animation:plxhScroll 2s ease-in-out infinite; }
@keyframes plxhDrift1 { from { transform:translate(0,0) scale(1); } to { transform:translate(7%,6%) scale(1.07); } }
@keyframes plxhDrift2 { from { transform:translate(0,0) scale(1); } to { transform:translate(-6%,-5%) scale(1.05); } }
@keyframes plxhDrift3 { from { transform:translate(0,0) scale(1); } to { transform:translate(-4%,7%) scale(0.93); } }
@keyframes plxhScroll { 0%, 100% { opacity:.2; transform:scaleY(.5); } 50% { opacity:.7; transform:scaleY(1); } }
@container site (max-width: 560px) {
  .ws-hero.v-parallax-hero { min-height:clamp(440px, 80cqh, 640px); padding:76px 18px; }
  .v-parallax-hero .plxh-title { max-width:14ch; }
}
@media (prefers-reduced-motion: reduce) {
  .plxh-orb, .plxh-scroll i { animation:none; }
}
/* showcase-hero — ported from SB_04 components/above-the-fold/showcase-hero. A SaaS
   product opener: copy + social-proof avatars + twin CTAs beside a tilted browser frame
   (a real CSS analytics dashboard mock, or an `img` screenshot) ringed by four floating
   stat cards. Origin --sh-* vars → theme tokens so brands/packs cascade. The origin's
   backdrop-filter glass and blur(80px) ambient are reinterpreted as translucent color-mix
   fills + soft radial gradients (no blur, no backdrop-filter, per house rules); entrance
   keyframes are dropped for the site reveal system — only the transform-only frame-flatten
   hover rides at rest. Split narrow-stacks via the global 860px rule (.ws-hero .ws-in.split);
   two cards drop at 560px like the origin. All selectors namespaced under .v-showcase-hero. */
.v-showcase-hero { isolation:isolate; }
.v-showcase-hero .ws-in.split { align-items:center; gap:clamp(40px, 6cqw, 80px); }
.v-showcase-hero .ws-hcopy { display:flex; flex-direction:column; }
.v-showcase-hero .ws-sub { margin-top:18px; max-width:46ch; }
.v-showcase-hero .ws-in { z-index:1; }
/* ambient accent glow behind the visual — the origin's blurred radials, drawn as soft
   gradients (no blur filter). */
.v-showcase-hero .shx-ambient { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 44% at 82% 22%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
    radial-gradient(26% 32% at 12% 84%, color-mix(in srgb, var(--accent2, var(--accent)) 10%, transparent), transparent 72%); }
/* social proof — avatar cluster + line */
.v-showcase-hero .shx-proof { display:flex; align-items:center; gap:13px; margin-top:26px; flex-wrap:wrap; }
.v-showcase-hero .shx-avs { display:inline-flex; }
.v-showcase-hero .shx-av { width:30px; height:30px; border-radius:50%; margin-left:-8px; flex:none;
  border:2px solid var(--bg); }
.v-showcase-hero .shx-av:first-child { margin-left:0; }
.v-showcase-hero .shx-av.a1 { background:color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.v-showcase-hero .shx-av.a2 { background:color-mix(in srgb, var(--accent2, var(--accent)) 66%, var(--panel)); }
.v-showcase-hero .shx-av.a3 { background:color-mix(in srgb, var(--ink) 32%, var(--panel)); }
.v-showcase-hero .shx-av.a4 { background:var(--accent); }
.v-showcase-hero .shx-proof-t { font:500 13px/1.4 var(--font); color:var(--dim); }
/* stage + tilted browser frame */
.v-showcase-hero .shx-stage { position:relative; }
.v-showcase-hero .shx-frame { position:relative; z-index:1; border-radius:calc(var(--radius, 14px) + 2px);
  border:var(--bw, 1px) solid var(--hair); background:var(--panel); overflow:hidden;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent),
    0 30px 80px -24px color-mix(in srgb, #000 62%, transparent),
    0 0 60px -30px color-mix(in srgb, var(--accent) 55%, transparent);
  transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition:transform .6s var(--ease-pop, ease-out); }
.v-showcase-hero .shx-frame:hover { transform:perspective(1200px) rotateY(0deg) rotateX(0deg); }
.v-showcase-hero .shx-bar { display:flex; align-items:center; gap:7px; padding:10px 14px;
  border-bottom:var(--bw, 1px) solid var(--hair); background:color-mix(in srgb, var(--ink) 3%, transparent); }
.v-showcase-hero .shx-dot { width:9px; height:9px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--ink) 20%, transparent); }
.v-showcase-hero .shx-url { margin-left:8px; min-width:0; font:500 11px var(--mono); color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-showcase-hero .shx-body { aspect-ratio:16 / 10; overflow:hidden; background:var(--panel); }
.v-showcase-hero .shx-shot { width:100%; height:100%; background-size:cover; background-position:center top; }
/* CSS analytics dashboard mock — the origin's simulated UI, retinted to theme tokens */
.v-showcase-hero .shx-mock { width:100%; height:100%; padding:16px; display:flex; flex-direction:column; gap:11px; }
.v-showcase-hero .shx-tabs { display:flex; gap:6px; }
.v-showcase-hero .shx-tabs i { height:7px; border-radius:4px; background:color-mix(in srgb, var(--ink) 11%, transparent); }
.v-showcase-hero .shx-tabs i:nth-child(1) { width:52px; background:color-mix(in srgb, var(--accent) 34%, transparent); }
.v-showcase-hero .shx-tabs i:nth-child(2) { width:38px; }
.v-showcase-hero .shx-tabs i:nth-child(3) { width:38px; }
.v-showcase-hero .shx-chart { flex:1; min-height:64px; border-radius:8px; position:relative; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 60%, transparent); }
.v-showcase-hero .shx-chart::after { content:''; position:absolute; inset:auto 0 0 0; height:44%;
  background:linear-gradient(to top, color-mix(in srgb, var(--accent) 20%, transparent), transparent); }
.v-showcase-hero .shx-rows { display:flex; flex-direction:column; gap:7px; }
.v-showcase-hero .shx-rows i { height:8px; border-radius:4px; background:color-mix(in srgb, var(--ink) 10%, transparent); }
.v-showcase-hero .shx-rows i:nth-child(1) { width:80%; }
.v-showcase-hero .shx-rows i:nth-child(2) { width:64%; }
.v-showcase-hero .shx-rows i:nth-child(3) { width:90%; }
.v-showcase-hero .shx-rows i:nth-child(4) { width:50%; }
/* floating stat cards — origin backdrop-filter glass reinterpreted as a translucent
   color-mix fill + hairline border + inset highlight (no blur). */
.v-showcase-hero .shx-card { position:absolute; z-index:3; display:flex; flex-direction:column; gap:3px;
  padding:11px 15px; border-radius:calc(var(--radius, 14px) * .72); white-space:nowrap;
  background:color-mix(in srgb, var(--panel) 84%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    0 14px 34px -16px color-mix(in srgb, #000 65%, transparent); }
.v-showcase-hero .shx-cico { display:inline-flex; color:var(--accent); }
.v-showcase-hero .shx-cico svg { width:13px; height:13px; }
.v-showcase-hero .shx-cn { font:800 19px var(--font-head, var(--font)); color:var(--ink);
  letter-spacing:-0.02em; line-height:1; }
.v-showcase-hero .shx-cl { font:500 10px var(--mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); font-style:normal; }
.v-showcase-hero .shx-card.tl { top:-18px; left:-20px; }
.v-showcase-hero .shx-card.tr { top:32px; right:-22px; }
.v-showcase-hero .shx-card.bl { bottom:42px; left:-22px; }
.v-showcase-hero .shx-card.br { bottom:-16px; right:-16px; }
@container site (max-width: 860px) {
  .v-showcase-hero .shx-stage { margin:14px 26px 6px; }
  .v-showcase-hero .shx-frame, .v-showcase-hero .shx-frame:hover { transform:none; }
  .v-showcase-hero .shx-card.tl { top:-14px; left:-14px; }
  .v-showcase-hero .shx-card.tr { top:20px; right:-14px; }
  .v-showcase-hero .shx-card.bl { bottom:26px; left:-14px; }
  .v-showcase-hero .shx-card.br { bottom:-14px; right:-14px; }
}
@container site (max-width: 560px) {
  .v-showcase-hero .shx-stage { margin:12px 12px 4px; }
  .v-showcase-hero .shx-card.tr, .v-showcase-hero .shx-card.bl { display:none; }
  .v-showcase-hero .shx-card { padding:9px 12px; }
  .v-showcase-hero .shx-cn { font-size:16px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-showcase-hero .shx-frame, .v-showcase-hero .shx-frame:hover { transition:none; }
}
/* technical-hero — framed terminal/HUD opener ported from SB_04 components/above-the-fold/technical-hero
   (the framed superset of the `technical` draft): a live console status bar, corner crop-brackets and
   coordinate ticks frame the engineering-blueprint grid, scan-lines and vignette behind a mono prompt line,
   a gradient-tail headline, a // comment body, twin CTAs and a live data readout. The origin --hero-* vars
   map to theme tokens (bg/ink/accent/dim/faint/hair/mono) so brands + light themes cascade — a light theme
   becomes the origin's "light blueprint" palette for free. Entrance keyframes dropped (anims.js owns section
   reveals); the only at-rest motion is the signature caret blink + status-dot pulse, both stopped by
   prefers-reduced-motion. No blur/backdrop-filter; nothing transitions a background. Prefix .thb-* / .v-technical-hero
   is distinct from the draft's .ws-tech* / .v-technical. Readout drops 4->2 columns under 560px. */
.v-technical-hero { position:relative; overflow:hidden; isolation:isolate; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(468px, 72cqh, 704px); font-family:var(--mono); }
.v-technical-hero .ws-in { position:relative; z-index:2; width:min(880px, 90cqw); }
/* atmosphere layers */
.thb-grid, .thb-scan, .thb-vig { position:absolute; inset:0; z-index:0; pointer-events:none; }
.thb-grid::before, .thb-grid::after { content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--tgl) 1px, transparent 1px),
    linear-gradient(90deg, var(--tgl) 1px, transparent 1px); }
.thb-grid::before { --tgl:color-mix(in srgb, var(--hair) 74%, transparent); background-size:60px 60px; }
.thb-grid::after  { --tgl:color-mix(in srgb, var(--hair) 30%, transparent); background-size:12px 12px; }
.thb-scan { background:repeating-linear-gradient(0deg, transparent 0 2px,
  color-mix(in srgb, var(--ink) 7%, transparent) 2px 4px); }
.thb-vig { background:radial-gradient(ellipse 66% 62% at 50% 46%, transparent 40%,
  color-mix(in srgb, var(--bg) 84%, transparent) 100%); }
/* console status bar — pinned to the top edge, decorative */
.thb-status { position:absolute; top:0; left:0; right:0; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px clamp(16px, 4cqw, 34px); font:500 10.5px/1 var(--mono); letter-spacing:0.12em;
  color:var(--dim); border-bottom:1px solid color-mix(in srgb, var(--hair) 82%, transparent);
  background:color-mix(in srgb, var(--bg) 66%, transparent); }
.thb-status-l, .thb-status-r { display:flex; align-items:center; gap:16px; min-width:0; }
.thb-sdim { color:var(--faint); }
.thb-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  animation:thbPulse 2.4s ease-out infinite; }
@keyframes thbPulse {
  0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}
/* corner crop-brackets + coordinate ticks — technical framing device */
.thb-corner { position:absolute; z-index:1; width:22px; height:22px; pointer-events:none;
  border:1.5px solid color-mix(in srgb, var(--accent) 52%, transparent); }
.thb-corner.tl { top:40px; left:14px; border-right:0; border-bottom:0; }
.thb-corner.tr { top:40px; right:14px; border-left:0; border-bottom:0; }
.thb-corner.bl { bottom:14px; left:14px; border-right:0; border-top:0; }
.thb-corner.br { bottom:14px; right:14px; border-left:0; border-top:0; }
.thb-coord { position:absolute; z-index:1; bottom:16px; pointer-events:none;
  font:400 9.5px/1 var(--mono); letter-spacing:0.14em; color:var(--faint); }
.thb-coord.bl { left:46px; }
.thb-coord.br { right:46px; }
/* prompt line + signature caret blink */
.thb-prompt { display:block; font:600 11px/1 var(--mono); letter-spacing:0.14em;
  color:var(--accent); margin-bottom:18px; }
.thb-prompt::before { content:'> '; color:var(--faint); }
.thb-caret { display:inline-block; width:0.5em; height:1.05em; margin-left:3px; vertical-align:text-bottom;
  background:var(--accent); animation:thbBlink 1.05s step-end infinite; }
@keyframes thbBlink { 0%, 100% { opacity:1; } 50% { opacity:0; } }
/* headline (mono, bold) + // comment body */
.v-technical-hero .thb-h { font-weight:700; letter-spacing:-0.01em; }
.thb-comment { font-family:var(--mono); font-size:clamp(13px, 1.5cqw, 15px); line-height:1.7;
  color:var(--dim); max-width:50ch; margin-top:20px; }
.thb-comment::before { content:'// '; color:color-mix(in srgb, var(--faint) 70%, transparent); }
.v-technical-hero .ws-ctarow { margin-top:30px; }
/* data readout panel */
.thb-out { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; margin-top:44px;
  max-width:660px; background:var(--hair); border:var(--bw, 1px) solid var(--hair); }
.thb-ri { display:flex; flex-direction:column; gap:8px; padding:15px 18px; background:var(--bg); }
.thb-rl { font:400 10px var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.thb-rv { font:700 clamp(15px, 1.9cqw, 19px) var(--mono); letter-spacing:-0.01em; color:var(--ink); line-height:1.1; }
.thb-rv.on { color:var(--accent); }
@container site (max-width: 560px) {
  .thb-out { grid-template-columns:repeat(2, 1fr); max-width:none; }
  .thb-status-r { display:none; }
  .thb-coord { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-technical-hero .thb-caret, .v-technical-hero .thb-dot { animation:none; }
}
/* typographic-hero — ported from SB_04 components/above-the-fold/typographic-hero. Statement type IS
   the design: a hand-composed mix of solid / outlined / accent words at architectural scale over a
   faint grid, framed by a mono meta rule, with an optional editorial serif mode. No images, no
   gradients; the site's reveal system owns entrances so only the CTAs keep hover motion. All hues,
   fonts and strokes ride theme tokens so brand + light/dark cascade for free. */
.ws-hero.v-typographic-hero { padding:clamp(88px, 14cqw, 150px) 0; }
.v-typographic-hero .tyh-grid { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.05;
  background-image:linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size:72px 72px; }
.v-typographic-hero .tyh-wrap { position:relative; z-index:1; }
.v-typographic-hero .tyh-meta { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:28px; }
.v-typographic-hero .tyh-meta i { font:600 10.5px var(--mono); letter-spacing:3px; text-transform:uppercase;
  color:var(--dim); font-style:normal; }
.v-typographic-hero .tyh-rule { width:40px; height:1px; background:color-mix(in srgb, var(--ink) 22%, transparent); }
.v-typographic-hero .tyh-head { margin:0; font-family:var(--font-head, var(--font)); font-weight:900;
  font-size:clamp(46px, 12.5cqw, 132px); line-height:0.9; letter-spacing:-0.04em; text-transform:uppercase; color:var(--ink); }
.v-typographic-hero .tyh-line { display:block; }
.v-typographic-hero .tyh-w.out { color:transparent; -webkit-text-stroke:2px color-mix(in srgb, var(--ink) 26%, transparent); }
.v-typographic-hero .tyh-w.acc { color:var(--accent); }
.v-typographic-hero .tyh-w.lite { font-weight:300; letter-spacing:0; }
.v-typographic-hero .tyh-desc { margin:30px auto 0; max-width:52ch; }
.v-typographic-hero .ws-ctarow { margin-top:34px; }
.v-typographic-hero .ws-btn { border-radius:0; font-family:var(--mono); text-transform:uppercase;
  letter-spacing:0.06em; font-weight:500; font-size:12px; padding:14px 26px; }
/* Editorial mode — serif display, no caps, softer stroke (origin's --editorial variant); accent still rides the brand token */
.v-typographic-hero.tyh-serif .tyh-head { font-family:Georgia, 'Times New Roman', Times, serif; text-transform:none;
  font-weight:700; letter-spacing:-0.02em; font-size:clamp(40px, 11cqw, 116px); }
.v-typographic-hero.tyh-serif .tyh-w.out { -webkit-text-stroke-width:1.5px; }
@container site (max-width:560px) {
  .v-typographic-hero .tyh-head { font-size:clamp(32px, 12.5cqw, 64px); letter-spacing:-0.02em;
    word-break:break-word; overflow-wrap:break-word; }
  .v-typographic-hero.tyh-serif .tyh-head { font-size:clamp(30px, 11.5cqw, 60px); }
  .v-typographic-hero .tyh-w.out { -webkit-text-stroke-width:1.5px; }
  .v-typographic-hero .tyh-meta { flex-direction:column; gap:10px; }
  .v-typographic-hero .tyh-rule { width:26px; }
}
/* video-hero — ported from SB_04 components/above-the-fold/video-hero. Full-bleed ambient opener:
   an optional muted/looped background <video> (or a still poster, or a themed imageless gradient
   field when neither is set) sits behind an OPAQUE legibility scrim (no backdrop-filter), with
   bottom-left copy on the ws-in measure and a bottom hairline bar carrying a real scroll button +
   a live sound toggle. The media is z-index 0 — it never overlays the copy/CTAs — and the video
   stays hidden until it actually plays, so the poster/field is the still frame under reduced motion.
   Motion is transform-only; the origin's 5 palette variants collapse into the theme tokens. */
.ws-hero.v-video-hero { position:relative; padding:0; overflow:hidden; isolation:isolate;
  min-height:clamp(520px, 84vh, 860px); display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--bg); }
.v-video-hero .vdh-media { position:absolute; inset:0; z-index:0; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat; }
/* imageless placeholder field — accent-derived, blur-free radial gradients (like v-abstract-hero) */
.v-video-hero .vdh-media.ph {
  background-image:
    radial-gradient(ellipse 60% 55% at 22% 24%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 60%),
    radial-gradient(ellipse 55% 60% at 82% 30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    radial-gradient(ellipse 72% 62% at 50% 98%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 66%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--bg)), var(--bg) 62%); }
/* very slow ambient drift — TRANSFORM only, off under reduced motion; sits behind the scrim */
.v-video-hero .vdh-media.ph::after { content:''; position:absolute; inset:-40%; pointer-events:none;
  background:
    radial-gradient(ellipse 42% 34% at 30% 44%, color-mix(in srgb, var(--ink) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 34% 44% at 74% 62%, color-mix(in srgb, var(--ink) 8%, transparent), transparent 70%);
  animation:vdh-drift 26s ease-in-out infinite alternate; }
.v-video-hero .vdh-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
  opacity:0; transition:opacity 600ms ease; }
.v-video-hero .vdh-vid.on { opacity:1; }
/* opaque legibility scrim — plain gradient, strongest where the copy sits (no blur) */
.v-video-hero .vdh-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,
    color-mix(in srgb, var(--bg) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 34%,
    color-mix(in srgb, var(--bg) 28%, transparent) 66%,
    color-mix(in srgb, var(--bg) 58%, transparent) 100%); }
.v-video-hero .vdh-content { position:relative; z-index:2;
  padding:clamp(2rem, 5cqw, 4rem) 0 clamp(5rem, 7cqw, 6.5rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(.5rem, 1cqw, .9rem); }
.v-video-hero .vdh-tag { display:inline-flex; align-items:center; gap:.65em; margin:0; color:var(--accent); }
.v-video-hero .vdh-dot { width:.5em; height:.5em; border-radius:50%; background:currentColor;
  animation:vdh-pulse 2.4s ease-in-out infinite; }
.v-video-hero .vdh-h { margin:0; max-width:18ch; color:var(--ink); }
.v-video-hero .vdh-sub { margin:.2rem 0 0; max-width:48ch; color:var(--dim); }
.v-video-hero .vdh-content .ws-ctarow { margin-top:clamp(.6rem, 1.6cqw, 1.2rem); }
/* bottom hairline bar — real scroll cue (left) + live sound toggle (right) */
.v-video-hero .vdh-bar { position:absolute; left:0; right:0; bottom:0; z-index:3; border-top:var(--bw, 1px) solid var(--hair); }
.v-video-hero .vdh-bar .ws-in { display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.7rem, 1.4cqw, 1.1rem) 0; }
.v-video-hero .vdh-scroll { display:inline-flex; align-items:center; gap:.75em; margin:0; padding:4px 2px;
  border:0; background:transparent; cursor:pointer; color:var(--faint);
  font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; transition:color 160ms ease; }
.v-video-hero .vdh-scroll:hover { color:var(--ink); }
.v-video-hero .vdh-scroll-line { position:relative; width:2rem; height:1px; overflow:hidden;
  background:color-mix(in srgb, var(--faint) 55%, transparent); }
.v-video-hero .vdh-scroll-line::after { content:''; position:absolute; inset:0; left:-100%;
  background:var(--ink); animation:vdh-track 2.2s ease-in-out infinite; }
.v-video-hero .vdh-sound { margin:0; padding:5px 11px; border:var(--bw, 1px) solid var(--hair); border-radius:999px;
  background:transparent; cursor:pointer; color:var(--dim);
  font:600 10px var(--mono); letter-spacing:2px; text-transform:uppercase; transition:color 160ms ease; }
.v-video-hero .vdh-sound:hover { color:var(--ink); }
.v-video-hero .vdh-sound[aria-pressed="true"] { color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
@keyframes vdh-drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(4%,-3%,0) scale(1.08); } }
@keyframes vdh-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes vdh-track { 0% { left:-100%; } 55% { left:100%; } 100% { left:100%; } }
@container site (max-width: 860px) {
  .ws-hero.v-video-hero { min-height:clamp(460px, 78vh, 680px); }
}
@container site (max-width: 560px) {
  .v-video-hero .vdh-content { padding-bottom:clamp(4.4rem, 17cqw, 5.2rem); }
  .v-video-hero .vdh-scroll span { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-video-hero .vdh-media.ph::after { animation:none; }
  .v-video-hero .vdh-dot { animation:none; }
  .v-video-hero .vdh-scroll-line::after { animation:none; left:-100%; }
  .v-video-hero .vdh-vid { transition:none; }
  .v-video-hero .vdh-scroll, .v-video-hero .vdh-sound { transition:none; }
}
/* ==== PORT-WAVE ANCHORS (sprint · batch-1 tail). Each subagent edits ONLY its own line below, inserting its CSS immediately after it. Do not remove/reorder during the wave. ==== */
/* @@PORT-ANCHOR::contact@@ */
/* contact · SB_04 ports — standard · dark · compact. Every selector scoped under .ws-contact (cf-* is unique to these variants); per-variant layout under .ws-contact.v-<id>. Tokens only; ok/bad hues are the allowed semantic exception. */
.ws-contact .cf-in { width:100%; }
.ws-contact .cf-head { text-align:center; max-width:560px; margin:0 auto 26px; }
.ws-contact .cf-chip { display:inline-block; font:600 10.5px/1 var(--font); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:var(--bw, 1px) solid var(--hair); border-radius:99px; padding:7px 12px; margin-bottom:15px; }
.ws-contact .cf-head .ws-h2 { margin:0 0 10px; }
.ws-contact .cf-head .ws-sub { margin:0 auto; max-width:48ch; }
.ws-contact .cf-form { display:flex; flex-direction:column; gap:13px; max-width:600px; margin:0 auto; text-align:left; }
.ws-contact .cf-row2 { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.ws-contact .cf-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ws-contact .cf-label { font:600 11.5px var(--font); color:var(--ink); letter-spacing:.01em; }
.ws-contact .cf-field.is-focused .cf-label { color:var(--accent); }
.ws-contact .cf-input { width:100%; box-sizing:border-box; font:400 13px var(--font); color:var(--ink);
  background:var(--bg); border:var(--bw, 1px) solid var(--hair); border-radius:calc(var(--radius, 12px) * .55);
  padding:11px 13px; outline:none; -webkit-appearance:none; appearance:none; transition:border-color 140ms linear; }
.ws-contact .cf-input::placeholder { color:var(--faint); }
.ws-contact .cf-input:focus { border-color:color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-contact .cf-textarea { resize:vertical; min-height:112px; line-height:1.6; }
.ws-contact .cf-select { cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238595af' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; }
.ws-contact .cf-submit { margin-top:3px; }
.ws-contact .cf-msg:not(:empty) { min-height:1.1em; margin-top:-2px; font:500 12px var(--font); font-style:normal; color:var(--dim); }
.ws-contact .cf-msg.ok { color:#3ecb8b; }
.ws-contact .cf-msg.bad { color:#ff6b6b; }
.ws-contact .cf-form.is-sent .cf-field { opacity:.5; }
/* standard — flat, roomy, full field set */
.ws-contact.v-standard .cf-form { max-width:620px; }
/* dark — the whole form lifted onto an elevated inked panel */
.ws-contact.v-dark .cf-card { max-width:640px; margin:0 auto; padding:34px 32px 30px; border:var(--bw, 1px) solid var(--hair);
  border-radius:var(--radius, 12px); background:var(--panel-2, var(--panel)); background-image:var(--surface-grad, none);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.55); }
.ws-contact.v-dark .cf-head { margin-bottom:22px; }
.ws-contact.v-dark .cf-form { max-width:none; }
.ws-contact.v-dark .cf-input { background:var(--bg); }
/* compact — tight, centered, no subject field */
.ws-contact.v-compact .cf-head { max-width:none; margin-bottom:18px; }
.ws-contact.v-compact .cf-form { max-width:500px; gap:11px; }
@container site (max-width: 560px) {
  .ws-contact .cf-row2 { grid-template-columns:1fr; }
  .ws-contact.v-dark .cf-card { padding:26px 20px 22px; }
}
/* @@PORT-ANCHOR::cta@@ */
/* base-cta — ported from SB_04 components/cta/base-cta. Origin is a neutral
   full-width band (light #f0f0f0, centered headline + subtitle + one solid
   button, 640px inner). Mapped to a --panel band framed by top/bottom hairlines
   so it reads as a distinct call-out on any theme; the origin's dark solid
   button becomes the house accent primary. Button fills the row on narrow rails,
   mirroring the origin's <480px full-width rule. */
.ws-cta.v-base-cta { padding:clamp(56px, 8cqw, 84px) 0; background:var(--panel);
  border-top:var(--bw, 1px) solid var(--hair); border-bottom:var(--bw, 1px) solid var(--hair); }
.ws-cta.v-base-cta .ws-in { width:min(640px, 88cqw); }
.ws-cta.v-base-cta .ws-sub { margin-top:14px; }
.ws-cta.v-base-cta .ws-ctarow { margin-top:28px; }
@container site (max-width: 480px) {
  .ws-cta.v-base-cta .ws-ctarow .ws-btn { width:100%; justify-content:center; }
}
/* cta-banner (approved) — ported from SB_04 components/cta/cta-banner. Origin is
   a two-column ask: gradient-accent headline + button + fine print on the left,
   a framed product screenshot on the right that rises and bleeds off the base.
   Kept DISTINCT from the native centered `banner` (accent wash, no image) and
   from the draft `ctabanner` browser-chrome mock: this one carries a real,
   themeable `img` prop with a soft dashboard placeholder when empty. Origin
   --cb-* palette + baked radial glows -> ZenOS tokens + --accent-fill glow;
   gradient-border button -> house accent primary; @media -> @container. */
.ws-cta.v-cta-banner { padding:clamp(52px, 8cqw, 84px) 0 0; overflow:hidden;
  background:
    radial-gradient(60% 70% at 50% 0%, var(--accent-fill), transparent 70%),
    radial-gradient(50% 60% at 90% 55%, color-mix(in srgb, var(--accent2, var(--accent)) 10%, transparent), transparent 60%),
    var(--panel); }
.ws-cta.v-cta-banner .cbn-grid { display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:clamp(32px, 5cqw, 64px); align-items:center; }
.ws-cta.v-cta-banner .cbn-copy { display:flex; flex-direction:column; align-items:flex-start;
  gap:20px; padding-bottom:clamp(52px, 8cqw, 84px); }
.ws-cta.v-cta-banner .cbn-copy .ws-h2 { max-width:16ch; }
.ws-cta.v-cta-banner .cbn-copy .ws-ctarow { margin-top:4px; }
.ws-cta.v-cta-banner .cbn-fine { margin:0; font:400 clamp(12px, 1.4cqw, 13.5px)/1.5 var(--font); color:var(--faint); }
.ws-cta.v-cta-banner .cbn-visual { position:relative; align-self:end; min-width:0; }
.ws-cta.v-cta-banner .cbn-frame { position:relative; margin-bottom:-6%; transform:translateY(14px);
  border:var(--bw, 1px) solid var(--hair); border-bottom:none; border-radius:14px 14px 0 0;
  background:color-mix(in srgb, var(--ink) 4%, var(--panel)); padding:10px 10px 0;
  box-shadow:0 24px 60px -20px color-mix(in srgb, #000 55%, transparent);
  transition:transform .5s ease; }
.ws-cta.v-cta-banner .cbn-img { display:block; width:100%; height:auto; border-radius:8px 8px 0 0; }
.ws-cta.v-cta-banner .cbn-ph { aspect-ratio:16 / 10; border-radius:8px 8px 0 0; overflow:hidden;
  padding:16px; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg)); }
.ws-cta.v-cta-banner .cbn-ph span { display:block; border-radius:6px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.ws-cta.v-cta-banner .cbn-ph span:nth-child(1) { height:14px; width:42%; }
.ws-cta.v-cta-banner .cbn-ph span:nth-child(2) { flex:1; width:100%; background:color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-cta.v-cta-banner .cbn-ph span:nth-child(3) { height:14px; width:68%; }
.ws-cta.v-cta-banner .cbn-visual:hover .cbn-frame { transform:translateY(6px); }
@container site (max-width: 760px) {
  .ws-cta.v-cta-banner { padding-bottom:0; }
  .ws-cta.v-cta-banner .cbn-grid { grid-template-columns:1fr; gap:clamp(28px, 6cqw, 40px); text-align:center; }
  .ws-cta.v-cta-banner .cbn-copy { align-items:center; padding-bottom:0; }
  .ws-cta.v-cta-banner .cbn-copy .ws-h2 { max-width:22ch; }
  .ws-cta.v-cta-banner .cbn-visual { align-self:stretch; width:100%; max-width:520px; margin:0 auto; }
  .ws-cta.v-cta-banner .cbn-frame { margin-bottom:0; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-cta.v-cta-banner .cbn-frame { transition:none; }
}
/* @@PORT-ANCHOR::nav@@ */
/* ============================================================
   nav-overlay-approved — APPROVED flagship (SB_04 · components/navigation/nav-overlay),
   a NEW variant distinct from the pre-existing draft (id:nav-overlay). The approved design:
   a slim bar whose toggle opens a stage-filling overlay of CENTERED numbered links over a
   centered social + copyright footer; the active link carries the accent + a dot. Origin
   --no-* vars -> theme tokens (no baked hex); hamburger->X + staggered open reveal kept as
   interaction motion (keyed off .open); baked entrance + backdrop-blur dropped; only
   transform/opacity/color move; prefers-reduced-motion honored; overlay is contained
   (absolute), never fixed.
   ============================================================ */
.ws-head.h-nav-overlay-approved { justify-content:space-between; position:sticky; top:0; z-index:20; }
.ws-head.h-nav-overlay-approved.open { z-index:50; }
/* animated hamburger trigger */
.h-nav-overlay-approved .nva-trigger { display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border:none; border-radius:8px; background:none; color:var(--ink);
  cursor:pointer; position:relative; z-index:40; transition:color 140ms linear; }
.h-nav-overlay-approved .nva-trigger:hover { color:var(--accent); }
.h-nav-overlay-approved .nva-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.h-nav-overlay-approved .nva-lines { display:flex; flex-direction:column; gap:5px; width:22px; }
.h-nav-overlay-approved .nva-lines i { display:block; height:2px; border-radius:1px; background:currentColor;
  transform-origin:center; transition:transform 300ms cubic-bezier(.76,0,.24,1), opacity 200ms linear; }
.h-nav-overlay-approved.open .nva-lines i:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.h-nav-overlay-approved.open .nva-lines i:nth-child(2) { opacity:0; }
.h-nav-overlay-approved.open .nva-lines i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* stage-filling overlay panel — contained (absolute), never fixed */
.h-nav-overlay-approved .nva-menu { position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100cqw; height:100cqh; z-index:20; overflow:hidden auto; background:var(--bg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 380ms cubic-bezier(.76,0,.24,1), visibility 0s linear 380ms; }
.h-nav-overlay-approved.open .nva-menu { opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity 380ms cubic-bezier(.76,0,.24,1); }
.h-nav-overlay-approved .nva-inner { min-height:100cqh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(28px, 5cqh, 54px); text-align:center;
  padding:clamp(60px, 12cqh, 116px) clamp(22px, 8cqw, 72px) clamp(28px, 6cqh, 54px); }
/* nav — ctx.pages as centered numbered links */
.h-nav-overlay-approved .ws-nav.nva-links { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; margin:0; }
.h-nav-overlay-approved .ws-navlink.nva-link { display:inline-flex; align-items:baseline; gap:14px;
  padding:6px 10px; border-radius:0; background:none; color:var(--ink);
  font:600 clamp(30px, 6cqw, 60px)/1.1 var(--font-head, var(--font)); letter-spacing:-.02em;
  opacity:0; transform:translateY(20px);
  transition:color 150ms linear, transform 400ms ease-out, opacity 400ms ease-out; }
.h-nav-overlay-approved .ws-navlink.nva-link:hover { background:none; color:var(--accent); }
.h-nav-overlay-approved .ws-navlink.nva-link.on { color:var(--accent); }
.h-nav-overlay-approved .ws-navlink.nva-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }
/* active dot — the approved's aria-current indicator */
.h-nav-overlay-approved .ws-navlink.nva-link.on::after { content:''; align-self:center; flex:none;
  width:7px; height:7px; border-radius:50%; background:var(--accent); }
.h-nav-overlay-approved .nva-num { flex:none; font:600 clamp(11px, 1.4cqw, 14px) var(--mono);
  color:var(--faint); letter-spacing:.06em; }
/* staggered open reveal (interaction motion, keyed off .open) */
.h-nav-overlay-approved.open .ws-navlink.nva-link { opacity:1; transform:translateY(0); }
.h-nav-overlay-approved.open .ws-navlink.nva-link:nth-child(1) { transition-delay:100ms; }
.h-nav-overlay-approved.open .ws-navlink.nva-link:nth-child(2) { transition-delay:150ms; }
.h-nav-overlay-approved.open .ws-navlink.nva-link:nth-child(3) { transition-delay:200ms; }
.h-nav-overlay-approved.open .ws-navlink.nva-link:nth-child(4) { transition-delay:250ms; }
.h-nav-overlay-approved.open .ws-navlink.nva-link:nth-child(5) { transition-delay:300ms; }
.h-nav-overlay-approved.open .ws-navlink.nva-link:nth-child(6) { transition-delay:350ms; }
.h-nav-overlay-approved.open .ws-navlink.nva-link:nth-child(7) { transition-delay:400ms; }
/* footer — centered social row + copyright */
.h-nav-overlay-approved .nva-foot { flex:none; display:flex; flex-direction:column; align-items:center;
  gap:14px; opacity:0; transform:translateY(10px);
  transition:opacity 400ms ease-out 360ms, transform 400ms ease-out 360ms; }
.h-nav-overlay-approved.open .nva-foot { opacity:1; transform:translateY(0); }
.h-nav-overlay-approved .nva-social { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.h-nav-overlay-approved .nva-soc { font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); cursor:pointer; transition:color 140ms linear; }
.h-nav-overlay-approved .nva-soc:hover { color:var(--accent); }
.h-nav-overlay-approved .nva-copy { font:400 12px var(--font); color:var(--faint); letter-spacing:.02em; }
/* reduced motion — kill the reveal choreography, keep content visible */
@media (prefers-reduced-motion: reduce) {
  .h-nav-overlay-approved .nva-menu, .h-nav-overlay-approved .nva-lines i,
  .h-nav-overlay-approved .ws-navlink.nva-link, .h-nav-overlay-approved .nva-foot { transition-duration:1ms; transition-delay:0ms; }
  .h-nav-overlay-approved.open .ws-navlink.nva-link, .h-nav-overlay-approved.open .nva-foot { transform:none; }
}
/* container query — tighten the panel on a narrow stage */
@container site (max-width: 560px) {
  .h-nav-overlay-approved .ws-navlink.nva-link { font-size:clamp(26px, 11cqw, 40px); gap:10px; }
  .h-nav-overlay-approved .nva-inner { padding-inline:clamp(18px, 7cqw, 34px); }
}
/* ============================================================
   nav-tabs-approved — APPROVED flagship (SB_04 · components/navigation/nav-tabs),
   a NEW variant distinct from the pre-existing draft (id:nav-tabs). The approved design:
   a LOGOLESS section tab bar; a sliding underline (wired in mount) rides to the SELECTED
   tab (click-select, not the draft's pointer-follow); an optional count chip rides the active
   tab, and a divided actions slot echoes the origin's Share slot. Arrow/Home/End move focus
   between tabs. Origin --ntabs-* vars -> theme tokens; backdrop-blur + baked entrance dropped;
   only transform/opacity/color/width move; the tab row + actions hide and the hamburger shows
   at 560cqw.
   ============================================================ */
.ws-head.h-nav-tabs-approved { align-items:stretch; gap:16px; padding-block:0; min-height:56px; }
.h-nav-tabs-approved .ws-nav.nta-tabs { position:relative; align-items:stretch; gap:0; margin-left:0;
  align-self:stretch; overflow-x:auto; scrollbar-width:none; }
.h-nav-tabs-approved .ws-nav.nta-tabs::-webkit-scrollbar { display:none; }
.h-nav-tabs-approved .ws-navlink.nta-tab { display:inline-flex; align-items:center; gap:7px; height:100%;
  padding:0 16px; border-radius:0; color:var(--dim); font-weight:500; white-space:nowrap;
  transition:color 140ms linear; }
.h-nav-tabs-approved .ws-navlink.nta-tab:hover, .h-nav-tabs-approved .ws-navlink.nta-tab.on { background:none; color:var(--ink); }
.h-nav-tabs-approved .ws-navlink.nta-tab:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:3px; }
/* optional count chip — the approved's per-tab count, rides the active tab */
.h-nav-tabs-approved .nta-count { flex:none; font:600 10.5px/1 var(--font); padding:3px 7px; border-radius:99px;
  color:var(--dim); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.h-nav-tabs-approved .ws-navlink.nta-tab.on .nta-count { color:var(--accent); background:var(--accent-fill); }
/* sliding underline — JS lerps transform+width to the selected tab */
.h-nav-tabs-approved .nta-ink { position:absolute; left:0; bottom:0; height:2px; width:0; opacity:0;
  border-radius:99px; background:var(--accent-grad, var(--accent)); background-color:var(--accent);
  pointer-events:none; }
/* divided actions slot — the approved's Share slot */
.h-nav-tabs-approved .nta-acts { display:inline-flex; align-items:center; gap:10px; align-self:center;
  margin-left:auto; padding-left:16px; border-left:var(--bw, 1px) solid var(--hair); }
.h-nav-tabs-approved .ws-menubtn { align-self:center; }
@container site (max-width: 560px) {
  .h-nav-tabs-approved .ws-nav.nta-tabs { display:none; }
  .h-nav-tabs-approved .nta-acts { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .h-nav-tabs-approved .ws-navlink.nta-tab { transition:none; }
}
/* ================= SUNNY-POP SET (study · benfolds.com) =================
   The daylight band-site language: flat color bands, confetti geometry,
   two-tone line-art doodles, chunky serif display type. Eight variants
   share it: h-bubble · v-postcard · v-bigtop · v-ribbon · v-doodles ·
   v-datebook (shows) · v-channel (media) · f-parade.
   --pop is the set's SEMANTIC sun-yellow (like the transit footer's line
   hues, kept literal); everything else rides the theme tokens. */

/* ---- header · logo bubble ---- */
/* --band-ink / --bub-ink: contrast-flipped text for the band and the circle.
   The lch relative-color trick snaps to black or white from the actual
   background's lightness, so light packs/palettes flip the text instead of
   vanishing it. Fallback (no lch support): the brand's accent-text. */
.ws-head.h-bubble { --pop:#ffd51e; --band-ink:var(--accent-text, #fff); --bub-ink:var(--accent-text, #fff);
  position:relative; display:block; padding:0;
  border-bottom:none; background:none; overflow:visible; z-index:21; }
@supports (color: lch(from red calc(1 * infinity) 0 0)) {
  .ws-head.h-bubble { --band-ink:lch(from var(--accent2) calc((65 - l) * infinity) 0 0);
    --bub-ink:lch(from var(--accent) calc((62 - l) * infinity) 0 0); }
}
.h-bubble .ws-bubband { display:flex; align-items:center; justify-content:flex-end; gap:20px;
  min-height:calc(74px * var(--density, 1)); background:var(--accent2);
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.h-bubble .ws-nav.bub { display:flex; gap:6px; }
.h-bubble .ws-navlink.bub { font:700 11px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--band-ink); opacity:0.82; border-radius:0; }
.h-bubble .ws-navlink.bub:hover { opacity:1; background:none; color:var(--band-ink); }
.h-bubble .ws-navlink.bub.on { opacity:1; background:none; color:var(--band-ink);
  box-shadow:0 2px 0 var(--pop); }
.h-bubble .ws-menubtn { display:flex; border-color:color-mix(in srgb, var(--band-ink) 40%, transparent);
  color:var(--band-ink); }
.h-bubble .ws-menubtn:hover { border-color:var(--band-ink); color:var(--band-ink); }
/* inline nav showing = the menu button stands down (small containers bring it back) */
.h-bubble .ws-nav.bub ~ .ws-menubtn { display:none; }
/* the mark: wordmark BIGGER than the circle — text spans wide, the circle
   tucks behind it, offset a touch right (the reference proportion) */
.h-bubble .ws-bubmark { position:absolute; left:50%; top:10px; transform:translateX(-50%);
  width:clamp(104px, 11.5cqw, 148px); aspect-ratio:1; cursor:pointer; z-index:2; }
.h-bubble .ws-bubmark.d-low { top:44px; }   /* the badge hangs into the page */
/* badge shapes — circle is the base; svg shapes (burst/blob) drop the css disc */
.h-bubble .ws-bubcircle { position:absolute; inset:0; border-radius:50%; background:var(--accent);
  transform:translateX(9%); }
.h-bubble .ws-bubcircle.s-squircle { border-radius:32%; }
.h-bubble .ws-bubcircle.s-diamond { border-radius:20%; transform:translateX(9%) rotate(45deg);
  inset:6%; }
.h-bubble .ws-bubcircle.s-burst, .h-bubble .ws-bubcircle.s-blob { border-radius:0; background:none; }
.h-bubble .ws-bubcircle svg { display:block; width:100%; height:100%; fill:var(--accent); }
/* wordmark position — under = below the band line (the reference), center = on
   the badge, high = straddling the line */
.h-bubble .ws-bubmark b { position:absolute; left:50%; top:46%; transform:translateX(-50%);
  white-space:nowrap; font:900 clamp(26px, 3.3cqw, 42px)/1.05 var(--font-head, var(--font));
  color:var(--bub-ink); letter-spacing:-0.01em;
  /* the overhang guard: letters wider than the badge land on arbitrary grounds
     (white page, photo, colored banner) — a hairline stroke in the badge's own
     color keeps them legible everywhere and reads as sticker print, not a glow */
  -webkit-text-stroke:1px color-mix(in srgb, var(--accent) 82%, transparent);
  text-shadow:0 1px 9px color-mix(in srgb, var(--accent) 22%, transparent); }
/* outline off (fonts the stroke fights) — the faint glow stays as the guard */
.h-bubble .ws-bubmark.no-line b { -webkit-text-stroke:0; }
.h-bubble .ws-bubmark.t-high b { top:24%; }
.h-bubble .ws-bubmark.t-center b { top:50%; transform:translate(-50%, -50%); }
/* confetti — sits CLEAR of the wordmark: the small piece up top, the big
   piece below the title line hugging the badge's lower shoulder */
.h-bubble .ws-bubdot { position:absolute; border-radius:50%; }
.h-bubble .ws-bubdot.a { width:12px; height:12px; left:-18px; top:8px; background:var(--accent); }
.h-bubble .ws-bubdot.b { width:36px; height:36px; right:-22px; bottom:-12px; background:var(--pop); }
.h-bubble .ws-bubring { position:absolute; width:14px; height:14px; left:46%; bottom:-6px;
  box-sizing:border-box; border:3px solid var(--bub-ink); border-radius:50%; background:transparent; }
/* confetti shapes — the satellites change costume, the little ring stays */
.h-bubble .cf-rings .ws-bubdot { background:none; box-sizing:border-box; }
.h-bubble .cf-rings .ws-bubdot.a { border:3px solid var(--accent); }
.h-bubble .cf-rings .ws-bubdot.b { border:5px solid var(--pop); }
.h-bubble .cf-squares .ws-bubdot { border-radius:22%; }
.h-bubble .cf-diamonds .ws-bubdot { border-radius:18%; transform:rotate(45deg); }
.h-bubble .cf-stars .ws-bubdot { border-radius:0;
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* ---- hero · postcard ---- */
.ws-hero.v-postcard { --pop:#ffd51e; padding:0; min-height:clamp(360px, 46cqw, 640px);
  display:flex; align-items:flex-end; }
.ws-pcimg { position:absolute; inset:0; background-size:cover; background-position:center 30%; }
.ws-pcimg.ph { background:
  radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--accent2) 50%, var(--bg)), transparent 52%),
  radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--accent) 26%, var(--bg)), transparent 46%),
  linear-gradient(160deg, color-mix(in srgb, var(--accent2) 22%, var(--bg)), var(--bg)); }
.ws-hero.v-postcard::after { content:''; position:absolute; left:0; right:0; bottom:0; height:14px;
  background:var(--strip, var(--accent2)); }
.ws-pcsquiggle { position:absolute; left:max(24px, calc((100cqw - 1080px) / 2)); top:42%;
  width:clamp(120px, 15cqw, 210px); height:auto;
  color:color-mix(in srgb, #ffffff 60%, transparent); opacity:0.55; }
.ws-pccopy { padding:0 0 calc(72px * var(--density, 1)); z-index:1; }
.ws-pccopy .ws-h1 { color:#fff; text-shadow:0 2px 26px rgba(0, 0, 0, 0.38); }
.ws-pccopy .ws-kick { color:var(--pop); }
.ws-pccopy .ws-ctarow { margin-top:20px; }

/* ---- banner · big top (page-title band) ---- */
.ws-banner.v-bigtop { --pop:#ffd51e; --bt:var(--accent2); --band-ink:#ffffff; background:var(--bt);
  padding:calc(118px * var(--density, 1)) 0 calc(56px * var(--density, 1)); overflow:hidden; }
@supports (color: lch(from red calc(1 * infinity) 0 0)) {
  .ws-banner.v-bigtop { --band-ink:lch(from var(--bt) calc((65 - l) * infinity) 0 0); }
}
.ws-btcircle { position:absolute; left:9%; top:0; transform:translateY(-56%);
  width:clamp(280px, 38cqw, 540px); aspect-ratio:1; border-radius:50%; background:var(--accent); }
.ws-btdots { position:absolute; left:max(18px, 2.6cqw); top:16px; width:150px; height:96px;
  background-image:radial-gradient(color-mix(in srgb, var(--band-ink) 55%, transparent) 2.2px, transparent 2.7px);
  background-size:19px 19px; opacity:0.5; }
.ws-btring { position:absolute; right:27%; bottom:14%; width:34px; height:34px; box-sizing:border-box;
  border:4px solid color-mix(in srgb, var(--band-ink) 72%, transparent); border-radius:50%; }
.ws-btpuck { position:absolute; right:5.5%; top:24%; width:clamp(48px, 7cqw, 86px); aspect-ratio:1;
  border-radius:50%; background:var(--pop); }
.ws-btdoodle { position:absolute; right:15%; top:-12px; width:clamp(62px, 8cqw, 96px);
  transform:rotate(8deg); }
.ws-btdoodle svg { width:100%; height:100%; }
.ws-btdoodle svg .ln { stroke:color-mix(in srgb, var(--band-ink) 85%, transparent); }
.ws-btdoodle svg .fl { fill:color-mix(in srgb, var(--band-ink) 34%, transparent); }
.ws-bttitle { position:relative; z-index:1; color:var(--band-ink); font-weight:900; }
.ws-btsub { position:relative; z-index:1; margin:10px 0 0; font:400 15px/1.6 var(--font);
  color:color-mix(in srgb, var(--band-ink) 82%, transparent); max-width:56ch; }

/* ---- banner · ribbon ---- */
.ws-banner.v-ribbon { --pop:#ffd51e; --rb:var(--accent2); --band-ink:color-mix(in srgb, #000000 68%, var(--rb));
  padding:0; height:14px; background:var(--rb); }
@supports (color: lch(from red calc(1 * infinity) 0 0)) {
  .ws-banner.v-ribbon { --band-ink:lch(from var(--rb) calc((65 - l) * infinity) 0 0); }
}
.ws-banner.v-ribbon.has-text { height:auto; padding:calc(10px * var(--density, 1)) 0;
  display:flex; justify-content:center; }
.ws-ribbontext { font:700 11px var(--font); letter-spacing:0.22em; text-transform:uppercase;
  font-style:normal; color:var(--band-ink); }

/* ---- features · doodle tiles ---- */
.ws-features.v-doodles .ws-doodlerow { display:grid; grid-template-columns:repeat(3, 1fr);
  gap:32px; justify-items:center; padding:calc(16px * var(--density, 1)) 0; }
.ws-features.v-doodles .ws-doodlerow.n2 { grid-template-columns:repeat(2, 1fr); }
.ws-features.v-doodles .ws-doodlerow.n4 { grid-template-columns:repeat(4, 1fr); }
.ws-features.v-doodles .ws-doodlerow.n5 { grid-template-columns:repeat(5, 1fr); }
.ws-features.v-doodles .ws-doodlerow.n6 { grid-template-columns:repeat(3, 1fr); }
.ws-doodle { display:flex; flex-direction:column; align-items:center; gap:18px; cursor:pointer; }
.ws-doodleart { width:clamp(84px, 10cqw, 118px); aspect-ratio:1; display:block;
  transition:transform 180ms ease; }
.ws-doodleart svg { width:100%; height:100%; }
.ws-doodleart svg .ln { stroke:var(--accent); }
.ws-doodleart svg .fl { fill:var(--accent2); }
.ws-doodle b { font:700 12px var(--font); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); }
.ws-doodle:hover .ws-doodleart { transform:translateY(-4px) rotate(-2deg); }

/* ---- shows · date book ---- */
.ws-shows.v-datebook .ws-dbhead { display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; margin-bottom:calc(24px * var(--density, 1)); }
.ws-shows.v-datebook .ws-dbhead .ws-h2 { margin:0; }
.ws-dbnote { display:block; margin-top:8px; font:italic 400 13px var(--font); color:var(--dim); }
.ws-dbpast { white-space:nowrap; padding-bottom:4px; }
.ws-db { display:flex; align-items:center; gap:22px; padding:calc(17px * var(--density, 1)) 20px; }
.ws-db:nth-child(even) { background:var(--panel-2, var(--panel)); }
.ws-dbdate { flex:none; min-width:170px; font:700 clamp(19px, 2.2cqw, 24px)/1.12 var(--font-head, var(--font));
  color:var(--accent); }
.ws-dbwho { flex:1; min-width:0; }
.ws-dbwho i { display:block; font:400 13.5px var(--font); color:var(--dim); font-style:normal; }
.ws-dbwho b { display:block; margin-top:3px; font:700 12.5px var(--font); color:var(--ink); }
.ws-dbbtn { flex:none; }
.ws-dbbtn.off { background:none; border:var(--bw, 1px) solid var(--hair); color:var(--faint);
  cursor:default; pointer-events:none; }
.ws-dbbtn.soon { background:var(--accent-fill); color:var(--accent);
  border:var(--bw, 1px) solid color-mix(in srgb, var(--accent) 35%, transparent);
  cursor:default; pointer-events:none; }

/* ---- media · the channel ---- */
.ws-media.v-channel { background:color-mix(in srgb, var(--ink) 94%, black); }
.ws-chantitle { color:var(--bg); font-weight:900; margin:0 0 calc(26px * var(--density, 1)); }
.ws-changrid { display:grid; grid-template-columns:2.2fr 1fr; gap:26px; align-items:start; }
.ws-chanposter { position:relative; aspect-ratio:16 / 9; border-radius:6px; overflow:hidden;
  background:
    radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 55%),
    linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, #131315), #0e0e10 62%);
  display:grid; place-items:center; }
.ws-chanplay { width:76px; height:54px; border-radius:14px; border:none; background:var(--accent);
  color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform 150ms ease; }
.ws-chanplay:hover { transform:scale(1.07); }
.ws-chanplay svg { width:22px; height:22px; }
.ws-chancap { display:block; margin-top:12px; font:600 13.5px var(--font);
  color:color-mix(in srgb, var(--bg) 78%, transparent); }
.ws-chanrail { display:flex; flex-direction:column; gap:8px; }
.ws-chanthumb { display:flex; gap:12px; align-items:center; padding:8px; border-radius:6px;
  cursor:pointer; transition:background 140ms linear; }
.ws-chanthumb:hover { background:color-mix(in srgb, var(--bg) 9%, transparent); }
.ws-chanthumb > i { flex:none; width:86px; aspect-ratio:16 / 9; border-radius:4px; position:relative;
  background:linear-gradient(calc(120deg + var(--ci, 0) * 40deg),
    color-mix(in srgb, var(--accent) 34%, #17171a),
    color-mix(in srgb, var(--accent2) 28%, #101013)); }
.ws-chanthumb > i::after { content:'▶'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:10px; color:color-mix(in srgb, #ffffff 80%, transparent); }
.ws-chanthumb span { min-width:0; }
.ws-chanthumb span b { display:block; font:600 13px/1.3 var(--font); color:var(--bg); }
.ws-chanthumb span em { font:400 11px var(--mono); color:color-mix(in srgb, var(--bg) 55%, transparent);
  font-style:normal; }

/* ---- footer · parade ---- */
.ws-foot.f-parade { --pop:#ffd51e; --band-ink:var(--accent-text, #fff); --bub-ink:var(--accent-text, #fff);
  position:relative; border-top:none; background:var(--accent2);
  padding:calc(56px * var(--density, 1)) max(24px, calc((100cqw - 1080px) / 2)) calc(44px * var(--density, 1));
  overflow:hidden; text-align:center; }
@supports (color: lch(from red calc(1 * infinity) 0 0)) {
  .ws-foot.f-parade { --band-ink:lch(from var(--accent2) calc((65 - l) * infinity) 0 0);
    --bub-ink:lch(from var(--accent) calc((62 - l) * infinity) 0 0); }
}
.ws-parwaves { position:absolute; inset:0; opacity:0.55; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26' viewBox='0 0 140 26'%3E%3Cpath d='M0 13 q 17.5 -10 35 0 t 35 0 t 35 0 t 35 0' fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:140px 26px; }
.ws-parin { position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; }
.ws-parnav { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 26px; }
.ws-flink.par { font:700 11px var(--font); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--band-ink); opacity:0.85; }
.ws-flink.par:hover { opacity:1; color:var(--band-ink); }
.f-parsoc { display:flex; gap:12px; justify-content:center; }
.f-parsoc .ws-social { width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--band-ink); color:var(--accent2);
  transition:background 140ms linear, transform 140ms ease; }
.f-parsoc .ws-social:hover { background:var(--pop); transform:translateY(-2px); }
.f-parsoc .ws-social svg { width:15px; height:15px; }
.ws-fcopy.par { font:600 10.5px var(--font); letter-spacing:0.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--band-ink) 78%, transparent); }
.ws-parmark { position:relative; margin-top:6px; width:92px; height:92px; border-radius:50%;
  background:var(--accent); display:grid; place-items:center; }
.ws-parmark b { font:900 14.5px/1.06 var(--font-head, var(--font)); color:var(--bub-ink);
  padding:0 12px; overflow-wrap:anywhere; }
.ws-pardot { position:absolute; border-radius:50%; }
.ws-pardot.a { width:9px; height:9px; left:-14px; top:10px;
  background:color-mix(in srgb, var(--band-ink) 85%, transparent); }
.ws-pardot.b { width:26px; height:26px; right:-15px; bottom:2px; background:var(--pop); }
.ws-parring { position:absolute; width:12px; height:12px; left:4px; bottom:-1px; box-sizing:border-box;
  border:2.6px solid var(--bub-ink); border-radius:50%; }

/* ---- media · channel solo + live frame ---- */
.ws-changrid.solo { grid-template-columns:1fr; max-width:920px; margin:0 auto; }
.ws-chanposter.live { display:block; }
.ws-chanframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- setlist · artists in the set ---- */
.ws-setlist.v-covers .ws-covergrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ws-coverchip { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:calc(26px * var(--density, 1)) 18px; border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * 0.7); background:var(--panel);
  transition:transform 160ms ease, border-color 160ms linear; }
.ws-coverchip:hover { transform:translateY(-3px) rotate(-0.6deg);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-coverchip b { font:700 clamp(18px, 2.1cqw, 24px)/1.15 var(--font-head, var(--font)); color:var(--ink); }
.ws-coverchip i { font:600 10.5px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent); font-style:normal; }

/* ---- setlist · the sheet ---- */
.ws-setlist.v-sheet .ws-slsheet { position:relative; margin:calc(26px * var(--density, 1)) auto 0;
  max-width:560px; padding:calc(34px * var(--density, 1)) 34px calc(28px * var(--density, 1));
  background:var(--panel); border:var(--bw, 1px) solid var(--hair);
  border-radius:calc(var(--radius, 12px) * 0.35); transform:rotate(-0.7deg);
  box-shadow:0 14px 34px -22px rgba(0, 0, 0, 0.35); }
.ws-sltape { position:absolute; width:78px; height:22px; background:var(--accent-fill);
  border:var(--bw, 1px) solid color-mix(in srgb, var(--accent) 22%, transparent); opacity:0.9; }
.ws-sltape.a { top:-11px; left:12%; transform:rotate(-5deg); }
.ws-sltape.b { top:-11px; right:12%; transform:rotate(4deg); }
.ws-slcols { margin:0; padding:0; list-style:none; columns:2; column-gap:34px; }
.ws-slcols.enc { columns:1; }
.ws-slrow { display:flex; align-items:baseline; gap:10px; padding:6px 0;
  break-inside:avoid; border-bottom:var(--bw, 1px) dashed color-mix(in srgb, var(--hair) 70%, transparent); }
.ws-slrow i { font:700 11px var(--mono); color:var(--accent); font-style:normal; flex:none; }
.ws-slrow b { font:700 14px var(--font-head, var(--font)); color:var(--ink); min-width:0; }
.ws-slrow em { margin-left:auto; font:400 10.5px var(--font); color:var(--faint);
  font-style:normal; white-space:nowrap; }
.ws-slencore { display:flex; align-items:center; gap:12px; margin:18px 0 4px; }
.ws-slencore::before, .ws-slencore::after { content:''; height:var(--bw, 1px); flex:1;
  background:color-mix(in srgb, var(--accent) 35%, transparent); }
.ws-slnote { display:block; margin-top:14px; text-align:center;
  font:italic 400 12px var(--font); color:var(--dim); }

/* ---- shows · residency board ---- */
.ws-shows.v-residency .ws-res { display:flex; align-items:center; gap:22px;
  padding:calc(17px * var(--density, 1)) 20px; }
.ws-shows.v-residency .ws-res:nth-child(even) { background:var(--panel-2, var(--panel)); }
.ws-reswhen { flex:none; min-width:170px; font:700 clamp(17px, 2cqw, 22px)/1.15 var(--font-head, var(--font));
  color:var(--accent); }
.ws-reswho { flex:1; min-width:0; }
.ws-reswho b { display:block; font:700 14px var(--font); color:var(--ink); }
.ws-reswho i { display:block; margin-top:2px; font:400 12px var(--font); color:var(--dim); font-style:normal; }
.ws-restime { flex:none; font:700 11px var(--mono); letter-spacing:0.08em; color:var(--accent2);
  padding:6px 11px; border:var(--bw, 1px) solid color-mix(in srgb, var(--accent2) 45%, transparent);
  border-radius:calc(var(--radius-ctl, var(--radius, 12px)) * 0.6); }

/* ---- sunny-pop set · small containers ---- */
@container site (max-width: 760px) {
  .h-bubble .ws-nav.bub { display:none; }
  .h-bubble .ws-menubtn, .h-bubble .ws-nav.bub ~ .ws-menubtn { display:flex; }
  .h-bubble .ws-bubband { min-height:58px; }
  /* the mark keeps its center-stage composition on small screens — same as
     desktop, just smaller (it dips into the section below all the same) */
  .h-bubble .ws-bubmark { top:8px; width:76px; }
  .h-bubble .ws-bubmark.d-low { top:26px; }
  .h-bubble .ws-bubmark b, .h-bubble .ws-bubmark.t-high b, .h-bubble .ws-bubmark.t-center b {
    font-size:19px; top:50%; transform:translate(-50%, -50%); }
  /* confetti ducks fully below the centered title on small screens */
  .h-bubble .ws-bubdot.a { width:9px; height:9px; left:-10px; top:-4px; }
  .h-bubble .ws-bubdot.b { width:20px; height:20px; right:-12px; bottom:-10px; }
  .ws-setlist.v-covers .ws-covergrid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .ws-slcols { columns:1; }
  .ws-shows.v-residency .ws-res { flex-wrap:wrap; gap:6px 16px; padding:14px; }
  .ws-reswhen { min-width:0; flex-basis:100%; }
  .ws-banner.v-bigtop { padding-top:calc(96px * var(--density, 1)); }
  .ws-btcircle { left:32%; }
  .ws-features.v-doodles .ws-doodlerow,
  .ws-features.v-doodles .ws-doodlerow.n4, .ws-features.v-doodles .ws-doodlerow.n5 {
    grid-template-columns:repeat(3, 1fr); gap:14px; }
  .ws-doodleart { width:clamp(56px, 22cqw, 90px); }
  .ws-doodle b { font-size:10px; letter-spacing:0.14em; }
  .ws-shows.v-datebook .ws-dbhead { flex-direction:column; align-items:flex-start; }
  .ws-db { flex-wrap:wrap; gap:6px 16px; padding:14px; }
  .ws-dbdate { min-width:0; flex-basis:100%; }
  .ws-changrid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-doodleart, .ws-chanplay, .f-parsoc .ws-social { transition:none; }
  .ws-doodle:hover .ws-doodleart, .ws-chanplay:hover, .f-parsoc .ws-social:hover { transform:none; }
}

/* ================= STATEMENT HEADERS (PIXEL b1) =================
   Bold band-site headers where the header IS the visual branding
   statement: h-marquee · h-sticker · h-tape · h-stencil · h-lantern.
   All animation is pure CSS (works in preview, runner and exports),
   gated by prefers-reduced-motion; band inks ride the lch contrast
   flip where the band color is theme-driven. */

/* ---- marquee bulbs ---- */
.ws-head.h-marquee { position:relative; display:flex; align-items:center; justify-content:flex-end;
  gap:20px; min-height:calc(94px * var(--density, 1)); border-bottom:none;
  background:color-mix(in srgb, var(--ink) 92%, black);
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.h-marquee .ws-marq { --blb:#ffd51e; position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%); display:flex; flex-direction:column; gap:7px;
  padding:10px 24px 11px; cursor:pointer; border-radius:10px;
  background:color-mix(in srgb, var(--ink) 78%, black);
  border:var(--bw, 1px) solid color-mix(in srgb, var(--blb) 50%, transparent);
  box-shadow:0 0 36px color-mix(in srgb, var(--blb) 20%, transparent), inset 0 0 20px rgba(0, 0, 0, 0.55); }
.h-marquee .ws-marq b { font:900 clamp(19px, 2.4cqw, 30px)/1.05 var(--font-head, var(--font));
  color:#fff; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; text-align:center;
  text-shadow:0 0 16px color-mix(in srgb, var(--blb) 60%, transparent); }
.h-marquee .ws-marqstrip { height:8px; background-repeat:repeat-x; background-size:16px 8px;
  background-image:radial-gradient(circle at 4px 4px, var(--blb) 2.6px,
    color-mix(in srgb, var(--blb) 26%, transparent) 3.6px, transparent 4.6px); }
.h-marquee .ws-marq:not(.still) .ws-marqstrip.t { animation:ws-chase 0.9s linear infinite; }
.h-marquee .ws-marq:not(.still) .ws-marqstrip.bb { animation:ws-chase 0.9s linear infinite reverse; }
@keyframes ws-chase { to { background-position:16px 0; } }
.h-marquee .ws-nav.mrq { display:flex; gap:6px; }
.h-marquee .ws-navlink.mrq { font:700 10.5px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255, 255, 255, 0.62); border-radius:0; }
.h-marquee .ws-navlink.mrq:hover { color:#fff; background:none; }
.h-marquee .ws-navlink.mrq.on { color:var(--blb, #ffd51e); background:none;
  text-shadow:0 0 12px color-mix(in srgb, var(--blb, #ffd51e) 60%, transparent); }
.h-marquee .ws-menubtn { display:flex; border-color:rgba(255, 255, 255, 0.35); color:#fff; }
.h-marquee .ws-nav.mrq ~ .ws-menubtn { display:none; }

/* ---- sticker slap ---- */
.ws-head.h-sticker { --band-ink:var(--accent-text, #fff); --bub-ink:var(--accent-text, #fff);
  position:relative; display:block; padding:0; border-bottom:none; overflow:visible; z-index:21; background:none; }
@supports (color: lch(from red calc(1 * infinity) 0 0)) {
  .ws-head.h-sticker { --band-ink:lch(from var(--accent2) calc((65 - l) * infinity) 0 0);
    --bub-ink:lch(from var(--accent) calc((62 - l) * infinity) 0 0); }
}
.h-sticker .ws-stkband { display:flex; align-items:center; justify-content:flex-end; gap:20px;
  min-height:calc(68px * var(--density, 1)); background:var(--accent2);
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.h-sticker .ws-stkmark { position:absolute; left:50%; top:22%; z-index:2; cursor:pointer;
  transform:translateX(-50%) rotate(-5deg); padding:11px 26px 12px;
  background:var(--accent); border:5px solid #fff; border-radius:16px;
  box-shadow:0 10px 26px rgba(0, 0, 0, 0.28); transition:transform 240ms ease; }
.h-sticker .ws-stkmark.t-r { transform:translateX(-50%) rotate(5deg); }
.h-sticker .ws-stkmark.t-0 { transform:translateX(-50%); }
.h-sticker .ws-stkmark:hover { transform:translateX(-50%) rotate(0deg) scale(1.03); }
.h-sticker .ws-stkmark b { font:900 clamp(19px, 2.5cqw, 32px)/1.05 var(--font-head, var(--font));
  color:var(--bub-ink); white-space:nowrap; letter-spacing:-0.01em; }
.h-sticker .ws-stkmark.peel::after { content:''; position:absolute; right:-5px; top:-5px;
  width:22px; height:22px; border-radius:0 16px 0 12px;
  background:linear-gradient(225deg, transparent 0 46%, #f2efe8 48%, #cfccc4 100%);
  box-shadow:-2px 2px 5px rgba(0, 0, 0, 0.18); }
.h-sticker .ws-nav.stk { display:flex; gap:6px; }
.h-sticker .ws-navlink.stk { font:700 10.5px var(--font); letter-spacing:0.15em; text-transform:uppercase;
  color:var(--band-ink); opacity:0.82; border-radius:0; }
.h-sticker .ws-navlink.stk:hover, .h-sticker .ws-navlink.stk.on { opacity:1; color:var(--band-ink); background:none; }
.h-sticker .ws-menubtn { display:flex; border-color:color-mix(in srgb, var(--band-ink) 40%, transparent);
  color:var(--band-ink); }
.h-sticker .ws-nav.stk ~ .ws-menubtn { display:none; }

/* ---- tape label ---- */
.ws-head.h-tape { --band-ink:var(--accent-text, #fff);
  position:relative; display:block; padding:0; border-bottom:none; overflow:visible; z-index:21; background:none; }
@supports (color: lch(from red calc(1 * infinity) 0 0)) {
  .ws-head.h-tape { --band-ink:lch(from var(--accent2) calc((65 - l) * infinity) 0 0); }
}
.h-tape .ws-tapeband { display:flex; align-items:center; justify-content:flex-end; gap:20px;
  min-height:calc(62px * var(--density, 1)); background:var(--accent2);
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.h-tape .ws-tapemark { --tape:#efe6cf; position:absolute; left:50%; top:52%; z-index:2; cursor:pointer;
  transform:translateX(-50%) rotate(-2deg); padding:10px 36px 11px; background:var(--tape); opacity:0.96;
  background-image:repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(120, 104, 70, 0.05) 0 1px, transparent 1px 4px);
  box-shadow:0 5px 16px rgba(0, 0, 0, 0.2);
  clip-path:polygon(1.2% 0, 98.8% 2%, 100% 12%, 98.6% 26%, 100% 40%, 99% 55%, 100% 70%, 98.7% 85%, 99.6% 100%, 1.6% 98%, 0 88%, 1.3% 72%, 0 57%, 1% 42%, 0 26%, 1.4% 12%); }
.h-tape .ws-tapemark.s-0 { transform:translateX(-50%); }
.h-tape .ws-tapemark.s-2 { transform:translateX(-50%) rotate(-4.5deg); }
.h-tape .ws-tapemark b { font:700 clamp(18px, 2.4cqw, 29px)/1.1 var(--font-head, var(--font));
  color:color-mix(in srgb, #3a3428 90%, var(--tape)); white-space:nowrap; letter-spacing:0.01em; }
.h-tape .ws-nav.tpe { display:flex; gap:6px; }
.h-tape .ws-navlink.tpe { font:700 10.5px var(--font); letter-spacing:0.15em; text-transform:uppercase;
  color:var(--band-ink); opacity:0.82; border-radius:0; }
.h-tape .ws-navlink.tpe:hover, .h-tape .ws-navlink.tpe.on { opacity:1; color:var(--band-ink); background:none; }
.h-tape .ws-menubtn { display:flex; border-color:color-mix(in srgb, var(--band-ink) 40%, transparent);
  color:var(--band-ink); }
.h-tape .ws-nav.tpe ~ .ws-menubtn { display:none; }

/* ---- spray stencil ---- */
.ws-head.h-stencil { position:relative; display:flex; align-items:center; justify-content:flex-end;
  gap:20px; min-height:calc(80px * var(--density, 1)); border-bottom:none; overflow:visible; z-index:21;
  background:color-mix(in srgb, var(--ink) 90%, black);
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.h-stencil .ws-stnmark { --stn:var(--accent); position:absolute; left:50%; top:46%; z-index:2;
  cursor:pointer; transform:translateX(-50%) rotate(-2deg); }
.h-stencil .ws-stnmark b { font:900 clamp(24px, 3.2cqw, 44px)/1 var(--font-head, var(--font));
  text-transform:uppercase; letter-spacing:0.14em; white-space:nowrap; color:var(--stn);
  text-shadow:0 0 1px var(--stn), 0 0 18px color-mix(in srgb, var(--stn) 50%, transparent),
    0 0 40px color-mix(in srgb, var(--stn) 22%, transparent); }
.h-stencil .ws-stndrip { position:absolute; top:86%; left:var(--dx); width:3px; height:0;
  background:var(--stn); border-radius:0 0 3px 3px;
  box-shadow:0 0 8px color-mix(in srgb, var(--stn) 45%, transparent);
  animation:ws-drip 1.2s var(--dd, 0s) ease-out forwards; }
.h-stencil .ws-stndrip::after { content:''; position:absolute; bottom:-3px; left:50%;
  transform:translateX(-50%); width:6px; height:6px; border-radius:50%; background:var(--stn); }
@keyframes ws-drip { to { height:var(--dh, 24px); } }
.h-stencil .ws-nav.stn { display:flex; gap:6px; }
.h-stencil .ws-navlink.stn { font:700 10.5px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255, 255, 255, 0.6); border-radius:0; }
.h-stencil .ws-navlink.stn:hover { color:#fff; background:none; }
.h-stencil .ws-navlink.stn.on { color:var(--stn, var(--accent)); background:none; }
.h-stencil .ws-menubtn { display:flex; border-color:rgba(255, 255, 255, 0.35); color:#fff; }
.h-stencil .ws-nav.stn ~ .ws-menubtn { display:none; }

/* ---- lantern lights ---- */
.ws-head.h-lantern { --glow:#ff9d3d; position:relative; display:flex; align-items:center;
  justify-content:flex-end; gap:20px; min-height:calc(86px * var(--density, 1)); border-bottom:none;
  overflow:visible; z-index:21;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 86%, black),
    color-mix(in srgb, var(--ink) 96%, black));
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.h-lantern .ws-lanmark { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  z-index:2; cursor:pointer; }
.h-lantern .ws-lanmark b { font:700 clamp(19px, 2.6cqw, 32px)/1.1 var(--font-head, var(--font));
  white-space:nowrap; color:#ffe9c4;
  text-shadow:0 0 20px color-mix(in srgb, var(--glow) 45%, transparent), 0 1px 2px rgba(0, 0, 0, 0.6); }
/* each lantern = a cord (the element) + a body (its <b>) hanging below the band */
.h-lantern .ws-lan { position:absolute; top:0; left:var(--lx); width:2px;
  height:calc(var(--ld, 30px) + 30px); z-index:2; pointer-events:none;
  background:linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  transform-origin:top center; animation:ws-sway 4.4s var(--ls, 0s) ease-in-out infinite alternate; }
.h-lantern.still .ws-lan { animation:none; }
.h-lantern .ws-lan b { position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:24px; height:32px; border-radius:11px / 13px;
  background:radial-gradient(circle at 50% 40%, #ffe2ae, var(--glow) 62%,
    color-mix(in srgb, var(--glow) 55%, black));
  background-image:repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 40%, #ffe2ae, var(--glow) 62%, color-mix(in srgb, var(--glow) 55%, black));
  box-shadow:0 0 26px 7px color-mix(in srgb, var(--glow) 34%, transparent); }
.h-lantern .ws-lan b::before { content:''; position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  width:10px; height:4px; border-radius:2px; background:color-mix(in srgb, var(--glow) 30%, #241a10); }
.h-lantern .ws-lan b::after { content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:4px; height:6px; border-radius:0 0 3px 3px; background:color-mix(in srgb, var(--glow) 45%, #241a10); }
@keyframes ws-sway { from { transform:rotate(2.2deg); } to { transform:rotate(-2.2deg); } }
.h-lantern .ws-nav.lan { display:flex; gap:6px; }
.h-lantern .ws-navlink.lan { font:700 10.5px var(--font); letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(255, 233, 196, 0.5); border-radius:0; transition:color 160ms linear, text-shadow 160ms linear; }
.h-lantern .ws-navlink.lan:hover, .h-lantern .ws-navlink.lan.on { color:#ffe9c4; background:none;
  text-shadow:0 0 12px color-mix(in srgb, var(--glow) 55%, transparent); }
.h-lantern .ws-menubtn { display:flex; border-color:rgba(255, 233, 196, 0.35); color:#ffe9c4; }
.h-lantern .ws-nav.lan ~ .ws-menubtn { display:none; }

/* ---- neon sign ---- */
.ws-head.h-neon { position:relative; display:flex; align-items:center; justify-content:flex-end;
  gap:20px; min-height:calc(88px * var(--density, 1)); border-bottom:none;
  background:color-mix(in srgb, var(--ink) 93%, black);
  background-image:repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 34px);
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.h-neon .ws-neonmark { --tube:#ff2d87; position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%); cursor:pointer; white-space:nowrap; display:flex; align-items:baseline; }
.h-neon .ws-neonmark u { display:inline-block; width:0.5em; }
.h-neon .ws-neonmark b { font:700 clamp(22px, 2.8cqw, 38px)/1.1 var(--font-head, var(--font));
  color:#fff;
  text-shadow:0 0 4px #fff, 0 0 10px var(--tube), 0 0 22px var(--tube),
    0 0 46px color-mix(in srgb, var(--tube) 60%, transparent); }
.h-neon .ws-neonmark b.flick { animation:ws-neonflick 4.6s step-end infinite; }
@keyframes ws-neonflick {
  0%, 6.9%, 8.2%, 30.9%, 32.4%, 33.1%, 75.9%, 78.5%, 100% { opacity:1; }
  7%, 31%, 32.5%, 76% { opacity:0.18; }
}
.h-neon .ws-nav.neo { display:flex; gap:6px; }
.h-neon .ws-navlink.neo { font:700 10.5px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255, 255, 255, 0.58); border-radius:0; }
.h-neon .ws-navlink.neo:hover { color:#fff; background:none; }
.h-neon .ws-navlink.neo.on { color:var(--tube, #ff2d87); background:none;
  text-shadow:0 0 12px color-mix(in srgb, var(--tube, #ff2d87) 60%, transparent); }
.h-neon .ws-menubtn { display:flex; border-color:rgba(255, 255, 255, 0.35); color:#fff; }
.h-neon .ws-nav.neo ~ .ws-menubtn { display:none; }

/* ---- deco fan ---- */
.ws-head.h-deco { position:relative; display:flex; align-items:center; justify-content:flex-end;
  gap:20px; min-height:calc(92px * var(--density, 1)); border-bottom:none; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, black),
    color-mix(in srgb, var(--ink) 95%, black));
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
.h-deco .ws-decomark { --metal:#d4af37; position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%); cursor:pointer; display:flex; align-items:center; gap:16px; }
.h-deco .ws-decofan { position:absolute; left:50%; bottom:46%; transform:translateX(-50%);
  width:clamp(220px, 26cqw, 380px); aspect-ratio:2 / 1; pointer-events:none;
  border-radius:50% 50% 0 0 / 100% 100% 0 0; opacity:0.2;
  background:repeating-conic-gradient(from -90deg at 50% 100%,
    var(--metal) 0deg 2deg, transparent 2deg 12deg);
  -webkit-mask-image:radial-gradient(circle at 50% 100%, transparent 28%, #000 30%, #000 82%, transparent 84%);
  mask-image:radial-gradient(circle at 50% 100%, transparent 28%, #000 30%, #000 82%, transparent 84%); }
.h-deco .ws-decomark b { position:relative; font:700 clamp(20px, 2.6cqw, 34px)/1.1 var(--font-head, var(--font));
  white-space:nowrap; letter-spacing:0.12em; text-transform:uppercase;
  background:linear-gradient(100deg, color-mix(in srgb, var(--metal) 72%, #6b5516) 0 38%,
    #fff2c4 47%, var(--metal) 56%, color-mix(in srgb, var(--metal) 72%, #6b5516) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ws-decoshimmer 5.2s ease-in-out infinite; }
@keyframes ws-decoshimmer { 0%, 100% { background-position:0% 0; } 50% { background-position:100% 0; } }
.h-deco .ws-decorule { position:relative; width:clamp(34px, 4.5cqw, 74px); height:1px;
  background:linear-gradient(90deg, transparent, var(--metal)); }
.h-deco .ws-decorule.r { background:linear-gradient(270deg, transparent, var(--metal)); }
.h-deco .ws-decorule::after { content:''; position:absolute; top:-2.5px; width:6px; height:6px;
  background:var(--metal); transform:rotate(45deg); }
.h-deco .ws-decorule.l::after { right:0; }
.h-deco .ws-decorule.r::after { left:0; }
.h-deco .ws-nav.dco { display:flex; gap:6px; }
.h-deco .ws-navlink.dco { font:700 10.5px var(--font); letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255, 255, 255, 0.55); border-radius:0; }
.h-deco .ws-navlink.dco:hover { color:#fff; background:none; }
.h-deco .ws-navlink.dco.on { color:var(--metal, #d4af37); background:none; }
.h-deco .ws-menubtn { display:flex; border-color:color-mix(in srgb, var(--metal, #d4af37) 45%, transparent);
  color:var(--metal, #d4af37); }
.h-deco .ws-nav.dco ~ .ws-menubtn { display:none; }

/* ---- aurora veil (NOVA) ---- */
.ws-head.h-aurora { --veil:#6ee7b7; position:relative; display:flex; align-items:center;
  justify-content:flex-end; gap:20px; min-height:calc(96px * var(--density, 1)); border-bottom:none;
  overflow:hidden; z-index:21;
  background-image:
    radial-gradient(1.4px 1.4px at 11% 26%, rgba(255, 255, 255, 0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 64%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 49% 18%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 52%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 84% 30%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 70%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 82%, #0a1230),
      color-mix(in srgb, var(--ink) 96%, black));
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
/* the skyglow — a faint horizon wash that ties the curtains into one sky */
.ws-head.h-aurora::after { content:''; position:absolute; inset:0 0 auto 0; height:46%;
  pointer-events:none; background:linear-gradient(180deg,
    color-mix(in srgb, var(--veil) 16%, transparent), transparent); }
/* the curtains — luminous sheets with fold striations, screen-blended so
   overlaps brighten; side-feathered by mask so the blur never shows an edge */
.h-aurora .ws-aur { position:absolute; top:-6%; height:120%; pointer-events:none;
  transform:skewX(-14deg); filter:blur(5px); mix-blend-mode:screen;
  background-image:repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, color-mix(in srgb, var(--veil) 85%, #fff) 0%, var(--veil) 16%,
      color-mix(in srgb, var(--veil) 30%, transparent) 52%, transparent 82%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 30% 70%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 30% 70%, transparent); }
.h-aurora .ws-aur.a { left:5%; width:19%; opacity:0.66; animation:ws-aurdrift 9s ease-in-out infinite alternate; }
.h-aurora .ws-aur.b { left:23%; width:11%; opacity:0.5;
  background-image:repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 3px, transparent 3px 10px),
    linear-gradient(180deg, color-mix(in srgb, var(--veil) 55%, #cfe8ff) 0%,
      color-mix(in srgb, var(--veil) 62%, #7dd3fc) 18%,
      color-mix(in srgb, var(--veil) 24%, transparent) 54%, transparent 82%);
  animation:ws-aurdrift 12.5s 0.8s ease-in-out infinite alternate-reverse; }
.h-aurora .ws-aur.c { left:56%; width:23%; opacity:0.58;
  animation:ws-aurdrift 15s 1.6s ease-in-out infinite alternate; }
.h-aurora.still .ws-aur { animation:none; }
@keyframes ws-aurdrift {
  from { transform:translateX(-16px) skewX(-16deg); }
  to { transform:translateX(16px) skewX(-9deg); }
}
.h-aurora .ws-aurmark { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  z-index:2; cursor:pointer; }
.h-aurora .ws-aurmark b { font:600 clamp(19px, 2.6cqw, 33px)/1.1 var(--font-head, var(--font));
  white-space:nowrap; letter-spacing:0.13em; text-transform:uppercase; color:#eef6ff;
  text-shadow:0 0 20px color-mix(in srgb, var(--veil) 55%, transparent), 0 1px 2px rgba(0, 0, 0, 0.55); }
.h-aurora .ws-nav.aur { display:flex; gap:6px; position:relative; z-index:3; }
.h-aurora .ws-navlink.aur { font:700 10.5px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(230, 240, 255, 0.5); border-radius:0; transition:color 160ms linear, text-shadow 160ms linear; }
.h-aurora .ws-navlink.aur:hover, .h-aurora .ws-navlink.aur.on { color:#fff; background:none;
  text-shadow:0 0 12px color-mix(in srgb, var(--veil) 60%, transparent); }
.h-aurora .ws-menubtn { display:flex; position:relative; z-index:3;
  border-color:rgba(230, 240, 255, 0.35); color:#eef6ff; }
.h-aurora .ws-btn { position:relative; z-index:3; }
.h-aurora .ws-nav.aur ~ .ws-menubtn { display:none; }

/* ---- undertow (NOVA) ---- */
.ws-head.h-undertow { --sea:#2dd4bf; position:relative; display:flex; align-items:center;
  justify-content:flex-end; gap:20px; min-height:calc(92px * var(--density, 1)); border-bottom:none;
  overflow:hidden; z-index:21;
  background:linear-gradient(180deg, color-mix(in srgb, var(--sea) 16%, #04141c) 0%,
    color-mix(in srgb, var(--sea) 5%, color-mix(in srgb, var(--ink) 94%, black)) 100%);
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
/* light shafts leaning down through the water */
.h-undertow .ws-shaft { position:absolute; top:-24%; height:148%; pointer-events:none;
  transform:skewX(-18deg); filter:blur(8px); mix-blend-mode:screen;
  background:linear-gradient(180deg, color-mix(in srgb, var(--sea) 38%, #eafffb) 0%,
    color-mix(in srgb, var(--sea) 20%, transparent) 52%, transparent 82%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 30% 70%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 30% 70%, transparent); }
.h-undertow .ws-shaft.a { left:16%; width:72px; opacity:0.34; animation:ws-shaftsway 8s ease-in-out infinite alternate; }
.h-undertow .ws-shaft.b { left:43%; width:44px; opacity:0.24; animation:ws-shaftsway 11s 0.9s ease-in-out infinite alternate-reverse; }
.h-undertow .ws-shaft.c { left:70%; width:88px; opacity:0.3; animation:ws-shaftsway 13.5s 1.7s ease-in-out infinite alternate; }
@keyframes ws-shaftsway {
  from { transform:translateX(-12px) skewX(-21deg); opacity:0.2; }
  to { transform:translateX(12px) skewX(-15deg); opacity:0.42; }
}
.h-undertow .ws-bub { position:absolute; bottom:-8px; left:var(--bx, 50%);
  width:var(--bs, 4px); height:var(--bs, 4px); border-radius:50%; pointer-events:none;
  border:1px solid rgba(255, 255, 255, 0.5);
  background:radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
  opacity:0; animation:ws-bubrise 6.5s var(--bd, 0s) linear infinite; }
@keyframes ws-bubrise {
  0% { transform:translate(0, 0); opacity:0; }
  12% { opacity:0.75; }
  82% { opacity:0.6; }
  100% { transform:translate(5px, -118px); opacity:0; }
}
.h-undertow .ws-seamark { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  z-index:2; cursor:pointer; animation:ws-seafloat 7s ease-in-out infinite alternate; }
@keyframes ws-seafloat {
  from { transform:translate(-50%, calc(-50% - 3px)) rotate(-0.4deg); }
  to { transform:translate(-50%, calc(-50% + 3px)) rotate(0.4deg); }
}
.h-undertow .ws-seamark b { font:800 clamp(20px, 2.7cqw, 34px)/1.1 var(--font-head, var(--font));
  white-space:nowrap; letter-spacing:0.05em; color:#e8fbff;
  text-shadow:0 0 16px color-mix(in srgb, var(--sea) 50%, transparent), 0 2px 3px rgba(0, 4, 8, 0.6); }
.h-undertow .ws-nav.tid { display:flex; gap:6px; position:relative; z-index:3; }
.h-undertow .ws-navlink.tid { font:700 10.5px var(--font); letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(232, 251, 255, 0.52); border-radius:0; transition:color 160ms linear, text-shadow 160ms linear; }
.h-undertow .ws-navlink.tid:hover, .h-undertow .ws-navlink.tid.on { color:#fff; background:none;
  text-shadow:0 0 12px color-mix(in srgb, var(--sea) 60%, transparent); }
.h-undertow .ws-menubtn { display:flex; position:relative; z-index:3;
  border-color:rgba(232, 251, 255, 0.35); color:#e8fbff; }
.h-undertow .ws-btn { position:relative; z-index:3; }
.h-undertow .ws-nav.tid ~ .ws-menubtn { display:none; }

/* ---- floodlight (APEX) ---- */
.ws-head.h-floodlight { --beam:#f2f6ff; position:relative; display:flex; align-items:center;
  justify-content:flex-end; gap:20px; min-height:calc(96px * var(--density, 1)); border-bottom:none;
  overflow:hidden; z-index:21;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 90%, black),
    color-mix(in srgb, var(--ink) 97%, black));
  padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
/* stage haze pooling at the crowd line */
.ws-head.h-floodlight::before { content:''; position:absolute; inset:auto 0 0 0; height:56%;
  pointer-events:none; background:linear-gradient(0deg,
    color-mix(in srgb, var(--beam) 10%, transparent), transparent); }
/* the crowd — a silhouette rim of heads along the bottom edge, over the beams */
.ws-head.h-floodlight::after { content:''; position:absolute; inset:auto 0 0 0; height:16px;
  pointer-events:none; z-index:2; background-repeat:repeat-x; background-size:67px 16px;
  background-image:radial-gradient(circle at 7px 18px, #04060b 9px, transparent 9.8px),
    radial-gradient(circle at 21px 22px, #04060b 12px, transparent 12.8px),
    radial-gradient(circle at 34px 19px, #04060b 7px, transparent 7.8px),
    radial-gradient(circle at 47px 21px, #04060b 11px, transparent 11.8px),
    radial-gradient(circle at 60px 18px, #04060b 8px, transparent 8.8px); }
.ws-head.h-floodlight.no-crowd::after { display:none; }
/* searchlight beams — light cones panning the band, screen-blended, side-feathered */
.h-floodlight .ws-beam { position:absolute; top:-30%; height:160%; pointer-events:none;
  transform:skewX(-16deg); filter:blur(7px); mix-blend-mode:screen;
  background:linear-gradient(180deg, color-mix(in srgb, var(--beam) 85%, #fff) 0%,
    color-mix(in srgb, var(--beam) 34%, transparent) 55%, transparent 88%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 32% 68%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 32% 68%, transparent); }
.h-floodlight .ws-beam.a { left:16%; width:clamp(70px, 9cqw, 130px); opacity:0.6;
  animation:ws-fldsweep 7s ease-in-out infinite alternate; }
.h-floodlight .ws-beam.b { left:60%; width:clamp(90px, 12cqw, 170px); opacity:0.5;
  animation:ws-fldsweep 9.5s 0.7s ease-in-out infinite alternate-reverse; }
.h-floodlight.still .ws-beam { animation:none; }
@keyframes ws-fldsweep {
  from { transform:translateX(-16cqw) skewX(14deg); }
  to { transform:translateX(16cqw) skewX(-18deg); }
}
.h-floodlight .ws-fldmark { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  z-index:3; cursor:pointer; }
.h-floodlight .ws-fldmark b { font:900 clamp(22px, 3.1cqw, 42px)/1 var(--font-head, var(--font));
  white-space:nowrap; text-transform:uppercase; letter-spacing:0.07em; color:#f4f7ff;
  text-shadow:0 0 22px color-mix(in srgb, var(--beam) 45%, transparent),
    0 0 54px color-mix(in srgb, var(--beam) 22%, transparent), 0 2px 3px rgba(0, 0, 0, 0.65); }
.h-floodlight .ws-nav.fld { display:flex; gap:6px; position:relative; z-index:3; }
.h-floodlight .ws-navlink.fld { font:700 10.5px var(--font); letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(244, 247, 255, 0.58); border-radius:0; transition:color 160ms linear, text-shadow 160ms linear; }
.h-floodlight .ws-navlink.fld:hover, .h-floodlight .ws-navlink.fld.on { color:#fff; background:none;
  text-shadow:0 0 12px color-mix(in srgb, var(--beam) 60%, transparent); }
.h-floodlight .ws-menubtn { display:flex; position:relative; z-index:3;
  border-color:rgba(244, 247, 255, 0.35); color:#f4f7ff; }
.h-floodlight .ws-btn { position:relative; z-index:3; }
.h-floodlight .ws-nav.fld ~ .ws-menubtn { display:none; }

/* ---- headliner (APEX) ---- */
.ws-head.h-headliner { --sun:#ff8c3b; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; min-height:calc(118px * var(--density, 1));
  border-bottom:none; overflow:hidden; z-index:21; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 90%, #140a24) 0%,
    color-mix(in srgb, var(--sun) 14%, color-mix(in srgb, var(--ink) 82%, #2c1030)) 62%,
    color-mix(in srgb, var(--sun) 34%, color-mix(in srgb, var(--ink) 62%, #40183a)) 100%);
  padding:14px max(24px, calc((100cqw - 1080px) / 2)) 16px; }
/* the retro sun — slatted poster disc half-set behind the headline, breathing glow.
   Slats ride their own background layer (a gradient can't nest as a color stop) */
.h-headliner .ws-hdlsun { --sunw:clamp(120px, 15cqw, 200px); position:absolute; left:50%;
  bottom:calc(var(--sunw) * -0.52); transform:translateX(-50%);
  width:var(--sunw); aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:1;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 8px,
      color-mix(in srgb, var(--sun) 24%, #331236) 8px 11px),
    linear-gradient(180deg, #ffe9b0 0%, var(--sun) 46%,
      color-mix(in srgb, var(--sun) 62%, #7a1f4e) 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% 76%, 100% 100%; background-position:0 100%, 0 0;
  box-shadow:0 0 46px color-mix(in srgb, var(--sun) 36%, transparent);
  animation:ws-hdlglow 6s ease-in-out infinite alternate; }
@keyframes ws-hdlglow {
  from { box-shadow:0 0 34px color-mix(in srgb, var(--sun) 28%, transparent);
    transform:translateX(-50%) translateY(3px); }
  to { box-shadow:0 0 64px color-mix(in srgb, var(--sun) 48%, transparent);
    transform:translateX(-50%) translateY(-3px); }
}
.h-headliner.no-sun .ws-hdlsun { display:none; }
.h-headliner .ws-hdlmark { position:relative; z-index:2; cursor:pointer; display:flex;
  flex-direction:column; align-items:center; gap:5px; }
.h-headliner .ws-hdlmark i { font:700 9.5px var(--font); font-style:normal; letter-spacing:0.42em;
  text-indent:0.42em; text-transform:uppercase; color:color-mix(in srgb, var(--sun) 70%, #ffe9c4); }
.h-headliner .ws-hdlmark b { font:900 clamp(23px, 3.3cqw, 46px)/1 var(--font-head, var(--font));
  white-space:nowrap; text-transform:uppercase; letter-spacing:0.02em; color:#fff6e8;
  text-shadow:0 0 24px color-mix(in srgb, var(--sun) 38%, transparent),
    0 2px 0 color-mix(in srgb, var(--sun) 45%, #4a1638), 0 3px 8px rgba(0, 0, 0, 0.5); }
/* the undercard — nav as the support-act lineup line, dot-separated */
.h-headliner .ws-nav.hdl { position:relative; z-index:2; display:flex; align-items:center;
  margin:2px 0 0; }  /* base .ws-nav margin-left:auto would right-align the undercard in the column */
.h-headliner .ws-navlink.hdl { font:800 10px var(--font); letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255, 240, 224, 0.72); border-radius:0; padding:2px 10px;
  text-shadow:0 1px 3px rgba(20, 8, 30, 0.55);  /* legibility where the line crosses the sun disc */
  transition:color 160ms linear, text-shadow 160ms linear; }
.h-headliner .ws-navlink.hdl + .ws-navlink.hdl { position:relative; }
.h-headliner .ws-navlink.hdl + .ws-navlink.hdl::before { content:''; position:absolute; left:-2px;
  top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:50%;
  background:color-mix(in srgb, var(--sun) 80%, #fff); opacity:0.7; }
.h-headliner .ws-navlink.hdl:hover, .h-headliner .ws-navlink.hdl.on { color:#fff; background:none;
  text-shadow:0 0 10px color-mix(in srgb, var(--sun) 60%, transparent); }
.h-headliner .ws-hdlside { position:absolute; right:max(24px, calc((100cqw - 1080px) / 2));
  top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; gap:10px; }
.h-headliner .ws-menubtn { display:flex; border-color:rgba(255, 240, 224, 0.4); color:#fff2e2; }
.h-headliner .ws-nav.hdl ~ .ws-hdlside .ws-menubtn { display:none; }

/* ---- cutout sky ---- */
.ws-head.h-cutout { --paper:#c19a63; --band-ink:var(--accent-text, #fff);
  position:relative; display:flex; align-items:center; justify-content:flex-end; gap:20px;
  min-height:calc(78px * var(--density, 1)); border-bottom:none; overflow:visible; z-index:21;
  background:var(--accent2); padding-inline:max(24px, calc((100cqw - 1080px) / 2)); }
@supports (color: lch(from red calc(1 * infinity) 0 0)) {
  .ws-head.h-cutout { --band-ink:lch(from var(--accent2) calc((65 - l) * infinity) 0 0); }
}
.h-cutout .ws-cutmark { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  cursor:pointer; z-index:2; }
.h-cutout .ws-cutmark b { font:700 clamp(20px, 2.6cqw, 32px)/1.1 var(--font-head, var(--font));
  color:var(--band-ink); white-space:nowrap; }
/* a cutout = kraft card with a cut edge (darker outer, lighter inset inner),
   a red pushpin at the top, hung so some straddle the band's bottom edge */
.h-cutout .ws-cut { position:absolute; left:var(--cx); bottom:calc(var(--co) * -1);
  width:var(--cs); height:var(--cs); z-index:2;
  transform-origin:50% 5px; filter:drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
  animation:ws-cutsway 5s var(--cd, 0s) ease-in-out infinite alternate; transition:transform 200ms ease; }
.h-cutout.still .ws-cut { animation:none; }
.h-cutout .ws-cut, .h-cutout .ws-cut b { background:color-mix(in srgb, var(--paper) 62%, #4a3418); }
.h-cutout .ws-cut b { position:absolute; inset:2.5px; background:var(--paper);
  background-image:repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 6px); }
.h-cutout .ws-cut.star, .h-cutout .ws-cut.star b {
  clip-path:polygon(50% 2%, 62% 35%, 97% 37%, 69% 58%, 80% 95%, 50% 72%, 21% 93%, 30% 57%, 4% 36%, 39% 33%); }
.h-cutout .ws-cut.moon, .h-cutout .ws-cut.moon b { border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 72% 32%, transparent 0 44%, #000 47%);
  mask-image:radial-gradient(circle at 72% 32%, transparent 0 44%, #000 47%); }
.h-cutout .ws-cut.cloud, .h-cutout .ws-cut.cloud b { height:calc(var(--cs) * 0.62);
  clip-path:polygon(22% 100%, 6% 88%, 2% 64%, 12% 42%, 30% 34%, 40% 12%, 62% 6%, 78% 18%, 88% 38%, 97% 52%, 96% 76%, 86% 94%, 62% 100%); }
.h-cutout .ws-cut::after { content:''; position:absolute; top:1px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 34% 30%, #ff8d80, #d0362a 62%, #8e1f16); }
.h-cutout .ws-cut.moon::after { left:26%; }
.h-cutout .ws-cut:hover { animation:ws-cutspin 0.9s ease-in-out; }
@keyframes ws-cutspin { to { transform:rotate(360deg); } }
@keyframes ws-cutsway { from { transform:rotate(2deg); } to { transform:rotate(-2deg); } }
.h-cutout .ws-nav.cut { display:flex; gap:6px; }
.h-cutout .ws-navlink.cut { font:700 10.5px var(--font); letter-spacing:0.15em; text-transform:uppercase;
  color:var(--band-ink); opacity:0.82; border-radius:0; }
.h-cutout .ws-navlink.cut:hover, .h-cutout .ws-navlink.cut.on { opacity:1; color:var(--band-ink); background:none; }
.h-cutout .ws-menubtn { display:flex; border-color:color-mix(in srgb, var(--band-ink) 40%, transparent);
  color:var(--band-ink); }
.h-cutout .ws-nav.cut ~ .ws-menubtn { display:none; }

/* ---- statement headers · small containers ---- */
@container site (max-width: 760px) {
  .h-marquee .ws-nav.mrq, .h-sticker .ws-nav.stk, .h-tape .ws-nav.tpe,
  .h-stencil .ws-nav.stn, .h-lantern .ws-nav.lan { display:none; }
  .h-marquee .ws-nav.mrq ~ .ws-menubtn, .h-sticker .ws-nav.stk ~ .ws-menubtn,
  .h-tape .ws-nav.tpe ~ .ws-menubtn, .h-stencil .ws-nav.stn ~ .ws-menubtn,
  .h-lantern .ws-nav.lan ~ .ws-menubtn { display:flex; }
  .ws-head.h-marquee { min-height:74px; }
  .h-marquee .ws-marq { padding:7px 14px 8px; gap:5px; }
  .h-marquee .ws-marq b { font-size:15px; }
  .h-sticker .ws-stkmark { padding:8px 16px 9px; border-width:4px; }
  .h-sticker .ws-stkmark b { font-size:16px; }
  .h-tape .ws-tapemark { padding:8px 22px 9px; }
  .h-tape .ws-tapemark b { font-size:15px; }
  .h-stencil .ws-stnmark b { font-size:20px; letter-spacing:0.1em; }
  .ws-head.h-lantern { min-height:70px; }
  .h-lantern .ws-lanmark b { font-size:17px; }
  .h-lantern .ws-lan { display:none; }
  .h-lantern .ws-lan:nth-child(1), .h-lantern .ws-lan:nth-child(5),
  .h-lantern .ws-lan:nth-child(6) { display:block; }
  .h-neon .ws-nav.neo, .h-deco .ws-nav.dco, .h-cutout .ws-nav.cut { display:none; }
  .h-neon .ws-nav.neo ~ .ws-menubtn, .h-deco .ws-nav.dco ~ .ws-menubtn,
  .h-cutout .ws-nav.cut ~ .ws-menubtn { display:flex; }
  .h-cutout .ws-cutmark b { font-size:17px; }
  .h-cutout .ws-cut { display:none; }
  .h-cutout .ws-cut:nth-of-type(1), .h-cutout .ws-cut:nth-of-type(4),
  .h-cutout .ws-cut:nth-of-type(6) { display:block; }
  .h-neon .ws-neonmark b { font-size:18px; }
  .h-deco .ws-decomark b { font-size:15px; letter-spacing:0.08em; }
  .h-deco .ws-decorule { width:22px; }
  .h-aurora .ws-nav.aur, .h-undertow .ws-nav.tid { display:none; }
  .h-aurora .ws-nav.aur ~ .ws-menubtn, .h-undertow .ws-nav.tid ~ .ws-menubtn { display:flex; }
  .ws-head.h-aurora { min-height:76px; }
  .h-aurora .ws-aurmark b { font-size:17px; letter-spacing:0.1em; }
  .h-aurora .ws-aur { filter:blur(10px); }
  .h-aurora .ws-aur.b { display:none; }
  .ws-head.h-undertow { min-height:72px; }
  .h-undertow .ws-seamark b { font-size:17px; }
  .h-undertow .ws-shaft.b { display:none; }
  .h-floodlight .ws-nav.fld { display:none; }
  .h-floodlight .ws-nav.fld ~ .ws-menubtn { display:flex; }
  .ws-head.h-floodlight { min-height:76px; }
  .h-floodlight .ws-fldmark b { font-size:19px; letter-spacing:0.05em; }
  .h-floodlight .ws-beam.b { display:none; }
  .h-headliner .ws-nav.hdl { display:none; }
  .h-headliner .ws-nav.hdl ~ .ws-hdlside .ws-menubtn { display:flex; }
  .ws-head.h-headliner { min-height:94px; padding-top:12px; padding-bottom:14px; }
  .h-headliner .ws-hdlmark b { font-size:20px; }
  .h-headliner .ws-hdlmark i { font-size:8px; letter-spacing:0.3em; text-indent:0.3em; }
  /* small badge sun: bigger clean crown, slats pushed lower — at this size an even
     split reads as stripes, not a setting sun */
  .h-headliner .ws-hdlsun { --sunw:130px; background-size:100% 58%, 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .h-marquee .ws-marqstrip.t, .h-marquee .ws-marqstrip.bb { animation:none !important; }
  .h-lantern .ws-lan { animation:none; }
  .h-sticker .ws-stkmark { transition:none; }
  .h-stencil .ws-stndrip { animation:none; height:var(--dh, 24px); }
  .h-neon .ws-neonmark b.flick { animation:none; }
  .h-deco .ws-decomark b { animation:none; }
  .h-aurora .ws-aur { animation:none; }
  .h-undertow .ws-shaft { animation:none; }
  .h-undertow .ws-seamark { animation:none; }
  .h-undertow .ws-bub { animation:none; transform:translate(0, var(--by, -30px)); opacity:0.55; }
  .h-floodlight .ws-beam { animation:none; }
  .h-headliner .ws-hdlsun { animation:none; }
  .h-cutout .ws-cut, .h-cutout .ws-cut:hover { animation:none; }
}

/* @@PORT-ANCHOR::fullpage@@ */
/* @@SB04-NAV-PORT-CSS-SLOT@@ ported .h-<slug> CSS blocks insert ABOVE this line. Do not remove until the port sprint is done. */

/* ================= STRUCTURAL STYLE AXES =================
   Pack tokens beyond paint. Two delivery channels:
   1. Fallback-preserving vars, always on — no gate needed:
        --bw       (borderW: hairline weight; every `1px solid var(--hair|--border)`
                    in this file + shell.css reads var(--bw, 1px))
        --density  (spacing multiplier on .ws-sec/.ws-hero/.ws-shead rhythm)
   2. GATED overrides below — land only when the pack claims the axis.
      applyBrandVars sets data-sx="hw ht hc rc" flags on the window root
      (.na-app in the realm, :root in exported bundles) so a pack that
      declares headWeight/headTracking/headCase/radiusCtl owns that axis
      across ALL section variants; packs that don't stay untouched.
   This layer must remain LAST in the file — it wins specificity ties
   against section-variant rules by source order, which is the point. */
.na-app[data-sx~="hw"] .ws-h1, .na-app[data-sx~="hw"] .ws-h2,
:root[data-sx~="hw"] .ws-h1, :root[data-sx~="hw"] .ws-h2 { font-weight:var(--head-weight); }
.na-app[data-sx~="ht"] .ws-h1, .na-app[data-sx~="ht"] .ws-h2,
:root[data-sx~="ht"] .ws-h1, :root[data-sx~="ht"] .ws-h2 { letter-spacing:var(--head-track); }
.na-app[data-sx~="hc"] .ws-h1, .na-app[data-sx~="hc"] .ws-h2,
:root[data-sx~="hc"] .ws-h1, :root[data-sx~="hc"] .ws-h2 { text-transform:var(--head-case); }
.na-app[data-sx~="hl"] .ws-h1, .na-app[data-sx~="hl"] .ws-h2,
:root[data-sx~="hl"] .ws-h1, :root[data-sx~="hl"] .ws-h2 { line-height:var(--head-leading); }
.na-app[data-sx~="bl"] .ws-site :is(p, li, .ws-sub),
:root[data-sx~="bl"] .ws-site :is(p, li, .ws-sub) { line-height:var(--body-leading); }
.na-app[data-sx~="rc"] .ws-btn, .na-app[data-sx~="rc"] .ws-badge,
:root[data-sx~="rc"] .ws-btn, :root[data-sx~="rc"] .ws-badge { border-radius:var(--radius-ctl); }

/* ===== PORT-CSS anchors (approved batch 2/2) — each replaced in-place by its subagent ===== */
/* --- tabbedshowcase (SB_04 approved port · components/sections/tabbed-showcase) --- */
.wsp-tabbedshowcase-approved .tsx-navwrap{ position:relative; margin:0 0 2.4rem; }
.wsp-tabbedshowcase-approved .tsx-navwrap::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--hair); }
.wsp-tabbedshowcase-approved .tsx-nav{ display:flex; gap:2rem; position:relative; z-index:1; overflow-x:auto; scrollbar-width:none; }
.wsp-tabbedshowcase-approved .tsx-nav::-webkit-scrollbar{ display:none; }
.wsp-tabbedshowcase-approved .tsx-tab{ appearance:none; -webkit-appearance:none; background:transparent; border:0; color:var(--faint); font:600 .95rem var(--font); padding:.85rem 0; margin-bottom:-1px; cursor:pointer; position:relative; white-space:nowrap; transition:color .2s ease; }
.wsp-tabbedshowcase-approved .tsx-tab:hover{ color:var(--dim); }
.wsp-tabbedshowcase-approved .tsx-tab.on{ color:var(--ink); }
.wsp-tabbedshowcase-approved .tsx-tab::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent); border-radius:2px; box-shadow:0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); transform:scaleX(0); transform-origin:left center; transition:transform .25s ease; }
.wsp-tabbedshowcase-approved .tsx-tab.on::after{ transform:scaleX(1); }
.wsp-tabbedshowcase-approved .tsx-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }
.wsp-tabbedshowcase-approved .tsx-panels{ position:relative; min-height:280px; }
.wsp-tabbedshowcase-approved .tsx-panel{ display:none; }
.wsp-tabbedshowcase-approved .tsx-panel.on{ display:block; }
.wsp-tabbedshowcase-approved .tsx-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(2rem,5cqw,4rem); align-items:center; }
.wsp-tabbedshowcase-approved .tsx-copy{ display:flex; flex-direction:column; justify-content:center; gap:.55rem; }
.wsp-tabbedshowcase-approved .tsx-label{ font:500 .92rem var(--mono); color:var(--accent); letter-spacing:.02em; }
.wsp-tabbedshowcase-approved .tsx-h3{ margin:0; font:600 clamp(1.4rem,3cqw,1.8rem)/1.3 var(--font-head, var(--font)); color:var(--ink); letter-spacing:-.01em; }
.wsp-tabbedshowcase-approved .tsx-desc{ margin:0; font-size:1.05rem; line-height:1.65; color:var(--dim); max-width:54ch; }
.wsp-tabbedshowcase-approved .tsx-media{ position:relative; border-radius:var(--radius); transition:transform .3s ease, box-shadow .3s ease; }
.wsp-tabbedshowcase-approved .tsx-media:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.3); }
.wsp-tabbedshowcase-approved .tsx-frame{ border:var(--bw, 1px) solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--panel); }
.wsp-tabbedshowcase-approved .tsx-img{ display:block; width:100%; height:auto; object-fit:cover; }
@container site (max-width:900px){
  .wsp-tabbedshowcase-approved .tsx-grid{ grid-template-columns:1fr; gap:2rem; }
  .wsp-tabbedshowcase-approved .tsx-media{ max-width:600px; margin:0 auto; }
  .wsp-tabbedshowcase-approved .tsx-panels{ min-height:0; }
}
@container site (max-width:560px){
  .wsp-tabbedshowcase-approved .tsx-nav{ gap:1.25rem; }
  .wsp-tabbedshowcase-approved .tsx-tab{ font-size:.875rem; }
}
@media (prefers-reduced-motion: reduce){
  .wsp-tabbedshowcase-approved .tsx-tab,
  .wsp-tabbedshowcase-approved .tsx-tab::after,
  .wsp-tabbedshowcase-approved .tsx-media{ transition:none; }
}
/* --- tickerband (SB_04 approved port) — .wsp-tickerband-approved / .tbx-* --- */
.ws-sec.wsp-tickerband-approved{ padding:clamp(34px,5cqw,60px) 0; }
.wsp-tickerband-approved .tbx-stack{ width:100%; }

.wsp-tickerband-approved .tbx-band{ width:100%; overflow:hidden; white-space:nowrap; position:relative;
  padding:0.7rem 0; border-top:var(--bw,1px) solid var(--hair); border-bottom:var(--bw,1px) solid var(--hair); }
.wsp-tickerband-approved .tbx-band + .tbx-band{ border-top:none; }
/* no-border — whole stack (is-noborder) or a single band (.tbx-noborder) */
.wsp-tickerband-approved.is-noborder .tbx-band,
.wsp-tickerband-approved .tbx-band.tbx-noborder{ border-top:none; border-bottom:none; }

.wsp-tickerband-approved .tbx-track{ display:inline-flex; align-items:center; will-change:transform;
  animation:tbx-marquee var(--tbx-dur,30s) linear infinite; animation-direction:var(--tbx-dir,normal); }
/* pause-on-hover (only when the wrapper opts in) */
.wsp-tickerband-approved.is-pause .tbx-band:hover .tbx-track{ animation-play-state:paused; }

.wsp-tickerband-approved .tbx-item{ display:inline-flex; align-items:center; gap:0.55em; padding:0 0.5em;
  flex-shrink:0; font-family:var(--font-head, var(--font)); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.02em; line-height:1; user-select:none;
  color:color-mix(in srgb, var(--ink) 24%, transparent); }
.wsp-tickerband-approved .tbx-item.acc{ color:color-mix(in srgb, var(--accent) 46%, transparent); }

.wsp-tickerband-approved .tbx-dot{ width:0.14em; height:0.14em; border-radius:50%; background:currentColor;
  opacity:0.55; flex-shrink:0; }
.wsp-tickerband-approved .tbx-item.acc .tbx-dot{ background:var(--accent); opacity:0.7;
  box-shadow:0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); }

/* size cascade (cqw so it scales inside any pane) */
.wsp-tickerband-approved .tbx-lg{ font-size:clamp(2.4rem, 7cqw + 0.4rem, 6rem); padding:1.05rem 0; }
.wsp-tickerband-approved .tbx-md{ font-size:clamp(1.7rem, 5cqw + 0.4rem, 4rem); }
.wsp-tickerband-approved .tbx-sm{ font-size:clamp(1.15rem, 3cqw + 0.4rem, 2.6rem); padding:0.55rem 0; }
.wsp-tickerband-approved .tbx-xs{ font-size:clamp(0.85rem, 2cqw + 0.4rem, 1.4rem); padding:0.5rem 0; letter-spacing:0.02em; }

/* speed + direction — band sets the vars, the track reads them */
.wsp-tickerband-approved .tbx-band.tbx-slow{ --tbx-dur:45s; }
.wsp-tickerband-approved .tbx-band.tbx-fast{ --tbx-dur:20s; }
.wsp-tickerband-approved .tbx-band.tbx-crawl{ --tbx-dur:60s; }
.wsp-tickerband-approved .tbx-band.tbx-rev{ --tbx-dir:reverse; }

/* style modifiers — outline / glow / filled */
.wsp-tickerband-approved .tbx-outline .tbx-item{ color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--ink) 42%, transparent); }
.wsp-tickerband-approved .tbx-outline .tbx-item.acc{
  -webkit-text-stroke-color:color-mix(in srgb, var(--accent) 62%, transparent); }
.wsp-tickerband-approved .tbx-glow .tbx-dot{
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); opacity:0.9; }
.wsp-tickerband-approved .tbx-filled{ background:color-mix(in srgb, var(--accent) 7%, transparent); }

@keyframes tbx-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@container site (max-width:560px){
  .ws-sec.wsp-tickerband-approved{ padding:clamp(22px,6cqw,40px) 0; }
  .wsp-tickerband-approved .tbx-item{ gap:0.45em; padding:0 0.42em; }
  .wsp-tickerband-approved .tbx-lg{ padding:0.8rem 0; }
}

@media (prefers-reduced-motion:reduce){
  .wsp-tickerband-approved .tbx-track{ animation-play-state:paused; }
}
/* ============================================================
   TEAM · Team Grid   (.ws-team.v-team-grid)   [SB_04 team-grid]
   Centered grid of circular monogram avatars — name, role, socials.
   Origin --tg-* map to theme tokens (dark = the theme); the origin's
   dark + compact sub-variants fold to theme tokens + an .is-compact
   toggle. Entrance stagger dropped (anims.js owns reveals); the avatar
   hover (accent ring + lift) is kept. Container queries, not viewport
   media. One internal var --tgd-* drives columns; internal prefix .tgd-*.
   ============================================================ */
.ws-team.v-team-grid { --tgd-av:clamp(82px, 8cqw, 112px); --tgd-cols:4; }
.ws-team.v-team-grid.is-compact { --tgd-av:clamp(60px, 5.6cqw, 84px); --tgd-cols:3; }

.ws-team.v-team-grid .ws-shead { max-width:36rem; margin-bottom:clamp(40px, 4.6cqw, 60px); }
.ws-team.v-team-grid .ws-shead .ws-sub { margin-inline:auto; }

.ws-team.v-team-grid .tgd-grid { display:grid; grid-template-columns:repeat(var(--tgd-cols), 1fr);
  gap:clamp(30px, 3.4cqw, 48px) clamp(18px, 2.2cqw, 30px); }

.ws-team.v-team-grid .tgd-card { display:flex; flex-direction:column; align-items:center; text-align:center; }

.ws-team.v-team-grid .tgd-avatar { width:var(--tgd-av); height:var(--tgd-av); border-radius:50%;
  display:grid; place-items:center; overflow:hidden; margin-bottom:16px;
  background:var(--panel-2, var(--panel)); border:2px solid var(--hair);
  transition:border-color .3s ease, transform .3s ease; }
.ws-team.v-team-grid .tgd-card:hover .tgd-avatar { border-color:var(--accent); transform:scale(1.05); }
.ws-team.v-team-grid .tgd-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.ws-team.v-team-grid .tgd-initials { font:600 clamp(18px, 1.9cqw, 24px)/1 var(--font-head, var(--font));
  letter-spacing:.04em; color:color-mix(in srgb, var(--ink) 58%, var(--accent)); }

.ws-team.v-team-grid .tgd-name { font:600 15px var(--font); color:var(--ink); margin-bottom:3px; }
.ws-team.v-team-grid .tgd-role { font:400 12.5px var(--font); color:var(--dim); margin-bottom:11px; }

.ws-team.v-team-grid .tgd-social { display:flex; gap:8px; justify-content:center; }
.ws-team.v-team-grid .tgd-social .ws-social { width:30px; height:30px; border:none; border-radius:50%;
  color:var(--faint); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ws-team.v-team-grid .tgd-social .ws-social:hover { color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.ws-team.v-team-grid .tgd-social .ws-social svg { width:15px; height:15px; }

/* responsive — origin's min-width media, inverted to max-width container queries.
   .is-compact is named on the narrower steps so it ties specificity and stacks too. */
@container site (max-width:900px){
  .ws-team.v-team-grid, .ws-team.v-team-grid.is-compact { --tgd-cols:3; }
}
@container site (max-width:620px){
  .ws-team.v-team-grid, .ws-team.v-team-grid.is-compact { --tgd-cols:2; }
}
@container site (max-width:430px){
  .ws-team.v-team-grid, .ws-team.v-team-grid.is-compact { --tgd-cols:1; }
}

@media (prefers-reduced-motion: reduce){
  .ws-team.v-team-grid .tgd-avatar { transition:none; }
  .ws-team.v-team-grid .tgd-card:hover .tgd-avatar { transform:none; }
}

/* ---- PER-SECTION BACKGROUND (inst.props.bg · secskin.js applyInstanceBg) ----
   The pass writes the band straight onto the section root as an inline style —
   site.css never uses !important on a background, so it simply wins, and these
   classes are hooks rather than the mechanism. What DOES need a rule: a band
   whose own paint was replaced no longer carries the saturated accent the three
   .inverse ink helpers were written for (dark ink on a bright band), so hand
   them back to normal ink or the copy goes invisible. Image bands get the same
   repair: light copy over a (dimmed) photo is the readable default, and the dim
   slider is the contrast control. */
.ws-bgnone .ws-h2.inverse, .ws-bgtone .ws-h2.inverse, .ws-bgimg .ws-h2.inverse { color:var(--ink); }
.ws-bgnone .ws-sub.inverse, .ws-bgtone .ws-sub.inverse, .ws-bgimg .ws-sub.inverse { color:var(--dim); }
.ws-bgnone .ws-btn.inverse, .ws-bgtone .ws-btn.inverse, .ws-bgimg .ws-btn.inverse { background:var(--accent); color:var(--accent-text, #04121a); }
/* copy over a photo needs a little lift off the busy pixels behind it */
.ws-bgimg .ws-h2.inverse, .ws-bgimg .ws-sub.inverse { text-shadow:0 1px 12px rgba(0,0,0,.55); }