/* SYNTAX — Stryke page. Requires tokens.css + base.css
   Polish round: no stat band; one domain palette shared with the lattice; the hero fills the first screen; four section
   openings that differ (head / show-then-tell / plate / heading inside the instrument); audiences open their own manifest. */

.strykepage { --s-mute: #8C8982; /* 5.7:1 on void at 11px */
  /* one colour per domain, shared by the index, the audit trail, the method lanes, the manifests and the hero lattice
     (stryke-lattice.js uses the same eight values). Only the logo's bracket colours and bone: sky, sage and rose are
     cyan, green and red lifted 46% toward bone, never a new hue. Gold is NOT a domain colour: it is a human's sign-off. */
  --d-finance: #4AC0E4; --d-procurement: #6EC1B1; --d-operations: #89BE43; --d-revenue: #E65756;
  --d-public: #95D2E3; --d-governance: #B7D18C; --d-data: #ECE8E1; --d-people: #E99A96; }
[data-d="finance"] { --c: var(--d-finance); } [data-d="people"] { --c: var(--d-people); } [data-d="procurement"] { --c: var(--d-procurement); }
[data-d="operations"] { --c: var(--d-operations); } [data-d="revenue"] { --c: var(--d-revenue); } [data-d="governance"] { --c: var(--d-governance); }
[data-d="public"] { --c: var(--d-public); } [data-d="data"] { --c: var(--d-data); }
.strykepage .section { padding: clamp(88px, 11.5vw, 168px) 0; }
/* display headings: the base .split-line mask clips ascenders and cap-bars at tight leading */
.strykepage h1 .split-line, .strykepage h2 .split-line { padding-top: .16em; margin-top: -.16em; }
/* HUD rows never wrap: one line, ellipsis */
.strykepage .frame .hud { white-space: nowrap; }
.strykepage .frame .hud > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.strykepage .frame .hud .hud-r { flex: none; max-width: 70%; }
@media (max-width: 560px) { .strykepage .frame .hud { left: 24px; right: 24px; } }

/* ---------- 00 hero: a type band, then the lattice fills the rest of the first screen ---------- */
.s-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(14px, 1.7vw, 26px)); }
.s-hero-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(14px, 1.4vw, 20px); align-items: end; }
.s-hero-in .k { grid-column: 1 / -1; align-self: start; }
.s-hero h1 { grid-column: 1 / span 7; font-size: clamp(42px, min(5.6vw, 80px), 80px); line-height: .92; letter-spacing: -.04em; font-variant-ligatures: none; }
.s-hero h1 em { padding-right: .06em; }
.s-hero-side { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); padding-bottom: .55em; }
.s-hero .lede { max-width: 50ch; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }
.s-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .s-ctas { width: 100%; flex-direction: column; align-items: stretch; } .s-ctas .btn { justify-content: space-between; } }
.s-lattice { margin-top: clamp(18px, 2vw, 28px); height: clamp(560px, 68svh, 940px); border-block: 1px solid var(--line);
  background: radial-gradient(circle at 1px 1px, rgba(236, 232, 225, .06) 1px, transparent 1.4px) 0 0 / 26px 26px, var(--ink-0); }
