/* cybee v3 · css/components.css · the shared page blocks for every page except the landing (SYSTEM-v3.md §4).
   Loaded after css/foundation.css and css/frame.css, before the landing blocks a page reuses (sections/s2, s5, s6, s8, s9 .css)
   and the page's own page.css. Built on the 5.4 tokens (ds/tokens/*) and the foundation primitives (cy-wrap, cy-grid, cy-section,
   cy-h1, cy-h2, cy-fade, cy-lead, cy-kicker, cy-tag, cy-chip, cy-more, cy-cmd, cy-btn, cy-link, cy-cells, cy-hex, cy-sq, cy-photo,
   cy-night, cy-kbd, cy-cur). Never restyle a foundation primitive here: compose it.
   Rules held in this file: radii 0 · 6 · 10 · 14 · 22 · 999 only · weights 400 and 500 only · 1px hairlines · Neue Machina 500
   for H1/H2/H3 and display figures · the fade line · blue as light (one Signal primary per viewport) · blue plus one pillar hue
   per section (iris proof, mint harden, sky ask, ember a person decides) · hover inside (any-hover:hover) · mock text
   calc(Npx + var(--pg-mock-bump)), never under 13px. Every block prefix is cy-; page CSS uses the page prefix (pg-<slug>-). */

/* =================================================================== 0 frame additions (sub pages only; the landing never has these) */
/* active menu state: build_site.py sets data-current on the group trigger or aria-current="page" on the plain link and items */
.cyh-trigger[data-current],.cyh-link[aria-current="page"]{color:var(--s-ink);box-shadow:inset 0 -2px 0 #2757C9}
.cyh-item[aria-current="page"]{background:var(--s-hover)}
.cyh-item[aria-current="page"] .cyh-ic{background:var(--s-tint-signal);color:#2757C9}
.cyh-sub[aria-current="page"],.cyh-row[aria-current="page"]{color:var(--s-ink);font-weight:500}
.cyf-a[aria-current="page"]{color:var(--s-ink)}

/* =================================================================== 1 grounds, hues, H3 */
.cy-ground--paper{background:var(--s-bg)}
.cy-ground--frost{background:var(--s-raised)}
.cy-ground--iris{background:var(--s-tint-iris)}
.cy-ground--signal{background:var(--s-tint-signal)}
/* the fade line on a light ground that is not paper: --s-fade measures under 3:1 there, --s-ink-3 reaches 4.5 (landing S4, S5) */
.cy-ground--frost .cy-fade,.cy-ground--iris .cy-fade,.cy-ground--signal .cy-fade{color:var(--s-ink-3)}
/* kicker hues: hue square + plain label, never a number (ROLLOUT-BRIEF gates 2) */
.cy-kicker--mint{--cy-hue:#00D4A0}.cy-kicker--sky{--cy-hue:#3FC3F2}.cy-kicker--ember{--cy-hue:#FF6B2B}
.cy-sq--mint{background:#00D4A0}.cy-sq--sky{background:#3FC3F2}.cy-sq--ember{background:#FF6B2B}
.cy-sq--hollow{background:transparent;box-shadow:inset 0 0 0 1px var(--s-ink-3)}
/* the other tool on a compare page (its table column, a "keep it" verdict): ink 3, never a pillar hue (exemplar /compare/crowdstrike) */
.cy-sq--other{background:var(--s-ink-3)}

/* H3: Neue Machina 500 with the fade line, for block titles inside an H2 section */
.cy-h3{font-family:var(--font-display);font-size:clamp(28px,2.5vw,36px);font-weight:500;letter-spacing:-.04em;line-height:1.06;text-wrap:balance}
.cy-h3 .cy-fade{display:block}
@supports (text-box: trim-both cap alphabetic){.cy-h3{text-box:trim-both cap alphabetic}}
/* a display line for a story or a question read aloud (landing S2 setup line) */
.cy-say{font-family:var(--font-display);font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.25;text-wrap:pretty}
/* one block per line from 768px (headings with a fade line use it) */
@media (min-width:768px){.cy-l{display:block}}
.cy-nw{white-space:nowrap}

/* =================================================================== 2 page hero (.cy-phero): kicker, Machina H1 with fade, lead, action, picture */
.cy-phero{position:relative;background:var(--s-bg);padding-block:clamp(40px,5svh,64px) var(--pg-section-y);overflow:hidden}
.cy-phero__head{grid-column:1/span 11;min-width:0}
.cy-phero__kicker{margin-bottom:28px}
.cy-phero__h1 .cy-fade{display:block}
.cy-phero__row{margin-top:56px;align-items:start;row-gap:40px}
.cy-phero__text{grid-column:1/span 6;min-width:0}
.cy-phero__lead{max-width:30em;color:var(--s-ink)}
.cy-phero__lead-2{color:var(--s-ink-2)}
.cy-phero__text>*+*{margin-top:28px}
.cy-phero__fig{grid-column:7/span 6;grid-row:1/span 2;min-width:0;margin:0}
.cy-phero__cap{grid-column:7/span 6;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;font-size:14px;line-height:1.5;color:var(--s-ink-2)}
/* split: the H1 sits in the text column, the picture spans from the top (long H1s, tall pictures) */
.cy-phero--split .cy-phero__row{margin-top:0}
.cy-phero--split .cy-phero__h1{font-size:clamp(44px,5.2vw,80px)}
/* compact: docs, legal, blog, company. H1 at the H2 size, no picture column */
.cy-phero--compact{padding-block:clamp(40px,5svh,64px) var(--pg-title-gap)}
.cy-phero--compact .cy-phero__h1{font-size:var(--pg-h2);line-height:1.02}
.cy-phero--compact .cy-phero__row{margin-top:32px}
.cy-phero--compact .cy-phero__text{grid-column:1/span 8}
.cy-phero__meta{display:flex;flex-wrap:wrap;gap:4px 24px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
/* aside (compare pages): the text in cols 1 to 6, a summary column (.cy-phero__aside, usually the "In one minute" box) in cols 8 to 12
   over two rows, the recognition line (.cy-phero__proof) under the text. DOM order text · aside · proof, so a phone reads the summary
   before the recognition line. */
.cy-phero--aside .cy-phero__text{grid-column:1/span 6}
.cy-phero .cy-phero__aside{grid-column:8/span 5;grid-row:1/span 2;align-self:start;min-width:0;margin-bottom:0}
.cy-phero__proof{grid-column:1/span 6;grid-row:2;align-self:end;min-width:0}
.cy-phero__proof>.cy-proofline{padding-top:20px;border-top:1px solid var(--pg-rule)}
/* photo (articles): a photo in the reading rail, cols 10 to 12, from the crumbs to the last line of the H1 (it lines up with the
   article's right rail). The H1 takes nine columns, the lead eight. Hidden below 900px. Art direction: style="--cy-photo-at:42% 50%". */
.cy-phero__photo{grid-column:10/span 3;grid-row:1;align-self:stretch;display:flex;margin:0;min-width:0}
.cy-phero__photo>.cy-photo{flex:1 1 auto;min-height:200px}
.cy-phero__photo>.cy-photo img{position:absolute;inset:0;object-position:var(--cy-photo-at,50% 50%)}
@media (min-width:900px){.cy-phero--photo .cy-phero__head{grid-column:1/span 9}.cy-phero--photo .cy-phero__text{grid-column:1/span 8}}
@media (max-width:1019px){.cy-phero__text{grid-column:1/span 6}.cy-phero__fig,.cy-phero__cap{grid-column:7/span 6}.cy-phero .cy-phero__aside{grid-column:7/span 6}}
@media (max-width:899px){
  .cy-phero__head,.cy-phero__text,.cy-phero__fig,.cy-phero__cap{grid-column:1/-1}
  .cy-phero__fig{grid-row:auto}
  .cy-phero__row{margin-top:36px}
  .cy-phero--compact .cy-phero__text{grid-column:1/-1}
  .cy-phero .cy-phero__aside,.cy-phero__proof{grid-column:1/-1;grid-row:auto}
  .cy-phero__photo{display:none}
}
@media (max-width:767px){
  .cy-phero{padding-top:28px}
  .cy-phero__kicker{margin-bottom:20px}
  .cy-phero__lead{font-size:17px;line-height:1.5}
  .cy-phero__text>*+*{margin-top:22px}
  .cy-phero__cap{flex-direction:column}
  .cy-phero--compact .cy-phero__h1{font-size:40px}
}
/* a phone crop for tall pictures: the figure fades out at 520px (reflowed, never scaled). novice-19 (28 Sep): the answer card's
   "Ask next" suggestions go, so the crop ends on the action row instead of a faded label */
@media (max-width:767px){.cy-phero__fig--crop>.cy-crop{max-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
  .cy-phero__fig--crop .cy-suggest{display:none}}

/* the hero field: an optional comb (cybee reading the Macs) in the empty corner right of the H1 and above the picture, never under
   type or behind the mock window. <canvas class="cy-phero__field" data-cy-signal="comb" data-cy-opts='{…}'> as the first child of
   .cy-phero.cy-phero--field, opts "cx":0.9,"cy":0.12,"openX":0.93,"openY":0.1 (SYSTEM-v3 §3.2). taste-03 (28 Sep): the mask is an
   ellipse 28% wide and 180px tall around (91%, 110px), so it ends above the picture row (about 300px into the hero at 1440 and 1920)
   and left of the H1's last glyph; it was a tall ellipse at the right edge that lit cells behind the window.
   It is the page's one living thing in the first viewport; below 900px it is not shown. */
.cy-phero--field>.cy-wrap{position:relative;z-index:2}
.cy-phero__field{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 28% 180px at 91% 110px,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 28% 180px at 91% 110px,#000 30%,transparent 100%)}
.cy-phero--field::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--s-bg) 0%,var(--s-bg) 50%,rgba(var(--s-bg-rgb),0) 64%)}
@media (max-width:899px){.cy-phero__field,.cy-phero--field::before{display:none}}

/* breadcrumbs (mono, above the kicker on deep pages) */
.cy-crumbs{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:20px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.cy-crumbs a,.cy-crumbs a:hover{color:var(--s-ink-2);text-underline-offset:4px}
.cy-crumbs li+li::before{content:"/";margin-right:10px;color:var(--s-fade)}
@media (any-hover:hover){.cy-crumbs a:hover{text-decoration:underline;color:var(--s-ink)}}

/* ------------------------------------------------------------------- 2z step 6 (29 Sep 2026, Kristian chose A from qa/options/step6/): the
   calm marketing hero, like the home. The H1 at 64px (1440) with the text beside it (bottoms aligned: one sentence, the command, the install
   line), the picture on a flat grey stage under both, its fig label in the stage corner. The comb, the source line, the three tags, the
   proof line and the lead's second part left the 17 marketing heroes (.cy-phero--stage; /about keeps its founders split and gets the
   calm details only, .cy-phero--calm); compact heroes are unchanged. */
.cy-phero--stage,.cy-phero--calm{--pg-h1:clamp(40px,4.45vw,64px)}
.cy-phero--stage .cy-phero__h1,.cy-phero--calm .cy-phero__h1{font-size:var(--pg-h1)}
.cy-phero--stage .cy-phero__lead,.cy-phero--calm .cy-phero__lead{color:var(--s-ink-2)}
.cy-phero--stage .cy-install__source{display:none}
.cy-phero--stage .cy-phero__text>*+*{margin-top:24px}
.cy-phero--stage .cy-phero__row{margin-top:40px}
@media (min-width:1280px){
  .cy-phero--stage>.cy-wrap.cy-grid:first-of-type{align-items:end}
  .cy-phero--stage .cy-phero__head{grid-column:1/span 7}
  .cy-phero--stage .cy-phero__text{grid-column:8/span 5;align-self:end}
  .cy-phero--stage .cy-phero__lead{font-size:18px}
}
@media (max-width:1279px){.cy-phero--stage .cy-phero__head,.cy-phero--stage .cy-phero__text{grid-column:1/-1}.cy-phero--stage .cy-phero__text{margin-top:24px}}
.cy-phero__fig--stage{grid-column:1/-1;grid-row:auto;position:relative;display:flex;justify-content:center;box-sizing:border-box;padding:32px 32px 0;
  border-radius:14px;background:#F2F2F2}   /* a flat grey backdrop, no hairline (the 4191 wells): a stage, not a card around the picture */
.cy-phero__fig--stage{flex-direction:column;align-items:center;row-gap:12px}
.cy-phero__fig--stage>.cy-crop{width:min(648px,100%)}   /* the window at its native 648px (DS §4.2): chat lines stay under 80 characters */
/* pictures that are not the chat window (a Mac screen with a notification, a diagram, the status list) keep their own layout at up to 880px */
.cy-phero__fig--stage>:not(.cy-phero__stagelabel):not(figcaption):not(.cy-crop){width:min(880px,100%)}
.cy-phero__stagelabel{position:absolute;top:12px;right:18px;z-index:2}
@media (max-width:767px){
  .cy-phero__fig--stage{margin-inline:calc(-1 * var(--pg-gutter));padding:40px var(--pg-gutter) 0;border-radius:0;box-shadow:none}
  .cy-phero__stagelabel{right:var(--pg-gutter)}
}

/* =================================================================== 3 the install block (.cy-install): command, source, hint (include: install) */
.cy-install{display:grid;justify-items:start;gap:12px;min-width:0}
.cy-install>.cy-cmd{max-width:100%}
.cy-install__send{justify-self:stretch}
.cy-install__send-note{margin-top:-4px;font-size:14px;line-height:1.5;color:var(--s-ink-2)}
.cy-install__source{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;font-size:14px;line-height:1.5;color:var(--s-ink-2)}
.cy-install__source .cy-link{font-size:14px;position:relative}
.cy-install__source .cy-link::after{content:"";position:absolute;inset:-12px -6px}
.cy-install__hint{max-width:34em;font-size:15px;line-height:1.7;color:var(--s-ink-2)}
.cy-where-s{font-weight:500;color:var(--s-ink)}
.cy-install--night .cy-where-s{color:var(--pg-night-ink)}
.cy-install__fail{display:none}
[data-copy="failed"] .cy-install__fail{display:block;color:var(--s-ink)}
.cy-install--night .cy-install__source,.cy-install--night .cy-install__hint{color:var(--pg-night-2)}
@media (max-width:767px){.cy-install{justify-items:stretch}.cy-install>.cy-cmd{width:100%}}

/* tags row (square tags, one line) */
.cy-tags{display:flex;flex-wrap:wrap;gap:8px}
.cy-tag--sm{height:28px;padding:0 10px;font-size:13px}
.cy-tag--iris{box-shadow:inset 0 0 0 1px var(--pg-rule)}
@media (max-width:767px){.cy-phero .cy-tags .cy-tag{height:auto;min-height:32px;white-space:normal;padding-block:6px}}

/* recognition line (company proof, never customer proof) */
.cy-proofline{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--s-ink-3)}
.cy-proofline>span:not(:last-child)::after{content:"·";margin-left:16px;color:var(--s-fade)}
.cy-phero__text>.cy-proofline{margin-top:40px;padding-top:20px;border-top:1px solid var(--pg-rule)}

/* =================================================================== 4 section head (.cy-shead): kicker · H2 with fade · lead */
.cy-shead{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);align-items:end;margin-bottom:var(--pg-title-gap)}
.cy-shead>.cy-kicker{grid-column:1/-1;margin-bottom:20px}
.cy-shead>.cy-h2{grid-column:1/-1;min-width:0}
.cy-shead>.cy-h2 .cy-fade{display:block}
.cy-shead__lead{grid-column:1/span 7;margin-top:32px;color:var(--s-ink-2);max-width:36em}
.cy-shead__lead strong{font-weight:500;color:var(--s-ink)}
/* split: H2 left (cols 1 to 7), lead right (cols 8 to 12), bottoms aligned */
.cy-shead--split>.cy-h2{grid-column:1/span 7}
.cy-shead--split>.cy-shead__lead{grid-column:8/span 5;margin-top:0}
.cy-shead--tight{margin-bottom:52px}
@media (max-width:899px){
  .cy-shead>.cy-h2,.cy-shead>.cy-shead__lead,.cy-shead--split>.cy-h2,.cy-shead--split>.cy-shead__lead{grid-column:1/-1}
  .cy-shead--split>.cy-shead__lead{margin-top:24px}
}
.cy-night .cy-shead__lead{color:var(--pg-night-2)}

/* =================================================================== 5 split (.cy-split): text and a figure side by side */
.cy-split{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);row-gap:40px;align-items:center}
.cy-split+.cy-split{margin-top:var(--pg-section-y);padding-top:var(--pg-section-y);border-top:1px solid var(--pg-rule)}
.cy-split__text{grid-column:1/span 5;grid-row:1;min-width:0}
.cy-split__fig{grid-column:7/span 6;grid-row:1;min-width:0;margin:0}
.cy-split--flip .cy-split__text{grid-column:8/span 5}
.cy-split--flip .cy-split__fig{grid-column:1/span 6}
.cy-split--top{align-items:start}
.cy-split__label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:24px}
.cy-split__name{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-split__name::before{content:"";width:6px;height:6px;background:var(--cy-hue,#2757C9)}
.cy-split__text>.cy-h3+*{margin-top:28px}
.cy-split__body{font-size:18px;line-height:1.55;color:var(--s-ink-2);max-width:36em;text-wrap:pretty}
.cy-split__body+.cy-split__body{margin-top:12px}
.cy-split__body strong{font-weight:500;color:var(--s-ink)}
.cy-split__text>.cy-chips,.cy-split__text>.cy-links,.cy-split__text>.cy-points{margin-top:28px}
@media (max-width:1019px){.cy-split__text{grid-column:1/span 6}.cy-split__fig{grid-column:7/span 6}.cy-split--flip .cy-split__text{grid-column:7/span 6}.cy-split--flip .cy-split__fig{grid-column:1/span 6}}
@media (max-width:899px){
  .cy-split,.cy-split--flip{row-gap:40px}
  .cy-split__text,.cy-split__fig,.cy-split--flip .cy-split__text,.cy-split--flip .cy-split__fig{grid-column:1/-1;grid-row:auto}
}

/* points: short statements, each led by a 6px square (never a check glyph) */
.cy-points{display:grid;gap:10px}
.cy-points>li{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:14px;font-size:17px;line-height:1.5;color:var(--s-ink)}
.cy-points>li::before{content:"";width:6px;height:6px;margin-top:.62em;background:var(--cy-hue,#2757C9)}
.cy-points--hex>li{grid-template-columns:14px minmax(0,1fr);column-gap:12px}
.cy-points--hex>li::before{width:14px;height:12.12px;margin-top:.36em;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.cy-points--iris{--cy-hue:#794DFF}
.cy-night .cy-points>li{color:var(--pg-night-ink)}.cy-night .cy-points{--cy-hue:#85A7FF}

/* chips and link rows */
.cy-chips{display:flex;flex-wrap:wrap;gap:12px}
.cy-links{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:16px;line-height:1.5}
.cy-links a{position:relative}
.cy-links a::after{content:"";position:absolute;inset:-12px -4px}
/* a link inside running text outside .cy-prose (a lead, a callout, a step, a cell, a drawer, the summary box): Signal, underlined,
   wrapping like words (exemplars /privacy, /docs/install). A plain <a> in these parts gets it; anywhere else add class="cy-inlink". */
.cy-inlink,.cy-inlink:hover,
:is(.cy-phero__lead,.cy-shead__lead,.cy-callout,.cy-step__d,.cy-split__body,.cy-cell__body,.cy-minute,.cy-more__p,.cy-plan__note) a:not([class]),
:is(.cy-phero__lead,.cy-shead__lead,.cy-callout,.cy-step__d,.cy-split__body,.cy-cell__body,.cy-minute,.cy-more__p,.cy-plan__note) a:not([class]):hover{
  color:#2757C9;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (any-hover:hover){.cy-inlink:hover,:is(.cy-phero__lead,.cy-shead__lead,.cy-callout,.cy-step__d,.cy-split__body,.cy-cell__body,.cy-minute,.cy-more__p,.cy-plan__note) a:not([class]):hover{text-decoration-thickness:2px}}

/* =================================================================== 6 cells: the hairline grid with content (.cy-cells + .cy-cell) */
.cy-cells--2{--cy-cols:2}.cy-cells--3{--cy-cols:3}.cy-cells--4{--cy-cols:4}
@media (max-width:1179px){.cy-cells--4{--cy-cols:2}}
@media (max-width:899px){.cy-cells--3{--cy-cols:1}}
@media (max-width:767px){.cy-cells--2,.cy-cells--4{--cy-cols:1}.cy-cells{--cy-cell-pad:24px}}
.cy-cell{display:flex;flex-direction:column;align-items:flex-start}
.cy-cell__fig{align-self:stretch;display:flex;align-items:center;min-height:120px;margin-bottom:28px}
.cy-cell__label{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-cell__label::before{content:"";width:6px;height:6px;background:var(--cy-hue,#2757C9)}
.cy-cell__label--plain::before{content:none}
.cy-cell__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cy-cell__title{font-family:var(--font-body);font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--s-ink);text-wrap:balance}
.cy-cell__body{margin-top:12px;font-size:17px;line-height:1.5;color:var(--s-ink-2);max-width:38ch;text-wrap:pretty}
.cy-cell__quote{margin-top:14px;font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--s-ink);text-wrap:balance}
.cy-cell__more{margin-top:auto;padding-top:24px}
.cy-cell--link{position:relative;transition:background-color 180ms var(--ease-out)}
.cy-cell--link .cy-cell__go{margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:500;color:var(--s-ink)}
.cy-cell--link .cy-cell__go .cy-link__arrow{color:#2757C9}
.cy-cell--link a.cy-cell__cover::after{content:"";position:absolute;inset:0}
@media (any-hover:hover){.cy-cell--link:hover{background:var(--s-hover)}.cy-cell--link:hover .cy-cell__go .cy-link__arrow{transform:translateX(2px)}}
.cy-cell--link a.cy-cell__cover:focus-visible{outline:none}
.cy-cell--link:has(a.cy-cell__cover:focus-visible){outline:3px solid #2757C9;outline-offset:-3px}
.cy-ground--frost .cy-cells>*{background:var(--s-bg)}
.cy-night .cy-cells{border-color:var(--pg-night-rule)}
.cy-night .cy-cells>*{border-color:var(--pg-night-rule)}
.cy-night .cy-cell__title{color:var(--pg-night-ink)}.cy-night .cy-cell__body{color:var(--pg-night-2)}

/* =================================================================== 7 stats with a visible source (.cy-stats) */
.cy-stats{display:grid;grid-template-columns:repeat(var(--cy-cols,3),minmax(0,1fr));border-top:1px solid var(--pg-rule)}
.cy-stats--2{--cy-cols:2}
.cy-stat{min-width:0;display:flex;flex-direction:column;gap:14px;padding:32px 32px 4px 0}
.cy-stat+.cy-stat{padding-left:32px;border-left:1px solid var(--pg-rule)}
.cy-stat__fig{font-family:var(--font-display);font-size:clamp(48px,5vw,72px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--s-ink);white-space:nowrap}
.cy-stat--lead .cy-stat__fig{color:#2757C9}
.cy-stat__text{font-size:17px;line-height:1.5;color:var(--s-ink);max-width:30ch;text-wrap:pretty}
.cy-stat__src{margin-top:auto;padding-top:8px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
@media (max-width:899px){
  .cy-stats{grid-template-columns:minmax(0,1fr)}
  .cy-stat,.cy-stat+.cy-stat{padding:28px 0;border-left:0}
  .cy-stat+.cy-stat{border-top:1px solid var(--pg-rule)}
}
.cy-night .cy-stats,.cy-night .cy-stat+.cy-stat{border-color:var(--pg-night-rule)}
.cy-night .cy-stat__fig,.cy-night .cy-stat__text{color:var(--pg-night-ink)}.cy-night .cy-stat--lead .cy-stat__fig{color:#85A7FF}
.cy-night .cy-stat__src{color:var(--pg-night-3)}

/* =================================================================== 8 one question, two answers (.cy-versus) */
.cy-versus{border-top:1px solid var(--pg-rule)}
.cy-versus__ask{display:grid;gap:12px;padding:32px 0 36px}
.cy-versus__from{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.cy-versus__q{font-family:var(--font-display);font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.12;text-wrap:balance;max-width:24em}
.cy-versus__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule)}
.cy-versus__col{min-width:0;display:flex;flex-direction:column;gap:18px;padding:32px 32px 36px 0}
.cy-versus__col+.cy-versus__col{padding-left:32px;border-left:1px solid var(--pg-rule)}
.cy-versus__head{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-versus__answer{font-size:21px;line-height:1.45;letter-spacing:-.01em;color:var(--s-ink);text-wrap:pretty}
.cy-versus__col--before .cy-versus__answer{color:var(--s-ink-2)}
.cy-versus__list{display:grid;gap:10px;margin-top:4px}
.cy-versus__list>li{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:12px;font-size:16px;line-height:1.5;color:var(--s-ink-2)}
.cy-versus__list .cy-hex{margin-top:5px}
.cy-versus__list .cy-versus__dash{width:14px;height:3px;margin-top:10px;background:var(--s-ink-3)}
.cy-versus__end{margin-top:auto;padding-top:8px;font-size:15px;font-weight:500;line-height:1.5;color:var(--s-ink)}
@media (max-width:767px){
  .cy-versus__cols{grid-template-columns:minmax(0,1fr)}
  .cy-versus__col,.cy-versus__col+.cy-versus__col{padding:28px 0;border-left:0}
  .cy-versus__col+.cy-versus__col{border-top:1px solid var(--pg-rule)}
  .cy-versus__answer{font-size:19px}
}

/* =================================================================== 9 tables (.cy-table): ruled, square, tnum where numbers sit */
.cy-tablewrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.cy-table{width:100%;border-collapse:collapse;border-spacing:0;font-size:17px;line-height:1.45;color:var(--s-ink)}
.cy-table caption{padding-bottom:12px;text-align:left;font-family:var(--font-mono);font-size:13px;color:var(--s-ink-3)}
.cy-table th{padding:0 20px 12px 0;border-bottom:1px solid var(--pg-rule);text-align:left;vertical-align:bottom;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-table td{padding:16px 20px 16px 0;border-bottom:1px solid var(--pg-rule);vertical-align:top;text-wrap:pretty}
.cy-table tbody th{padding:16px 20px 16px 0;vertical-align:top;font-family:var(--font-body);font-size:17px;font-weight:500;color:var(--s-ink)}
.cy-table td:last-child,.cy-table th:last-child{padding-right:0}
.cy-table .cy-tnum{white-space:nowrap}
.cy-table td.cy-table__muted{color:var(--s-ink-2)}
/* compare: two tools, the question in the first column; cybee's column carries the Signal square in its header */
.cy-table--compare th:not(:first-child),.cy-table--compare td{width:37%}
.cy-table__who{display:inline-flex;align-items:center;gap:10px}
.cy-table__who::before{content:"";width:6px;height:6px;background:var(--cy-hue,var(--s-ink-3))}
.cy-table__who--cybee{--cy-hue:#2757C9;color:var(--s-ink)}
/* a plain gloss under a row name (what the job means, compare tables) and plan tags after an answer (exemplar /compare/crowdstrike):
   <th scope="row">Protection<span class="cy-table__gloss">stops bad software while it runs</span></th>
   <td>…answer.<span class="cy-table__tags"><span class="cy-tag cy-tag--sm">Free</span></span></td> */
.cy-table__gloss{display:block;margin-top:4px;font-size:15px;font-weight:400;line-height:1.4;color:var(--s-ink-3)}
.cy-table__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
/* row groups: a mono label row opens each group, one <tbody> per group (exemplar /pricing #plans):
   <tbody><tr class="cy-table__group"><th scope="rowgroup" colspan="3">Protection</th></tr> …rows… </tbody> */
.cy-table .cy-table__group th{padding:36px 0 12px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-table tbody:first-of-type .cy-table__group th{padding-top:20px}
/* included / not included: a 6px square in the column hue (--cy-hue: Signal by default, set #794DFF on a Proof plan column) or a
   hollow square. <span class="cy-yes">Included</span> · <span class="cy-no">Not included</span> (td class cy-table__muted) */
.cy-yes,.cy-no{display:inline-grid;grid-template-columns:6px minmax(0,1fr);column-gap:12px;align-items:baseline}
.cy-yes::before,.cy-no::before{content:"";width:6px;height:6px;transform:translateY(-2px)}
.cy-yes::before{background:var(--cy-hue,#2757C9)}
.cy-no::before{box-shadow:inset 0 0 0 1px var(--s-ink-3)}
/* phones: each row becomes a block with its labels (data-label on td) */
@media (max-width:767px){
  .cy-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cy-table--stack tr{display:block;padding:16px 0;border-bottom:1px solid var(--pg-rule)}
  .cy-table--stack tr:first-child{border-top:1px solid var(--pg-rule)}
  .cy-table--stack td,.cy-table--stack tbody th{display:block;width:auto;padding:4px 0;border:0}
  .cy-table--stack tbody th{padding-bottom:8px}
  .cy-table--stack td[data-label]::before{content:attr(data-label);display:block;margin-top:8px;font-family:var(--font-mono);font-size:13px;color:var(--s-ink-3)}
  /* --pair (with --stack): the row name spans, the answers sit two by two (short answers: marks, prices, numbers) */
  .cy-table--pair tbody tr:not(.cy-table__group){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .cy-table--pair tbody tr:not(.cy-table__group)>th{grid-column:1/-1}
  .cy-table--stack .cy-table__group{border-top:0;border-bottom:0;padding-bottom:0}
  .cy-table--stack .cy-table__group th{padding:28px 0 4px}
  .cy-table__gloss{font-size:14px}
}

/* =================================================================== 10 plans strip (.cy-plans): the compact pricing answer (include: plans) */
.cy-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:inset 0 0 0 1px var(--pg-rule);background:var(--s-bg)}
.cy-plan{min-width:0;display:flex;flex-direction:column;padding:40px}
.cy-plan+.cy-plan{box-shadow:inset 1px 0 0 var(--pg-rule)}
.cy-plan--paid{box-shadow:inset 0 3px 0 #794DFF,inset 1px 0 0 var(--pg-rule)}
.cy-plan__name{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;line-height:1.3;color:var(--s-ink-2)}
.cy-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:18px}
.cy-plan__num{font-family:var(--font-display);font-size:var(--pg-price);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--s-ink)}
.cy-plan__code{font-size:20px;line-height:1;color:var(--s-ink-3)}
.cy-plan__unit{font-size:16px;line-height:1.4;color:var(--s-ink-2)}
.cy-plan__sub{margin-top:14px;font-size:16px;line-height:1.5;color:var(--s-ink-2)}
.cy-plan__list{display:grid;gap:10px;margin:24px 0 32px}
.cy-plan__list>li{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:14px;font-size:16px;line-height:1.5;color:var(--s-ink)}
.cy-plan__list>li::before{content:"";width:6px;height:6px;margin-top:.6em;background:#2757C9}
.cy-plan--paid .cy-plan__list>li::before{background:#794DFF}
.cy-plan__act{margin-top:auto;display:grid;justify-items:start;gap:12px}
.cy-plan__note{max-width:44ch;font-size:14px;line-height:1.5;color:var(--s-ink-2)}
.cy-plans__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px;margin-top:20px;font-size:14px;line-height:1.5;color:var(--s-ink-3)}
.cy-plans__foot .cy-link{font-size:16px}
@media (max-width:1019px){.cy-plan{padding:32px}}
@media (max-width:767px){
  .cy-plans{grid-template-columns:minmax(0,1fr)}
  .cy-plan{padding:24px}
  .cy-plan+.cy-plan{box-shadow:inset 0 1px 0 var(--pg-rule)}
  .cy-plan--paid{box-shadow:inset 0 3px 0 #794DFF}
  .cy-plan__act{justify-items:stretch}.cy-plan__act .cy-btn{width:100%}
}

/* =================================================================== 11 related pages (.cy-related): a row of link cells */
.cy-related{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)}
.cy-related__item,.cy-related__item:hover{position:relative;display:flex;flex-direction:column;gap:8px;min-height:148px;padding:28px 28px 24px;
  border-right:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule);color:var(--s-ink);transition:background-color 180ms var(--ease-out)}
.cy-related__k{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.cy-related__t{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.cy-related__d{font-size:15px;line-height:1.5;color:var(--s-ink-2);text-wrap:pretty}
.cy-related__item .cy-link__arrow{margin-top:auto;padding-top:8px}
.cy-related__item:focus-visible{outline-offset:-3px}
@media (any-hover:hover){.cy-related__item:hover{background:var(--s-hover)}.cy-related__item:hover .cy-link__arrow{transform:translateX(2px)}}
.cy-ground--frost .cy-related__item{background:var(--s-bg)}
@media (max-width:1019px){.cy-related{--cy-cols:2}}
@media (max-width:599px){.cy-related{--cy-cols:1}.cy-related__item,.cy-related__item:hover{min-height:0;padding:20px 52px 20px 20px}.cy-related__item .cy-link__arrow{position:absolute;right:20px;top:22px;margin:0;padding:0}}

/* =================================================================== 12 callouts (.cy-callout): square, hairline, a square and a label */
.cy-callout{--cy-hue:#2757C9;display:grid;gap:8px;padding:20px 24px;box-shadow:inset 0 0 0 1px var(--pg-rule);background:var(--s-bg);font-size:16px;line-height:1.55;color:var(--s-ink-2)}
.cy-callout__label{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink)}
.cy-callout__label::before{content:"";width:6px;height:6px;background:var(--cy-hue)}
.cy-callout p+p{margin-top:8px}
.cy-callout>p:not(.cy-callout__label){max-width:62ch}
.cy-callout strong{font-weight:500;color:var(--s-ink)}
.cy-callout--limit{--cy-hue:transparent}.cy-callout--limit .cy-callout__label::before{box-shadow:inset 0 0 0 1px var(--s-ink-3)}
.cy-callout--paid{--cy-hue:#794DFF;background:var(--s-tint-iris);box-shadow:none}
.cy-callout--decide{--cy-hue:#FF6B2B}
.cy-callout--frost{background:var(--s-raised);box-shadow:none}

/* =================================================================== 13 steps with keycaps (.cy-steps): paper version of the close band steps */
.cy-steps{border-bottom:1px solid var(--pg-rule);counter-reset:none}
.cy-step{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;padding:18px 0;border-top:1px solid var(--pg-rule)}
.cy-step__n{font-family:var(--font-mono);font-size:14px;line-height:1.5;color:#2757C9}
.cy-step__t{font-size:18px;font-weight:500;line-height:1.45;color:var(--s-ink);text-wrap:pretty}
.cy-step__d{margin-top:6px;font-size:16px;line-height:1.6;color:var(--s-ink-2);text-wrap:pretty}
.cy-step__body>.cy-cmd,.cy-step__body>.cy-install,.cy-step__body>.cy-callout,.cy-step__body>figure{margin-top:14px}
/* inside a step body (exemplar /docs/install): a "+" chip row sits under the text and the "what you will see" line after a figure
   breathes a little. In docs prose the command group is tighter (gap 8) and the line after it sits 12 below; prose margins would win
   over the step values, so the step values are repeated there. */
.cy-prose .cy-step__body>.cy-install{gap:8px}
.cy-prose .cy-step__body>.cy-install+.cy-step__d,.cy-prose .cy-step__body>.cy-cmd+.cy-step__d{margin-top:12px}
.cy-step__body>.cy-chips{margin-top:16px}
.cy-step__body>.cy-fig+.cy-step__see{margin-top:16px}
.cy-prose .cy-step__body>:is(.cy-cmd,.cy-install,.cy-callout){margin-top:14px}
.cy-prose .cy-step__body>.cy-fig{margin-top:18px}
.cy-prose .cy-install .cy-cmd{margin-top:0}
.cy-step__see{margin-top:10px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.cy-night .cy-steps,.cy-night .cy-step{border-color:var(--pg-night-rule)}
.cy-night .cy-step__n{color:#85A7FF}.cy-night .cy-step__t{color:var(--pg-night-ink)}.cy-night .cy-step__d{color:var(--pg-night-2)}

/* =================================================================== 14 docs layout (.cy-docs): side nav, content, on this page */
.cy-docs{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);align-items:start;padding-bottom:var(--pg-section-y)}
.cy-docs__nav{grid-column:1/span 3;position:sticky;top:calc(var(--pg-header) + 32px);max-height:calc(100dvh - var(--pg-header) - 64px);overflow:auto;padding-right:8px}
.cy-docs__main{grid-column:4/span 6;min-width:0}
.cy-docs__toc{grid-column:10/span 3;position:sticky;top:calc(var(--pg-header) + 32px)}
.cy-docs__menu>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;border-top:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule);font-size:16px;font-weight:500;color:var(--s-ink)}
.cy-docs__menu>summary::after{content:"";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)}
.cy-docs__menu[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.cy-docs__group{margin-top:20px;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.cy-docs__list{display:grid;gap:2px;margin-top:8px}
.cy-docs__list a,.cy-docs__list a:hover{display:flex;align-items:center;min-height:36px;padding:0 12px;margin-left:-12px;border-radius:10px;font-size:15px;line-height:1.35;color:var(--s-ink-2);transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out)}
.cy-docs__list a[aria-current="page"]{color:var(--s-ink);font-weight:500;background:var(--s-raised)}
@media (any-hover:hover){.cy-docs__list a:hover{background:var(--s-hover);color:var(--s-ink)}}
.cy-toc__label{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.cy-toc__list{display:grid;gap:0;margin-top:10px}
.cy-toc__list a,.cy-toc__list a:hover{display:block;padding:7px 0 7px 14px;box-shadow:inset 1px 0 0 var(--pg-rule);font-size:14px;line-height:1.45;color:var(--s-ink-2)}
.cy-toc__list a[aria-current="true"]{color:var(--s-ink);box-shadow:inset 2px 0 0 #2757C9}
@media (any-hover:hover){.cy-toc__list a:hover{color:var(--s-ink)}}
@media (min-width:900px){.cy-docs__menu>summary{display:none}}
@media (max-width:1279px){.cy-docs__main{grid-column:4/span 9}.cy-docs__toc{display:none}}
@media (max-width:899px){
  .cy-docs__nav{grid-column:1/-1;position:static;max-height:none;overflow:visible;padding:0;margin-bottom:40px}
  .cy-docs__main{grid-column:1/-1}
}
/* prev / next at the foot of a docs page */
.cy-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:64px;border-top:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule)}
.cy-pager a,.cy-pager a:hover{display:grid;gap:4px;padding:20px 20px 20px 0;color:var(--s-ink)}
.cy-pager a+a{padding:20px 0 20px 20px;border-left:1px solid var(--pg-rule);text-align:right}
.cy-pager__k{font-family:var(--font-mono);font-size:13px;color:var(--s-ink-3)}
.cy-pager__t{font-size:17px;font-weight:500}
@media (any-hover:hover){.cy-pager a:hover .cy-pager__t{color:#2757C9}}

/* =================================================================== 15 prose (.cy-prose): docs, articles, legal documents */
.cy-prose{max-width:min(68ch,38em);font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--s-ink)}
.cy-prose>*+*{margin-top:1em}
.cy-prose p{text-wrap:pretty}
.cy-prose h2{margin-top:2.6em;font-family:var(--font-display);font-size:clamp(28px,2.6vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.cy-prose h3{margin-top:2em;font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
/* anchors in reading layouts: html already pads every jump by the header + 12 (foundation --pg-anchor), so an id here adds only a
   small gap and its heading lands 32px under the header. (The old calc(header + 20) counted the header twice: 176px down.) */
:is(.cy-prose,.cy-read__main,.cy-docs__main,.cy-gloss) [id]{scroll-margin-top:20px}
/* <section id> wrappers inside prose (docs pages, articles, legal documents) keep the prose rhythm; the first starts flush */
.cy-prose>section:first-child>h2,.cy-prose>section:first-child>:first-child{margin-top:0}
.cy-prose section>*+*{margin-top:1em}
.cy-prose section>h2+*,.cy-prose section>h3+*{margin-top:.7em}
.cy-prose h4{margin-top:1.6em;font-size:18px;font-weight:500;line-height:1.4}
.cy-prose h2+*,.cy-prose h3+*,.cy-prose h4+*{margin-top:.7em}
.cy-prose>:first-child{margin-top:0}
.cy-prose a:not([class]),.cy-prose a:not([class]):hover{color:#2757C9;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cy-prose strong{font-weight:500}
.cy-prose ul:not([class]),.cy-prose ol:not([class]){padding-left:0;list-style:none;display:grid;gap:.5em}
.cy-prose ul:not([class])>li{position:relative;padding-left:22px}
.cy-prose ul:not([class])>li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:#2757C9}
.cy-prose ol:not([class]){counter-reset:cyol}
.cy-prose ol:not([class])>li{position:relative;padding-left:32px;counter-increment:cyol}
.cy-prose ol:not([class])>li::before{content:counter(cyol);position:absolute;left:0;top:.15em;font-family:var(--font-mono);font-size:14px;color:#2757C9}
.cy-prose code:not([class]){padding:1px 6px;border-radius:6px;background:var(--s-key);box-shadow:inset 0 0 0 1px var(--s-line);font-family:var(--font-mono);font-size:.84em;white-space:nowrap}
.cy-prose pre{padding:16px 18px;border-radius:14px;background:#111113;color:#E4E4E4;font-family:var(--font-mono);font-size:14px;line-height:1.65;overflow-x:auto;white-space:pre}
.cy-prose pre code{background:none;box-shadow:none;padding:0;font-size:inherit;white-space:inherit}
.cy-prose hr{height:1px;margin:2.4em 0;border:0;background:var(--pg-rule)}
.cy-prose blockquote{margin:1.6em 0;padding:20px 0 0;border-top:1px solid var(--pg-rule);font-size:20px;line-height:1.5;color:var(--s-ink)}
.cy-prose figure{margin:2em 0}
.cy-prose figcaption{margin-top:10px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
/* DS figures inside prose keep their own contract (the plain figcaption and pre rules above would restyle them) */
.cy-prose .cy-fig{margin:32px 0 0}
.cy-prose .cy-fig__cap{margin-top:14px;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.cy-prose .cy-term__body{margin:0;padding:16px 18px 18px;border-radius:0;font-size:calc(13px + var(--pg-mock-bump));line-height:1.65}
/* cells inside the 68ch column (docs "what to do next", "what macOS asks"): tighter padding, the prose h3 rule stays off the titles */
.cy-prose .cy-cells{--cy-cell-pad:24px;margin-top:24px}
.cy-prose h2+.cy-cells,.cy-prose h3+.cy-cells{margin-top:.7em}
.cy-prose .cy-cell__title{margin-top:0;font-size:22px;letter-spacing:-.02em;line-height:1.25}
.cy-prose .cy-cell__body{font-size:16px;line-height:1.55}
.cy-prose .cy-cell--link .cy-cell__go{font-size:16px}
@media (min-width:768px) and (max-width:1099px){.cy-prose .cy-cells--2{--cy-cols:1}}
/* troubleshooting cases (docs): each case a short h3 and one answer, ruled. <div class="cy-cases"><h3>…</h3><p>…</p> …</div> */
.cy-cases{display:grid;margin-top:24px;border-top:1px solid var(--pg-rule)}
.cy-prose .cy-cases{margin-top:24px}
.cy-prose .cy-cases h3{margin-top:0;padding-top:20px;font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.4}
.cy-prose .cy-cases h3+p{margin-top:6px;padding-bottom:20px;border-bottom:1px solid var(--pg-rule);font-size:17px;line-height:1.55;color:var(--s-ink-2)}
.cy-prose .cy-tablewrap{margin:1.6em 0}
.cy-prose .cy-table{font-size:16px}
.cy-prose .cy-callout,.cy-prose .cy-steps,.cy-prose .cy-cmd,.cy-prose .cy-install{margin-top:1.4em}
.cy-prose .cy-callout+*,.cy-prose .cy-steps+*{margin-top:1.4em}
.cy-prose--legal{max-width:min(72ch,40em);font-size:17px;line-height:1.65}
.cy-prose--legal h2{font-family:var(--font-body);font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-top:2.4em}
.cy-prose--legal h3{font-size:18px}
/* a pull quote in Machina, between two hairlines (articles) */
.cy-prose .cy-pager a,.cy-prose .cy-pager a:hover{color:var(--s-ink);text-decoration:none}
.cy-pull,.cy-prose .cy-pull{margin:2em 0;padding:24px 0;border-top:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule);font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.3;color:var(--s-ink);text-wrap:balance}
.cy-pull cite,.cy-prose .cy-pull cite{display:block;margin-top:14px;font-family:var(--font-mono);font-size:13px;font-style:normal;letter-spacing:0;color:var(--s-ink-3)}

/* =================================================================== 16 reading layout (.cy-read): articles, legal documents */
.cy-read{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);align-items:start;padding-bottom:var(--pg-section-y)}
.cy-read__main{grid-column:1/span 8;min-width:0}
.cy-read__aside{grid-column:10/span 3;position:sticky;top:calc(var(--pg-header) + 32px);display:grid;gap:32px}
.cy-read--toc-left .cy-read__aside{grid-column:1/span 3;grid-row:1}
.cy-read--toc-left .cy-read__main{grid-column:4/span 8}
@media (max-width:1019px){.cy-read__main,.cy-read--toc-left .cy-read__main{grid-column:1/-1}.cy-read__aside{display:none}}
/* plates in an article sit on paper: the raised plate, as on a paper section (exemplar /blog/mac-security-questionnaire) */
.cy-read .cy-plate{background:var(--s-raised);box-shadow:none}
/* the article header line */
.cy-byline{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:24px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
/* "In one minute": the summary box at the top of every article */
.cy-minute{margin-bottom:56px;padding:28px 32px 30px;background:var(--s-raised)}
.cy-minute__label{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink)}
.cy-minute__label::before{content:"";width:6px;height:6px;background:#2757C9}
.cy-minute ul{display:grid;gap:10px;max-width:62ch;margin:0;padding:0;list-style:none}
.cy-minute li{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:14px;font-size:17px;line-height:1.5;color:var(--s-ink)}
.cy-minute li::before{content:"";width:6px;height:6px;margin-top:.62em;background:var(--s-ink-3)}
@media (max-width:767px){.cy-minute{padding:22px 20px 24px;margin-bottom:40px}}
/* taste-06 (28 Sep): in an article the summary box ends where the prose measure ends (38em of the 18px prose, x 740 at 1440),
   not at the eight column rail (x 931) */
.cy-read__main .cy-minute{box-sizing:border-box;max-width:684px}
/* article cards on the blog index and the related row */
.cy-posts{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)}
.cy-post,.cy-post:hover{position:relative;display:flex;flex-direction:column;gap:10px;padding:0 0 24px;border-right:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule);color:var(--s-ink)}
.cy-post__img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--s-raised)}
.cy-post__img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.05)}
.cy-post__img picture{display:block;width:100%;height:100%}   /* seo-12: the build wraps post photos in <picture> (WebP first) */
.cy-post__k,.cy-post__t,.cy-post__d,.cy-post__m{padding-inline:24px}
.cy-post__k{margin-top:14px;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.cy-post__t{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3;text-wrap:balance}
.cy-post__d{font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.cy-post__m{margin-top:auto;padding-top:6px;font-family:var(--font-mono);font-size:13px;color:var(--s-ink-3)}
.cy-post:focus-visible{outline-offset:-3px}
@media (any-hover:hover){.cy-post:hover{background:var(--s-hover)}.cy-post:hover .cy-post__t{color:#2757C9}}
.cy-ground--frost .cy-post{background:var(--s-bg)}
@media (max-width:1019px){.cy-posts{--cy-cols:2}}
@media (max-width:599px){.cy-posts{--cy-cols:1}}

/* =================================================================== 17 legal documents (.cy-legal) */
.cy-legal__meta{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:20px;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.cy-legal__doc{counter-reset:none}
.cy-doclist{display:grid;border-top:1px solid var(--pg-rule)}
.cy-doclist a,.cy-doclist a:hover{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--pg-rule);color:var(--s-ink)}
.cy-doclist__t{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.cy-doclist__d{grid-column:1;font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.cy-doclist .cy-link__arrow{grid-column:2;grid-row:1}
@media (any-hover:hover){.cy-doclist a:hover .cy-doclist__t{color:#2757C9}.cy-doclist a:hover .cy-link__arrow{transform:translateX(2px)}}
/* sources (compare pages, anywhere a page rests on outside pages): the section head in cols 1 to 6, a cy-doclist of external links
   (target _blank, arrow ↗) in cols 8 to 12, bottoms aligned (exemplar /compare/crowdstrike #sources).
   <div class="cy-wrap cy-grid cy-sources"><div class="cy-shead cy-sources__head">…</div><div class="cy-doclist cy-sources__list">…</div></div> */
.cy-sources{align-items:end}
.cy-sources .cy-sources__head{grid-column:1/span 6;margin-bottom:0}
.cy-sources__head>.cy-shead__lead{grid-column:1/-1}
.cy-sources__list{grid-column:8/span 5}
@media (max-width:899px){.cy-sources .cy-sources__head,.cy-sources__list{grid-column:1/-1}.cy-sources__list{margin-top:var(--pg-title-gap)}}
/* the publisher line that closes a legal document (the old page's "Published by cybee AG"): <p class="cy-legal__source"> */
.cy-legal__doc>.cy-legal__source{margin-top:3em;padding-top:16px;border-top:1px solid var(--pg-rule);font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
/* after the document, on its measure: the contact callout, then "Read next" (a cy-toc__label and a cy-doclist) */
.cy-legal__after{display:grid;gap:64px;max-width:min(72ch,40em);margin-top:72px;font-size:17px}
.cy-legal__next .cy-doclist{margin-top:14px}
@media (max-width:519px){.cy-legal__after{gap:48px;margin-top:56px}}
/* the reading row of a legal page sits a little under the hero meta line; the aside's "All legal documents" is a tap target tall */
.cy-read--legal{padding-top:8px}
.cy-read__all{min-height:44px;font-size:15px}

/* "On this page" for phones and tablets, where .cy-read__aside is hidden (below 1020px): a closed disclosure at the top of the
   reading column (exemplar /privacy; articles and every legal page). The list repeats the aside's toc links.
   <details class="cy-jump" data-md="skip"><summary class="cy-jump__sum">On this page</summary>
   <nav aria-label="On this page, short list"><ul class="cy-jump__list"><li><a href="#…">…</a></li></ul></nav></details> */
.cy-jump{display:none;margin-bottom:44px}
.cy-jump__sum{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;border-top:1px solid var(--pg-rule);border-bottom:1px solid var(--pg-rule);font-size:16px;font-weight:500;line-height:1.3;color:var(--s-ink);cursor:pointer;list-style:none}
.cy-jump__sum::-webkit-details-marker{display:none}
.cy-jump__sum::after{content:"";flex:none;width:6px;height:6px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 180ms var(--ease-out)}
.cy-jump[open]>.cy-jump__sum::after{transform:translateY(1px) rotate(225deg)}
.cy-jump__list{display:grid;padding:6px 0 10px;border-bottom:1px solid var(--pg-rule)}
.cy-jump__list a,.cy-jump__list a:hover{display:flex;align-items:center;min-height:44px;padding-left:14px;box-shadow:inset 1px 0 0 var(--pg-rule);font-size:16px;line-height:1.35;color:var(--s-ink-2)}
@media (any-hover:hover){.cy-jump__list a:hover{color:var(--s-ink);box-shadow:inset 2px 0 0 #2757C9}}
@media (max-width:1019px){.cy-jump{display:block}}

/* =================================================================== 18 glossary (.cy-gloss) */
.cy-alpha{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:40px}
.cy-alpha a,.cy-alpha span{display:grid;place-items:center;min-width:44px;height:44px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--pg-rule);font-family:var(--font-mono);font-size:14px;color:var(--s-ink)}
.cy-alpha span{color:var(--s-fade);box-shadow:none}
@media (any-hover:hover){.cy-alpha a:hover{background:var(--s-hover)}}
.cy-filter{box-sizing:border-box;width:min(100%,420px);height:48px;padding:0 16px;border:0;border-radius:10px;background:var(--s-raised);box-shadow:inset 0 0 0 1px var(--s-line);font:inherit;font-size:16px;color:var(--s-ink)}
.cy-filter::placeholder{color:var(--s-ink-3)}
.cy-filter:focus-visible{outline:3px solid #2757C9;outline-offset:2px}
.cy-gloss{border-top:1px solid var(--pg-rule)}
.cy-gterm{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);padding:32px 0;border-bottom:1px solid var(--pg-rule)}
.cy-gterm__name{grid-column:1/span 4;font-family:var(--font-display);font-size:clamp(24px,2.2vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.cy-gterm__body{grid-column:5/span 7;min-width:0}
.cy-gterm__def{max-width:40em;font-size:20px;line-height:1.45;color:var(--s-ink);text-wrap:pretty}
.cy-gterm__more{max-width:40em;margin-top:12px;font-size:17px;line-height:1.6;color:var(--s-ink-2)}
.cy-gterm__more>*+*{margin-top:10px}
.cy-gterm__see{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px}
@media (max-width:899px){.cy-gterm__name,.cy-gterm__body{grid-column:1/-1}.cy-gterm__body{margin-top:12px}}

/* =================================================================== 19 product figures: shared frame, captions */
.cy-fig{margin:0;min-width:0}
/* caption under a figure: the mono label first, then one plain sentence (the narration line) */
.cy-fig__cap{display:grid;gap:4px;margin-top:14px;font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.cy-fig__cap>.cy-figlabel{order:-1}
/* a paper plate: the hairline figure ground used behind HTML diagrams */
.cy-plate{position:relative;padding:28px;background:var(--s-bg);box-shadow:inset 0 0 0 1px var(--pg-rule)}
.cy-ground--paper .cy-plate{background:var(--s-raised);box-shadow:none}
.cy-plate__head{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:24px;border-bottom:1px solid var(--s-line);font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
@media (max-width:519px){.cy-plate{padding:20px 16px}}

/* ------------------------------------------------------------------- 19a the assistant window (.cy-win) and the answer card (.cy-answer), DS d.4 */
.cy-win{position:relative;container:cy-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}
.cy-win__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)}
.cy-win__dots{position:absolute;left:14px;top:50%;display:flex;gap:7px;transform:translateY(-50%)}
.cy-win__dots span{display:block;width:11px;height:11px;border-radius:999px;background:#D1D1D6}
.cy-win__title{font-size:calc(13px + var(--pg-mock-bump));font-weight:500;line-height:1;color:#6E6E73;white-space:nowrap}
.cy-win__body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 20px 18px}
.cy-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}
.cy-bubble--mono{font-family:var(--font-mono);font-size:calc(14px + var(--pg-mock-bump))}
.cy-toolchip{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}
.cy-toolchip .cybee-emblem{--cy-emblem-height:11px;--wordmark:#2757C9}
.cy-answer{overflow:hidden;border-radius:14px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,.09)}
.cy-answer__head{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid rgba(0,0,0,.09)}
.cy-answer__head .cybee-emblem{--cy-emblem-height:13px;--wordmark:#2757C9}
.cy-answer__name{font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:18px}
.cy-answer__time{margin-left:auto;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:18px;color:#6E6E73}
.cy-answer__body{display:grid;gap:12px;padding:14px 16px}
.cy-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}
.cy-verdict .cy-hex{--hex-w:16px}
.cy-mstats{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));gap:1px;margin:0;background:var(--s-line-2)}
.cy-mstat{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;padding:9px 12px;background:var(--s-raised)}
.cy-mstat dt{font-size:calc(13px + var(--pg-mock-bump));line-height:21px;color:#6E6E73;white-space:nowrap}
.cy-mstat dd{margin:0;font-size:calc(16px + var(--pg-mock-bump));font-weight:500;line-height:21px;white-space:nowrap;font-feature-settings:"tnum"}
.cy-mitem{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)}
.cy-mitem__mark{flex:none;width:14px;height:3px;background:#FF6B2B}
.cy-mitem__text{flex:1 1 auto;min-width:0}
.cy-mitem__line{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;line-height:20px;text-wrap:balance}
.cy-mitem__sub{font-size:calc(13px + var(--pg-mock-bump));line-height:18px;color:#515154}
.cy-mitem__act{flex:none;display:flex;align-items:center;gap:12px}
.cy-mitem__plan{font-size:calc(13px + var(--pg-mock-bump));line-height:18px;color:#6E6E73;white-space:nowrap}
.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}
.cy-mrec{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;line-height:20px}
.cy-mrec__id{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));color:#6E6E73;white-space:nowrap}
.cy-mrec__link{font-size:calc(14px + var(--pg-mock-bump));font-weight:500;color:#2757C9;white-space:nowrap}
/* suggested questions under an answer (the /cybee front door, owner confirmed 21 Sep) */
.cy-suggest{display:grid;gap:6px}
.cy-suggest__label{font-size:calc(13px + var(--pg-mock-bump));line-height:18px;color:#6E6E73}
.cy-suggest__q{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;min-height:38px;padding:8px 12px;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);font-size:calc(14px + var(--pg-mock-bump));line-height:1.35;color:#151515}
.cy-suggest__q::after{content:"→";flex:none;color:#2757C9}
@container cy-win (max-width:559px){
  .cy-mstat{flex-direction:column;align-items:flex-start;gap:0}
  .cy-mitem{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
  .cy-mitem__mark{margin-top:8px}
  .cy-mitem__text{flex:1 1 0}
  .cy-mitem__act{flex:1 0 100%;justify-content:flex-end}
}
@container cy-win (max-width:420px){
  .cy-win__body{padding:16px;gap:8px}
  .cy-bubble{padding:9px 14px}
  .cy-answer__head{padding:10px 14px}
  .cy-answer__body{padding:12px 14px;gap:10px}
  .cy-mstat{padding:8px 10px}
  .cy-mstat dt{line-height:17px}.cy-mstat dd{line-height:20px}
}

/* ------------------------------------------------------------------- 19b check rows (.cy-checks), DS WEB 151 to 173: label · Apple name · state */
.cy-checks{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:16px;container:cy-checks/inline-size}
.cy-check{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;box-sizing:border-box;min-height:44px;padding:6px 0}
.cy-check+.cy-check{border-top:1px solid var(--pg-hair)}
.cy-check__label{min-width:0;font-size:calc(15px + var(--pg-mock-bump));line-height:1.3;color:var(--s-ink);text-wrap:balance}
.cy-check__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}
.cy-check__state{display:inline-flex;align-items:center;gap:8px;font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:1.3;color:var(--s-ink);white-space:nowrap}
.cy-check--open .cy-check__state{color:var(--s-ink)}
@supports not (grid-template-columns:subgrid){.cy-check{grid-template-columns:minmax(0,1fr) 120px 72px}}
@container cy-checks (max-width:339px){.cy-check__name{display:none}}

/* ------------------------------------------------------------------- 19c the Passport paper (.cy-paper), DS SUR 232 to 240 (radius 0, no shadow) */
.cy-paper{--paper-gap:22px;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--paper-gap);min-width:0;padding:36px 34px;background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--pg-rule);color:var(--s-ink);font-family:var(--font-body);container:cy-paper/inline-size}
.cy-paper>*{flex:none}
.cy-paper__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cy-paper__mono{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3)}
.cy-paper__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}
.cy-paper__title .cy-fade{display:block}
.cy-paper__intro{display:grid;gap:10px}
.cy-paper__stats{display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr));margin:0;border-top:1px solid var(--pg-rule)}
.cy-paper__stat{display:grid;align-content:start;gap:4px;min-width:0;padding:12px 12px 2px 16px;border-left:1px solid var(--pg-rule)}
.cy-paper__stat:first-child{padding-left:0;border-left:0}
.cy-paper__stat dt{font-size:calc(13px + var(--pg-mock-bump));line-height:1.35;color:var(--s-ink-3)}
.cy-paper__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}
.cy-paper__ledger{display:grid;gap:10px}
.cy-paper__lhead{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)}
.cy-paper__legend{display:flex;flex-wrap:wrap;gap:4px 16px}
.cy-paper__key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cy-paper__sq{display:inline-block;flex:none;width:8px;height:8px;background:#2757C9}
.cy-paper__sq--hollow{background:transparent;box-shadow:inset 0 0 0 1px #6E6E73}
.cy-paper__cells{display:grid;grid-template-columns:repeat(45,minmax(0,1fr));gap:3px}
.cy-paper__cells>span{display:block;aspect-ratio:1/1;background:#2757C9}
.cy-paper__cells>.cy-paper__gap{background:transparent;box-shadow:inset 0 0 0 1px #6E6E73}
.cy-paper__table{width:100%;border-collapse:collapse;font-size:calc(15px + var(--pg-mock-bump));line-height:1.3}
.cy-paper__table th{padding:0 0 8px;border-bottom:1px solid var(--pg-rule);font-size:calc(13px + var(--pg-mock-bump));font-weight:400;text-align:left;color:var(--s-ink-3)}
.cy-paper__table td{box-sizing:border-box;height:40px;padding:6px 0;border-bottom:1px solid var(--pg-rule);vertical-align:middle}
.cy-paper__table th:last-child,.cy-paper__table td:last-child{width:1%;padding-left:16px;white-space:nowrap}
.cy-paper__gaps{display:grid;gap:6px;font-size:calc(14px + var(--pg-mock-bump));line-height:1.45;color:var(--s-ink-2)}
.cy-paper__gaps>li{position:relative;padding-left:18px;text-wrap:balance}
.cy-paper__gaps .cy-paper__sq{position:absolute;left:0;top:calc(.725em - 4px)}
.cy-paper__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)}
.cy-paper__verify{font-size:calc(14px + var(--pg-mock-bump));font-weight:500;color:#2757C9}
@container cy-paper (max-width:439px){.cy-paper__title{font-size:calc(26px + var(--pg-mock-bump))}.cy-paper__stat dd{font-size:calc(18px + var(--pg-mock-bump));letter-spacing:0}.cy-paper__cells{grid-template-columns:repeat(30,minmax(0,1fr))}}
@media (max-width:519px){.cy-paper{--paper-gap:20px;padding:20px}.cy-paper__stat{padding-inline:10px 8px}.cy-paper__stat:first-child{padding-left:0}}

/* ------------------------------------------------------------------- 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}}

/* ------------------------------------------------------------------- 19e terminal (.cy-term), DS SUR 46 to 60: night window, SF Mono, ANSI hues */
.cy-term{overflow:hidden;border-radius:14px;background:#111113;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 24px 60px -24px rgba(0,0,0,.45);color:#E4E4E4;font-family:var(--font-mono)}
.cy-term__bar{position:relative;display:flex;align-items:center;justify-content:center;height:30px;padding:0 64px;background:#2A2A2D;font-family:var(--font-body);font-size:calc(13px + var(--pg-mock-bump));font-weight:500;color:#A1A1A6}
.cy-term__bar .cy-win__dots span{background:#48484C}
.cy-term__body{margin:0;padding:16px 18px 18px;font-size:calc(13px + var(--pg-mock-bump));line-height:1.65;white-space:pre;overflow-x:auto;scrollbar-width:none}
.cy-term__body::-webkit-scrollbar{display:none}
.cy-term__p{color:#85A7FF}.cy-term__ok{color:#5F87FF}.cy-term__dim{color:#8A8A8A}.cy-term__warn{color:#FF8700}.cy-term__iris{color:#875FFF}.cy-term__b{font-weight:500;color:#F5F5F7}
/* line by line (docs, exemplar /docs/install fig. 02): <pre class="cy-term__body cy-term__body--lines"> with one
   <span class="cy-term__ln"> per output line (--gap for an empty line); on phones a long line wraps with a hanging indent instead
   of leaving one word alone at the left edge */
.cy-term__body--lines,.cy-prose .cy-term__body--lines{white-space:normal}
.cy-term__ln{display:block;white-space:pre}
.cy-term__ln--gap{min-height:1.65em}
@media (max-width:599px){.cy-term__ln{white-space:pre-wrap;padding-left:4ch;text-indent:-4ch}}

/* ------------------------------------------------------------------- 19e2 an on/off switch inside a check row state (DS macOS switch: pill,
   Signal fill, on). <span class="cy-check__state"><span class="cy-switch" aria-hidden="true"></span>On</span> (exemplar /docs/install fig. 01) */
.cy-switch{position:relative;display:inline-block;flex:none;width:34px;height:20px;border-radius:999px;background:#2757C9}
.cy-switch::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:999px;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.24)}
.cy-switch--off{background:var(--s-line-2)}.cy-switch--off::after{right:auto;left:2px}
.cy-check__state:has(>.cy-switch){gap:10px}

/* ------------------------------------------------------------------- 19f alert card (.cy-alert): a neutral message card, DS SUR 150 to 158 (no vendor chrome) */
.cy-alert{overflow:hidden;border-radius:14px;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;container:cy-alert/inline-size}
.cy-alert__bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.08);font-size:calc(14px + var(--pg-mock-bump));font-weight:500;color:#151515}
.cy-alert__bar img{width:16px;height:16px}
.cy-alert__where{margin-left:auto;font-weight:400;font-size:calc(13px + var(--pg-mock-bump));color:#6E6E73}
.cy-alert__msg{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;padding:16px}
.cy-alert__tile{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(180deg,#FFFFFF,#EEF3FF);box-shadow:0 0 0 1px rgba(0,0,0,.08),inset 0 1px 0 #fff}
.cy-alert__tile .cybee-emblem{--cy-emblem-height:17px;--wordmark:#2757C9}
.cy-alert__from{display:flex;align-items:baseline;gap:8px;font-size:calc(14px + var(--pg-mock-bump));line-height:1.3}
.cy-alert__from b{font-weight:500}
.cy-alert__app{padding:1px 4px;border-radius:6px;background:rgba(0,0,0,.06);font-size:calc(13px + var(--pg-mock-bump));color:#515154}
.cy-alert__time{font-size:calc(13px + var(--pg-mock-bump));color:#6E6E73}
.cy-alert__title{margin-top:6px;font-size:calc(17px + var(--pg-mock-bump));font-weight:500;line-height:1.3;text-wrap:balance}
.cy-alert__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:14px 0 0}
.cy-alert__fields dt{font-size:calc(13px + var(--pg-mock-bump));color:#6E6E73}
.cy-alert__fields dd{margin:2px 0 0;font-size:calc(15px + var(--pg-mock-bump));line-height:1.35}
.cy-alert__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cy-alert__btns .cy-mbtn{height:32px}
.cy-alert__ctx{margin-top:14px;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.45;color:#6E6E73}
@container cy-alert (max-width:420px){.cy-alert__fields{grid-template-columns:minmax(0,1fr)}.cy-alert__msg{grid-template-columns:minmax(0,1fr);row-gap:10px}}
.cy-channels{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* ------------------------------------------------------------------- 19g macOS notification on a photo (.cy-notif), DS SUR 173 to 175 (glass over a photo only) */
.cy-notif{position:absolute;z-index:2;top:40px;right:16px;width:min(360px,calc(100% - 32px));box-sizing:border-box;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding:12px 14px;border-radius:14px;
  background:rgba(245,245,247,.94);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 16px 40px -16px rgba(0,0,0,.45);color:#151515;line-height:1.35}
.cy-notif__tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg,#FFFFFF,#EEF3FF)}
.cy-notif__tile .cybee-emblem{--cy-emblem-height:15px;--wordmark:#2757C9}
.cy-notif__top{display:flex;justify-content:space-between;gap:8px;font-size:calc(13px + var(--pg-mock-bump));color:#515154}
.cy-notif__t{font-size:calc(14px + var(--pg-mock-bump));font-weight:500}
.cy-notif__d{font-size:calc(14px + var(--pg-mock-bump));color:#151515;text-wrap:balance}

/* ------------------------------------------------------------------- 19h plate: watch the whole day (.cy-day), from DS models-plates 01, HTML so phones stay legible */
.cy-day{display:grid;gap:22px;font-family:var(--font-body)}
.cy-day__rail{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px;align-items:center}
.cy-day__who{display:grid;gap:2px}
.cy-day__name{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;line-height:1.2;color:var(--s-ink)}
.cy-day__name--cybee{color:#2757C9}
.cy-day__when{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.3;color:var(--s-ink-3);text-wrap:balance}
.cy-day__line{position:relative;height:88px;border-bottom:1px solid var(--s-line-2)}
.cy-day__line--all::before{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(90deg,rgba(39,87,201,.55) 0 1px,transparent 1px 7px)}
.cy-day__mark{position:absolute;bottom:-4px;left:var(--at);display:grid;justify-items:center;transform:translateX(-50%)}
.cy-day__mark::after{content:"";order:3;width:7px;height:7px;background:var(--s-ink)}
.cy-day__stem{order:2;width:1px;height:24px;background:var(--s-ink)}
.cy-day__lbl{order:1;display:grid;justify-items:center;margin-bottom:4px;white-space:nowrap}
.cy-day__lbl b{font-size:calc(13px + var(--pg-mock-bump));font-weight:500;line-height:1.25;color:var(--s-ink)}
.cy-day__lbl span{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.25;color:var(--s-ink-3)}
.cy-day__mark--stop::after{background:#2757C9}
.cy-day__mark--stop .cy-day__stem{background:#2757C9;height:34px}
.cy-day__mark--stop .cy-day__lbl b{color:#2757C9}
.cy-day__mark--end{left:auto;right:0;transform:none;justify-items:end}
.cy-day__mark--end .cy-day__lbl{justify-items:end}
.cy-day__mark--end::after{background:#2757C9}
.cy-day__axis{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px}
.cy-day__ticks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));color:var(--s-ink-3)}
/* 28 Sep (/product fig. 02, taste-12): a state that holds all day and point events whose labels alternate above and below the axis.
   .cy-day__line--state draws a band along the axis with its label top left (<p class="cy-day__state"><b>FileVault</b><span>…</span></p>);
   .cy-day__mark--below hangs its label under the axis (dot, stem, then the label, wrapping inside 180px), and the rail that holds one
   takes .cy-day__rail--below so the label has room before the next rail. No label touches another at 1440, 1024 and 375. */
.cy-day__line--state{height:100px}
.cy-day__line--state::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(29,29,31,.22)}
.cy-day__state{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:6px;margin:0;white-space:nowrap;
  font-size:calc(13px + var(--pg-mock-bump));line-height:1.25}
.cy-day__state::before{content:"";align-self:center;flex:none;width:10px;height:6px;background:rgba(29,29,31,.22)}
.cy-day__state b{font-weight:500;color:var(--s-ink)}
.cy-day__state span{font-family:var(--font-mono);color:var(--s-ink-3)}
.cy-day__rail--below{padding-bottom:66px}
.cy-day__mark--below{bottom:auto;top:calc(100% - 3px);width:180px}
.cy-day__mark--below::after{order:1}
.cy-day__mark--below .cy-day__stem{order:2;height:10px}
.cy-day__mark--below .cy-day__lbl{order:3;margin:4px 0 0;white-space:normal;text-align:center;text-wrap:balance}
@media (max-width:599px){
  .cy-day__rail,.cy-day__axis{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .cy-day__axis>span:first-child{display:none}
  .cy-day__line{height:104px}
  .cy-day__line--state{height:108px}
  .cy-day__stem--tall{height:66px!important}
  .cy-day__ticks>span:nth-child(even){visibility:hidden}
}

/* ------------------------------------------------------------------- 19i plate: the owner decides (.cy-gate), from DS models-plates 04 on the fixture */
.cy-gate{display:grid;border-top:1px solid var(--s-line-2)}
.cy-gate__row{display:grid;grid-template-columns:84px 14px minmax(0,1fr);column-gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--s-line)}
.cy-gate__t{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3);font-feature-settings:"tnum"}
.cy-gate__m{align-self:center;display:flex}
.cy-gate__m .cy-hex{--hex-w:14px}
.cy-gate__rule{width:14px;height:3px;background:#FF6B2B}
.cy-gate__x{font-size:calc(15px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink);text-wrap:pretty}
.cy-gate__x small{display:block;margin-top:2px;font-size:calc(13px + var(--pg-mock-bump));color:var(--s-ink-3)}
/* plan bands: a mono label on a hairline in the plan's hue marks where each plan's rows begin (exemplar /pricing fig. 01).
   <ol class="cy-gate cy-gate--banded"><li class="cy-gate__band"><span>free, on every Mac</span></li> …rows…
   <li class="cy-gate__band cy-gate__band--paid"><span>the Proof plan</span></li> …rows… </ol> */
.cy-gate--banded{border-top:0}
.cy-gate__band{display:flex;align-items:center;gap:12px;padding:6px 0 4px;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:#2757C9}
.cy-gate__band::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.45}
.cy-gate__band--paid{margin-top:14px;color:#794DFF}
/* phones: the time column narrows to its "09:41" so the sentence keeps its measure */
@media (max-width:519px){.cy-gate__row{grid-template-columns:48px 14px minmax(0,1fr);column-gap:10px}}

/* ------------------------------------------------------------------- 19j the answer contract (.cy-contract), DS d.5: five parts, same order everywhere */
.cy-contract{display:grid;grid-template-columns:minmax(0,1fr);gap:0;box-shadow:inset 0 0 0 1px var(--pg-rule);background:var(--s-bg)}
.cy-contract__asks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-content:start;padding:24px 24px 20px;border-bottom:1px solid var(--pg-rule)}
.cy-contract__asks>.cy-contract__h{grid-column:1/-1}
.cy-contract__h{margin-bottom:12px;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3)}
.cy-contract__ask{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--s-line)}
.cy-contract__host{font-size:calc(13px + var(--pg-mock-bump));line-height:1.3;color:var(--s-ink-3)}
.cy-contract__q{font-family:var(--font-mono);font-size:calc(14px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink)}
.cy-contract__parts{display:grid;align-content:start;padding:24px}
.cy-contract__part{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--s-line)}
.cy-contract__k{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3)}
.cy-contract__v{font-size:calc(15px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink)}
.cy-contract__v--verdict{font-weight:500}
.cy-contract__v--id{font-family:var(--font-mono);font-size:calc(14px + var(--pg-mock-bump));color:var(--s-ink-2)}
@media (max-width:767px){
  .cy-contract__asks{grid-template-columns:minmax(0,1fr);padding:20px}
  .cy-contract__parts{padding:20px}
  .cy-contract__part{grid-template-columns:minmax(0,1fr);row-gap:2px}
}


/* =================================================================== 21 article and figure parts (promoted from the exemplars, 27 Sep) */
/* ------------------------------------------------------------------- 21a two dated records, kept apart (.cy-recs), exemplar /blog/mac-security-questionnaire fig. 02.
   An earlier record and a later one side by side with the step between them (ember: a person decided). Inside a cy-plate:
   <div class="cy-recs__row"><div class="cy-rec"> __id (mono: "dated record" · id) · __time (Machina) · __verdict · <ul class="cy-rec__rows"> (name ·
   __state with a hex) · __foot (ember __rule or a hex) </div><p class="cy-recs__step"><span class="cy-recs__line"></span><span class="cy-recs__say">Mira says yes</span></p>
   <div class="cy-rec">…</div></div>. Stacks below 640px with the step turned down. */
.cy-recs__row{display:grid;grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);align-items:stretch}
.cy-rec{display:flex;flex-direction:column;gap:14px;min-width:0;padding:22px 24px 20px;background:var(--s-bg);box-shadow:inset 0 0 0 1px var(--s-line)}
.cy-rec__id{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3)}
.cy-rec__time{font-family:var(--font-display);font-size:44px;font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--s-ink)}
.cy-rec__verdict{font-size:calc(17px + var(--pg-mock-bump));font-weight:500;line-height:1.35;color:var(--s-ink)}
.cy-rec__rows{display:grid;border-top:1px solid var(--s-line)}
.cy-rec__rows>li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--s-line);font-size:calc(14px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-2)}
.cy-rec__state{display:inline-flex;align-items:center;gap:8px;color:var(--s-ink)}
.cy-rec__state .cy-hex{--hex-w:12px}
.cy-rec__foot{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:calc(14px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink)}
.cy-rec__foot .cy-hex{--hex-w:12px}
.cy-rec__rule{flex:none;width:14px;height:3px;background:#FF6B2B}
.cy-recs__step{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 10px;text-align:center}
.cy-recs__line{display:block;width:100%;height:1px;background:var(--s-line-2);position:relative}
.cy-recs__line::before{content:"";position:absolute;left:50%;top:-1px;width:14px;height:3px;margin-left:-7px;background:#FF6B2B}
.cy-recs__line::after{content:"";position:absolute;right:0;top:-3px;border-left:6px solid var(--s-ink-3);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.cy-recs__say{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-2)}
@media (max-width:639px){
  .cy-recs__row{grid-template-columns:minmax(0,1fr)}
  .cy-recs__step{flex-direction:row;justify-content:flex-start;gap:12px;padding:14px 0 14px 24px}
  .cy-recs__line{width:1px;height:28px;flex:none}
  .cy-recs__line::before{left:-1px;top:50%;width:3px;height:14px;margin:-7px 0 0}
  .cy-recs__line::after{right:auto;left:-3px;top:auto;bottom:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:6px solid var(--s-ink-3);border-bottom:0}
  .cy-rec{padding:18px 16px 16px}
  .cy-rec__time{font-size:36px}
}
@media (max-width:429px){.cy-rec__rows>li{flex-direction:column;align-items:flex-start;gap:4px}}

/* ------------------------------------------------------------------- 21b a static checklist on a plate (.cy-checklist): hollow boxes nobody ticks,
   read before sending (exemplar fig. "four checks"). <div class="cy-plate cy-checklist"><ul class="cy-checklist__list"><li><span class="cy-checklist__box"
   aria-hidden="true"></span>Question?</li></ul></div>. The interactive version is .cy-ws. */
.cy-checklist__list{display:grid}
.cy-checklist__list>li{display:grid;grid-template-columns:18px minmax(0,58ch);column-gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--s-line);font-size:18px;line-height:1.45;color:var(--s-ink);text-wrap:pretty}
.cy-checklist__list>li:last-child{border-bottom:0;padding-bottom:4px}
.cy-checklist__box{width:16px;height:16px;transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--s-ink-3)}
@media (max-width:767px){.cy-checklist__list>li{font-size:17px}}

/* ------------------------------------------------------------------- 21c the worksheet (.cy-ws): prompts a reader ticks while preparing a review, a
   blank CSV built in the browser from the prompts on the page, "Show remaining prompts", "Clear checks". No storage, no submission,
   no score. JS: js/cy-worksheet.js (linked by build_site.py when the body has data-cy-ws). Markup: copy #worksheet of
   pages/blog__mac-security-questionnaire/body.html; the root carries data-cy-ws, data-cy-ws-file (the CSV name) and data-cy-ws-head
   (the CSV columns as a JSON array: question, collect, limit, …blank columns…, status). */
.cy-ws .cy-prose h2{margin-top:14px}
.cy-ws__kicker{margin:0}
.cy-ws__sheet{margin-top:36px;padding:32px 36px 28px;background:var(--s-raised)}
@media (max-width:767px){.cy-ws__sheet{padding:24px 18px 20px}}
.cy-ws__dl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cy-ws__btn[hidden]{display:none}
.cy-ws__fmt{display:flex;flex-wrap:wrap;gap:2px 0;font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.cy-ws__fmt span{white-space:nowrap}
.cy-ws__fmt span:not(:last-child)::after{content:"·";margin:0 8px}
.cy-ws__note{margin-top:18px;max-width:62ch;font-size:15px;line-height:1.55;color:var(--s-ink-2)}
.cy-ws__nojs{margin-top:10px;max-width:62ch;font-size:15px;line-height:1.55;color:var(--s-ink-2)}
html.js .cy-ws__nojs{display:none}
html:not(.js) .cy-ws__dl,html:not(.js) .cy-ws__note{display:none}
html:not(.js) .cy-ws__nojs{margin-top:0}
.cy-ws__controls{display:grid;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid var(--pg-rule)}
.cy-ws__controls[hidden]{display:none}
.cy-ws__progress{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.cy-ws__status{font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink)}
.cy-ws__meter{display:inline-grid;grid-template-columns:repeat(8,12px);gap:4px}
.cy-ws__meter>span{width:12px;height:12px;box-shadow:inset 0 0 0 1px var(--s-ink-3);transition:background-color 160ms ease,box-shadow 160ms ease}
.cy-ws__meter>span.is-on{background:#2757C9;box-shadow:none}
.cy-ws__btns{display:flex;flex-wrap:wrap;gap:10px}
.cy-ws__fine{max-width:62ch;font-size:14px;line-height:1.5;color:var(--s-ink-3)}
.cy-ws__list{display:grid;margin-top:28px;counter-reset:none}
.cy-ws__item{padding:28px 0 24px;border-top:1px solid var(--pg-rule)}
.cy-ws__item[hidden]{display:none}
.cy-ws__head{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline}
.cy-ws__n{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.cy-ws__q{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.35;color:var(--s-ink);text-wrap:balance}
.cy-ws__dl2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;margin-top:16px;padding-left:40px}
.cy-ws__part{display:grid;gap:6px;align-content:start}
.cy-ws__part dt{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink)}
.cy-ws__part dt::before{content:"";flex:none;width:6px;height:6px;background:#2757C9}
.cy-ws__part--limit dt::before{background:transparent;box-shadow:inset 0 0 0 1px var(--s-ink-3)}
.cy-ws__part dd{margin:0;font-size:16px;line-height:1.55;color:var(--s-ink-2);text-wrap:pretty}
.cy-ws__check{display:flex;align-items:center;gap:12px;min-height:44px;margin:14px 0 0 40px;font-size:15px;line-height:1.4;color:var(--s-ink);cursor:pointer;width:max-content;max-width:calc(100% - 40px)}
.cy-ws__check[hidden]{display:none}
.cy-ws__check input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.cy-ws__box{position:relative;flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--s-bg);box-shadow:inset 0 0 0 1px var(--s-ink-3);transition:background-color 120ms ease,box-shadow 120ms ease}
.cy-ws__box svg{width:14px;height:14px;color:#fff;fill:currentColor;opacity:0;transition:opacity 120ms ease}
.cy-ws__check input:checked+.cy-ws__box{background:#2757C9;box-shadow:none}
.cy-ws__check input:checked+.cy-ws__box svg{opacity:1}
.cy-ws__check input:focus-visible+.cy-ws__box{outline:3px solid #2757C9;outline-offset:2px}
@media (any-hover:hover){.cy-ws__check:hover .cy-ws__box{box-shadow:inset 0 0 0 1px var(--s-ink)}}
.cy-ws__item.is-done .cy-ws__q{color:var(--s-ink-2)}
.cy-ws__empty{padding:24px 0;border-top:1px solid var(--pg-rule);font-size:16px;line-height:1.5;color:var(--s-ink)}
.cy-ws__empty[hidden]{display:none}
.cy-ws__foot{display:grid;justify-items:start;gap:6px;margin-top:8px;padding-top:20px;border-top:1px solid var(--pg-rule);font-size:14px;line-height:1.5;color:var(--s-ink-3)}
.cy-ws__foot .cy-link{font-size:14px}
.cy-ws__foot>p{max-width:62ch}
@media (max-width:767px){
  .cy-ws__head{grid-template-columns:32px minmax(0,1fr)}
  .cy-ws__q{font-size:18px}
  .cy-ws__dl2{grid-template-columns:minmax(0,1fr);padding-left:32px}
  .cy-ws__check{margin-left:32px;max-width:calc(100% - 32px);width:auto}
}
@media (max-width:399px){
  .cy-ws__dl2{padding-left:0}
  .cy-ws__check{margin-left:0;max-width:100%}
}
@media (prefers-reduced-motion:reduce){.cy-ws__box,.cy-ws__box svg,.cy-ws__meter>span{transition:none}}
@media (max-width:519px){.cy-ws__btns .cy-btn{flex:1 1 100%}.cy-ws__dl .cy-ws__btn{width:100%}}

/* ------------------------------------------------------------------- 21d the next step at the end of an article (.cy-next): one Machina line,
   one sentence, one link to the page that puts the article to work. */
.cy-next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;padding:28px 32px;box-shadow:inset 0 0 0 1px var(--pg-rule)}
.cy-next__text{flex:1 1 360px;display:grid;gap:8px;max-width:36em}
.cy-next__t{font-family:var(--font-display);font-size:clamp(24px,2.2vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.15;color:var(--s-ink);text-wrap:balance}
.cy-next__d{font-size:16px;line-height:1.5;color:var(--s-ink-2)}
.cy-next__go{font-size:16px}
@media (max-width:767px){.cy-next{padding:22px 20px}}

/* ------------------------------------------------------------------- 21e the rail card under an article toc (.cy-nudge): one quiet line about
   cybee and one link, never a button. */
.cy-nudge{display:grid;gap:10px;padding:20px 20px 18px;background:var(--s-raised)}
.cy-nudge__k{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink)}
.cy-nudge__t{font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.cy-nudge__go{font-size:15px}

/* =================================================================== 20 internal and utility */
.cy-open{padding:16px 20px;box-shadow:inset 0 0 0 1px var(--pg-rule);font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--s-ink-3)}
.cy-mt-0{margin-top:0!important}
/* an old inline anchor id kept for links into the page, placed at the top of its (positioned) section: <span id="scope" class="cy-anchor"
   aria-hidden="true"></span> as the section's first child (exemplar /compare/crowdstrike) */
.cy-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}

/* =================================================================== 22 promoted at integration (28 Sep): parts two or more page teams built
   page scoped. Each replaced identical copies in the pages named; the pages now use these classes (SYSTEM-v3.md §3.33 to §3.40). */
/* ------------------------------------------------------------------- 22a the hero caption sits under the picture: one row gap below it,
   whatever the height of the text column (it used to drift under a taller text column: /use-cases/security-questionnaires 149px,
   /use-cases/team-changes 99px, /product/training 81px). The text runs down both rows. --hug pulls the caption to 16px under a short
   picture (/about, /security, /use-cases/security-alerts). */
@media (min-width:900px){
  .cy-phero__row:has(>.cy-phero__fig){grid-template-rows:auto 1fr}
  .cy-phero__row:has(>.cy-phero__fig)>.cy-phero__text{grid-row:1/span 2}
  .cy-phero__row>.cy-phero__fig{grid-row:1}
  .cy-phero__row:has(>.cy-phero__fig)>.cy-phero__cap{grid-row:2;align-self:start}
  .cy-phero--hug .cy-phero__cap{margin-top:-24px}
}
/* ------------------------------------------------------------------- 22b plate parts: the gate right under a plate head (the head already draws
   the rule: /product/ai-agents, /product/workspace, /security, /use-cases/security-alerts; fixes the double rule on /docs/assistant),
   the right span of a plate head (a date, a count) never wraps (4 articles), a mono foot line under a plate (/product/ai-agents;
   --ruled with a hairline above: /product/training), and captions without a one word last line (4 articles) */
.cy-plate__head+.cy-gate{border-top:0}
.cy-plate__head>span:last-child:not(:first-child){flex:none;white-space:nowrap}
.cy-plate__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:16px;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3)}
.cy-plate__foot--ruled{padding-top:14px;border-top:1px solid var(--s-line)}
.cy-fig__cap>span:last-child{text-wrap:pretty}
/* ------------------------------------------------------------------- 22c squares at the size of what they stand next to: the verdict square in an
   answer card (12px: /pricing, /product/ai-agents, /product/training), a state square in a check row (12px: /product/training,
   /blog/security-training-small-team) and the Training due square in the menu bar card head (26px, DS SUR menu bar state) */
.cy-verdict>.cy-sq,.cy-check__state>.cy-sq{width:12px;height:12px}
.cy-mcard__hex.cy-sq{width:26px;height:26px}
/* ------------------------------------------------------------------- 22d outside cybee: a hollow square on a cell label or on points (what cybee
   does not cover, what another owner answers: /product/workspace, /use-cases/team-changes, /docs/trust-passport and 3 articles) */
.cy-cell__label--hollow::before,.cy-points--hollow>li::before{background:transparent;box-shadow:inset 0 0 0 1px var(--s-ink-3)}
/* ------------------------------------------------------------------- 22e two records side by side, kept apart, no step between them (a Workspace
   record next to a Trust Passport: /product/workspace, /use-cases/workspace-app-access). <div class="cy-recs--pair"><div class="cy-rec">…
   </div><div class="cy-rec">…</div></div>; stacked below 560px. A square in a record foot keeps its size. */
.cy-recs--pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:559px){.cy-recs--pair{grid-template-columns:minmax(0,1fr)}}
.cy-rec__foot>.cy-sq{flex:none}
/* ------------------------------------------------------------------- 22f the maths row under the plans (audience pages): a heading, one sentence and
   a link left (cols 1 to 4), the arithmetic table right (cols 6 to 12); --fig takes the twelve months plate instead (text cols 1 to 5,
   the plate cols 8 to 12 at the /pricing plate's size). Stacked below 1020. /for/developer-agencies, /for/ai-startups, /for/solo. */
.cy-maths{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);row-gap:28px;align-items:start;margin-top:var(--pg-title-gap);padding-top:40px;border-top:1px solid var(--pg-rule)}
.cy-maths__text{grid-column:1/span 4}
.cy-maths__table{grid-column:6/span 7}
.cy-maths--fig .cy-maths__text{grid-column:1/span 5}
.cy-maths__fig{grid-column:8/span 5;justify-self:end;width:100%;max-width:460px}
.cy-maths__t{font-family:var(--font-body);font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--s-ink)}
.cy-maths__d{margin-top:12px;font-size:17px;line-height:1.55;color:var(--s-ink-2);max-width:32em}
.cy-maths .cy-links{margin-top:20px}
@media (max-width:1019px){.cy-maths__text,.cy-maths--fig .cy-maths__text,.cy-maths__table,.cy-maths__fig{grid-column:1/-1}.cy-maths__fig{max-width:560px}}
@media (max-width:767px){.cy-maths{padding-top:28px}.cy-maths__t{font-size:22px}}
/* ------------------------------------------------------------------- 22g the twelve months plate (exemplar /pricing fig. 02, also /for/solo): one
   square per month, iris = a month you pay for, hollow (li.cy-months__off) = a month you do not.
   <div class="cy-months"><div class="cy-months__row"><p class="cy-months__k">Billed monthly</p><ol class="cy-months__cells" aria-hidden="true">
   twelve <li></li></ol><p class="cy-months__v"><span class="cy-months__code">cur</span> <span class="cy-tnum">108</span></p></div> …
   <p class="cy-months__legend"><span class="cy-months__key">…</span><span class="cy-months__key cy-months__key--off">…</span></p></div> */
.cy-months{display:grid;gap:22px}
.cy-months__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px 16px}
.cy-months__k{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;line-height:1.4;color:var(--s-ink)}
.cy-months__v{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;line-height:1.4;color:var(--s-ink);white-space:nowrap}
.cy-months__code{color:var(--s-ink-3);font-weight:400}
.cy-months__cells{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.cy-months__cells>li{aspect-ratio:1;background:#794DFF}
.cy-months__cells>li.cy-months__off{background:transparent;box-shadow:inset 0 0 0 1px var(--s-ink-3)}
.cy-months__legend{display:flex;flex-wrap:wrap;gap:6px 20px;padding-top:14px;border-top:1px solid var(--pg-hair);font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3)}
.cy-months__key{display:inline-flex;align-items:center;gap:8px}
.cy-months__key::before{content:"";width:8px;height:8px;background:#794DFF}
.cy-months__key--off::before{background:transparent;box-shadow:inset 0 0 0 1px var(--s-ink-3)}
/* ------------------------------------------------------------------- 22h a table at mock size inside a plate (the AI tools on a Mac: /for/ai-startups
   fig. 02, /for/solo fig. 03): one connection per line (.cy-table__line), the one a person should look at carries the ember 14x3 rule
   (.cy-table__flag). Use with cy-table--stack cy-table--pair. */
.cy-table--mock{font-size:calc(15px + var(--pg-mock-bump));line-height:1.4}
.cy-table--mock tbody th{font-size:calc(15px + var(--pg-mock-bump))}
.cy-table--mock td,.cy-table--mock tbody th{padding-top:12px;padding-bottom:12px}
@media (max-width:767px){.cy-table--mock td,.cy-table--mock tbody th{padding-top:2px;padding-bottom:2px}}
.cy-table__line{display:block}
.cy-table__flag{position:relative;display:block;padding-left:22px;color:var(--s-ink)}
.cy-table__flag::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:3px;background:#FF6B2B}