/* cybee v3 · foundation (F0). Loaded after ds/components/components.css, before css/sections.css.
   Spec: _cybee-redesign-2026-09-26/v3/DIRECTION-v3.md §2 (tokens, globals), §2.5 (type), §2.6 (radii), §8.3 (primitives).
   Shared classes start with cy-. Section tracks never restyle them; they compose them. Class reference: F0-HANDOFF.md.
   Radii used here: 0 · 6 · 10 · 14 · 22 · 999 only. Weights: 400 and 500 only. */

/* ------------------------------------------------------------------ 2.1 lockup mask fix
   ds/tokens/brand.css resolves its masks to ds/assets/brand/*.png, which do not exist in the build. */
.cybee-wordmark{-webkit-mask-image:url(../assets/brand/wordmark-source.png);mask-image:url(../assets/brand/wordmark-source.png)}
.cybee-emblem{-webkit-mask-image:url(../assets/brand/emblem.png);mask-image:url(../assets/brand/emblem.png)}

/* ------------------------------------------------------------------ 2.3 page variables */
:root{
  /* frame and grid (DECISIONS 10: DS 1328 content in the 1440 frame) */
  --pg-max: var(--page);                 /* 1328px */
  --pg-gutter: var(--gutter);            /* clamp(20px,4vw,56px) */
  --pg-cols: 12; --pg-gap: 32px;         /* 8 cols + 24px gap at 520 to 899px, 4 cols + 16px gap below 520px */
  --pg-header: 72px;                     /* 60px below 900px */
  --pg-section-y: var(--space-8);        /* 136px; 84px at 520–1019px; 52px below 520px */
  --pg-title-gap: var(--space-7);        /* 84px title to figure; 52px below 900px; 32px below 520px */
  --pg-anchor: 72px;                     /* scroll-margin-top = header height, so a jump lands flush (lead QA: 88 left a 16px strip of the previous section) */

  /* type */
  --pg-h1: clamp(44px,6.4vw,100px);      /* 40px below 768px */
  --pg-h2: clamp(40px,4.4vw,64px);
  --pg-h2-close: clamp(44px,6vw,96px);
  --pg-lead: clamp(18px,1.5vw,22px);
  --pg-outcome: 24px;
  --pg-price: clamp(48px,5vw,72px);
  --pg-slot: .74em;                      /* Machina digit slot (zero is .686em after tracking) */

  /* colour roles used by this page (5.4 roles only, g.13) */
  --pg-fade: var(--s-fade);              /* #8E8E93; #6E6E73 in stage mode */
  --pg-rule: var(--s-line-2);            /* every structural hairline, 1px */
  --pg-hair: var(--s-line);              /* inside product mocks only */
  --pg-night: #0A0A0B;                   /* = cySignal dark ground 10,10,11 (g.27) */
  --pg-night-ink: #F5F5F7; --pg-night-2: #A1A1A6; --pg-night-3: #8E8E93;
  --pg-night-fade: #5E5E63;              /* #8E8E93 in stage mode */
  --pg-night-rule: rgba(255,255,255,.14); --pg-night-hair: rgba(255,255,255,.08);
  --pg-lift: #85A7FF;                    /* the only blue for text on night (a.3) */
  --pg-iris: #794DFF; --pg-ember: #FF6B2B;

  /* mocks and motion */
  --pg-mock-bump: 0px;                   /* 1px in stage mode: added to every mock font-size */
  --pg-copied-reset: 1600ms;             /* tokens.json motion.copiedReset */
  --pg-kbd-font: -apple-system,'SFMono-Regular',Menlo,monospace;
}
@media (max-width:1019px){:root{--pg-section-y:84px}}
@media (max-width:899px){:root{--pg-cols:8;--pg-gap:24px;--pg-header:60px;--pg-title-gap:52px}}
@media (max-width:767px){:root{--pg-h1:40px}}
@media (max-width:519px){:root{--pg-cols:4;--pg-gap:16px;--pg-section-y:52px;--pg-title-gap:32px}}
/* Stage overrides change DS tokens: owner sign off K3. If declined, delete the next two lines; nothing else depends on them. */
html[data-stage="1"]{ --pg-fade:#6E6E73; --pg-night-fade:#8E8E93; --pg-mock-bump:1px; }
@media (min-width:1800px){ :root{ --pg-fade:#6E6E73; --pg-night-fade:#8E8E93; --pg-mock-bump:1px; } }
/* review taste-06, owner sign off with K3 (delete if declined): a tighter stage only rhythm on projector sized screens, so each snapped
   section fits one screen. Real visitors keep 136/84. */
@media (min-width:1020px) and (max-height:940px){html[data-stage="1"]{--pg-section-y:88px;--pg-title-gap:52px}}

/* ------------------------------------------------------------------ base resets on top of ds/tokens/base.css */
html{font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--s-bg)}
@media (prefers-reduced-motion:no-preference){html:not([data-reduced-motion="true"]){scroll-behavior:smooth}}
body{background:var(--s-bg);color:var(--s-ink);font-family:var(--font-body);text-rendering:optimizeLegibility}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;font:inherit;letter-spacing:inherit}
:where(ul[class],ol[class]){margin:0;padding:0;list-style:none}
/* ds base.css sets a:hover{color:var(--ink)} at specificity 0,1,1. This neutralises it for bare links; a link coloured by a
   single class must repeat the colour on :hover (".x,.x:hover{color:…}") or the hover turns it to its parent colour. */
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
button{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
kbd,code{font-size:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #2757C9;outline-offset:4px}
::selection{background:#2757C9;color:#fff}
/* review stage-07: the padding keeps a focused control 12px clear of the sticky header and the focus ring clear of the bottom edge;
   section ids take the 12px back, so anchors and stage snaps still land flush under the header (72, 60 on phones) */
html{scroll-padding-top:calc(var(--pg-anchor) + 12px);scroll-padding-bottom:16px}
main [id]{scroll-margin-top:-12px}
@media (max-width:899px){:root{--pg-anchor:60px}}
/* review stage-02: ?stage=1 only, sections snap to the header by proximity (never mandatory: it skips #questions); real visitors
   on big monitors scroll freely. Tuned with real Page Down at 1536 x 864 ?stage=1 (qa/review/fixes/pgdn-1536-stage.json): Chrome
   snaps a Page Down only to a stop within about a quarter of the screen, and a section taller than the screen is a "covering" area.
   - Every section is a start stop; its snap area leaves out the bottom padding (negative scroll-margin-bottom), so a section whose
     content fits one projector screen is a plain start stop and lands its top at 72.
   - The Passport's second Page Down stops with the S5 heading at the bottom edge (.mac-head end stop), so the third lands S5 at 72.
   - The pricing area reaches 100px past its bottom, so its second Page Down shows the plan buttons and the next lands on #questions.
   - #made-for (158px, right above #questions) is no stop: one Page Down cannot land both (any stop on it wins over #questions and
     then #close is missed); the strip shows at the foot of the plan buttons view. The deck's 07 shot therefore snaps to #questions.
   - The two sub stops (the Passport row, the pricing box) were removed: Page Down never reached them, and a trackpad stop on them
     parked the section H2 under the header. */
html[data-stage="1"]{scroll-snap-type:y proximity}
html[data-stage="1"] main>section[id]{scroll-snap-align:start;scroll-margin-bottom:calc(-1 * var(--pg-section-y) - 16px)}
html[data-stage="1"] #pricing{scroll-margin-bottom:100px}
html[data-stage="1"] #made-for{scroll-snap-align:none}
html[data-stage="1"] .mac-head{scroll-snap-align:end}
main [tabindex="-1"]:focus{outline:none}
/* review stage-08: after a keyboard Fix, focus moves to the open item and shows the ring (a mouse Fix shows none, §2.10) */
main .hero-item[tabindex="-1"]:focus-visible{outline:3px solid #2757C9;outline-offset:4px}
html.cy-lock{overflow:hidden}

/* ?motion=still mirrors the DS reduced motion kill switch (base.css handles the media query) */
html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

@keyframes cyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ 6.2 arrival: "from" states exist only before cyPage.arrive runs */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-arrived]):not(.intro-safe):not([data-reduced-motion="true"]) [data-arrive]{opacity:0}
}

/* ------------------------------------------------------------------ 2.4 grid, width and rhythm */
.cy-wrap{box-sizing:border-box;width:100%;max-width:calc(var(--pg-max) + 2*var(--pg-gutter));padding-inline:var(--pg-gutter);margin-inline:auto}
.cy-grid{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap)}
.cy-section{position:relative;padding-block:var(--pg-section-y)}
.cy-rule-top{border-top:1px solid var(--pg-rule)}

/* ------------------------------------------------------------------ visibility helpers */
.cy-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* the Fix checkbox is fixed to the viewport, so a label click that focuses it (the no JS path) can never scroll the page (review stage-01) */
#cy-fix{position:fixed!important;top:0;left:0}
@media (min-width:768px){.cy-only-phone{display:none!important}}
@media (max-width:767px){.cy-hide-phone{display:none!important}}

/* ------------------------------------------------------------------ 2.5 type roles */
.cy-h1{font-family:var(--font-display);font-size:var(--pg-h1);font-weight:500;letter-spacing:-.045em;line-height:.98;text-wrap:balance;margin-left:-.04em}
.cy-h2{font-family:var(--font-display);font-size:var(--pg-h2);font-weight:500;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.cy-h2--close{font-size:var(--pg-h2-close);line-height:.98}
/* step 7 (29 Sep): the calm section heading, the size of What it does and the menu bar (44px at 1440). Home first; inner pages later */
.cy-h2--s{font-size:clamp(30px,3.1vw,44px);line-height:1.05}
@supports (text-box: trim-both cap alphabetic){.cy-h1,.cy-h2{text-box:trim-both cap alphabetic}}
.cy-fade{color:var(--pg-fade)}
.cy-lead{font-family:var(--font-body);font-size:var(--pg-lead);font-weight:400;letter-spacing:-.01em;line-height:1.45;text-wrap:pretty}
.cy-outcome{font-family:var(--font-body);font-size:var(--pg-outcome);font-weight:400;letter-spacing:-.01em;line-height:1.33;max-width:38ch;text-wrap:pretty}
.cy-title{font-family:var(--font-body);font-size:28px;font-weight:500;letter-spacing:-.022em;line-height:1.2}
.cy-body{font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.55;max-width:60ch;text-wrap:pretty}
.cy-small{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5}
.cy-mono{font-family:var(--font-mono);font-size:14px;font-weight:400;line-height:1.5}
.cy-mono--13{font-size:13px}
.cy-tnum{font-feature-settings:"tnum"}
@media (max-width:519px){.cy-outcome{font-size:20px}.cy-title{font-size:24px}}

.cy-kicker{--cy-hue:#2757C9;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-kicker::before{content:"";flex:none;width:6px;height:6px;background:var(--cy-hue)}
.cy-kicker--signal{--cy-hue:#2757C9}.cy-kicker--iris{--cy-hue:#794DFF}.cy-kicker--lift{--cy-hue:#85A7FF}

.cy-figlabel{font-family:var(--font-mono);font-size:13px;font-weight:400;line-height:1.4;color:var(--s-ink-3)}

.cy-kbd{display:inline-block;padding:1px 6px;border-radius:6px;background:var(--s-key);box-shadow:inset 0 0 0 1px var(--s-line-2);color:var(--s-ink);font-family:var(--pg-kbd-font);font-size:14px;font-weight:500;font-style:normal;line-height:1;letter-spacing:0;white-space:nowrap;vertical-align:.08em}

/* ------------------------------------------------------------------ currency code in running text (review novice-08)
   <span class="cy-cur"><span data-c="CHF">CHF</span><span data-c="EUR">EUR</span>…</span>: only the code matching html[data-cur]
   shows (set by the head script, the S6 chips and the footer select); CHF when data-cur is unset (the no JS default). */
.cy-cur>[data-c]{display:none}
html:not([data-cur]) .cy-cur>[data-c="CHF"],html[data-cur="CHF"] .cy-cur>[data-c="CHF"],html[data-cur="EUR"] .cy-cur>[data-c="EUR"],
html[data-cur="USD"] .cy-cur>[data-c="USD"],html[data-cur="GBP"] .cy-cur>[data-c="GBP"]{display:inline}

/* ------------------------------------------------------------------ small square markers and status hexes (d.15) */
.cy-sq{display:inline-block;flex:none;width:6px;height:6px;background:#2757C9;vertical-align:middle}
.cy-sq--signal{background:#2757C9}.cy-sq--iris{background:#794DFF}.cy-sq--lift{background:#85A7FF}

.cy-hex{--hex-w:14px;display:inline-block;flex:none;width:var(--hex-w);aspect-ratio:1/.866;background:#2757C9;vertical-align:middle;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.cy-hex--sealed{background:#2757C9}
.cy-hex--needs{background:#FF6B2B}
/* ring: SIG 268 geometry, inner hex rescaled so the stroke stays about 1.5px at 14px (SIG's 2%/3% ring is sub pixel at this size) */
.cy-hex--ring,.cy-hex--ember-ring{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%)}
.cy-hex--ring{background:#2757C9}
.cy-hex--ember-ring{background:#FF6B2B}
/* hollow: not observed (SIG 815) */
.cy-hex--hollow{background:var(--s-ink-2);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,0 50%,6% 50%,28% 90%,72% 90%,94% 50%,72% 10%,28% 10%,6% 50%,0 50%)}

/* ------------------------------------------------------------------ buttons: round what you touch (radius 10), press .97
   v3 site: a few px of vertical padding inside the fixed height (the label is centred either way, nothing moves); it keeps
   Impeccable's cramped-padding rule quiet, which reads 0px padding as text touching the edge. */
.cy-btn{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:6px 20px;border-radius:10px;
  font-family:var(--font-body);font-size:16px;font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap;text-align:center;text-decoration:none;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)}
.cy-btn:active{transform:scale(.97)}
.cy-btn--sm{height:40px;padding:4px 16px;font-size:14px}
.cy-btn--md{height:44px;padding:5px 18px;font-size:15px}
.cy-btn--sm::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.cy-btn--full{width:100%}
.cy-btn--primary{background:#2757C9;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.cy-btn--ink{background:#151515;color:#fff}
.cy-btn--secondary{background:var(--s-card);color:var(--s-ink);box-shadow:var(--s-lifted)}
.cy-btn--night{background:#F5F5F7;color:#151515}
.cy-btn[aria-disabled="true"]{pointer-events:none;opacity:.55}
@media (any-hover:hover){
  .cy-btn--primary:hover{color:#fff;background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1))}
  .cy-btn--ink:hover{background:#2757C9;color:#fff}
  .cy-btn--secondary:hover{background:var(--s-raised);color:var(--s-ink)}
  .cy-btn--night:hover{background:#fff;color:#151515}
}

/* ------------------------------------------------------------------ the command field (WEB 68 to 74, SIG 64 to 67)
   <div class="cy-cmd" data-cy-cmd="…">  $ · <code class="cy-cmd__text"> · <button class="cy-cmd__copy" data-cy-copy> */
.cy-cmd{box-sizing:border-box;display:flex;align-items:center;gap:12px;height:52px;max-width:100%;min-width:0;padding:0 6px 0 18px;border-radius:10px;
  background:var(--s-raised);box-shadow:inset 0 0 0 1px var(--s-line);color:var(--s-ink);font-family:var(--font-mono);font-size:15px;line-height:1.2}
.cy-cmd--fit{width:max-content}
.cy-cmd__prompt{flex:none;color:var(--s-accent-ink);-webkit-user-select:none;user-select:none}
.cy-cmd__text{flex:1 1 auto;min-width:0;display:block;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:6px 24px 6px 0;margin-right:-12px;
  font:inherit;color:inherit;background:none;-webkit-user-select:all;user-select:all;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.cy-cmd__text::-webkit-scrollbar{display:none}
.cy-cmd__copy{position:relative;flex:none;display:flex;align-items:center;height:44px;padding:0;border-radius:6px;background:none;cursor:pointer}
.cy-cmd__copy:focus-visible{outline:none}
.cy-cmd__key{position:relative;display:grid;place-items:center;height:38px;padding:0 14px;border-radius:6px;overflow:hidden;background:#151515;color:#fff;
  font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;
  transition:background-color 180ms var(--ease-out),transform 90ms var(--ease-out)}
.cy-cmd__copy:focus-visible .cy-cmd__key{outline:3px solid #2757C9;outline-offset:4px}
.cy-cmd__copy:active .cy-cmd__key{transform:scale(.97)}
.cy-cmd__label{grid-area:1/1;transition:opacity 180ms var(--ease-out)}
.cy-cmd__label--done{opacity:0}
.cy-cmd__copy[data-state="copied"] .cy-cmd__label{opacity:0}
.cy-cmd__copy[data-state="copied"] .cy-cmd__label--done{opacity:1}
.cy-cmd__glint{position:absolute;inset:0 auto 0 0;width:45%;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:translateX(-120%)}
@media (any-hover:hover){.cy-cmd__copy:hover .cy-cmd__key{background:#2757C9}}
html:not(.js) .cy-cmd__copy{display:none}
html:not(.js) .cy-cmd{padding-right:18px}
/* night variant (S9) */
.cy-cmd--night{background:#1A1A1D;box-shadow:inset 0 0 0 1px var(--pg-night-rule);color:#F5F5F7}
.cy-cmd--night .cy-cmd__prompt{color:#85A7FF}
.cy-cmd--night .cy-cmd__key{background:#F5F5F7;color:#151515}
.cy-cmd--night .cy-cmd__copy:focus-visible .cy-cmd__key{outline-color:#85A7FF}
@media (any-hover:hover){.cy-cmd--night .cy-cmd__copy:hover .cy-cmd__key{background:#fff}}
/* phones: 48px field, neutral key so each viewport keeps one blue primary */
@media (max-width:767px){
  .cy-cmd{height:48px;font-size:14px;padding-left:16px}
  .cy-cmd__key{height:36px}
  .cy-cmd:not(.cy-cmd--night) .cy-cmd__key{background:var(--s-key);color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-line-2)}
}

/* ------------------------------------------------------------------ tags (square) and the "+" chip */
.cy-tag{box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:0;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}
/* v3 site: min-height (was height:40px) so a long question wraps inside the chip instead of spilling out; one line still measures 40 */
.cy-chip{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:9px 14px 9px 16px;border-radius:6px;text-align:left;
  box-shadow:inset 0 0 0 1px var(--pg-rule);background:transparent;color:var(--s-ink);font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.25;
  cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color 180ms var(--ease-out),transform 90ms var(--ease-out)}
.cy-chip::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.cy-chip:active{transform:scale(.97)}
.cy-chip__plus{flex:none;width:14px;height:14px;color:#2757C9;fill:currentColor;transition:transform 180ms var(--ease-out)}
details[open]>summary .cy-chip__plus,details[open]>.cy-chip .cy-chip__plus{transform:rotate(45deg)}
@media (any-hover:hover){.cy-chip:hover{background:var(--s-hover)}}

/* ------------------------------------------------------------------ links with arrows */
.cy-link,.cy-link:hover{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:#2757C9;text-underline-offset:4px;text-decoration-thickness:1px}
.cy-link--ink,.cy-link--ink:hover{color:var(--s-ink)}
.cy-link__arrow{display:inline-block;color:#2757C9;transition:transform 180ms var(--ease-out)}
@media (any-hover:hover){.cy-link:hover{text-decoration-line:underline}.cy-link:hover .cy-link__arrow{transform:translateX(2px)}.cy-link:hover .cy-link__arrow--down{transform:translateY(2px)}}

/* ------------------------------------------------------------------ hairline cells (d.20), photos (T1), night ground */
.cy-cells{display:grid;grid-template-columns:repeat(var(--cy-cols,3),minmax(0,1fr));border-top:1px solid var(--pg-rule);border-left:1px solid var(--pg-rule);border-radius:0}
.cy-cells>*{min-width:0;padding:var(--cy-cell-pad,32px);border-right:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule)}

.cy-photo{position:relative;overflow:hidden;border-radius:0;isolation:isolate}
.cy-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.05)}
.cy-photo::after{content:"";position:absolute;inset:0;background:rgba(39,87,201,.06);mix-blend-mode:multiply;pointer-events:none}

.cy-night{background:var(--pg-night);color:var(--pg-night-ink);--s-accent-ink:#85A7FF}
.cy-night :focus-visible,.cy-night:focus-visible{outline-color:#85A7FF}
.cy-night .cy-fade{color:var(--pg-night-fade)}
.cy-night .cy-kicker{--cy-hue:#85A7FF;color:var(--pg-night-3)}
.cy-night .cy-figlabel{color:var(--pg-night-3)}
.cy-night .cy-kbd{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--pg-night-rule);color:var(--pg-night-ink)}
.cy-night .cy-link,.cy-night .cy-link:hover{color:#85A7FF}
.cy-night .cy-link__arrow{color:#85A7FF}
.cy-night ::selection{background:#85A7FF;color:#0A0A0B}

/* ------------------------------------------------------------------ drawers: details.cy-more (inline without JS, shown in #cy-drawer with JS) */
.cy-more>summary{cursor:pointer}
.cy-more__body{padding-top:16px;color:var(--s-ink-2)}
.cy-more__title{margin:0 0 20px;font-family:var(--font-body);font-size:24px;font-weight:500;letter-spacing:-.022em;line-height:1.2;color:var(--s-ink)}
.cy-more__label{display:block;margin:24px 0 6px;font-family:var(--font-mono);font-size:13px;font-weight:400;line-height:1.4;color:var(--s-ink-3)}
.cy-more__title+.cy-more__label{margin-top:0}
.cy-more__p{max-width:52ch;margin:0 0 12px;font-size:18px;line-height:1.55;color:var(--s-ink-2);text-wrap:pretty}
/* tnum is not applied to the number line: in Helvetica Now Text it also widens "," and "." inside a sentence */
.cy-more__num{margin-top:24px;padding-top:16px;border-top:1px solid var(--pg-hair);font-size:16px;font-weight:500;line-height:1.5;color:var(--s-ink-2)}
.cy-more__links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;font-size:16px}
.cy-more__links a{display:inline-flex;align-items:center;min-height:44px}
.cy-more__actions{display:flex;margin-top:32px}
html:not(.js) .cy-more [data-cy-close]{display:none}

/* ------------------------------------------------------------------ dialogs (#cy-install, #cy-drawer): right panel on desktop, bottom sheet on phones */
.cy-dialog{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;
  background:rgba(10,10,11,.32);color:var(--s-ink);font-family:var(--font-body)}
.cy-dialog::backdrop{background:transparent}
.cy-dialog:not([open]){display:none}
.cy-dialog[open]{display:block;animation:cy-dlg-fade 180ms linear}
.cy-dialog__sheet{--cy-dlg-pb:32px;position:absolute;top:24px;right:24px;bottom:24px;box-sizing:border-box;width:min(560px,calc(100vw - 48px));display:flex;flex-direction:column;
  overflow:auto;overscroll-behavior:contain;padding:32px 32px var(--cy-dlg-pb);border-radius:14px;background:var(--s-card);box-shadow:var(--s-lifted);
  animation:cy-dlg-in 420ms var(--ease-out)}
.cy-dialog__sheet>*{flex:none}
.cy-dialog.is-closing{animation:cy-dlg-fade-out 180ms linear forwards}
.cy-dialog.is-closing .cy-dialog__sheet{animation:cy-dlg-out 180ms var(--ease-out) forwards}
.cy-dialog [tabindex="-1"]:focus{outline:none}
.cy-dialog .cy-more__body{padding-top:0;display:flex;flex-direction:column;flex:1 0 auto}
/* the sheet foot (Close) sticks to the bottom edge when the content is taller than the sheet */
.cy-dialog .cy-more__actions,.cy-dialog .cy-dialog__foot{position:sticky;bottom:calc(-1 * var(--cy-dlg-pb));z-index:1;margin:auto -32px calc(-1 * var(--cy-dlg-pb));padding:20px 32px var(--cy-dlg-pb);border-top:1px solid var(--pg-hair);background:var(--s-card)}
.cy-dialog .cy-more__body>:nth-last-child(2){margin-bottom:32px}
@keyframes cy-dlg-fade{from{background-color:rgba(10,10,11,0)}}
@keyframes cy-dlg-fade-out{to{background-color:rgba(10,10,11,0)}}
@keyframes cy-dlg-in{from{opacity:0;transform:translateX(16px)}}
@keyframes cy-dlg-out{to{opacity:0;transform:translateX(16px)}}
@keyframes cy-sheet-in{from{opacity:0;transform:translateY(24px)}}
@keyframes cy-sheet-out{to{opacity:0;transform:translateY(24px)}}
@media (max-width:767px){
  .cy-dialog__sheet{--cy-dlg-pb:calc(24px + env(safe-area-inset-bottom));top:auto;left:0;right:0;bottom:0;width:100%;max-height:85dvh;padding:24px 20px var(--cy-dlg-pb);border-radius:14px 14px 0 0;animation-name:cy-sheet-in}
  .cy-dialog.is-closing .cy-dialog__sheet{animation-name:cy-sheet-out}
  .cy-dialog .cy-more__actions,.cy-dialog .cy-dialog__foot{margin-inline:-20px;padding-inline:20px}
  .cy-dialog .cy-more__actions .cy-btn,.cy-dialog .cy-dialog__foot .cy-btn{width:100%}
}

/* ------------------------------------------------------------------ the German pass (29 Sep 2026)
   German runs longer than English and wraps where the English fits on one line. The sub-headings, card titles, story lines and
   small labels that are set at 1.2 to 1.29 open to 1.3 on German pages only (lang de and de-CH); the English pages keep their
   leading. The display headings (H1, H2) keep the design system's tight leading in both languages. */
html[lang^="de"] .night-setup, html[lang^="de"] .cy-say, html[lang^="de"] .cy-cell__title, html[lang^="de"] .cy-cell__quote,
html[lang^="de"] .cy-maths__t, html[lang^="de"] .hw-title, html[lang^="de"] .does-row__label, html[lang^="de"] .cy-day__lbl b,
html[lang^="de"] .cy-day__lbl span, html[lang^="de"] .cy-prose .cy-cell__title, html[lang^="de"] .cy-day__name,
html[lang^="de"] .cy-more__title, html[lang^="de"] .cy-title, html[lang^="de"] .cyd-title, html[lang^="de"] .night-close,
html[lang^="de"] .cy-chip, html[lang^="de"] .cy-day__state, html[lang^="de"] .cyh-row, html[lang^="de"] .cy-verdict, html[lang^="de"] .cy-versus__q{line-height:1.32}
/* the docs nav: German labels wrap where the English fits, so the current label's grey fill gets the vertical padding four docs
   pages already carry (pg-docs__*-nav, "promote request"); min-height keeps a one line row at 36px */
html[lang^="de"] .cy-docs__list a{padding-block:7px}
/* phones: a German compound (Festplattenverschlüsselung, Sicherheitsfragebogen) can be wider than a column at 360px, so text
   hyphenates there, as German print does in narrow columns. Only long words break (hyphenate-limit-chars), so short words never
   do; wider screens are unchanged */
@media (max-width:480px){
  html[lang^="de"] :is(p,li,dd,dt,td,th,figcaption){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}
  html[lang^="de"] :is(h1,h2,h3,h4){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5}
}
/* the glossary headwords sit in a 212 to 308px column on desktop; a German compound (Festplattenverschlüsselung) breaks there */
html[lang^="de"] .cy-gterm__name{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5}
/* the big figure of a stat ("Over a third") stays on one line in English; "Über ein Drittel" may wrap */
html[lang^="de"] .cy-stat__fig{white-space:normal}
/* "Kopieren" is wider than "Copy": the command box that fits its content (cy-cmd--fit) stays inside its column on German pages, and
   the command scrolls inside the box as on narrow English screens */
html[lang^="de"] .cy-install{grid-template-columns:minmax(0,1fr)}
html[lang^="de"] .cy-cmd--fit{max-width:100%}
/* the English keeps "Keep working where you started." on one line; the longer German sentence may wrap */
html[lang^="de"] .cy-install__hint .cy-nw{white-space:normal}
/* the same sentence in the closing band: kept on one line in English, too wide for a 360px phone in German */
html[lang^="de"] .close-where-2{white-space:normal}
/* German captions run longer and wrap; keep them to a readable line (the English stays on one line) */
html[lang^="de"] .cy-phero__cap{max-width:62ch}