/* desktop: the header is exactly one screen, so the lattice's bottom HUD row always lands on the fold */
@media (min-width: 1181px) {
  .s-hero { display: flex; flex-direction: column; min-height: 100svh; }
  .s-hero-in { flex: none; }
  .s-lattice { flex: 1 1 auto; height: auto; min-height: 440px; }
}
/* laptops: a tighter band (smaller H1, wider lede column, compact buttons) buys the lattice its height */
@media (min-width: 1181px) and (max-height: 940px) {
  .s-hero { padding-top: calc(var(--nav-h) + 4px); }
  .s-hero-in { row-gap: 12px; }
  .s-hero h1 { grid-column: 1 / span 6; font-size: clamp(46px, min(5vw, 8svh), 76px); }
  .s-hero-side { grid-column: 7 / span 6; gap: 14px; padding-bottom: .35em; }
  .s-hero .lede { max-width: 64ch; font-size: clamp(15px, 1.08vw, 17px); text-wrap: balance; }
  .s-hero .s-ctas .btn { --h: 42px; padding: 0 19px; font-size: 14.5px; }
  .s-lattice { margin-top: clamp(14px, 1.6vw, 22px); }
}
/* the lattice runs full-bleed, but its viewfinder and HUD sit on the page grid (the H1's left edge), at every width */
@media (min-width: 901px) {
  .s-lattice { --hud-in: calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter)); }
  .s-lattice > .hud { left: var(--hud-in); right: var(--hud-in); }
  .s-lattice > .c.tl, .s-lattice > .c.bl { left: calc(var(--hud-in) - 22px); }
  .s-lattice > .c.tr, .s-lattice > .c.br { right: calc(var(--hud-in) - 22px); }
  .strykepage .s-lattice.sl-host .sl-root .sl-pre, .strykepage .s-lattice.sl-host .sl-root .sl-count { left: var(--hud-in); }
  .strykepage .s-lattice.sl-host .sl-root .sl-info, .strykepage .s-lattice.sl-host .sl-root .sl-cap { right: var(--hud-in); }
  .strykepage .s-lattice.sl-host .sl-root.m .sl-pre { right: var(--hud-in); }
}
@media (max-width: 1180px) {
  .s-hero-in { display: block; }
  .s-hero h1 { margin-top: 18px; font-size: clamp(40px, 8.4vw, 92px); }
  .s-hero-side { margin-top: 22px; padding-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
  .s-hero .lede { max-width: 54ch; }
  .s-lattice { height: clamp(560px, 72svh, 780px); margin-top: 32px; }
}
@media (max-width: 900px) {
  .s-hero h1 { font-size: clamp(38px, 10.4vw, 72px); }
  .s-hero-side { display: flex; flex-direction: column; align-items: flex-start; margin-top: 20px; }
  .s-hero .lede { font-size: 15.5px; line-height: 1.5; }
  .s-lattice { height: 700px; margin-top: 34px; }
}

/* ---------- 01 the core: eight domains plug into one slab ---------- */
.s-core { margin-top: clamp(56px, 6.5vw, 104px); display: flex; flex-direction: column; }
.s-doms { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: clamp(10px, 1.2vw, 20px); }
.dom { --c: var(--bone); position: relative; display: flex; flex-direction: column; padding: 0 4px 0 clamp(12px, 1.1vw, 18px); border-left: 1px solid var(--line-2); transition: border-color .6s var(--ease-out); }
.dom[data-d="finance"] { --c: var(--d-finance); } .dom[data-d="people"] { --c: var(--d-people); } .dom[data-d="procurement"] { --c: var(--d-procurement); } .dom[data-d="operations"] { --c: var(--d-operations); }
.dom[data-d="revenue"] { --c: var(--d-revenue); } .dom[data-d="governance"] { --c: var(--d-governance); } .dom[data-d="public"] { --c: var(--d-public); } .dom[data-d="data"] { --c: var(--d-data); }
.dom::before { content: ""; position: absolute; left: -4px; top: -1px; width: 7px; height: 7px; background: var(--c); opacity: .5; transition: opacity .5s, box-shadow .6s var(--ease-out); }
.dom.on { border-left-color: var(--c); }
.dom.on::before { opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 20%, transparent); }
.dom-n { margin-top: -3px; color: var(--s-mute); transition: color .5s; }
.dom.on .dom-n { color: var(--c); }
.dom-name { margin-top: 18px; font-size: clamp(20px, 1.78vw, 28px); line-height: 1.04; letter-spacing: -.035em; }
.dom-btn { display: block; max-width: 100%; text-align: left; font: inherit; letter-spacing: inherit; font-variation-settings: inherit; color: var(--bone-3); padding: 3px 0; margin: -3px 0; transition: color .6s var(--ease-out); overflow-wrap: normal; hyphens: none; }
.dom-btn:hover { color: var(--bone-2); }
.dom.on .dom-btn { color: var(--bone); }
.dom-btn:focus-visible { outline-offset: 8px; }
.dom-why { margin-top: 14px; font-size: clamp(13px, .98vw, 15px); line-height: 1.42; color: var(--s-mute); transition: color .6s; text-wrap: balance; }
.dom.on .dom-why { color: var(--bone-2); }
.dom-mods { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 11px; line-height: 1.25; color: var(--s-mute); }
.dom-mods li { position: relative; padding-left: 13px; transition: color .6s; }
.dom-mods li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--bone-4); transition: background .5s, width .5s var(--ease-out); }
.dom.on .dom-mods li { color: var(--bone-2); }
.dom.on .dom-mods li::before { background: var(--c); width: 8px; }
/* the wire that plugs a column into the slab, and the pulse that runs down it when the domain speaks */
.dom-wire { position: absolute; left: -1px; top: 100%; width: 0; height: 72px; border-left: 1px solid var(--line-2); transition: border-color .6s; pointer-events: none; }
.dom-wire::before { content: ""; position: absolute; left: -4px; bottom: -4px; width: 7px; height: 7px; background: var(--ink-0); border: 1px solid var(--line-3); transition: background .5s, border-color .5s; }
.dom.on .dom-wire { border-left-color: var(--c); }
.dom.on .dom-wire::before { background: var(--c); border-color: var(--c); }
.dom-wire::after { content: ""; position: absolute; left: -1.5px; top: -28px; width: 2px; height: 28px; background: linear-gradient(transparent, var(--c)); opacity: 0; box-shadow: 0 0 10px var(--c); }
.dom-wire.fire::after { animation: dom-fire .43s cubic-bezier(.55, 0, .6, 1) forwards; }
@keyframes dom-fire { 0% { opacity: 1; top: -28px; } 85% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 22px); } }
@media (prefers-reduced-motion: reduce) { .dom-wire.fire::after { animation: none; } }

