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

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

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

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

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

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

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

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

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

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

@media (min-width:900px) and (max-width:1279px){
  .cyf-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cyf-brand{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:24px}
  .cyf-line{margin-top:0}
  .cyf-social{margin-top:0;flex-direction:row;flex-wrap:wrap;column-gap:20px}
}
@media (max-width:899px){
  .cyf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding-block:40px 32px}
  .cyf-brand{grid-column:1/-1}
  .cyf-social{flex-direction:row;flex-wrap:wrap;column-gap:20px}
  .cyf-bar-in{flex-direction:column;align-items:flex-start;gap:12px;padding-block:20px 24px}
  .cyf-top,.cyf-cur{margin-left:0}
  .cyf-break{display:none}
  .cyf-copy{white-space:normal}
}
/* the sticky phone CTA (overlays) never covers the last lines */
@media (max-width:767px) and (pointer:coarse){html.js .cyf{padding-bottom:calc(64px + env(safe-area-inset-bottom))}}
/* ==== sections/overlays.css ==== */
/* cybee v3 · shared overlays (F0): install dialog (cyd-), drawer host, sticky phone CTA (cys-), #cy-live.
   The dialog frame itself (.cy-dialog, .cy-dialog__sheet) and the drawer content (.cy-more__*) live in css/foundation.css. */

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

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