/* cybee v3 · css/sections.css · generated by tools/assemble.py (do not edit; edit sections/*.css) */
/* ==== sections/header.css ==== */
/* cybee v3 · header (F0, prefix cyh-). Spec §3 Header. Source: WEB 38 to 59, STA css 26 to 40, js 20 to 43.
   Solid paper with a 1px rule (review taste-08: .94 white over the #0A0A0B night sections read grey, 241). Not glass (TG7 rejected).
   Never changes on scroll. */
.cyh{position:sticky;top:0;z-index:40;box-sizing:border-box;height:var(--pg-header);
  background:var(--s-bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--pg-rule);
  font-family:var(--font-body);color:var(--s-ink)}
.cyh-bar{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px}

/* lockup, wordmark 72, always blue (inline --wordmark) */
.cyh-home{justify-self:start;display:inline-flex;align-items:center;height:44px;border-radius:6px}
.cyh-home .cybee-lockup{pointer-events:none}

/* primary nav: 15px Now Text 400 --s-ink-2, padding 0 12px, full bar height */
.cyh-nav{align-self:stretch}
.cyh-list{display:flex;align-items:stretch;gap:4px;height:100%}
.cyh-list>li{display:flex;align-items:stretch}
.cyh-trigger,.cyh-link{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 12px;border-radius:0;
  font-family:var(--font-body);font-size:15px;font-weight:400;line-height:1;color:var(--s-ink-2);white-space:nowrap;
  transition:color 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.cyh-trigger:focus-visible,.cyh-link:focus-visible{outline-offset:-3px}
.cyh-trigger[aria-expanded="true"]{color:var(--s-ink)}
@media (any-hover:hover){.cyh-trigger:hover,.cyh-link:hover{color:var(--s-ink)}}
/* CSS chevron: a 6×6 box, 1.5px right and bottom border, rotated 45° */
.cyh-chev{flex:none;box-sizing:border-box;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform 180ms var(--ease-out)}
.cyh-trigger[aria-expanded="true"] .cyh-chev{transform:translateY(1px) rotate(225deg)}

/* right side: DE (44px target) · 16px · Start free (40px, radius 10, ink) */
.cyh-end{justify-self:end;display:flex;align-items:center;gap:16px}
.cyh-lang{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 2px;font-size:15px;font-weight:400;color:var(--s-ink-2);transition:color 180ms var(--ease-out)}
.cyh-lang::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
@media (any-hover:hover){.cyh-lang:hover{color:var(--s-ink)}}
.cyh-cta{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:10px;background:#151515;color:#fff;
  font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transition:background-color 180ms var(--ease-out),transform 90ms var(--ease-out)}
.cyh-cta::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.cyh-cta:active{transform:scale(.97)}
@media (any-hover:hover){.cyh-cta:hover{background:#2757C9;color:#fff}}

/* the menus (step 2, 29 Sep 2026, Kristian chose B from qa/options/step2/): one white floating card that morphs between Product,
   Solutions and Resources (CALM-SPEC §4 feel: 80ms open, 150ms close, 40ms aim guard, 180ms fade and scale, 220ms morph done with transforms, FLIP), text only
   items (title and one short line), Solutions in two labelled columns, and one preview on the right of each card. The card (.cyh-pop)
   is made by header.js; each panel floats on it, placed under its button and kept inside the content box. */
.cyh-pop{position:absolute;top:calc(100% + 10px);left:0;width:0;height:0;z-index:41;border-radius:14px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 16px 40px -12px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.04);
  opacity:0;transform-origin:50% 0;pointer-events:none}
.cyh-pop[data-show]{opacity:1}
/* a closed panel is not displayed (never hidden text at rest); it fades in with @starting-style and out with allow-discrete */
.cyh-panel{position:absolute;top:calc(100% + 10px);left:0;z-index:42;display:none;width:max-content;opacity:0;
  transition:opacity 180ms ease,display 180ms ease allow-discrete}
html.js .cyh-group[data-open] .cyh-panel{display:block;opacity:1}
@starting-style{html.js .cyh-group[data-open] .cyh-panel{opacity:0}}
.cyh-panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.cyh-panel-in{box-sizing:border-box;max-width:none;width:auto;margin:0;padding:18px 20px 20px;display:grid;grid-template-columns:auto 232px;column-gap:24px;align-items:start}
.cyh-grid{display:grid;grid-template-columns:repeat(var(--cyh-cols,2),236px);gap:2px 20px}
.cyh-cols{display:grid;grid-template-columns:repeat(2,236px);column-gap:20px}
.cyh-col .cyh-grid{--cyh-cols:1}
.cyh-glabel{margin:0 0 4px;padding:0 0 8px;border-bottom:1px solid var(--pg-rule);font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--s-ink-3)}
.cyh-item{display:block;padding:9px 10px;margin:0 -10px;border-radius:10px;color:var(--s-ink);transition:background-color 180ms var(--ease-out)}
.cyh-item:focus-visible{outline-offset:0}
.cyh-t{display:block;font-size:14px;font-weight:500;line-height:20px;color:var(--s-ink)}
.cyh-d{display:block;margin-top:1px;font-size:13px;font-weight:400;line-height:18px;color:var(--s-ink-3);text-wrap:pretty}
@media (any-hover:hover){.cyh-item:hover{background:var(--s-hover);color:var(--s-ink)}}
/* without JS each menu opens on :hover and :focus-within as its own card */
html:not(.js) .cyh-panel{background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 16px 40px -12px rgba(0,0,0,.2)}
html:not(.js) .cyh-group:hover .cyh-panel,html:not(.js) .cyh-group:focus-within .cyh-panel{display:block;opacity:1}
html:not(.js) .cyh-group:hover .cyh-trigger,html:not(.js) .cyh-group:focus-within .cyh-trigger{color:var(--s-ink)}
@media (max-width:899px){.cyh-pop{display:none}}

/* the preview (one per menu, also at the end of each phone level): the Trust Passport, the one night story, the questionnaire guide.
   Product fixture only (26.09.2026), labelled illustrative. */
.cyh-feat{display:flex;flex-direction:column;gap:10px;box-sizing:border-box;align-self:start;padding:14px;border-radius:10px;background:#F5F5F7;color:var(--s-ink);
  transition:background-color 180ms var(--ease-out)}
@media (any-hover:hover){.cyh-feat:hover{background:#EFEFF2}}
.cyh-feat-k{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--s-ink-3)}
.cyh-feat-l{margin-top:2px;font-size:13px;font-weight:500;line-height:18px;color:#2757C9}
.cyh-feat-t{font-size:14px;font-weight:500;line-height:20px;text-wrap:pretty}
.cyh-feat-img{display:block;overflow:hidden;border-radius:6px;aspect-ratio:3 / 2;background:#E5E5EA}
.cyh-feat-img img{display:block;width:100%;height:100%;object-fit:cover}
.cyh-fp{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.cyh-fp-t{font-size:13px;font-weight:500;line-height:18px}
.cyh-fp-d{margin-top:-4px;font-family:var(--font-mono);font-size:11px;line-height:14px;color:var(--s-ink-3)}
.cyh-fp-r{display:flex;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08);font-size:12px;line-height:16px;color:var(--s-ink-2)}
.cyh-fp-r>span:last-child{font-weight:500;color:var(--s-ink)}
.cyh-fs{display:flex;flex-direction:column;gap:10px}
.cyh-fs-p{font-size:13px;line-height:18px;color:var(--s-ink-2)}
.cyh-fs-t{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:18px}
.cyh-fs-t b{display:inline-block;width:44px;font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--s-ink-3)}

/* phone menu (below 900px, step 2): 60px bar, lockup left, 44px menu button right (bars to X in 160ms); a sheet from the header to the
   bottom that fades in 180ms; Product, Solutions and Resources drill down to their own level with Back (header.js; Stripe's pattern),
   each item with its short line and the menu's preview at the end. Without JS the levels are <details> that open in place. */
.cyh-menu{display:none}
.cyh-burger{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--pg-rule);background:#fff}
.cyh-burger-i,.cyh-burger-i::before{display:block;width:16px;height:1.5px;background:var(--s-ink);transition:transform 160ms cubic-bezier(.25,.46,.45,.94)}
.cyh-burger-i{position:relative;transform:translateY(-3px)}
.cyh-burger-i::before{content:"";position:absolute;left:0;top:6px}
.cyh-menu[open] .cyh-burger-i{transform:translateY(0) rotate(45deg)}
.cyh-menu[open] .cyh-burger-i::before{transform:translateY(-6px) rotate(-90deg)}
.cyh-sheet{position:absolute;left:0;right:0;top:100%;box-sizing:border-box;height:calc(100vh - var(--pg-header) + 1px);height:calc(100dvh - var(--pg-header) + 1px);
  overflow:auto;overscroll-behavior:contain;background:#fff;border-top:1px solid var(--pg-rule)}
html.js .cyh-menu[open] .cyh-sheet{animation:cyh-fade-in 180ms ease}
html.js .cyh-menu.is-closing .cyh-sheet{animation:cyh-fade-out 180ms ease forwards}
@keyframes cyh-fade-in{from{opacity:0}}
@keyframes cyh-fade-out{to{opacity:0}}
.cyh-sheet-in{display:flex;flex-direction:column;padding-block:4px 32px}
.cyh-row{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--pg-rule);font-size:18px;font-weight:500;line-height:1.2;color:var(--s-ink)}
.cyh-acc>summary .cyh-chev{transform:rotate(-45deg)}
.cyh-acc[open]>.cyh-row .cyh-chev{transform:rotate(45deg)}
.cyh-lvl{padding-bottom:16px;border-bottom:1px solid var(--pg-rule)}
.cyh-acc-list{padding:4px 0 8px}
.cyh-sub{display:block;padding:10px 0;color:var(--s-ink)}
.cyh-sub-t{display:block;font-size:17px;font-weight:500;line-height:22px;color:var(--s-ink)}
.cyh-sub-d{display:block;margin-top:2px;font-size:14px;line-height:20px;color:var(--s-ink-3)}
.cyh-lvl-h,.cyh-back{display:none}
html.js .cyh-sheet-in[data-level]>*:not(.cyh-acc[data-active]){display:none}
html.js .cyh-acc[data-active]>summary{display:none}
html.js .cyh-acc[data-active] .cyh-lvl{border-bottom:0}
html.js .cyh-acc[data-active] .cyh-back{display:inline-flex;align-items:center;gap:10px;height:44px;margin:4px 0 0 -2px;padding:0 2px;font-size:16px;line-height:1;color:var(--s-ink-2)}
.cyh-back-i{box-sizing:border-box;width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
html.js .cyh-acc[data-active] .cyh-lvl-h{display:block;margin:8px 0 4px;font-size:28px;font-weight:500;line-height:1.15;letter-spacing:-.02em;color:var(--s-ink)}
.cyh-sheet-cta{margin-top:24px}
@media (max-width:899px){
  .cyh-glabel{margin:16px 0 0;padding-bottom:8px}
  .cyh-feat{margin-top:20px}
  .cyh-feat-l{font-size:14px;line-height:20px}
  .cyh-feat-t{font-size:15px;line-height:21px}
  .cyh-fp-t{font-size:14px;line-height:19px}
  .cyh-fp-r{font-size:13px;line-height:18px}
  .cyh-fs-p,.cyh-fs-t{font-size:14px;line-height:20px}
  .cyh-fs-t b{width:48px}
}

@media (max-width:899px){
  .cyh-bar{grid-template-columns:minmax(0,1fr) auto}
  .cyh-nav,.cyh-lang,.cyh-cta{display:none}
  .cyh-menu{display:block}
  .cyh-end{gap:0}
}

/* review stage-09: the skip link, the first Tab stop; hidden above the viewport until focused (hidden string, not counted) */
.cyh-skip{position:absolute;left:16px;top:-64px;z-index:100;padding:10px 16px;border-radius:10px;background:#151515;color:#fff}.cyh-skip:focus{top:12px}

/* ==== sections/s1-hero.css ==== */
/* cybee v3 · S1 hero (track T1, prefix hero-). Spec: DIRECTION-v3.md §3 S1 and §4 (fig. 01, the Fix, the arrival).
   Every class starts with hero-; shared cy- primitives come from css/foundation.css (never restyled here).
   Sources: SIG 53 to 71 (hero structure), SUR 110 to 124 (the answer card, light host), d.15 hex cells, WEB 92 + 344 (verdict seal).
   Step 1 of the step by step pass (29 Sep 2026; Kristian chose option A, "stage", from three test pages in qa/options/step1/): one
   sentence of lead, the command, the install line (run it in Terminal, a chat, your IDE or a CLI; keep working there), and the window on
   a flat grey stage under the text. The comb, the source line with its drawer, the hint, the tags and the caption row left the hero
   (CALM-SPEC §2 and §3). Before: _cybee-redesign-2026-09-26/snapshots/steps/step1-home-hero-before/.
   Radii used: 0 · 6 · 10 · 14 · 22 · 999. Weights: 400 and 500. Mock sizes carry + var(--pg-mock-bump). */

/* ------------------------------------------------------------------ section frame (step 1: the comb and its scrim left the hero; the one visual
   is the window on its stage). H1 64px at 1440 (Linear and Vercel measure 64), 40px on phones. */
.hero{position:relative;overflow:hidden;background:var(--s-bg);color:var(--s-ink);padding-top:clamp(32px,4svh,56px);--pg-h1:clamp(40px,4.45vw,64px)}
.hero-wrap{position:relative;z-index:2}

/* ------------------------------------------------------------------ the ?from= eyebrow (§6.4): plain text, a 10 × 8.66 Signal hex, 12px to the H1 */
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.4;color:var(--s-ink-2)}
.hero-eyebrow::before{content:"";flex:none;width:10px;height:8.66px;background:#2757C9;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

/* ------------------------------------------------------------------ H1: cols 1 to 11, three block lines, the opening quote hangs */
.hero-h1{max-width:calc(100% - (100% - 11 * var(--pg-gap)) / 12 - var(--pg-gap))}
.hero-line{display:block}
.hero-hang{margin-left:-.42em}
/* review novice-14: below 400px the quote hangs less, so its ink starts 8px or more from the screen edge at 360 */
@media (max-width:399px){.hero-hang{margin-left:-.2em}}

/* ------------------------------------------------------------------ row 2 and the layouts (step 1: the stage hero)
   1280 and wider: the H1 in cols 1 to 7 and the text in cols 8 to 12 share a row (bottoms aligned); the stage runs under both at full
   width. The hero fills the first screen and ends 40px under the fold, so the stage runs past the fold and the proof band sits below
   it (the talk: the Fix row ends at 718px at 1440x790, limit 740). 900 to 1279: the text under the H1, the stage under the text.
   The H1 is trimmed to cap and baseline (foundation), so row gaps are measured from the last baseline. */
.hero-row{margin-top:calc(var(--pg-h1) * .56 + 4px);row-gap:0}
.hero-text{min-width:0}
.hero-figure{margin:0}   /* the UA figure margin goes here, before the layouts below set margin-top */
.hero-lead{max-width:34em;color:var(--s-ink-2)}
.hero-install{margin-top:28px;min-width:0}
.hero-cmd{max-width:100%}
@media (min-width:1280px){
  .hero{padding-top:48px}
  .hero-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--pg-gap);
    min-height:min(calc(100svh - var(--pg-header) - 8px),950px)}   /* 950: the stage stops growing near 720px on tall screens */
  .hero-eyebrow{grid-column:1 / -1;grid-row:1}
  .hero-h1{grid-column:1 / span 7;grid-row:2;align-self:end;max-width:none}
  .hero-row{display:contents}
  .hero-text{grid-column:8 / span 5;grid-row:2;align-self:end}
  .hero-lead{font-size:18px}
  .hero-figure{grid-column:1 / -1;grid-row:3;margin-top:40px;display:flex;align-items:center;justify-content:center;padding:32px}
  .hero-crop{width:min(760px,100%)}
}
@media (min-width:900px) and (max-width:1279px){
  .hero-row{display:block}
  .hero-text{max-width:600px}
  .hero-figure{margin-top:48px;display:flex;justify-content:center;padding:32px}
  .hero-crop{width:min(648px,100%)}
}

/* the install line (step 1, Kristian's note 4): where the line runs, and that you keep going there. 15/1.5 ink 3 with the four
   places in ink 500. The second sentence never breaks inside, so a two line version breaks between the sentences. */
.hero-where{margin-top:14px;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--s-ink-3);text-wrap:pretty}
.hero-where-s{font-weight:500;color:var(--s-ink)}
.hero-where-2,.hero-nb{white-space:nowrap}
/* review stage-12, kept from the old hint: a failed Copy shows "Press Command and C to copy." under the line (no room until then) */
.hero-copyfail{margin-top:6px;font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--s-ink-2);transition:opacity 180ms var(--ease-out)}
.hero:not([data-copy="failed"]) .hero-copyfail{display:none}
@starting-style{.hero[data-copy="failed"] .hero-copyfail{opacity:0}}

/* ------------------------------------------------------------------ proof band (under the first screen) */

.hero-proof{position:relative;z-index:2;margin-top:40px;background:var(--s-bg);border-top:1px solid var(--pg-rule)}
.hero-proof-t{padding:20px 0 23px;font-family:var(--font-mono);font-size:14px;line-height:20px;color:var(--s-ink-3)}
@media (min-width:768px){.hero-proof-i{white-space:nowrap}}

/* ------------------------------------------------------------------ fig. 01 on its stage (step 1): a flat #F2F2F2 well (the 4191 cue) with the
   window (§4.2, native 648px, reflowed, never scaled) in it and "fig. 01 · illustrative" in its top right corner */
.hero-figure{position:relative;min-width:0;box-sizing:border-box;border-radius:14px;background:#F2F2F2}
.hero-stagelabel{position:absolute;top:12px;right:20px;z-index:2;line-height:20px}
.hero-crop{position:relative;z-index:1}
.hero-win{position:relative;container:hero-win / inline-size;overflow:hidden;border-radius:22px;background:#FFFFFF;box-shadow:var(--s-float);
  color:#151515;font-family:var(--font-body);font-size:calc(15px + var(--pg-mock-bump));line-height:1.4;text-align:left}
.hero-bar{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:30px;padding:0 64px;background:#F5F5F7;border-bottom:1px solid rgba(0,0,0,.08)}
.hero-dots{position:absolute;left:14px;top:50%;display:flex;gap:7px;transform:translateY(-50%)}
.hero-dots span{display:block;width:11px;height:11px;border-radius:999px;background:#D1D1D6}
.hero-bar-t{font-size:calc(13px + var(--pg-mock-bump));font-weight:500;line-height:1;color:#6E6E73;white-space:nowrap}
.hero-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 20px 18px}
.hero-bubble{justify-self:end;max-width:90%;box-sizing:border-box;padding:10px 16px;border-radius:14px;background:#F2F2F4;
  font-size:calc(15px + var(--pg-mock-bump));line-height:1.4;color:#151515;text-wrap:pretty}
.hero-tool{justify-self:start;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);font-size:calc(13px + var(--pg-mock-bump));line-height:1;color:#515154;white-space:nowrap}

/* the answer card (SUR 115 to 122, light host; d.4) */
.hero-card{overflow:hidden;border-radius:14px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,.09)}
.hero-card-head{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid rgba(0,0,0,.09)}
.hero-card-name{font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:18px}
.hero-card-time{margin-left:auto;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:18px;color:#6E6E73}
.hero-card-body{display:grid;gap:12px;padding:14px 16px}

/* verdict: 16 × 13.9 sealed Signal hex + 18/500 ink */
.hero-verdict{display:flex;align-items:center;gap:10px;font-size:calc(18px + var(--pg-mock-bump));font-weight:500;line-height:23px;letter-spacing:-.01em}
.hero-verdict-hex{flex:none;display:inline-flex;width:16px;height:13.86px}
.hero-verdict-hex>.cy-hex{--hex-w:16px}

/* stat cells: a hairline grid (T8), radius 0, one line each */
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));gap:1px;margin:0;background:var(--s-line-2)}
.hero-stat{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;padding:9px 12px;background:var(--s-raised)}
.hero-stat dt{font-size:calc(13px + var(--pg-mock-bump));line-height:21px;color:#6E6E73;white-space:nowrap}
.hero-stat dd{position:relative;margin:0;font-size:calc(16px + var(--pg-mock-bump));font-weight:500;line-height:21px;white-space:nowrap}
.hero-val{display:block;font-feature-settings:"tnum"}
/* the digit roll 7 to 8 (built by the script, aria-hidden, removed after 380ms) */
.hero-roll{position:absolute;top:0;overflow:hidden;background:var(--s-raised);pointer-events:none}
.hero-roll-col{display:block;will-change:transform}
.hero-roll-col>span{display:block;text-align:center;font-feature-settings:"tnum"}

/* the open item: ember rule · line + sub · plan label · Fix (34px, radius 10, 44px hit area) */
.hero-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(0,0,0,.09);border-bottom:1px solid rgba(0,0,0,.09)}
.hero-mark{flex:none;display:grid;place-items:center;width:14px;height:12.12px}
.hero-mark>*{grid-area:1 / 1;display:flex}
.hero-mark-rule{width:14px;height:3px;background:#FF6B2B}
/* review stage-13: stage only, the one ember mark is 16 x 4 so it survives the projector (the words still carry the meaning) */
html[data-stage="1"] .hero-mark-rule{width:16px;height:4px}
.hero-mark .cy-hex{--hex-w:14px}
.hero-item-text{flex:1 1 auto;min-width:0}
.hero-item-line{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;line-height:20px;text-wrap:balance}
.hero-item-sub{font-size:calc(13px + var(--pg-mock-bump));line-height:18px;color:#515154}
.hero-item-act{flex:none;display:flex;align-items:center;gap:12px}
.hero-plan{font-size:calc(13px + var(--pg-mock-bump));line-height:18px;color:#6E6E73;white-space:nowrap}
.hero-fix{position:relative;box-sizing:border-box;display:inline-grid;grid-template-columns:minmax(0,1fr);place-items:center;height:34px;padding:0 14px;border-radius:10px;width:var(--hero-fix-w0,auto);
  background:#2757C9;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap;
  cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hero-fix::before{content:"";position:absolute;left:-4px;right:-4px;top:-5px;bottom:-5px}
.hero-fix-l{grid-area:1 / 1;justify-self:center;max-width:100%;overflow:hidden}
.hero-fix:active{transform:scale(.97)}
.hero-fix[aria-disabled="true"]{cursor:default}
.hero-fix[aria-disabled="true"]:active{transform:none}
@media (any-hover:hover){.hero-fix:not([aria-disabled="true"]):hover{background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1))}}
html:not(.js) .hero-fix .hero-w{display:none}

/* record row: SF Mono 13 left, link 14/500 Signal right */
.hero-rec{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;line-height:20px}
.hero-rec-id{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));color:#6E6E73;white-space:nowrap}
.hero-rec-id .hero-swap{display:inline-grid;vertical-align:top}
.hero-rec-link,.hero-rec-link:hover{position:relative;margin-left:auto;font-size:calc(14px + var(--pg-mock-bump));font-weight:500;color:#2757C9;white-space:nowrap;text-underline-offset:4px;text-decoration-thickness:1px}
.hero-rec-link::before{content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px}
@media (any-hover:hover){.hero-rec-link:hover{text-decoration-line:underline}}

/* the window reflows below 560px of its own width (§4.2): the bubble wraps, stats stack, Fix moves to a second row */
@container hero-win (max-width:559px){
  .hero-stat{flex-direction:column;align-items:flex-start;gap:0}
  .hero-item{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
  .hero-mark{margin-top:4px}
  .hero-item-text{flex:1 1 0}
  .hero-item-act{flex:1 0 100%;justify-content:flex-end}
  /* review novice-11: once the plan label and Fix have faded, their emptied second row goes (no blank band above the record row).
     With JS the script adds .hero--settled 200ms after done (after the 180ms fade); without JS the checked box does it. */
  .hero--settled .hero-item-act{display:none}
  html:not(.js) #cy-fix:checked~.hero .hero-item-act{display:none}
}
/* phone widths: 16px body padding (§4.2) and tighter gaps so the Fix row stays inside the solid part of the 500px crop */
@container hero-win (max-width:420px){
  .hero-body{padding:16px;gap:8px}
  .hero-bubble{padding:9px 14px}
  .hero-card-head{padding:10px 14px}
  .hero-card-body{padding:12px 14px;gap:10px}
  .hero-stat{padding:8px 10px}
  .hero-stat dt{line-height:17px}
  .hero-stat dd{line-height:20px}
  .hero-item{padding:8px 0;row-gap:6px}
}

/* ------------------------------------------------------------------ the Fix states (§4.4)
   default = open (117 of 118) · #cy-fix:checked = after (works with JS off) · #cy-main[data-fix="waiting"] = the 1200ms wait, wins over checked.
   hero-o open only · hero-w waiting only · hero-b before (open and waiting) · hero-a after only · hero-late starts 200ms later (the 1400ms beat) */
.hero-swap{display:grid}
.hero-swap>*{grid-area:1 / 1}
.hero-o,.hero-w,.hero-b,.hero-a{transition:opacity 180ms var(--ease-out) var(--hd,0ms),visibility 0s linear var(--hv,0ms)}
.hero-w,.hero-a{opacity:0;visibility:hidden}
#cy-fix:checked~.hero .hero-o,#cy-fix:checked~.hero .hero-w,#cy-fix:checked~.hero .hero-b{opacity:0;visibility:hidden;--hd:0ms;--hv:180ms}
#cy-fix:checked~.hero .hero-a{opacity:1;visibility:visible;--hd:0ms;--hv:0ms}
#cy-fix:checked~.hero .hero-b.hero-late{--hd:200ms;--hv:380ms}
#cy-fix:checked~.hero .hero-a.hero-late{--hd:200ms;--hv:200ms}
#cy-main[data-fix="waiting"] .hero .hero-o{opacity:0;visibility:hidden;--hd:90ms;--hv:270ms}
#cy-main[data-fix="waiting"] .hero .hero-w{opacity:1;visibility:visible;--hd:90ms;--hv:90ms}
#cy-main[data-fix="waiting"] .hero .hero-b{opacity:1;visibility:visible;--hd:0ms;--hv:0ms}
#cy-main[data-fix="waiting"] .hero .hero-a{opacity:0;visibility:hidden;--hd:0ms;--hv:0ms}
/* the button: its fade (hero-b), the press and the hover. Its width follows the label (Fix, then Asking Mira) without animating
   a layout property: the box takes the new width at once, then the pill opens leftwards (clip-path), the labels and the plan label
   glide from where they were (transform), 180ms after the first 90ms. --hero-fix-dw is w1 minus w0, set on .hero-item-act by the JS. */
.hero-item-act .hero-fix{transition:opacity 180ms var(--ease-out) var(--hd,0ms),visibility 0s linear var(--hv,0ms),transform 90ms var(--ease-out)}
#cy-main[data-fix="waiting"] .hero .hero-fix,#cy-fix:checked~.hero .hero-fix{width:var(--hero-fix-w1,auto)}
html.js #cy-main[data-fix="waiting"] .hero .hero-fix{animation:heroFixOpen 180ms var(--ease-out) 90ms backwards}
html.js #cy-main[data-fix="waiting"] .hero .hero-fix-l{animation:heroFixCentre 180ms var(--ease-out) 90ms backwards}
html.js #cy-main[data-fix="waiting"] .hero .hero-plan{animation:heroFixPlan 180ms var(--ease-out) 90ms backwards}
@keyframes heroFixOpen{from{clip-path:inset(0 0 0 var(--hero-fix-dw,0px) round 10px)}to{clip-path:inset(0 round 10px)}}
@keyframes heroFixCentre{from{transform:translateX(calc(var(--hero-fix-dw,0px) / 2))}to{transform:none}}
@keyframes heroFixPlan{from{transform:translateX(var(--hero-fix-dw,0px))}to{transform:none}}
/* the seal is played by cyMotion at 1200ms, so its host appears at once (with JS); without JS it crossfades */
html.js .hero-mark-seal{transition:none}
/* reduced motion and ?motion=still: the after state at once, no beats */
@media (prefers-reduced-motion:reduce){.hero-o,.hero-w,.hero-b,.hero-a,.hero-fix{transition-delay:0s!important}.hero-fix,.hero-fix-l,.hero-plan{animation:none!important}}
html[data-reduced-motion="true"] .hero-o,html[data-reduced-motion="true"] .hero-w,html[data-reduced-motion="true"] .hero-b,
html[data-reduced-motion="true"] .hero-a,html[data-reduced-motion="true"] .hero-fix{transition-delay:0s!important}
html[data-reduced-motion="true"] .hero-fix,html[data-reduced-motion="true"] .hero-fix-l,html[data-reduced-motion="true"] .hero-plan{animation:none!important}

/* ------------------------------------------------------------------ below 900: one column; the text, then the stage with the window */
@media (max-width:899px){
  .hero-row{display:flex;flex-direction:column}
  .hero-figure{margin-top:40px;padding:32px 24px}
  .hero-crop{max-width:648px;margin-inline:auto}
  .hero-proof{margin-top:32px}
}

/* ------------------------------------------------------------------ phones (below 768, C3): the first screen lands the whole idea */
@media (max-width:767px){
  .hero{padding-top:20px}
  .hero-h1{max-width:none}
  .hero-row{margin-top:20px}
  .hero-row{flex-direction:row;flex-wrap:wrap;column-gap:0}
  .hero-row>*,.hero-text>*{flex:0 0 100%;min-width:0}
  .hero-text{display:contents}
  .hero-lead--phone{order:1;font-family:var(--font-body);font-size:16px;line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
  .hero-install{order:2;position:relative;z-index:1;margin-top:14px}
  .hero-send{height:48px;font-size:16px}
  .hero-send-note{margin-top:6px;font-size:14px;line-height:20px;letter-spacing:-.01em;color:var(--s-ink-2)}
  .hero-cmd{margin-top:8px;width:100%}
  .hero-where{margin-top:10px;font-size:14px;line-height:20px}
  /* the stage runs edge to edge; the window reflows at full width and is cropped at 500px (solid to 88%) */
  .hero-figure{order:5;flex:0 0 auto;width:calc(100% + 2 * var(--pg-gutter));margin-top:24px;margin-inline:calc(-1 * var(--pg-gutter));padding:40px var(--pg-gutter) 0;border-radius:0;box-shadow:none}
  .hero-stagelabel{top:10px;right:var(--pg-gutter)}
  .hero-proof{margin-top:32px}
  .hero-proof-t{padding:16px 0 20px}
  .hero-crop{margin-inline:calc(-1 * var(--pg-gutter));padding:1px var(--pg-gutter) 0;margin-top:-1px;max-height:500px;overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
}

/* ==== sections/s2-night.css ==== */
/* cybee v3 · S2 One night (track T2, prefix night-). Spec: DIRECTION-v3.md §3 S2, §5 (S2 front), §2.7 (night inks).
   Ground: night #0A0A0B via .cy-night. Only blue text here: 08:00 in #85A7FF. The travelling front is CSS (cy-motion.js reads
   --accent from the root, so a night colour cannot be passed to cyMotion 'front').
   States of .night-line[data-front]:
     (none)   the HTML state = the settled state: four stops lit #85A7FF, the 28×3 front hidden (absorbed at 08:00, review taste-12).
              Used with JS off, under reduced motion / ?motion=still, and after the front has played.
     "ready"  set by s2-night.js when motion is allowed: stops #5E5E63 at rest, front hidden at the first stop.
     "play"   set once at 40% visible: the front travels 620ms cubic-bezier(.22,0,0,1), then fades over 180ms; stops light at 0, 207, 413, 620ms.
   Geometry: the rail is the top edge of the timeline; each cell's 1px left rule meets it, and the 7px stop sits centred on
   that junction. Cells are 3 of 12 columns (2 of 8), so the cell pitch is (W + gap) / 4 and the front travels
   3 × pitch − 21px (stop 1 left edge to stop 4 right edge), written with container units so it holds at every width. */

.night{--night-rest:#5E5E63;--night-stop:#85A7FF}

/* heading block on the section grid */
.night-kicker{grid-column:1 / span 4;margin-bottom:var(--space-4)}
.night-h2{grid-column:1 / span 9}
.night-l{display:block}
.night-setup{grid-column:1 / span 8;margin-top:var(--space-6);font-family:var(--font-display);font-size:clamp(22px,2.2vw,32px);font-weight:500;
  line-height:1.25;letter-spacing:-.03em;color:var(--pg-night-ink);text-wrap:pretty}

/* the setup line is read aloud: one sentence per line from 768px up */
@media (min-width:768px){.night-s{display:block}}

/* the timeline */
.night-line{grid-column:1 / -1;position:relative;margin-top:var(--pg-title-gap);container-type:inline-size}
.night-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--pg-night-rule)}
.night-list{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap)}
.night-cell{position:relative;grid-column:span 3;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  min-width:0;padding:32px 0 4px 24px;border-left:1px solid var(--pg-night-hair)}
/* the stop: 7px square centred on the junction of the cell rule (x 0..1) and the rail (y 0..1) */
.night-cell::before{content:"";position:absolute;left:-4px;top:-3px;width:7px;height:7px;background:var(--night-stop)}
.night-time{display:block;font-family:var(--font-display);font-size:clamp(40px,5.5vw,56px);font-weight:500;line-height:1;letter-spacing:-.045em;
  color:var(--pg-night-ink);white-space:nowrap}
.night-cell--sent .night-time{color:var(--pg-lift)}
.night-what{display:block;font-size:18px;line-height:1.4;color:var(--pg-night-2)}
.night-front{--night-front-end:translateX(calc(75cqw + .75 * var(--pg-gap) - 21px));position:absolute;left:-3px;top:-1px;width:28px;height:3px;
  background:var(--night-stop);pointer-events:none;transform:var(--night-front-end);opacity:0}
/* review taste-12: the bar is absorbed at 08:00. It shows only while it travels, then fades over 180ms; every settled state (JS off,
   reduced motion, ?motion=still, after the play) hides it, and the four lit stops carry the result. */
@keyframes night-front-go{
  0%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.22,0,0,1)}
  77.5%{opacity:1;transform:var(--night-front-end);animation-timing-function:var(--ease-out)}
  100%{opacity:0;transform:var(--night-front-end)}
}

/* closing lines */
.night-close{grid-column:1 / span 8;margin-top:var(--space-6);font-family:var(--font-display);font-size:clamp(22px,2.2vw,32px);font-weight:500;
  line-height:1.25;letter-spacing:-.03em;color:var(--pg-night-ink);text-wrap:pretty}
.night-answer{grid-column:1 / span 7;margin-top:var(--space-4);color:var(--pg-night-ink)}
.night-label{grid-column:1 / -1;margin-top:16px}

/* the front, played once (s2-night.js) */
.night-line[data-front="ready"] .night-cell::before{background:var(--night-rest)}
.night-line[data-front="ready"] .night-front{opacity:0;transform:none}
.night-line[data-front="play"] .night-front{animation:night-front-go 800ms both}
.night-line[data-front="play"] .night-cell::before{transition:background-color 120ms linear}
.night-line[data-front="play"] .night-cell:nth-child(2)::before{transition-delay:207ms}
.night-line[data-front="play"] .night-cell:nth-child(3)::before{transition-delay:413ms}
.night-line[data-front="play"] .night-cell:nth-child(4)::before{transition-delay:620ms}
/* reduced motion switched on after the timeline was armed: land on the lit state at once (base.css zeroes durations, not delays) */
@media (prefers-reduced-motion:reduce){.night-line[data-front] .night-front,.night-line[data-front] .night-cell::before{transition:none!important;animation:none!important;opacity:0}}
html[data-reduced-motion="true"] .night-line[data-front] .night-front,html[data-reduced-motion="true"] .night-line[data-front] .night-cell::before{transition:none!important;animation:none!important}
html[data-reduced-motion="true"] .night-line[data-front] .night-front{opacity:0}

/* 520 to 899px: 8 columns */
@media (max-width:899px){
  .night-kicker,.night-h2,.night-setup,.night-close,.night-answer{grid-column:1 / -1}
  .night-setup,.night-close{max-width:30em}
  .night-answer{max-width:36em}
  .night-cell{grid-column:span 2}
}

/* phones: four ruled rows on a vertical rail; the front travels down it.
   Rows are exactly 64px, so the stops sit at 64px steps and the front travels 3 × 64 − 21 = 171px. */
@media (max-width:767px){
  .night-line::before{left:3px;right:auto;top:var(--night-stop-y);bottom:0;width:1px;height:auto}
  .night-line{--night-stop-y:24px}                     /* stop centre 27.5px = the cap centre of the 40px times (measured) */
  .night-list{display:block}
  .night-cell{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:baseline;align-content:center;column-gap:16px;height:64px;
    padding:0 0 0 28px;border-left:0}
  .night-cell+.night-cell::after{content:"";position:absolute;left:28px;right:0;top:0;height:1px;background:var(--pg-night-hair)}
  .night-cell::before{left:0;top:var(--night-stop-y)}      /* labels share one column: the widest time (08:00) is 118px at 40px */
  .night-time{font-size:40px}
  .night-what{font-size:16px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:clip}
  .night-front{--night-front-end:translateY(171px);left:2px;top:var(--night-stop-y);width:3px;height:28px}
  .night-line[data-front="ready"] .night-front{transform:none}
}
@media (max-width:519px){
  .night-setup,.night-close{margin-top:32px}
  .night-close{margin-top:40px}
}

/* ==== sections/s3-does.css ==== */
/* cybee v3 · S3 What it does (prefix does- and hw-). Step 5 of the step by step pass (29 Sep 2026; Kristian chose A, the 4191 bento,
   from qa/options/step5/): the heading at the 4191 scale, then Protect as one wide card and Fix and Prove as halves; white cards
   (radius 14, hairline) on the grey ground, 24px gaps; each card: the plan tag, a one word title, the approved sentence and one product
   picture on a flat #F2F2F2 well labelled illustrative (Protect: the stopped program alert, the same card as the menu bar section;
   Fix: fig. 02, the check rows, still bound to the hero Fix; Prove: the Trust Passport in small, the S4 numbers). No drawers, no
   buttons, no gestures (the lattice and the seal left with s3-does.js). Before: _cybee-redesign-2026-09-26/snapshots/steps/
   step5-how-before/. The 137 patterns and the CIS Benchmark detail stay on /product, /docs/hardening and in the FAQ. */

.does.hw{background:var(--s-raised)}
.hw-h2{max-width:22em;font-size:clamp(30px,3.1vw,44px);line-height:1.05;margin-bottom:48px}
.hw-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.hw-card{display:flex;flex-direction:column;gap:24px;box-sizing:border-box;padding:32px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(22,23,26,.08)}
.hw-card--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.hw-text{display:flex;flex-direction:column;gap:12px}
.hw-tags{margin:0}
.hw-title{font-family:var(--font-body);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--s-ink)}
.hw-body{max-width:34em;font-size:16px;line-height:1.65;color:var(--s-ink-2);text-wrap:pretty}
.hw-well{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:230px;box-sizing:border-box;padding:28px 24px 34px;border-radius:10px;background:#F2F2F2}
.hw-well--fix{container:does-fix / inline-size}
.hw-il{position:absolute;right:12px;bottom:10px;font-family:var(--font-mono);font-size:11px;color:var(--s-ink-3)}
.hw-mcard.cy-mcard{position:relative;right:auto;bottom:auto;width:352px;max-width:100%;min-width:0;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 44px -18px rgba(0,0,0,.28)}
.hw-well .does-checks{box-sizing:border-box;width:min(380px,100%);padding:4px 16px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.hw-pass{width:min(300px,100%);display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.hw-pass-k{font-family:var(--font-mono);font-size:12px;color:var(--s-ink-3)}
.hw-pass-t{font-size:15px;font-weight:500;line-height:1.3;color:var(--s-ink)}
.hw-pass-d{margin-top:-4px;font-family:var(--font-mono);font-size:12px;color:var(--s-ink-3)}
.hw-pass-r{display:flex;justify-content:space-between;gap:8px;padding-top:7px;border-top:1px solid rgba(0,0,0,.08);font-size:13px;color:var(--s-ink-2)}
.hw-pass-r>span:last-child{font-weight:500;color:var(--s-ink)}
@media (max-width:1019px){.hw-card--wide{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.hw-bento{grid-template-columns:minmax(0,1fr)}.hw-card{padding:24px}.hw-well{min-height:200px;padding:24px 16px 32px}}

/* fig. 02: the check rows (fixture), kept from the cell grid. Rows of 36px on a subgrid; the mono column hides below 340px. */
.does-checks{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px}
.does-row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;box-sizing:border-box;height:36px}
.does-row+.does-row{border-top:1px solid var(--pg-hair)}
.does-row__label{min-width:0;font-size:calc(14px + var(--pg-mock-bump));font-weight:400;line-height:1.25;color:var(--s-ink);text-wrap:balance}
.does-row__name{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.3;color:var(--s-ink-3);white-space:nowrap}
.does-row__state{display:inline-flex;align-items:center;font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:1.3;color:var(--s-ink);white-space:nowrap}
.does-row__state>.cy-hex,.does-row__state .cy-hex{margin-right:8px}
.does-figlabel{display:block}
@container does-fix (max-width:339.98px){
  .does-checks{grid-template-columns:minmax(0,1fr) auto}
  .does-row__name{display:none}
}
/* before / after the hero Fix: the after strings are in the HTML; the checkbox shows them, the 1200ms waiting beat keeps "before" */
.does-before,.does-after{display:inline-flex;align-items:center}
.does .does-after{display:none}
#cy-fix:checked ~ .does .does-before{display:none}
#cy-fix:checked ~ .does .does-after{display:inline-flex}
#cy-main[data-fix="waiting"] > #cy-fix:checked ~ .does .does-before{display:inline-flex}
#cy-main[data-fix="waiting"] > #cy-fix:checked ~ .does .does-after{display:none}


/* the plan tags, kept */
.does-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.does-tag{height:auto;min-height:28px;padding:5px 8px;font-weight:500;line-height:18px;white-space:normal;text-wrap:balance}   /* 246px for the plan tag, so one line from 1020px up; wraps (balanced) only in 900 to 1019px cells */

/* ==== sections/s4-passport.css ==== */
/* cybee v3 · S4 The Trust Passport (track T3, prefix pass-). Spec: DIRECTION-v3.md §3 S4.
   Ground: iris tint. fig. 03 is a square paper page (radius 0, hairline, no shadow, no pattern behind it, R6).
   The ridge lives in its own paper strip beside the paper and is mounted at 900px and wider only (hide, never squeeze).
   Layouts: 1280 and wider = the 1440 frame (stamp 1-3 · paper 4-8 · col 9 empty · ridge 10-12)
            900 to 1279  = the 1024 frame (stamp 1-3 · paper 4-9 · ridge 10-12, paper padding 28)
            below 900    = one column: stamp as one line, then the paper (max 560 wide), no ridge
            below 768    = the phone paper: padding 20, stats 13/18, the ledger's 90 days as 3 rows of 30, table 14px.
   The paper is a size container: where its text column is under 440px (the 1024 frame) the title steps to 28px so
   "Four Macs. Every check holds." stays on one line, the stat values to 20px, and the block gap to 16px.
   Contrast on the iris tint (#F3EFFF): --s-ink-3 measures 4.49:1 and --s-fade 2.89:1, so small text on the tint uses
   --s-ink-2 and the H2 fade uses --s-ink-3 (the value DS SLD 126 uses for a fade on this ground; also the ?stage=1 value). */

.pass{background:var(--s-tint-iris)}

/* ---------------------------------------------------------------- heading */
.pass-kicker{grid-column:1/-1;margin-bottom:24px;color:var(--s-ink-2)}
.pass-h2{grid-column:1/span 10}
.pass-h2-a,.pass-fade{display:block}
.pass-fade{color:var(--s-ink-3)}

/* ---------------------------------------------------------------- the row: stamp (cols 1-3) · set (cols 4-12)
   The set is its own 9 column grid (the page columns 4 to 12, same gap, so the same lines): row 1 holds only the figure
   label, row 2 the paper and the ridge strip (top aligned, same height). The stamp is top aligned with the paper (review taste-04).
   Keeping the stamp out of the set means an open no JS drawer can grow the stamp without stretching the ridge strip. */
.pass-row{margin-top:var(--pg-title-gap);align-items:end}

.pass-stamp{grid-column:1/4;align-self:start;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* review taste-04: the stamp's top is level with the paper's top edge (the set's first row is the figure label, 13px x 1.4 + 12px gap),
   so the iris rule, Dated. Sealed. Sent. and the chip sit beside the paper's lockup row in the anchor view */
@media (min-width:900px){.pass-stamp{margin-top:calc(13px * 1.4 + 12px)}}
.pass-rule{display:block;width:24px;height:3px;background:#794DFF}
.pass-stamp-t{margin-top:24px;font-family:var(--font-body);font-size:24px;font-weight:500;letter-spacing:-.022em;line-height:1.3;color:var(--s-ink)}
.pass-stamp-t>span{display:block}
.pass-more{margin-top:32px;max-width:100%}
/* the chip keeps the cy-chip look; it may wrap to two lines where the stamp column is narrow (212px at 1024) */
.pass-chip{height:auto;min-height:40px;padding-block:10px;line-height:1.3;text-align:left}

.pass-set{grid-column:4/13;align-self:start;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:auto auto;column-gap:var(--pg-gap);row-gap:12px;min-width:0}
.pass-fig{grid-column:1/6;grid-row:1/3;display:grid;grid-template-rows:subgrid;margin:0;min-width:0}
.pass-figlabel{grid-row:1;align-self:end;color:var(--s-ink-2)}

/* review taste-04: the ridge draws straight on the iris tint (SLD 126 to 140), not in an empty white box; with no JS the strip is empty tint */
.pass-ridge{grid-column:7/10;grid-row:2;align-self:stretch;position:relative;min-width:0;background:none;border-radius:0;box-shadow:none}
.pass-ridge-cv{position:absolute;top:1px;left:1px;display:block;width:calc(100% - 2px);height:calc(100% - 2px)}

@supports not (grid-template-rows:subgrid){
  .pass-fig{display:flex;flex-direction:column;gap:12px}
  .pass-ridge{grid-row:1/3;margin-top:calc(13px * 1.4 + 12px)}
}

/* ---------------------------------------------------------------- the paper (fig. 03, fixture 26.09.2026)
   aspect-ratio is the page's proportion; content that needs more height extends it (min-height:auto), never clips. */
.pass-paper{--pass-gap:22px;grid-row:2;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--pass-gap);min-width:0;aspect-ratio:1/1.294;
  padding:36px 34px;background:#FFFFFF;border-radius:0;box-shadow:inset 0 0 0 1px var(--pg-rule);color:var(--s-ink);font-family:var(--font-body);
  container:pass-paper/inline-size}
.pass-paper>*{flex:none}

.pass-p-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pass-p-logo{flex:none}
.pass-p-mono{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));font-weight:400;line-height:1.4;color:var(--s-ink-3)}
.pass-nw{white-space:nowrap}
.pass-p-intro{display:grid;gap:10px}
.pass-p-title{font-family:var(--font-display);font-size:calc(30px + var(--pg-mock-bump));font-weight:500;letter-spacing:-.04em;line-height:1.1;text-wrap:balance}
.pass-p-title-a,.pass-p-title>.cy-fade{display:block}

.pass-stats{display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr));margin:0;border-top:1px solid var(--pg-rule)}
.pass-stat{display:grid;align-content:start;gap:4px;min-width:0;padding:12px 12px 2px 16px;border-left:1px solid var(--pg-rule)}
.pass-stat:first-child{padding-left:0;border-left:0}
.pass-stat:last-child{padding-right:0}
.pass-stat dt{font-size:calc(13px + var(--pg-mock-bump));line-height:1.35;color:var(--s-ink-3)}
.pass-stat dd{margin:0;font-size:calc(22px + var(--pg-mock-bump));font-weight:500;line-height:1.2;letter-spacing:-.01em;font-feature-settings:"tnum";white-space:nowrap;color:var(--s-ink)}

.pass-ledger{display:grid;gap:10px}
.pass-ledger-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;font-size:calc(13px + var(--pg-mock-bump));line-height:1.35;color:var(--s-ink-3)}
.pass-legend{display:flex;flex-wrap:wrap;gap:4px 16px}
.pass-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pass-sq{display:inline-block;flex:none;width:8px;height:8px;background:#2757C9}
.pass-sq--hollow{background:transparent;box-shadow:inset 0 0 0 1px #6E6E73}
.pass-cells{display:grid;grid-template-columns:repeat(45,minmax(0,1fr));gap:3px}
.pass-cells>span{display:block;aspect-ratio:1/1;background:#2757C9}
.pass-cells>.pass-cell--gap{background:transparent;box-shadow:inset 0 0 0 1px #6E6E73}

/* tnum stays off the dates: in Helvetica Now Text it also widens "." and ":" (F0 gotcha 3) and printed "12 . 03 . 2026";
   every date shares one format, so the Since column still lines up */
.pass-table{width:100%;border-collapse:collapse;border-spacing:0;font-size:calc(15px + var(--pg-mock-bump));line-height:1.3;color:var(--s-ink)}
.pass-table th{padding:0 0 8px;border-bottom:1px solid var(--pg-rule);font-size:calc(13px + var(--pg-mock-bump));font-weight:400;line-height:1.35;text-align:left;color:var(--s-ink-3)}
.pass-table td{box-sizing:border-box;height:40px;padding:6px 0;border-bottom:1px solid var(--pg-rule);font-weight:400;vertical-align:middle}
.pass-table th:last-child,.pass-table td:last-child{width:1%;padding-left:16px;white-space:nowrap}

.pass-gaps{display:grid;gap:6px;font-size:calc(14px + var(--pg-mock-bump));line-height:1.45;color:var(--s-ink-2)}
.pass-gaps>li{position:relative;padding-left:18px;text-wrap:balance}
.pass-gaps .pass-sq{position:absolute;left:0;top:calc(.725em - 4px)}

.pass-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--pg-rule)}
.pass-verify,.pass-verify:hover{position:relative;font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:1.4;color:#2757C9;text-underline-offset:4px;text-decoration-thickness:1px}
.pass-verify::after{content:"";position:absolute;inset:-13px -12px}
@media (any-hover:hover){.pass-verify:hover{text-decoration-line:underline}}

/* the paper's text column under 440px (the 1024 frame): keep the title on one line and the stat values clear of the rules */
@container pass-paper (max-width:439px){
  .pass-p-intro{gap:8px}
  .pass-p-title{font-size:calc(28px + var(--pg-mock-bump))}
  .pass-stat dd{font-size:calc(20px + var(--pg-mock-bump))}
}
/* under 380px (900 wide, and phones) every stat label takes two lines, so the three columns stay alike */
@container pass-paper (max-width:379px){
  .pass-stat dt{width:min-content}
}

/* ---------------------------------------------------------------- 1024 frame (900 to 1279) */
@media (max-width:1279px){
  .pass-fig{grid-column:1/7}
  .pass-paper{--pass-gap:16px;padding:28px}
}

/* ---------------------------------------------------------------- one column below 900: no ridge (never squeezed) */
@media (max-width:899px){
  .pass-h2{grid-column:1/-1}
  .pass-row,.pass-set{display:block}
  .pass-stamp-t>span{display:inline}
  .pass-more{margin-top:24px}
  .pass-fig{display:block;max-width:560px;margin-top:52px}
  .pass-figlabel{display:block;margin-bottom:12px}
  .pass-paper{--pass-gap:22px}
  .pass-ridge{display:none}
}

/* ---------------------------------------------------------------- phone: reflowed paper (never scaled) */
@media (max-width:767px){
  .pass-stamp-t{margin-top:16px;font-size:20px;letter-spacing:-.015em}
  .pass-more{margin-top:20px}
  .pass-fig{margin-top:40px}
  .pass-paper{--pass-gap:20px;aspect-ratio:auto;padding:20px}
  .pass-p-title{font-size:calc(26px + var(--pg-mock-bump))}
  .pass-stat{padding-inline:10px 8px}
  .pass-stat:first-child{padding-left:0}
  .pass-stat:last-child{padding-right:0}
  .pass-stat dd{font-size:calc(18px + var(--pg-mock-bump));letter-spacing:0}
  /* review truth-21: all 90 days as 3 rows of 30 (hollow cell at day 86), so "last 90 days" and "89 of 90" stay true; 6.4px at 360 */
  .pass-cells{grid-template-columns:repeat(30,minmax(0,1fr))}
  .pass-table{font-size:calc(14px + var(--pg-mock-bump))}
  .pass-table th:last-child,.pass-table td:last-child{padding-left:12px}
  .pass-foot{padding-top:12px}
}

/* ==== sections/s5-mac.css ==== */
/* cybee v3 · S5 the menu bar (prefix cy-mb, section id on-your-mac kept). Step 4 of the step by step pass (29 Sep 2026, Kristian chose B
   from qa/options/step4/): "On your Mac" became the menu bar section: the icon in a Mac menu bar, the card it opens, four clickable
   states and how it works in three lines; the privacy facts are one line with a link to /security. Facts: FACTS §4 menu bar, DS §19,
   docs/assistant; every card text is already on the site (/product, /docs/protection, /docs/hardening, /product/training).
   Before: _cybee-redesign-2026-09-26/snapshots/steps/step4-menubar-before/. */

.mac{background:var(--s-raised)}
.mac .cy-fade{color:var(--s-ink-3)}

/* the DS menu bar card and its small buttons (css/components.css 19d and .cy-mbtn, which the landing does not load) */
.cy-mbtn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:10px;background:#2757C9;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap}
.cy-mbtn--quiet{background:rgba(0,0,0,.05);color:#151515;box-shadow:none}
/* ------------------------------------------------------------------- 19d a Mac screen with the menu bar card (.cy-mframe + .cy-mcard), DS SUR 178 to 217 */
.cy-mframe{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:22px;box-shadow:0 0 0 1px var(--pg-rule);background:#B8BABF;color:#151515;font-family:var(--font-body);isolation:isolate}
.cy-mframe>.cy-photo{position:absolute;inset:0;z-index:0}
.cy-mframe>.cy-photo picture{display:block;width:100%;height:100%}
.cy-mframe__bar{position:absolute;top:0;left:0;right:0;z-index:1;box-sizing:border-box;height:26px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 14px;
  background:rgba(255,255,255,.28);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#151515;font-size:calc(13px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap}
.cy-mframe__key{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:6px;background:rgba(255,255,255,.72)}
.cy-mframe__key .cybee-emblem{--cy-emblem-height:13px;--wordmark:#2757C9}
.cy-mcard{position:absolute;z-index:2;right:16px;bottom:16px;box-sizing:border-box;width:320px;max-width:calc(100% - 32px);padding:14px;display:grid;gap:12px;border-radius:14px;
  background:rgba(246,246,248,.94);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.8),0 24px 60px -18px rgba(0,0,0,.5);color:#151515;line-height:1.3;container:cy-mcard/inline-size}
.cy-mcard--left{right:auto;left:16px}
.cy-mcard--top{bottom:auto;top:42px}
.cy-mcard__head{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;row-gap:1px;align-items:baseline}
.cy-mcard__hex{--hex-w:30px;grid-row:1/span 2;align-self:center}
.cy-mcard__state{font-size:calc(15px + var(--pg-mock-bump));font-weight:500}
.cy-mcard__name{justify-self:end;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));color:#515154;white-space:nowrap}
.cy-mcard__sub{grid-column:2/-1;font-size:calc(13px + var(--pg-mock-bump));color:#515154}
.cy-mcard__line{font-size:calc(14px + var(--pg-mock-bump));line-height:1.4;color:#151515;text-wrap:pretty}
.cy-mcard__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cy-mcard__tile{display:grid;gap:1px;padding:10px 12px;background:rgba(0,0,0,.04)}
.cy-mcard__tile-l{font-size:calc(13px + var(--pg-mock-bump));color:#515154}
.cy-mcard__tile-v{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;font-feature-settings:"tnum"}
.cy-mcard__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cy-mcard__btns .cy-mbtn{height:32px;font-size:calc(14px + var(--pg-mock-bump))}
@container cy-mcard (max-width:279px){.cy-mcard__hex{grid-row:1/span 3}.cy-mcard__name{grid-row:3;grid-column:2/-1;justify-self:start}}
@media (max-width:1279px){.cy-mcard{right:12px;bottom:12px}.cy-mcard--left{left:12px}}
@media (max-width:519px){.cy-mframe{aspect-ratio:auto;height:460px}.cy-mcard,.cy-mcard--left{left:12px;right:12px;width:auto;max-width:none}}
.cy-mcard__hex.cy-sq{width:26px;height:26px}

/* ------------------------------------------------------------------- 23b the menu bar (.cy-mb, include "menubar"): the glyph, its states, the
   card it opens and how it works. A flat #F2F2F2 well (4191 style) with a glass menu bar strip, the monochrome glyph with one state badge
   (ember only when a person is needed, DS §19), and the 320px card under it. State buttons switch the card (sections/s5-mac.js). */
.cy-mb__grid{align-items:center;row-gap:48px}
.cy-mb__text{grid-column:1/span 5;min-width:0}
.cy-mb__fig{grid-column:7/-1;min-width:0;margin:0;display:grid;gap:20px}
.cy-mb__lead{margin-top:20px;max-width:34em;font-size:18px;line-height:1.55;color:var(--s-ink-2);text-wrap:pretty}
.cy-mb__how{margin-top:32px;display:grid;gap:14px;max-width:34em}
.cy-mb__step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:baseline;font-size:16px;line-height:1.5;color:var(--s-ink-2)}
.cy-mb__step b{font-weight:500;color:var(--s-ink)}
.cy-mb__n{font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.cy-mb__screen{position:relative;overflow:hidden;display:grid;align-content:start;min-height:360px;border-radius:14px;background:#F2F2F2;box-shadow:inset 0 0 0 1px var(--s-line)}
.cy-mb__bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;height:28px;padding:0 14px;background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(0,0,0,.06);font-family:var(--font-body);font-size:13px;font-weight:500;line-height:1;color:#151515;white-space:nowrap}
.cy-mb__glyph{position:relative;display:grid;place-items:center;width:30px;height:22px;border-radius:6px;background:rgba(0,0,0,.09)}
.cy-mb__glyph .cybee-emblem{--cy-emblem-height:13px;--wordmark:#151515}
.cy-mb__badge{position:absolute;right:2px;top:2px;width:7px;height:7px;border-radius:999px;background:transparent;box-shadow:0 0 0 1.5px transparent;transition:background-color 160ms var(--ease-out)}
.cy-mb__glyph[data-state="needs"] .cy-mb__badge{background:#FF6B2B;box-shadow:0 0 0 1.5px #F2F2F2}
.cy-mb__glyph[data-state="training"] .cy-mb__badge{background:#794DFF;box-shadow:0 0 0 1.5px #F2F2F2}
.cy-mb__glyph[data-state="stopped"] .cy-mb__badge{background:#2757C9;box-shadow:0 0 0 1.5px #F2F2F2}
.cy-mb__time{font-variant-numeric:tabular-nums}
.cy-mb__cards{display:grid;justify-items:end;padding:10px 88px 32px 24px}
.cy-mb__card.cy-mcard{position:relative;inset:auto;right:auto;bottom:auto;width:320px;max-width:100%;background:rgba(255,255,255,.96);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 44px -18px rgba(0,0,0,.28)}
.cy-mb__card[hidden]{display:none}
html.js .cy-mb__card:not([hidden]){animation:cy-mb-in 180ms var(--ease-out)}
@keyframes cy-mb-in{from{opacity:0;transform:translateY(-4px)}}
.cy-mb__states{display:grid;gap:10px}
.cy-mb__states-l{font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-mb__list{display:flex;flex-wrap:wrap;gap:8px}
.cy-mb__state{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--pg-rule);
  font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1;color:var(--s-ink-2);white-space:nowrap;cursor:pointer;
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.cy-mb__state .cy-hex,.cy-mb__state .cy-sq{--hex-w:12px;width:12px}
.cy-mb__state .cy-sq{height:10px;width:10px}
.cy-mb__state[aria-pressed="true"]{background:var(--s-raised);color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-ink)}
.cy-mb__state:focus-visible{outline:3px solid #2757C9;outline-offset:2px}
@media (any-hover:hover){.cy-mb__state[aria-pressed="false"]:hover{color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-ink-3)}}
.cy-mb__state--static{cursor:default;box-shadow:none;padding:0 6px;color:var(--s-ink-3)}
.cy-mb__scan{--hex-w:12px;display:inline-block;width:12px;aspect-ratio:1/.866;background:var(--s-ink-3);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,12.4% 50%,31.2% 87.6%,68.8% 87.6%,87.6% 50%,68.8% 12.4%,31.2% 12.4%,12.4% 50%,0 50%)}
html:not(.js) .cy-mb__state[data-mb-show]{pointer-events:none}
@media (max-width:1019px){.cy-mb__text,.cy-mb__fig{grid-column:1/-1}.cy-mb__fig{max-width:640px}}
@media (max-width:519px){.cy-mb__cards{padding:10px 12px 20px}.cy-mb__card.cy-mcard{width:100%}.cy-mb__screen{min-height:0}.cy-mb__lead{font-size:17px}}
/* the landing: the heading at the 4191 scale (40 to 44px), the text on six columns, a screen a shade darker than the grey ground,
   the caption as label and note, the privacy line with its link */
.cy-mb .cy-h2{font-size:clamp(30px,3.1vw,44px);line-height:1.05}
.cy-mb__text{grid-column:1/span 6}
.cy-mb__fig{grid-column:7/-1}
.mac .cy-mb__screen{background:#EBEBEE}
.mac .cy-mb__glyph[data-state="needs"] .cy-mb__badge,.mac .cy-mb__glyph[data-state="training"] .cy-mb__badge,.mac .cy-mb__glyph[data-state="stopped"] .cy-mb__badge{box-shadow:0 0 0 1.5px #EBEBEE}
.cy-mb .cy-fig__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:14px;line-height:1.5;color:var(--s-ink-2)}
.cy-mb__privacy{margin-top:28px;padding-top:20px;border-top:1px solid var(--pg-rule);max-width:34em;font-size:15px;line-height:1.55;color:var(--s-ink-2)}
.cy-mb__privacy .cy-link{margin-left:6px;white-space:nowrap}
@media (max-width:1019px){.cy-mb__text,.cy-mb__fig{grid-column:1/-1}}

/* ==== the old S5 block, still used by the "safe" include on 13 inner pages (pages/_includes/safe.html: "Watches programs, not
   people", the stays and leaves table, the card on a photo). Restored after step 4 replaced this file (gate, 29 Sep). */
/* cybee v3 · S5 On your Mac (track T4, prefix mac-). Spec: DIRECTION-v3.md §3 S5.
   Every class starts with mac-; shared primitives (cy-wrap, cy-grid, cy-section, cy-kicker, cy-h2, cy-fade, cy-hex, cy-link,
   cy-photo, cy-figlabel) come from css/foundation.css; .swiss-flag and .cybee-emblem come from ds/tokens/brand.css.
   DS sources: SUR 178 to 183 (menu bar card, Protected state, d.8) · SIG 350 and 353 (photo T1, T4 glass artifact) ·
   WEB 186 to 189 and STA css 119 to 122 (privacy list, rebuilt as the stays / leaves table) · d.15 hexes · brand.css flag.
   Layouts: 12 columns at 900 and wider (text cols 1 to 6, figure cols 7 to 12) · 520 to 899 stacked, table stays two columns ·
   below 520 the table becomes two stacked lists and the frame is 460px tall (review taste-05: the card clears both faces). No JS: the section has no behaviour. */

/* ------------------------------------------------------------------ ground and grid */
.mac{background:var(--s-raised)}
/* integration (F0): --s-fade on frost measures 2.99:1, under the 3:1 large text floor (§8.4 item 5). Same fix as S4 on the
   iris tint: the fade on a non paper light ground uses --s-ink-3 (4.66:1 here), the ?stage=1 value. Owner sign off with K3;
   delete this rule to go back to --s-fade. */
.mac .cy-fade{color:var(--s-ink-3)}
.mac-grid{align-items:start;row-gap:0}
.mac-head{grid-column:1/span 9}
.mac-kicker{margin:0 0 20px}
.mac-l{display:block}
.mac-text{grid-column:1/span 6;margin-top:var(--pg-title-gap);min-width:0}
.mac-fig{grid-column:7/span 6;margin:var(--pg-title-gap) 0 0;min-width:0}

/* ------------------------------------------------------------------ the stays / leaves table (two lists sharing one row grid)
   The closing rule is the last row's own bottom border (14px under its text), not a border on the wrapper, so no box ends flush
   against a line; the last track is 1px taller to hold it, which keeps every rule where the wrapper's border drew it. */
.mac-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px repeat(2,minmax(56px,auto)) minmax(57px,auto)}
.mac-col{display:grid;grid-row:1/-1;grid-template-rows:subgrid;min-width:0}
.mac-col+.mac-col{border-left:1px solid var(--pg-rule)}
.mac-th{box-sizing:border-box;display:flex;align-items:center;margin:0;padding:0 16px 0 0;border-top:1px solid var(--pg-rule);
  font-family:var(--font-mono);font-size:14px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.mac-list{display:grid;grid-row:2/-1;grid-template-rows:subgrid;margin:0;padding:0;list-style:none}
.mac-td{box-sizing:border-box;min-width:0;padding:14px 16px 14px 0;border-top:1px solid var(--pg-rule);
  font-size:18px;font-weight:400;line-height:1.4;color:var(--s-ink);text-wrap:pretty}
.mac-td:last-child{border-bottom:1px solid var(--pg-rule)}
/* the second column starts 16px after the rule between the columns */
.mac-col+.mac-col .mac-th,.mac-col+.mac-col .mac-td{padding-left:16px}
/* without subgrid (pre 2023 browsers) the rows cannot share heights: minimum heights keep the rules close, text never clips */
@supports not (grid-template-rows:subgrid){
  .mac-col{display:block}
  .mac-th{height:44px}
  .mac-td{min-height:56px}
  .mac-td:nth-child(3){min-height:calc(2 * 1.4em + 29px)}
}

/* ------------------------------------------------------------------ the two statement lines, the company line, the link */
.mac-lines{display:grid;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.mac-line{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:12px;align-items:start;
  font-size:18px;font-weight:400;line-height:1.5;color:var(--s-ink);text-wrap:balance}
.mac-line-hex{margin-top:7px}
.mac-co{display:flex;align-items:flex-start;gap:12px;margin-top:32px;font-size:16px;line-height:1.5;color:var(--s-ink);text-wrap:balance}
.mac-flag{width:14px;height:14px;flex:0 0 14px;margin-top:5px}
.mac-more{margin-top:20px;font-size:16px;line-height:1.5}
.mac-link{position:relative}
.mac-link::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}   /* 44px target */

/* ------------------------------------------------------------------ fig. 04: the frame (a Mac screen, radius 22) */
.mac-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:22px;box-shadow:0 0 0 1px var(--pg-rule);
  background:#B8BABF;color:#151515;font-family:var(--font-body);isolation:isolate}
.mac-photo{position:absolute;inset:0;z-index:0}
.mac-photo picture{display:block;width:100%;height:100%}
.mac-photo img{object-position:30% 50%}

/* the menu strip: 26px glass across the top, the blue emblem in a 28×22 key, then the time (T9, D3).
   Deviation: the time is ink, not white with a shadow. The photo's top is bright sky and pale stone, so white measured
   1.13:1 at worst (2.46 median); ink measures 4.51 to 6.70 at every width, as macOS draws menu bar text over a light image. */
.mac-bar{position:absolute;top:0;left:0;right:0;z-index:1;box-sizing:border-box;height:26px;display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding:0 14px;background:rgba(255,255,255,.28);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  color:#151515;font-size:calc(13px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap}
.mac-key{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:6px;background:rgba(255,255,255,.72)}
.mac-emblem{--cy-emblem-height:13px;--wordmark:#2757C9}

/* review taste-05: the card sits bottom left, clear of both faces (at least 24px from every face box, measured with
   qa/review/fixes/s5-faces.js) and of the letter, the photo's focal point; top right it covered a face.
   the menu bar card, Protected state (SUR 181): glass over the photo, every string on the card's solid layer (d.13).
   Deviations, both for 4.5:1 on 13px mock text: the fill is .82 (at .74 the Protection label measured 4.12:1 over the dark
   jacket at 375 and 1024) and secondary text is #515154 (#6E6E73 cannot reach 4.5:1 on a 4% tile even over an opaque card). */
.mac-card{position:absolute;top:auto;right:auto;bottom:16px;left:16px;z-index:2;box-sizing:border-box;width:320px;padding:14px;display:grid;gap:12px;
  border-radius:14px;background:rgba(246,246,248,.82);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.8),0 24px 60px -18px rgba(0,0,0,.5);color:#151515;line-height:1.3;
  container:mac-card/inline-size}
.mac-card-head{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;row-gap:1px;align-items:baseline}
.mac-card-hex{--hex-w:30px;grid-row:1/span 2;align-self:center}
.mac-state{font-size:calc(15px + var(--pg-mock-bump));font-weight:500}
.mac-name{justify-self:end;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));color:#515154;white-space:nowrap}
.mac-ago{grid-column:2/-1;font-size:calc(13px + var(--pg-mock-bump));color:#515154}
/* a narrow card (content box under 280px: 360px phones) puts the Mac name on its own row instead of crowding the state */
@container mac-card (max-width:279px){
  .mac-card-hex{grid-row:1/span 3}
  .mac-name{grid-row:3;grid-column:2/-1;justify-self:start}
}
.mac-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mac-tile{display:grid;gap:1px;padding:10px 12px;border-radius:0;background:rgba(0,0,0,.04)}
.mac-tile-l{font-size:calc(13px + var(--pg-mock-bump));color:#515154}
.mac-tile-v{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;font-feature-settings:"tnum"}
.mac-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mac-btn{display:flex;align-items:center;justify-content:center;height:32px;border-radius:10px;font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap}
.mac-btn--primary{background:#2757C9;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.mac-btn--secondary{background:rgba(0,0,0,.05);color:#151515}

/* caption row under the frame: caption left, label right (the label takes its own line when both do not fit) */
.mac-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin-top:12px}
.mac-cap-t{font-size:16px;line-height:1.5;color:var(--s-ink-2);text-wrap:balance}
.mac-cap-l{margin-left:auto;white-space:nowrap}

/* review taste-06 (stage only, with K3): the frame is 648 × 440 so S5 fits one projector screen; the card sits 12px from the
   bottom so both faces still clear it by 24px */
@media (min-width:1020px) and (max-height:940px){
  html[data-stage="1"] .mac-frame{aspect-ratio:auto;height:440px}
  html[data-stage="1"] .mac-card{bottom:12px}
}

/* ------------------------------------------------------------------ 900 to 1279 (the 1024 frame): a taller frame so the faces clear the card */
@media (min-width:900px) and (max-width:1279px){
  .mac-frame{aspect-ratio:auto;height:430px}
  .mac-photo img{object-position:45% 50%}
}
@media (max-width:1279px){.mac-card{bottom:12px;left:12px}}

/* ------------------------------------------------------------------ 520 to 899: one column; the table keeps two columns */
@media (max-width:899px){
  .mac-head,.mac-text,.mac-fig{grid-column:1/-1}
  .mac-fig{margin-top:52px}
}

/* ------------------------------------------------------------------ below 520: two stacked lists, 300px frame */
@media (max-width:519px){
  .mac-table{display:block}
  .mac-col{display:block}
  .mac-col+.mac-col{margin-top:32px;border-left:0}
  .mac-th{height:44px}
  .mac-list{display:block}
  .mac-td{min-height:56px}
  .mac-td:last-child{min-height:57px}
  .mac-col+.mac-col .mac-th,.mac-col+.mac-col .mac-td{padding-left:0}
  .mac-fig{margin-top:40px}
  .mac-frame{aspect-ratio:auto;height:460px}
  .mac-photo img{object-position:65% 50%}
  .mac-card{left:12px;right:12px;width:auto}
  .mac-cap{flex-direction:column;align-items:flex-start;gap:4px}
  .mac-cap-l{margin-left:0;white-space:normal}
}

/* ==== sections/s6-pricing.css ==== */
/* cybee v3 · S6 Pricing (track T5, prefix price-). Every class starts with price-; shared cy- primitives come from css/foundation.css.
   Spec: DIRECTION-v3.md §3 S6, §5 (billing toggle, currency chips). DS source: WEB 191 to 209 and STA css 97 to 105 (plans in one
   hairline box, the paid cell marked by a 3px top rule, here iris per TG6), STA js 96 to 101, c.5 SignalButton and Chip at 5.4 radii.
   The WEB and STA "No trial" line is removed (g.3).
   State: six radios (billing + currency). Without JS they are the controls; with JS (s6-pricing.js) each label becomes a button with
   aria-pressed and the radios only hold the state. CSS reads the state through .price:has(#…:checked) in both cases, so the yearly
   strings and the chosen code work with JS off. Without :has support the section shows CHF and Monthly (the defaults).
   Digit slots (T10, D4): each digit sits in a .74em slot, right aligned. Yearly opens the second slot from 0 to .74em over 380ms
   while its 0 rolls up from translateY(100%); the unit moves only with that slot. The slot clips with clip-path, not overflow:hidden:
   overflow would move the inline-block baseline to its bottom edge and would cut the 0's right side bearing (spec: 90 never clips).
   Layout: subgrid rows keep label, price, sub line, list and button aligned across the two cells from 900px up; below 900 the
   cells stack (at 768 to 899 a half cell is too narrow for "CHF 90" plus the yearly note on one line, so it would grow). */

.price{background:var(--s-bg)}

/* ------------------------------------------------------------------ head */
.price-kicker{margin-bottom:20px}
.price-l{display:block}
/* review taste-07: the H2 runs across cols 1 to 12 and breaks by sentence (each sentence is its own block line), one line shorter */
.price-title{max-width:none}

/* ------------------------------------------------------------------ controls row: toggle · chips · note */
/* review novice-03: the controls live inside the box, between the Free and the Proof cell (DOM order = the stacked visual order);
   from 900px the grid lifts them into their own row above the hairline box, 32px over it, so the desktop look is unchanged */
.price-controls{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:12px;grid-column:1 / -1;grid-row:1;margin-bottom:32px}
.price-toggle{grid-column:1;grid-row:1}
.price-curs{grid-column:2;grid-row:1;justify-self:start}
/* review taste-07: the note sits under the chips, left aligned with them, 12px below (the row gap), 14px ink 3 */
.price-note{grid-column:2;grid-row:2;margin:0;font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5;color:var(--s-ink-3);text-wrap:pretty}

/* billing toggle: pill 44px, track --s-raised, white lifted thumb sliding 380ms */
.price-toggle{position:relative;box-sizing:border-box;display:inline-grid;grid-template-columns:1fr 1fr;height:44px;padding:4px;
  border-radius:999px;background:var(--s-raised);isolation:isolate}
.price-seg{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:36px;padding:0 20px;
  border-radius:999px;font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1;white-space:nowrap;color:var(--s-ink-3);
  cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color 180ms var(--ease-out)}
.price-seg::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}      /* 44px target: the pill's own padding */
.price-thumb{position:absolute;z-index:0;top:4px;left:4px;width:calc(50% - 4px);height:36px;border-radius:999px;
  background:var(--s-card);box-shadow:var(--s-lifted);transition:transform 380ms var(--ease-out);pointer-events:none}
.price-radio:checked+.price-seg{color:var(--s-ink)}
.price-toggle:has(#price-bill-year:checked) .price-thumb{transform:translateX(100%)}

/* currency chips: 44px, radius 6, hairline ring; pressed = ink fill, white text */
.price-curs{position:relative;display:flex;gap:8px}
.price-chip{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:64px;padding:0 14px;
  border-radius:6px;box-shadow:inset 0 0 0 1px var(--pg-rule);background:transparent;font-family:var(--font-body);font-size:15px;
  font-weight:500;line-height:1;color:var(--s-ink);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),box-shadow 180ms var(--ease-out),transform 90ms var(--ease-out)}
.price-chip:active{transform:scale(.97)}
.price-radio:checked+.price-chip{background:#151515;color:#fff;box-shadow:inset 0 0 0 1px #151515}
@media (any-hover:hover){
  .price-seg:hover{color:var(--s-ink)}
  .price-radio:not(:checked)+.price-chip:hover{background:var(--s-hover)}
}
/* no JS: the radio holds focus, its label shows the ring */
.price-radio:focus-visible+label{outline:3px solid #2757C9;outline-offset:4px}

/* ------------------------------------------------------------------ the hairline box with two cells */
.price-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(6,auto);margin-top:52px;border-radius:0;reading-flow:grid-rows}
/* the hairline box is drawn by a grid item over the two cells' rows only (the controls row stays outside it) */
.price-box::before{content:"";grid-column:1 / -1;grid-row:2 / -1;box-shadow:inset 0 0 0 1px var(--pg-rule);pointer-events:none}
.price-cell{--price-hue:#2757C9;box-sizing:border-box;min-width:0;display:grid;grid-row:2 / span 6;grid-template-rows:subgrid;row-gap:0;
  align-content:start;padding:40px}
/* the paid cell: 3px iris top rule (TG6) and the 1px split on its left edge, both as shadows so both cells keep equal insets */
.price-cell--free{grid-column:1}
.price-cell--proof{grid-column:2;--price-hue:#794DFF;box-shadow:inset 0 3px 0 #794DFF,inset 1px 0 0 var(--pg-rule)}
.price-plan{grid-row:1}
.price-amount{grid-row:2}
.price-sub{grid-row:3}
.price-feat{grid-row:4}
.price-action{grid-row:5}
.price-trial{grid-row:6}

/* label 15/500 with the 6px hue square */
.price-plan{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.4;color:var(--s-ink-2)}
.price-plan::before{content:"";flex:none;width:6px;height:6px;background:var(--price-hue)}

/* price row: code 20px · digits (Machina, --pg-price) · 12px · unit 16px, on one baseline (the unit stack's last line).
   The spec's 8px between code and digits is carried by the first slot itself: the 9 sits right aligned in its .74em slot, so the
   slot's own slack already opens 7 to 11px (48 to 72px type) before the glyph; an extra 8px margin read as a 19px hole at 72px.
   The yearly note sits above the unit inside the same stack, beside the digits, so it takes no row of its own. */
.price-amount{display:flex;align-items:last baseline;align-self:end;margin-top:24px;white-space:nowrap;min-width:0}
.price-amount--word,.price-num{font-family:var(--font-display);font-size:var(--pg-price);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--s-ink)}
.price-amount--word{display:block}
.price-code{display:inline-grid;justify-items:end;margin-right:0;font-family:var(--font-body);font-size:20px;font-weight:400;
  letter-spacing:0;line-height:1.4;color:var(--s-ink-3)}
.price-code-i{grid-area:1 / 1}
.price-num{display:block}
.price-slot{display:inline-block;width:var(--pg-slot);text-align:right;vertical-align:baseline}
/* D4, the second slot opens over 380ms without animating a layout property: its .74em box is always in the row, closed by a
   clip; Yearly opens the clip left to right while the 0 rolls up, and the unit, drawn one slot to the left on Monthly, glides
   back with it (transform). --price-slot-x is that slot in px: var(--pg-slot) at the digits' size. */
.price-amount{--price-slot-x:calc(-.74 * var(--pg-price))}
.price-slot--roll{clip-path:inset(0 100% 0 0);transition:clip-path 380ms var(--ease-out)}
.price-roll{display:inline-block;transform:translateY(100%);transition:transform 380ms var(--ease-out)}
.price-per{flex:0 1 auto;min-width:0;display:inline-grid;grid-template-rows:auto auto;justify-items:start;margin-left:12px;
  font-family:var(--font-body);font-size:16px;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--s-ink-2);
  transform:translateX(var(--price-slot-x));transition:transform 380ms var(--ease-out)}
.price-per-i{grid-area:2 / 1;transition:opacity 180ms var(--ease-out),visibility 0s linear 180ms}
.price-yearly{grid-area:1 / 1;margin-bottom:2px;font-size:14px;line-height:1.4;white-space:normal;text-wrap:pretty;color:var(--s-ink-2);
  transition:opacity 180ms var(--ease-out),visibility 0s linear 180ms}
.price-sr--y{display:none}

/* sub lines, side by side: "Forever. Unlimited Macs and people." · "Everything in Free, plus:" */
.price-sub{margin-top:12px;font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.5;color:var(--s-ink-2);text-wrap:pretty}

/* lists: 16/1.5, 10px row gaps, 6px hue squares (no cy-check, TG6) */
.price-feat{margin-top:32px}
.price-list{display:grid;gap:10px}
.price-li{position:relative;padding-left:20px;font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.5;color:var(--s-ink);text-wrap:pretty}
.price-li::before{content:"";position:absolute;left:0;top:calc(.75em - 2px);width:6px;height:6px;background:var(--price-hue)}

.price-action{margin-top:40px}
.price-trial{max-width:44ch;margin-top:16px;font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5;color:var(--s-ink-2);text-wrap:pretty}

/* "All plan details →": 16/500 ink, Signal arrow, right aligned under the box, 44px target */
.price-more{margin-top:14px;text-align:right}
.price-more-a,.price-more-a:hover{min-height:44px;font-size:16px}

/* ------------------------------------------------------------------ state (radios; JS keeps them in sync with cyPage) */
/* currency: only the code swaps, stacked in one grid cell so the number never moves */
.price-code-i:not(.price-code-i--chf){visibility:hidden}
.price:has(#price-cur-eur:checked) .price-code-i--chf,
.price:has(#price-cur-usd:checked) .price-code-i--chf,
.price:has(#price-cur-gbp:checked) .price-code-i--chf{visibility:hidden}
.price:has(#price-cur-eur:checked) .price-code-i--eur,
.price:has(#price-cur-usd:checked) .price-code-i--usd,
.price:has(#price-cur-gbp:checked) .price-code-i--gbp{visibility:visible}

/* billing: monthly by default */
.price-per-i--y,.price-yearly{opacity:0;visibility:hidden}
.price:has(#price-bill-year:checked) .price-slot--roll{clip-path:inset(0 -.08em 0 0)}
.price:has(#price-bill-year:checked) .price-roll,
.price:has(#price-bill-year:checked) .price-per{transform:none}
.price:has(#price-bill-year:checked) .price-per-i--m{opacity:0;visibility:hidden}
.price:has(#price-bill-year:checked) .price-per-i--y,
.price:has(#price-bill-year:checked) .price-yearly{opacity:1;visibility:visible;transition-delay:0s}
.price:has(#price-bill-year:checked) .price-sr--m{display:none}
.price:has(#price-bill-year:checked) .price-sr--y{display:inline}

/* ------------------------------------------------------------------ 1024 band: toggle and chips on one line, the note below; padding 32 */
@media (max-width:1279px){
  .price-cell{padding:32px}
}

/* ------------------------------------------------------------------ below 900: the cells stack (Free, then Proof) */
@media (max-width:899px){
  .price-box{grid-template-columns:minmax(0,1fr);grid-template-rows:none;margin-top:40px}
  .price-box::before{content:none}
  /* stacked: each cell keeps its own hairline; the controls sit between them, right above the Proof price they change */
  .price-cell,.price-cell--free,.price-cell--proof{display:block;grid-row:auto;grid-column:1;box-shadow:inset 0 0 0 1px var(--pg-rule)}
  .price-cell--proof{box-shadow:inset 0 3px 0 #794DFF,inset 0 0 0 1px var(--pg-rule)}
  .price-controls{grid-row:auto;grid-column:1;margin:24px 0}
  /* review novice-13: stacked, the Free cell's small "Free" label repeats its price word; it is visually hidden (the .cy-sr pattern)
     and stays for screen readers. From 900px it stays, so the two cells' rows align. */
  .price-cell--free .price-plan{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}
  .price-cell--free .price-amount--word{margin-top:0}
}

/* ------------------------------------------------------------------ phones: full width toggle, one chip row, padding 24 */
@media (max-width:767px){
  .price-controls{grid-template-columns:minmax(0,1fr);gap:12px}
  .price-toggle,.price-curs,.price-note{grid-column:1;grid-row:auto}
  .price-toggle{display:grid;width:100%}
  .price-seg{padding:0 12px}
  .price-curs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;justify-self:stretch}   /* stretch: start shrank the four chips to 32px (27 Sep) */
  .price-chip{min-width:0;padding:0}
  .price-note{margin-top:4px}
  .price-cell{padding:24px}
  .price-btn{width:100%}
  .price-feat{margin-top:28px}
  .price-action{margin-top:32px}
  /* the cells are stacked and the toggle sits a screen above the Proof price: the unit swaps without a crossfade and the
     yearly note gets its own full line under the price row, taking no room until it shows. The row is a grid so both units
     share one cell and glide with the opening slot, as on desktop */
  .price-amount:not(.price-amount--word){display:grid;grid-template-columns:auto auto minmax(0,1fr)}
  .price-per{display:contents}
  .price-per-i{grid-area:1 / 3;justify-self:start;margin-left:12px;white-space:nowrap;transform:translateX(var(--price-slot-x));transition:transform 380ms var(--ease-out)}
  .price-yearly{display:none}
  .price:has(#price-bill-year:checked) .price-per-i{transform:none}
  .price:has(#price-bill-year:checked) .price-yearly{display:block;grid-area:2 / 1 / 3 / -1;margin:8px 0 6px}
}

/* ==== sections/s7-made.css ==== */
/* cybee v3 · S7 Made for (track T5, prefix made-). Every class starts with made-; shared cy- primitives come from css/foundation.css.
   Spec: DIRECTION-v3.md §3 S7. DS source: the → text arrow (.cy-link__arrow, review taste-13), STA css 29 (link styles).
   Ground frost, full bleed band between the paper S6 and S8, 1px rules top and bottom. No living thing, no JS: identical without it.
   1440 and 1024: label cols 1 to 2, links cols 3 to 12 in two rows of three (17/500, 32px apart at least; on page columns from 1280).
   768 to 1019: the label above the rows. Phones: six stacked 52px rows. */

.made{background:var(--s-raised);border-top:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule);padding:40px 0}
.made-grid{align-items:baseline}
.made-label{grid-column:1 / span 2;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
/* six links do not fit one line of cols 3 to 12 at 17px (about 1200px needed, 1101px there), and plain wrapping leaves
   "Client questionnaires" alone on a second line. So the links wrap as two even rows of three, in spec order:
   from 1280 their columns start on page columns 3, 6 and 9 (x 283, 623, 963 at 1440); below 1280 they spread across
   cols 3 to 12, never closer than 32px. */
.made-list{grid-column:3 / -1;min-width:0;display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;
  column-gap:32px;row-gap:20px}
.made-item{min-width:0;white-space:nowrap}
@media (min-width:1280px){
  .made-list{grid-template-columns:repeat(10,minmax(0,1fr));justify-content:normal;column-gap:var(--pg-gap)}
  .made-item{grid-column:span 3}
  .made-item:nth-child(3n+1){grid-column:1 / span 3}
}
/* the link text 17/500 ink; the Signal → nudges 2px on hover; underline offset 4 on hover (text only) */
.made-link,.made-link:hover{position:relative;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:17px;
  font-weight:500;line-height:1.4;color:var(--s-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.made-link::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}      /* 44px hit area around the 24px line */
.made-t{text-underline-offset:4px;text-decoration-thickness:1px}
/* review taste-13: one arrow language across the page: the Signal → text arrow (.cy-link__arrow) with the same 2px nudge as S5 and S6 */
.made-link .cy-link__arrow{flex:none}
@media (any-hover:hover){
  .made-link:hover .made-t{text-decoration-line:underline}
  .made-link:hover .cy-link__arrow{transform:translateX(2px)}
}

/* 768 to 1019: the label above the two rows (cols 3 to 12 get too narrow for three columns) */
@media (max-width:1019px){
  .made-label,.made-list{grid-column:1 / -1}
  .made-list{margin-top:16px}
}

/* phones: the label, then six stacked 52px rows with hairlines, the arrow on the right; the last row ends on the band's rule */
@media (max-width:767px){
  .made{padding:32px 0 0}
  .made-label,.made-list{grid-column:1 / -1}
  .made-list{display:block;margin-top:12px}
  .made-item+.made-item{border-top:1px solid var(--pg-rule)}
  .made-item:first-child{border-top:1px solid var(--pg-rule)}
  .made-item{white-space:normal}
  .made-link,.made-link:hover{display:flex;justify-content:space-between;gap:16px;min-height:52px}
  .made-link::after{content:none}
}

/* ==== sections/s8-faq.css ==== */
/* cybee v3 · S8 Questions (track T6, prefix faq-). Every class starts with faq-; shared cy- primitives come from css/foundation.css.
   Spec: DIRECTION-v3.md §3 S8, §5 (FAQ row). DS source: WEB 211 to 219 (native details, Signal plus), STA css 107 to 113 (d.20).
   Ground paper, hue Signal only, no living thing. Native <details>: identical with JS off.
   Height animates through ::details-content + interpolate-size where both exist (Chrome), instant elsewhere (Safari today).
   The DS reduced motion kill switch only reaches *, ::before and ::after, so ::details-content gets its own rule below. */

.faq{background:var(--s-bg)}
.faq-grid{align-items:start;row-gap:var(--pg-title-gap)}

/* 1440 and 1024: H2 in cols 1 to 4, the list in cols 5 to 12 */
.faq-head{grid-column:1 / span 4;min-width:0}
.faq-kicker{margin-bottom:20px}
.faq-list{grid-column:5 / span 8;min-width:0;border-bottom:1px solid var(--pg-rule)}

.faq-item{border-top:1px solid var(--pg-rule)}
.faq-q{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:18px 0;
  font-family:var(--font-body);font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--s-ink);
  margin-inline:-12px;padding-inline:12px;border-radius:10px;-webkit-tap-highlight-color:transparent}
/* the ring sits inside the row (inset) so it never covers the answer's first line; 12px of air either side of the text */
.faq-q:focus-visible{outline-offset:-3px}
.faq-q-text{min-width:0;text-wrap:pretty;transition:color 180ms var(--ease-out)}
.faq-plus{flex:none;display:block;width:20px;height:20px;color:#2757C9;fill:currentColor;transition:transform 180ms var(--ease-out)}
.faq-item[open]>.faq-q .faq-plus{transform:rotate(45deg)}
.faq-a{padding:0 44px 28px 0}
.faq-a p{max-width:60ch;font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.55;color:var(--s-ink-2);text-wrap:pretty}
@media (any-hover:hover){.faq-q:hover .faq-q-text{color:#2757C9}}

/* height: open and close glide where the browser can interpolate to auto */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .faq{interpolate-size:allow-keywords}
  .faq-item::details-content{block-size:0;overflow-y:clip;
    transition:block-size 380ms var(--ease-out),content-visibility 380ms var(--ease-out) allow-discrete}
  .faq-item[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){.faq-item::details-content{transition:none}}
html[data-reduced-motion="true"] .faq-item::details-content{transition:none}

/* below 900: the H2 above the list */
@media (max-width:899px){
  .faq-head,.faq-list{grid-column:1 / -1}
}
/* phones: summaries 18/500, min 64px */
@media (max-width:767px){
  .faq-q{min-height:64px;padding-block:16px;gap:20px;font-size:18px;line-height:1.4}
  .faq-a{padding-right:0}
}

/* ==== sections/s9-close.css ==== */
/* cybee v3 · S9 Close (track T6, prefix close-). Every class starts with close-; shared cy- primitives come from css/foundation.css.
   Spec: DIRECTION-v3.md §3 S9. DS source: SIG 710 to 717 (rings close: bottom scrim, Machina close line, lockup 120),
   WEB 221 to 227 and STA css 130 to 133 (command on night), c.1 rings.
   Ground night #0A0A0B (= the canvas dark ground, g.27), hue Signal lift only, the one living thing is the rings canvas.
   No JS: no canvas paint (the night ground carries it), Copy hidden by foundation, the phone button is a mailto: link. */

/* --close-band: the minimum free band above the headline, where the rings hub sits (s9-close.js centres the hub in it).
   With the command, steps and tag line under the headline, SIG's cy .26 would put the glowing hub behind "client". */
.close{--close-band:clamp(150px,19svh,240px);position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(760px,92svh,920px);padding:var(--close-band) 0 96px;
  background:var(--pg-night);color:var(--pg-night-ink)}

/* the rings canvas and the SIG 712 bottom scrim in night rgb */
.close-field{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.close::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,0) 38%,rgba(10,10,11,.92) 66%,#0A0A0B 100%)}

/* content: centred, the text blocks left aligned inside a 560px column */
.close-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.close-title{width:100%;text-align:center;color:var(--pg-night-ink)}
.close-fade{display:block}

.close-cmdgroup{margin-top:40px;max-width:100%;min-width:0;display:flex;flex-direction:column;align-items:center}
.close-copyfail{display:none;margin-top:12px;font-size:14px;line-height:1.5;color:var(--pg-night-2);text-align:center}
[data-copy="failed"]>.close-copyfail{display:block}

.close-tags{box-sizing:border-box;width:min(560px,100%);margin-top:24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
  font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--pg-night-2)}
.close-nw{white-space:nowrap}
.close-script{position:relative;font-size:14px;line-height:1.5}
.close-script::after{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px}   /* 44px target */

.close-lockup{--cy-wordmark-width:120px;--wordmark:#2757C9;margin-top:48px}

/* phones: 640 min height, the three line H2, the command full width, the Send button, lockup 96 */
@media (max-width:767px){
  .close{--close-band:152px;min-height:640px;padding-bottom:52px}
  /* the phone section is taller than it is wide, so SIG's 38 to 66% scrim would leave a full width ring edge of the still frame
     under the Send button; here the scrim is solid from the command down (the TG8 intent: the command on the solid scrim) */
  .close::before{background:linear-gradient(180deg,rgba(10,10,11,0) 26%,rgba(10,10,11,.92) 38%,#0A0A0B 48%)}
  .close-l1{display:block}
  .close-cmdgroup,.close-cmd{width:100%}
  .close-send{margin-top:12px}
  .close-lockup{--cy-wordmark-width:96px}
}
/* 360 wide: 43px keeps "Your next client" on one line (324px at 44px, 320px of room) */
@media (max-width:374px){.close-title{font-size:43px}}

/* novice-20 (28 Sep): at 430 and narrower the two phrases stack and the "·" between them goes, so no line starts or ends on a dot
   (360, 375, 390, 430). The landing S9 and the close include share this markup. */
.close-sep{white-space:nowrap}
@media (max-width:430px){
  .close-tagline{display:flex;flex-direction:column;gap:4px}
  .close-sep{display:none}
}
/* step 3 (29 Sep 2026, option A): the close band says where the line runs and that you keep going there, in one line under the command */
.close-where{box-sizing:border-box;width:min(560px,100%);margin-top:24px;text-align:center;font-family:var(--font-body);font-size:17px;line-height:1.55;
  color:var(--pg-night-2);text-wrap:pretty}
.close-where-s{font-weight:500;color:var(--pg-night-ink)}
.close-where-2{white-space:nowrap}

/* ==== sections/footer.css ==== */
/* cybee v3 · footer (F0, prefix cyf-). Spec §3 Footer. Source: WEB 287 to 295, STA index.html 29 to 34, css 135 to 141.
   Paper ground, no Swiss flag here (once, in S5). Lockup at wordmark 72, always blue. */
.cyf{border-top:1px solid var(--pg-rule);background:var(--s-bg);color:var(--s-ink);font-family:var(--font-body);font-size:14px;line-height:1.5}
.cyf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px 24px;padding-block:52px 40px}
/* 1280 and wider: the brand column gives its spare width to the five link columns so no link wraps at 1440 */
@media (min-width:1280px){.cyf-grid{grid-template-columns:minmax(160px,.7fr) repeat(5,minmax(0,1fr))}}
.cyf-brand,.cyf-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.cyf-home{display:inline-flex;align-items:center;height:44px;margin-top:-10px;border-radius:6px}
.cyf-home .cybee-lockup{pointer-events:none}
.cyf-line{margin-top:6px;font-size:14px;color:var(--s-ink-2)}
.cyf-social{margin-top:16px}
.cyf-h{margin-bottom:8px;font-size:14px;font-weight:500;line-height:1.5;color:var(--s-ink)}
.cyf-list{display:flex;flex-direction:column;align-items:flex-start}
.cyf-a{display:inline-flex;align-items:center;min-height:32px;color:var(--s-ink-2);transition:color 180ms var(--ease-out)}
.cyf-list .cyf-a{padding-block:1px}
@media (any-hover:hover){.cyf-a:hover{color:#2757C9}}
@media (pointer:coarse){.cyf-list .cyf-a{min-height:44px}}

/* legal bar */
.cyf-bar{border-top:1px solid var(--pg-rule)}
.cyf-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;padding-block:16px 20px;font-size:14px;line-height:1.5;color:var(--s-ink-3)}
.cyf-bar .cyf-a{color:var(--s-ink-3)}
@media (any-hover:hover){.cyf-bar .cyf-a:hover{color:#2757C9}}
.cyf-cur{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.cyf-select{position:relative;display:inline-flex;align-items:center}
.cyf-select::after{content:"";position:absolute;right:16px;top:50%;box-sizing:border-box;width:6px;height:6px;margin-top:-4px;border-right:1.5px solid var(--s-ink-2);border-bottom:1.5px solid var(--s-ink-2);transform:rotate(45deg);pointer-events:none}
/* 44px target, 36px visual: a 4px transparent border around a hairline field with a 10px inner radius */
.cyf-select-el{-webkit-appearance:none;appearance:none;box-sizing:border-box;height:44px;margin:-4px 0;padding:0 30px 0 10px;border:4px solid transparent;border-radius:14px;background:var(--s-bg);background-clip:padding-box;
  box-shadow:inset 0 0 0 1px var(--pg-rule);font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--s-ink);cursor:pointer}
.cyf-select-el:focus-visible{outline-offset:0}
.cyf-addr>span{white-space:nowrap}
@media (min-width:1280px){.cyf-cur{margin-left:auto}}
.cyf-break{flex-basis:100%;height:0}
.cyf-copy{white-space:nowrap}
.cyf-top{margin-left:auto}

@media (min-width:900px) and (max-width:1279px){
  .cyf-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cyf-brand{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:24px}
  .cyf-line{margin-top:0}
  .cyf-social{margin-top:0;flex-direction:row;flex-wrap:wrap;column-gap:20px}
}
@media (max-width:899px){
  .cyf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding-block:40px 32px}
  .cyf-brand{grid-column:1/-1}
  .cyf-social{flex-direction:row;flex-wrap:wrap;column-gap:20px}
  .cyf-bar-in{flex-direction:column;align-items:flex-start;gap:12px;padding-block:20px 24px}
  .cyf-top,.cyf-cur{margin-left:0}
  .cyf-break{display:none}
  .cyf-copy{white-space:normal}
}
/* the sticky phone CTA (overlays) never covers the last lines */
@media (max-width:767px) and (pointer:coarse){html.js .cyf{padding-bottom:calc(64px + env(safe-area-inset-bottom))}}

/* ==== sections/overlays.css ==== */
/* cybee v3 · shared overlays (F0): install dialog (cyd-), drawer host, sticky phone CTA (cys-), #cy-live.
   The dialog frame itself (.cy-dialog, .cy-dialog__sheet) and the drawer content (.cy-more__*) live in css/foundation.css. */

/* install dialog #cy-install */
.cyd-title{font-family:var(--font-body);font-size:24px;font-weight:500;letter-spacing:-.022em;line-height:1.2;color:var(--s-ink)}
.cyd-cmd{width:100%;font-size:14px}
/* step 3 (29 Sep, option A): the one line, then four places side by side, each with how to keep going there (2 x 2, one column below 480) */
.cyd-cmdrow{margin-top:20px}
.cyd-where-h{margin-top:22px;font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.cyd-where{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.cyd-place{display:flex;flex-direction:column;padding:14px 16px;border-radius:14px;background:#F5F5F7}
.cyd-place-h{font-size:16px;font-weight:500;line-height:1.3;color:var(--s-ink)}
.cyd-place-p{margin-top:4px;font-size:14px;line-height:1.5;color:var(--s-ink-2);text-wrap:pretty}
.cyd-place-k{margin-top:auto;padding-top:10px;font-size:14px;line-height:1.5;color:var(--s-ink-2)}
.cyd-place-k .cy-kbd{font-size:13px}
.cyd-then{margin-right:6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--s-ink-3)}
@media (max-width:480px){.cyd-where{grid-template-columns:minmax(0,1fr)}}
.cyd-trial{margin-top:20px;padding:16px 0 18px;border-top:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule);font-size:16px;line-height:1.55;color:var(--s-ink-2)}
.cyd-trial:focus{outline:none}
.cyd-trial-h{font-weight:500;color:var(--s-ink)}
.cyd-note{margin-top:16px;font-size:15px;line-height:1.55;color:var(--s-ink-2)}
.cyd-note a,.cyd-note a:hover{color:#2757C9;text-decoration-line:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* novice-02 (28 Sep): the requirement line above step 01 */
.cyd-req{margin-top:20px;font-size:16px;line-height:1.55;color:var(--s-ink-2);text-wrap:pretty}
/* novice-07 (28 Sep): on phones the dialog opens at its top and marks the trial block instead of scrolling to it */
.cyd-trial[data-cy-highlight]{margin-inline:-12px;padding-inline:12px;background:#F3EFFF}
.cyd-trial[data-cy-highlight] .cyd-trial-h{color:#794DFF}
.cyd-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:20px;margin-bottom:32px;font-size:16px}
.cyd-link{min-height:44px}
/* review novice-04: phones and touch screens get the share action first, as a 48px ink button under the title; desktop keeps the
   link after the steps, with a permanent underline (not only on hover) */
.cyd-send{display:none;margin-top:20px;height:auto;min-height:48px;padding-block:12px;white-space:normal;text-wrap:balance;line-height:1.3}
.cyd-send-link,.cyd-send-link:hover{text-decoration-line:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:767px),(pointer:coarse){
  .cyd-send{display:flex}
  .cyd-send-link{display:none}
}

/* sticky phone CTA: coarse pointer and below 768px only; opacity only (180ms) */
.cys{position:fixed;left:0;right:0;bottom:0;z-index:30;box-sizing:border-box;display:flex;align-items:center;
  min-height:calc(64px + env(safe-area-inset-bottom));padding:8px var(--pg-gutter) calc(8px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--pg-rule);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 180ms var(--ease-out),visibility 0s linear 180ms}
.cys[data-show="1"]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 180ms var(--ease-out),visibility 0s}
@media not all and (max-width:767px){.cys{display:none!important}}
@media not all and (pointer:coarse){.cys{display:none!important}}