.s-slab-wrap { margin-top: 72px; }
.s-slab { border: 1px solid var(--line-2); padding-top: 46px; background: linear-gradient(180deg, rgba(236, 232, 225, .04), rgba(236, 232, 225, 0) 55%), var(--ink-0); }
.slab-segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 clamp(14px, 1.6vw, 26px); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.seg { position: relative; padding: 18px clamp(12px, 1.6vw, 24px) 20px; min-width: 0; }
.seg + .seg { border-left: 1px solid var(--line); }
.seg::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--bone); opacity: 0; }
.seg.a::before { background: var(--signal); }
.seg-l { color: var(--s-mute); }
.seg-n { margin-top: 12px; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(30px, 3.6vw, 56px); line-height: 1; letter-spacing: -.04em; color: var(--bone-3); transition: color .9s var(--ease-out); }
.seg.a .seg-n { color: #8A7440; }
.seg-v { margin-top: 14px; font: 450 12px/1.3 var(--f-mono); color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.seg.hit { animation: seg-hit 1.5s var(--ease-out); }
.seg.hit .seg-n { animation: seg-n 1.5s var(--ease-out); }
.seg.hit::before { animation: seg-bar 1.5s var(--ease-out); }
.seg.hit .seg-v { animation: seg-v .9s var(--ease-out); }
.seg.hu:not(.a) .seg-v { color: var(--signal); }
@keyframes seg-hit { 0% { background: rgba(236, 232, 225, .12); } 100% { background: rgba(236, 232, 225, 0); } }
.seg.a.hit { animation-name: seg-hit-a; }
@keyframes seg-hit-a { 0% { background: rgba(250, 179, 31, .16); } 100% { background: rgba(250, 179, 31, 0); } }
@keyframes seg-n { 0% { color: var(--bone); } 35% { color: var(--bone); } 100% { color: var(--bone-3); } }
.seg.a.hit .seg-n { animation-name: seg-n-a; }
@keyframes seg-n-a { 0% { color: var(--signal); } 35% { color: var(--signal); } 100% { color: #8A7440; } }
@keyframes seg-bar { 0% { opacity: 1; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes seg-v { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .seg.hit, .seg.hit .seg-n, .seg.hit::before, .seg.hit .seg-v { animation: none; } }

.tape-view { position: relative; padding-top: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.tape-list { margin: 0; padding: 0 clamp(14px, 1.6vw, 26px); display: flex; flex-direction: column; will-change: transform; }
.ev { display: grid; grid-template-columns: 70px 156px minmax(0, 1fr) 96px 62px; gap: 16px; align-items: center; height: 34px; border-bottom: 1px solid var(--line); font: 450 12px/1 var(--f-mono); color: var(--s-mute); transition: opacity .6s var(--ease-out), color .5s; white-space: nowrap; }
.ev > span, .ev > time { overflow: hidden; text-overflow: ellipsis; }
.ev time { font-variant-numeric: tabular-nums; color: var(--s-mute); }
.ev .who { color: var(--s-mute); }
.ev.hu .who { color: var(--signal); }
.ev.hu .who::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px; background: var(--signal); vertical-align: 1px; }
.ev .act { color: var(--bone-2); transition: color .5s; }
.ev .act .dd { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--c); vertical-align: 0; opacity: .9; }
.ev.hit .act { color: var(--c); }
.ev .rec { color: var(--bone-2); text-align: right; }
.ev .hash { text-align: right; color: var(--bone-4); }
.ev.hu .hash { color: var(--signal); }
.ev:not(.still) { animation: ev-in .7s var(--ease-out) backwards; }
@keyframes ev-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ev:not(.still) { animation: none; } }
.s-slab:not([data-focus=""]) .ev:not(.hit) { opacity: .4; }
.slab-note { padding: 14px 32px 18px; color: var(--s-mute); font-size: 10.5px; }

@media (max-width: 1319px) {
  .s-doms { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; column-gap: clamp(14px, 2vw, 28px); }
  .dom-name { font-size: clamp(28px, 3.5vw, 40px); }
  .dom-why { font-size: 15px; }
  .dom-wire { display: none; }
  .s-slab-wrap { margin-top: 56px; }
}
@media (max-width: 1000px) {
  .ev { grid-template-columns: 62px 120px minmax(0, 1fr) 84px; }
  .ev .hash { display: none; }
  .seg-v { font-size: 11px; }
}
@media (max-width: 759px) {
  /* the slab rides along on phones as a pinned strip, so the scroll-spy visibly drives it; it fades out beneath, never clips */
  /* a one-row ticker: four services, then the newest entry only. Lines of the list fade out before they reach it (page JS) */
  .s-slab-wrap { order: -1; position: sticky; top: var(--s-pin-top, calc(var(--nav-h) + 12px)); z-index: 6; margin: 0 0 8px; padding-bottom: 18px; background: linear-gradient(var(--void) calc(100% - 18px), rgba(5, 5, 6, 0)); box-shadow: 0 -14px 0 var(--void); transition: top .5s var(--ease-out); }
  .s-slab { padding-top: 30px; padding-bottom: 16px; }
  .slab-segs { margin: 0 14px; }
  .seg { padding: 9px 4px 10px 9px; }
  .seg-l, .seg-v { display: none; }
  .seg-n { margin-top: 0; font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
  .tape-view { height: 30px; padding-top: 0; display: flex; flex-direction: column; justify-content: flex-end; -webkit-mask-image: none; mask-image: none; }
  .tape-list { flex: none; padding: 0 14px; }
  .ev { grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; height: 30px; font-size: 11px; border-bottom: 0; }
  .ev time, .ev .who, .ev .hash { display: none; }
  .slab-note { display: none; }
  .s-doms { grid-template-columns: 1fr; row-gap: 0; }
  .dom { padding: 24px 0 24px 18px; border-left-color: var(--line-2); }
  .dom + .dom { margin-top: 0; }
  .dom::before { top: 24px; }
  .dom-n { position: absolute; right: 0; top: 26px; margin: 0; }
  .dom-name { margin-top: 0; font-size: clamp(34px, 10.5vw, 46px); }
  .dom-why { margin-top: 10px; font-size: 15.5px; }
  .dom-mods { margin-top: 14px; flex-direction: row; flex-wrap: wrap; gap: 0; line-height: 1.9; }
  .dom-mods li { padding-left: 0; }
  .dom-mods li::before { display: none; }
  .dom-mods li:not(:last-child)::after { content: "/"; margin: 0 .8em; color: var(--bone-4); }
  .dom.on .dom-mods li:not(:last-child)::after { color: var(--c); }
}

/* ---------- 02 agents: show, then tell — the registry opens the section, a sign-off runs down into the gate, and the heading is the gate ---------- */
/* the core hands straight over to the agents: one step (not two section paddings) between the console and the stage */
.strykepage .s-coresec { padding-bottom: 0; }
.strykepage .s-agentsec { padding-top: clamp(56px, 6.4vw, 96px); padding-bottom: clamp(48px, 5vw, 80px); }
.s-stage { position: relative; padding: clamp(26px, 3.2vw, 52px) clamp(14px, 2.6vw, 48px) clamp(22px, 2.6vw, 40px); border: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-0), var(--void)); overflow: hidden; }
.s-stage-grid { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(236, 232, 225, .1) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 40%, #000 15%, transparent 100%); mask-image: radial-gradient(80% 90% at 50% 40%, #000 15%, transparent 100%); }
.s-stage-k { position: relative; display: flex; max-width: 1300px; margin: 0 auto clamp(18px, 2vw, 28px); }
/* the registry: one instrument, content-sized (its rows decide the height); the reserved minimum is its fitted height at each width */
.s-reg { position: relative; max-width: 1300px; min-height: 680px; margin: 0 auto; border: 1px solid var(--line-2); background: rgba(9, 9, 11, .94); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
@media (max-width: 1360px) { .s-reg { min-height: 735px; } }
@media (max-width: 1200px) { .s-reg { min-height: 755px; } }
@media (max-width: 1000px) { .s-reg { min-height: 705px; } }
@media (max-width: 800px) { .s-reg { min-height: 740px; } }
@media (max-width: 760px) { .s-reg { min-height: 900px; } }
@media (max-width: 560px) { .s-reg { min-height: 980px; } }
@media (max-width: 560px) { .s-reg .hud-r { display: none; } }
/* one line from the registry down into the gate's diamond; a gold point runs down it each time a person signs in the registry */
.s-merge { position: relative; max-width: 1300px; height: 64px; margin: 0 auto; }
.s-merge::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--line-3); }
.mg-pulse { position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal); opacity: 0; }
.mg-pulse.fire { animation: mg-fire .8s cubic-bezier(.5, 0, .7, 1) forwards; }
@keyframes mg-fire { 0% { opacity: 0; top: -3px; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 3px); } }
.s-gate.hit::before { animation: gate-hit 1.2s var(--ease-out); }
@keyframes gate-hit { 0% { box-shadow: 0 0 0 5px rgba(250, 179, 31, .5), 0 0 40px rgba(250, 179, 31, .95); } 100% { box-shadow: 0 0 0 5px rgba(250, 179, 31, .15), 0 0 24px rgba(250, 179, 31, .55); } }
@media (prefers-reduced-motion: reduce) { .mg-pulse, .s-gate.hit::before { animation: none; } }

.s-gate { position: relative; max-width: 1300px; margin: 0 auto; border: 1px solid var(--line-3); background: linear-gradient(180deg, rgba(250, 179, 31, .05), rgba(250, 179, 31, 0) 46%), var(--ink-0); padding: clamp(24px, 2.6vw, 40px) clamp(18px, 2.8vw, 48px) clamp(22px, 2.6vw, 40px); }
.s-gate::before { content: ""; position: absolute; left: 50%; top: -6.5px; width: 11px; height: 11px; margin-left: -5.5px; background: var(--signal); transform: rotate(45deg); box-shadow: 0 0 0 5px rgba(250, 179, 31, .15), 0 0 24px rgba(250, 179, 31, .55); }
.s-gate-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(20px, 2.4vw, 34px); align-items: end; padding-bottom: clamp(24px, 2.8vw, 40px); border-bottom: 1px solid var(--line); }
.s-gate-top { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.s-gate-top .t { color: var(--signal); }
.s-gate-top .sample { color: var(--s-mute); }
.s-gate-head h2 { grid-column: 1 / span 7; }
.s-gate-head .lede { grid-column: 8 / span 5; justify-self: end; font-size: clamp(16px, 1.2vw, 19px); }
@media (max-width: 1100px) { .s-gate-head h2, .s-gate-head .lede { grid-column: 1 / -1; justify-self: start; } .s-gate-head .lede { max-width: 52ch; } }
.s-gate-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-gate-list li { padding: 22px 24px 0 0; border-right: 1px solid var(--line); margin-right: 24px; }
.s-gate-list li:last-child { border-right: 0; margin-right: 0; }
.gt-n { color: var(--s-mute); }
.gt-n .num { color: var(--signal); margin-right: 8px; letter-spacing: .1em; }
.s-gate-list h3 { margin-top: 14px; font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -.035em; line-height: 1; }
.gt-ev { margin-top: 16px; display: block; font: 450 11.5px/1.55 var(--f-mono); letter-spacing: .01em; color: var(--bone-2); overflow-wrap: anywhere; }
.gt-ev b { font-weight: 450; color: var(--signal); }
@media (max-width: 1100px) {
  .s-merge { height: 44px; }
  .s-gate-list { grid-template-columns: 1fr; }
  .s-gate-list li { border-right: 0; margin-right: 0; padding: 20px 0 20px; border-bottom: 1px solid var(--line); }
  .s-gate-list li:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 560px) {
  .s-stage { margin-inline: calc(var(--gutter) * -1); border-inline: 0; padding-inline: 14px; }
}

/* ---------- the workspace: a plate, not a chapter — it follows the gate as its proof ---------- */
.s-uisec { position: relative; padding: 0 0 clamp(28px, 3.2vw, 48px); }   /* the pinned frame's own top offset makes up the rest of the step */
.s-plate-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 0 2px 16px; }
.s-plate-h h2.k { color: var(--bone-2); }
.s-plate-hint { color: var(--s-mute); }
.s-ui { height: clamp(720px, 58vw, 860px); border: 1px solid var(--line); }
/* phones: the module sizes itself to its content (fit mode); the page reserves that height up front so nothing jumps when it mounts */
@media (max-width: 800px) { .s-ui { height: auto; min-height: 1039px; } }

