/* KiNBY — shared marketing/legal stylesheet (WS-32 2026-11-08).
   Everything that used to be pasted into every page (tokens, base type, the header lockup, the
   screenshot zoom dialog, the showcase layout) lives here once. The three APPS (Chart, Teams,
   Connect/Gear) do NOT load this file — they stay self-contained single files on purpose.
   Tokens are the brand-guidelines §3 names only (WS-27): --brand2 / --navy / --yellow / --purple
   are retired — use --brand-hi, --ink, --gold, --brand-hi. */

:root{
  --ink:#2E1A47;        /* Deep Plum — all text */
  --brand:#573C86;      /* PRIMARY — chrome, headers, primary actions */
  --brand-hi:#6E4EA2;   /* hover / active */
  --purple-tint:#8C6FC0;/* focus rings, borders */
  --lilac:#D9CEEC;
  --gold:#F6C445;       /* accent only — never text */
  --bee-face:#F6CC5B;   /* the i-dot and the home tagline (guideline §6) */
  --bg:#F8F7FB; --soft:#ECE6F7; --mut:#6E6880; --line:#E5E1EE; --card:#FFFFFF;
  --ok:#1B9E77; --warn:#E8A13A; --bad:#D64550;
  /* WS-28 2026-11-08: darker inks for the three pairs that failed 4.5:1 —
     muted text on --soft (4.36 → 5.53), green label text on its mint tint (3.01 → 4.71),
     and amber label text on its cream tint (4.25 → 5.76). */
  --mut-on-soft:#5E5872;
  --ok-ink:#147A5B; --ok-tint:#E6F5EF;
  --amber-ink:#7A5A06; --amber-tint:#FDF3DA;
  --wm:50px;            /* wordmark size in the header */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* WS-29: 17px body everywhere; nothing under 11px (brand §5) */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--brand)}
img,video{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.hide{display:none!important}
:focus-visible{outline:3px solid var(--purple-tint);outline-offset:2px}
[id]{scroll-margin-top:120px}   /* anchored headings land below the sticky header */

/* ── the wordmark, in CSS (was kinbyWord() in JS on every page) ─────────────────────────────
   K + a hand-drawn cap-weight i with a bee-face-yellow dot + NBY. The i is a stem (.ki) whose
   only text is a visually-hidden "i", so it READS as "KiNBY" and never as "KNBY". */
.kw{font-weight:800;letter-spacing:.3px;line-height:1;white-space:nowrap;display:inline-block;color:inherit}
.kw .ki{display:inline-block;position:relative;width:.155em;height:.54em;margin:0 .07em;background:currentColor;border-radius:1px;vertical-align:baseline}
.kw .ki::after{content:"";position:absolute;left:50%;bottom:calc(100% + .055em);transform:translateX(-50%);
  width:.17em;height:.17em;border-radius:50%;background:var(--bee-face)}

/* ── the one header (WS-11): purple bar, optional back pill, bee 96 in a frosted badge, wordmark,
   optional product word. The lockup <a> is byte-identical on every page. ─────────────────── */
.site-hdr{position:sticky;top:0;z-index:40;background:var(--brand);color:#fff;
  box-shadow:0 8px 28px -10px rgba(46,26,71,.5);border-bottom:1px solid rgba(255,255,255,.10);transition:box-shadow .22s ease-out}
.site-hdr.scrolled{box-shadow:0 14px 36px -8px rgba(46,26,71,.62)}
.site-hdr .hdr{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:72px}
.backpill{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);color:#fff;
  font:800 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;white-space:nowrap;flex:0 0 auto}
.backpill:hover{background:rgba(255,255,255,.26)}
.in-frame .backpill{display:none}        /* inside the site overlay the white bar already has one */
.lockup{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:0 0 auto}
.lockup:focus-visible{outline-color:#fff}
.logobadge{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.17);border-radius:22px;padding:10px;box-shadow:0 8px 20px -8px rgba(0,0,0,.45);
  transform-origin:left center;transition:transform .22s ease-out,box-shadow .22s ease-out}