/* ---------- 03 method: one system, four moves — pinned, scrubbed by the gold rail; the heading is set inside the instrument ---------- */
.strykepage .s-movesec { padding: 0; }
.s-track { position: relative; height: 430svh; }
.s-pin { position: sticky; top: 0; height: 100svh; min-height: 640px; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 14px) 0 clamp(14px, 2vh, 26px); overflow: clip; }
.s-mscene { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 22px); }
.s-sys { flex: 1; min-height: 360px; border: 1px solid var(--line); background: radial-gradient(circle at 1px 1px, rgba(236, 232, 225, .055) 1px, transparent 1.4px) 0 0 / 24px 24px, var(--ink-0); }
.s-sys canvas { display: block; }
.s-sys .hud .hud-l { color: var(--s-mute); }
.s-sys .s-sys-k { font-weight: 450; color: var(--bone-2); }
.s-sys-h { position: absolute; z-index: 4; left: 32px; right: 32px; top: clamp(34px, 4.4vh, 44px); font-size: clamp(30px, 3.4vw, 54px); line-height: 1; pointer-events: none; }
.s-rail { position: relative; flex: none; height: 11px; margin-top: 2px; }
.s-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line-2); }
.s-rail .fill { position: absolute; left: 0; top: 5px; height: 1px; width: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); box-shadow: 0 0 16px rgba(250, 179, 31, .55); }
.s-rail b { position: absolute; top: 0; width: 11px; height: 11px; border: 1px solid var(--line-3); background: var(--void); transition: background .5s var(--ease-out), border-color .5s, box-shadow .5s; }
.s-rail b.lit { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 6px rgba(250, 179, 31, .14); }
.s-steps { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-step { padding: 8px 28px 0 0; }
.s-num { color: var(--s-mute); transition: color .6s; }
.s-step.active .s-num { color: var(--signal); }
.s-step h3 { margin-top: 8px; font-weight: 300; font-size: clamp(30px, 3.2vw, 52px); letter-spacing: -.04em; line-height: 1; color: var(--bone-3); transition: color .6s var(--ease-out); }
.s-step.done h3 { color: var(--bone-2); }
.s-step.active h3 { color: var(--bone); }
.s-step .body-2 { margin-top: 12px; max-width: 32ch; font-size: 15px; line-height: 1.5; color: var(--s-mute); transition: color .6s; }
.s-step.active .body-2 { color: var(--bone-2); }
@media (max-height: 800px) and (min-width: 761px) { .s-step .body-2 { font-size: 14px; margin-top: 8px; } .s-step h3 { font-size: clamp(28px, 2.8vw, 42px); } .s-sys-h { font-size: clamp(28px, 3vw, 44px); } }
@media (max-width: 760px) {
  .s-track { height: 400svh; }
  .s-pin { min-height: 600px; padding-top: calc(var(--nav-h) + 6px); }
  .s-sys { min-height: 330px; }
  .s-sys-h { left: 24px; right: 24px; top: 36px; font-size: clamp(27px, 7.8vw, 36px); line-height: 1.02; }
  .s-steps { display: block; position: relative; min-height: 148px; }
  .s-step { display: none; padding: 6px 0 0; }
  .s-step.active { display: block; }
  .s-step h3 { font-size: 38px; }
  .s-step .body-2 { max-width: 40ch; }
}

/* reduced motion: no pin, no scrub — the finished system, laid out plainly */
@media (prefers-reduced-motion: reduce) {
  .s-track { height: auto; }
  .s-pin { position: relative; height: auto; min-height: 0; padding-block: calc(var(--nav-h) + 40px) clamp(88px, 11vw, 150px); overflow: visible; }
  .s-sys { flex: none; height: clamp(500px, 46vw, 640px); }
  .s-step { display: block !important; }
}

/* ---------- 04 who it is built for: each audience opens its own sample configuration ---------- */
.strykepage .s-forsec { padding-top: clamp(72px, 8.5vw, 128px); }
.s-for-meta { grid-column: 9 / span 4; justify-self: end; display: flex; flex-direction: column; gap: 9px; padding-bottom: .9em; text-align: right; color: var(--s-mute); }
.s-for-meta span:first-child { color: var(--bone-2); }
@media (max-width: 900px) { .s-for-meta { grid-column: 1 / -1; justify-self: start; text-align: left; padding-bottom: 0; } }
@media (max-width: 560px) { .s-for-meta span + span { display: none; } }   /* phones: the segmented control below is the instruction */
.s-for-pd { display: none; }
.s-for { margin-top: clamp(44px, 5.4vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.s-for-tabs { grid-column: 1 / span 5; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.s-for-tab { position: relative; flex: 1; display: block; text-align: left; padding: clamp(22px, 2.2vw, 30px) 24px clamp(22px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--line); }
.s-for-tab .s-for-k { display: flex; align-items: center; gap: 10px; color: var(--s-mute); transition: color .5s; }
.s-for-tab .s-for-k i { width: 7px; height: 7px; background: var(--s-mute); transition: background .5s, transform .5s var(--ease-out); }
.s-for-tab .s-for-h { display: block; margin-top: 14px; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-stretch: var(--display-stretch); font-size: clamp(32px, 3.2vw, 52px); letter-spacing: -.035em; line-height: 1.02; color: var(--bone-3); text-wrap: balance; transition: color .6s var(--ease-out); }
.s-for-tab .s-for-d { display: block; margin-top: 12px; max-width: 34ch; color: var(--s-mute); font-size: var(--t-body); line-height: 1.55; transition: color .6s; }
.s-for-tab:hover .s-for-h { color: var(--bone-2); }
/* state is colour and the gold bar only: the left edge never moves */
.s-for-tab[aria-selected="true"] .s-for-h { color: var(--bone); }
.s-for-tab[aria-selected="true"] .s-for-d { color: var(--bone-2); }
.s-for-tab[aria-selected="true"] .s-for-k { color: var(--signal); }
.s-for-tab[aria-selected="true"] .s-for-k i { background: var(--signal); transform: rotate(45deg); }
.s-for-tab .bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.s-for-tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; right: 24px; bottom: -1px; height: 1px; background: var(--line-3); }
.s-for-stage { grid-column: 6 / span 7; position: relative; display: flex; }
.s-for-panel { display: none; }
.s-for-panel.on { display: flex; flex: 1; min-width: 0; animation: s-in .8s var(--ease-out) both; }
@keyframes s-in { from { opacity: 0; } to { opacity: 1; } }

/* the manifest: a live config file, read like code */
.s-man { flex: 1; min-width: 0; border: 1px solid var(--line-2); padding: 58px clamp(20px, 2.6vw, 40px) 64px;
  background: linear-gradient(180deg, rgba(236, 232, 225, .03), rgba(236, 232, 225, 0) 40%), radial-gradient(circle at 1px 1px, rgba(236, 232, 225, .045) 1px, transparent 1.4px) 0 0 / 24px 24px, var(--ink-0); }
.s-man .hud .hud-r { color: var(--s-mute); }
.mf { counter-reset: ln; font: 450 12.5px/1.6 var(--f-mono); color: var(--bone-2); letter-spacing: .005em; }
.mf > li { counter-increment: ln; position: relative; display: grid; grid-template-columns: 6.6em minmax(0, 1fr); column-gap: 1.1em; min-height: calc(1.6em + 2 * var(--lp)); padding: var(--lp) 0 var(--lp) 3.6em; }
.mf { --lp: clamp(5px, .62vw, 9px); }
.mf > li::before { content: counter(ln, decimal-leading-zero); position: absolute; left: 0; top: var(--lp); color: var(--bone-4); font-variant-numeric: tabular-nums; }
.mf > li.cm { display: block; color: var(--s-mute); }
.mf .mk { color: var(--s-mute); }
.mf .mv { min-width: 0; color: var(--bone); overflow-wrap: anywhere; }
.mf .mv b { font-weight: 450; color: var(--bone); }
.mf .mv .tk { white-space: nowrap; }
.mf > li.in .mk { padding-left: 1.3em; }
.mf > li.ag .mv { color: var(--bone-2); }
/* the person line is the gold one: sign-off */
.mf > li.hu { background: linear-gradient(90deg, rgba(250, 179, 31, .09), rgba(250, 179, 31, 0) 75%); box-shadow: inset 1.5px 0 0 var(--signal); }
.mf > li.hu .mk, .mf > li.hu .mv, .mf > li.hu .mv b { color: var(--signal); }
.mf > li.hu::before { color: rgba(250, 179, 31, .55); padding-left: 8px; }
.mf .mds { display: grid; grid-template-columns: repeat(2, max-content); gap: 3px 26px; }
.mf .md { color: var(--s-mute); white-space: nowrap; }
.mf .md::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--c); vertical-align: 1px; }
.mf .md b { font-weight: 450; color: var(--bone); }
.mf-foot .mf-sum { color: var(--bone-2); }
.mf-ticks { display: inline-flex; gap: 2px; margin-left: 12px; vertical-align: -1px; }
.mf-ticks i { width: 3px; height: 10px; background: var(--c); }
.s-for-panel.on .mf > li { animation: mf-in .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 38ms + .1s); }
@keyframes mf-in { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) { .s-for-panel.on, .s-for-panel.on .mf > li { animation: none; } }
@media (max-width: 1240px) and (min-width: 901px) { .mf { font-size: 11.5px; } .mf > li { grid-template-columns: 5.8em minmax(0, 1fr); } }
/* up to 900px the audiences are a segmented control pinned above the manifest, so a tap always changes what is in view */
@media (max-width: 900px) {
  .s-for { display: flex; flex-direction: column; margin-top: clamp(28px, 6vw, 44px); }
  .s-for-tabs { position: sticky; top: var(--s-pin-top, calc(var(--nav-h) + 12px)); z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-2); background: var(--void); box-shadow: 0 -14px 0 var(--void), 0 16px 20px -12px rgba(5, 5, 6, .95); transition: top .5s var(--ease-out); }
  .s-for-tab { flex: none; padding: 10px 10px 12px; border-bottom: 0; transition: background .5s var(--ease-out); }
  .s-for-tab + .s-for-tab { border-left: 1px solid var(--line-2); }
  .s-for-tab .s-for-kw, .s-for-tab .s-for-d, .s-for-tab .bar { display: none; }
  .s-for-tab .s-for-k { gap: 8px; font-size: 10px; }
  .s-for-tab .s-for-k i { width: 6px; height: 6px; }
  .s-for-tab .s-for-h { margin-top: 6px; font-family: var(--f-sans); font-weight: 500; font-variation-settings: normal; font-stretch: 100%; font-size: 13px; line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
  .s-for-tab[aria-selected="true"] { background: var(--ink-1); }
  .s-for-tab[aria-selected="true"]::before { left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--signal); }
  .s-for-stage { margin-top: 0; display: block; }
  .s-for-panel.on { display: block; }
  .s-for-pd { display: block; margin: 22px 0 24px; max-width: 42ch; font-size: 15.5px; line-height: 1.5; }
}
@media (max-width: 560px) {
  .s-man { padding: 50px 16px 56px; margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
  .mf { font-size: 11.5px; }
  .mf > li { grid-template-columns: 5.2em minmax(0, 1fr); column-gap: .8em; padding-left: 2.7em; }
  .mf > li.in .mk { padding-left: .8em; }
  .mf .mds { grid-template-columns: 1fr; }
  .mf-ticks { display: none; }
}

/* ---------- CTA: three sample configurations under the spotlight ---------- */
.s-cta { position: relative; isolation: isolate; padding: clamp(120px, 15vw, 230px) 0 clamp(110px, 13vw, 190px); border-top: 1px solid var(--line); overflow: hidden; background: var(--void); }
.s-code { position: absolute; inset: 0 0 58px 0; margin: 0; padding: 26px var(--gutter) 0; overflow: hidden; z-index: 0; font: 450 11.5px/1.95 var(--f-mono); white-space: pre; color: rgba(236, 232, 225, .06); pointer-events: none; user-select: none; -webkit-user-select: none; }
.s-code.lit { color: rgba(236, 232, 225, .62); --mx: 70%; --my: 40%;
  -webkit-mask-image: radial-gradient(circle 280px at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .5) 55%, transparent 100%); mask-image: radial-gradient(circle 280px at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .5) 55%, transparent 100%); }