.logobadge img{display:block;width:96px;height:96px;object-fit:contain;transform:translate(5px,-1px)}
.site-hdr.scrolled .logobadge{transform:scale(.82);box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.lockup .kw{font-size:var(--wm)}
.prodword{font-weight:800;font-size:var(--wm);line-height:1;color:#fff;white-space:nowrap;margin-left:-4px}
.hdr .spacer{flex:1}
@media(max-width:820px){ :root{--wm:34px} .logobadge img{width:64px;height:64px} .site-hdr .hdr{gap:8px} }
@media(max-width:480px){ .prodword{display:none} }
@media(prefers-reduced-motion:reduce){ .site-hdr,.logobadge{transition:none!important} .site-hdr.scrolled .logobadge{transform:none} }

/* ── shared footer for showcase / legal / help pages ───────────────────────────────────────── */
.sitefoot{color:var(--mut);font-size:13px;border-top:1px solid var(--line);margin-top:2.4em;padding-top:1.2em;line-height:1.6}
.sitefoot a{color:var(--mut)}
.sitefoot .kw{color:var(--ink);font-size:14px}
.sitefoot nav a{margin-right:12px}

/* ── buttons ───────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:11px;padding:11px 20px;
  font:inherit;font-weight:800;font-size:15px;cursor:pointer;border:0;text-align:center;text-decoration:none}
.btn.pri{background:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand-hi)}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn.lg{padding:14px 26px;font-size:17px;border-radius:13px}

/* ── showcase pages (ChartPage, TeamPage, Help, Subscribe) ────────────────────────────────── */
.hero{padding:34px 0 6px}
.hero h1{font-size:38px;line-height:1.12;margin:0 0 10px;letter-spacing:-.6px;max-width:20ch}
.hero h1 .hl{color:var(--brand)}
.kicker{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-hi);margin:0 0 10px}
.lede{font-size:19px;line-height:1.55;max-width:62ch;margin:0 0 16px}
.lede b{color:var(--brand)}
.sub{color:var(--mut);font-size:17px;max-width:66ch;margin:0 0 22px}
.brings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 8px}
.brings div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;font-size:15px;color:var(--mut)}
.brings b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
h2{font-size:26px;margin:44px 0 6px;letter-spacing:-.3px}
.h2sub{color:var(--mut);font-size:17px;max-width:62ch;margin:0 0 26px}
.qs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 10px}
.q{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.q b{display:block;font-size:17px;margin-bottom:4px}
.q span{color:var(--mut-on-soft);font-size:15px}
.cta{margin:44px 0 0;background:var(--brand);color:#fff;border-radius:20px;padding:26px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta h3{margin:0 0 4px;font-size:22px}
.cta p{margin:0;color:#E7DEF7;font-size:15px;max-width:52ch}
.cta a{margin-left:auto;background:#fff;color:var(--brand);text-decoration:none;font-weight:800;border-radius:12px;padding:12px 20px;font-size:15px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.disc{margin:28px 0 0;padding:15px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:13px;color:var(--mut)}
.disc b{color:var(--ink)}
.samplenote{display:inline-block;background:var(--soft);color:var(--brand);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;margin:0 0 18px}
@media(max-width:820px){ .hero h1{font-size:28px} .qs,.brings{grid-template-columns:1fr} }

/* screenshots: full-height thumbnails, top-anchored, in a REAL button (WS-20, WS-4) */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px;margin:10px 0 0;max-width:1000px}
.shots.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.shot{margin:0}
.zoombtn{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;
  cursor:zoom-in;position:relative;font:inherit;color:inherit;text-align:left;
  box-shadow:0 18px 34px -22px rgba(46,26,71,.45),0 2px 5px rgba(46,26,71,.08)}
.zoombtn img{display:block;width:100%;height:auto}
.shot .zoombtn{aspect-ratio:3/4}
.shot .zoombtn img{height:100%;object-fit:cover;object-position:top}
.shots.two .zoombtn{aspect-ratio:1/1}
.zoombtn .zoomhint{position:absolute;right:8px;bottom:8px;background:rgba(46,26,71,.82);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;pointer-events:none}
.shot figcaption{margin:10px 2px 0;font-size:15px;color:var(--mut);max-width:70ch}
.shot figcaption b{display:block;color:var(--ink);font-size:17px;margin-bottom:2px}
@media(max-width:900px){ .shots{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .shots,.shots.two{grid-template-columns:1fr} }

/* KZOOM dialog — one copy, shared (was pasted into five pages) */
.kz{position:fixed;inset:0;z-index:5000;background:rgba(20,12,34,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:7vh 80px}
.kz[hidden]{display:none}
.kz figure{margin:0;max-width:min(860px,100%);max-height:82vh;overflow:auto;background:#fff;border-radius:18px;
  box-shadow:0 40px 90px -24px rgba(20,12,34,.65),0 12px 28px -12px rgba(20,12,34,.35),0 0 0 6px rgba(255,255,255,.55);animation:kzpop .24s cubic-bezier(.2,.8,.3,1.15)}
@keyframes kzpop{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .kz figure{animation:none} }
.kz img{display:block;width:100%;height:auto;cursor:default}
.kz figcaption{padding:10px 14px 12px;font-size:15px;line-height:1.5;color:var(--mut)}
.kz figcaption:empty{display:none}
.kz figcaption b{display:block;color:var(--ink);font-size:17px}
.kz button{position:absolute;border:0;background:rgba(46,26,71,.78);box-shadow:0 6px 18px -6px rgba(0,0,0,.5);color:#fff;
  font:700 28px/1 system-ui,sans-serif;width:46px;height:46px;border-radius:50%;cursor:pointer}
.kz button:hover,.kz button:focus-visible{background:var(--brand);outline:2px solid #fff}
.kz .kzx{top:14px;right:14px;font-size:22px}
.kz .kzp{left:10px;top:50%;transform:translateY(-50%)}
.kz .kzn{right:10px;top:50%;transform:translateY(-50%)}
@media(max-width:560px){ .kz{padding:60px 8px 8px} .kz .kzp,.kz .kzn{top:auto;bottom:10px;transform:none} }

/* ── legal pages (Privacy, Terms, Tour) ───────────────────────────────────────────────────── */
.legal .wrap{max-width:44em;padding:30px 24px 60px}
.legal h1{font-size:28px;margin:.2em 0 .1em}
.legal h2{font-size:19px;margin:2em 0 .4em;color:var(--brand)}
.legal .updated{color:var(--mut);font-size:13px;margin:0 0 1.6em}
.legal p{margin:0 0 1em}
.legal ul{margin:0 0 1em;padding-left:1.2em}
.legal li{margin:0 0 .45em}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:0 0 1.4em}
.card.key{border-left:5px solid var(--brand)}
.card.gold{border-left:5px solid var(--gold)}
/* OWNER placeholders — facts Robert must confirm before this page is deployed (see report). */
.owner{background:#FFF3C4;border:1px dashed var(--amber-ink);color:#4a3a06;border-radius:6px;padding:0 6px;font-weight:700}

/* ── body scroll lock (iOS-safe: position:fixed pattern, WS-P) ───────────────────────────── */
body.kinby-locked{position:fixed;width:100%;overflow:hidden}