.s-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(90% 80% at 25% 55%, rgba(5, 5, 6, .78) 0%, rgba(5, 5, 6, .35) 55%, rgba(5, 5, 6, 0) 100%); }
.s-cta-in { position: relative; z-index: 2; }
.s-cta h2 { margin-top: 28px; font-size: clamp(38px, 7.2vw, 124px); line-height: .94; letter-spacing: -.04em; }
.s-cta-foot { margin-top: clamp(36px, 4.5vw, 64px); display: flex; align-items: center; gap: 28px 40px; flex-wrap: wrap; }
.s-cta-hint { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 22px; display: flex; justify-content: space-between; gap: 16px; font-size: 10px; color: var(--s-mute); }
@media (hover: none), (pointer: coarse) { .s-cta-hint .mv { display: none; } }
@media (max-width: 760px) {
  .s-code { font-size: 10px; line-height: 1.9; }
  .s-cta-hint { flex-direction: column; gap: 6px; }
  /* phones have no pointer to steer the spotlight, so the page around the type is held back harder */
  .s-cta::after { background: radial-gradient(130% 80% at 30% 52%, rgba(5, 5, 6, .93) 0%, rgba(5, 5, 6, .74) 58%, rgba(5, 5, 6, .35) 100%); }
  .s-code.lit { color: rgba(236, 232, 225, .5); }
}

/* ---------- footer: the CTA band above already asks, so on this page the footer's contact pill steps back to an outline ---------- */
.strykepage .foot .pitch + p .btn-primary { --h: 40px; padding: 0 18px; font-size: 14px; background: transparent; color: var(--bone-2); border: 1px solid var(--line-2); }
.strykepage .foot .pitch + p .btn-primary:hover { background: transparent; color: var(--bone); border-color: var(--line-3); }

/* ---------- misc ---------- */
.d-only { display: inline; } .m-only { display: none; }
@media (max-width: 700px) { .d-only { display: none; } .m-only { display: inline; } }