/* Bits N Pices - the website.
   One stylesheet, no framework. Tokens first, then layout, then the parts.
   Light by default, dark when the system asks or the person chooses. */

:root {
  /* ── Soft UI (neumorphism): one material ───────────────────────────
     Every surface is the page's own tone. Depth is two shadows, one dark
     and one light; nothing is translucent, nothing blurs, no surface has
     a visible hairline. Content (cards, tiles, rows, tables, boards) is
     FLAT: the deeper tone --base-2 with no shadow at all; a card inside a
     card goes back to --base so the tones alternate. RAISED is only for
     what floats above the page (the nav pill, buttons, chips that act,
     menus, dialogs, sheets, toasts, docks). SUNK is what you are "in":
     the selected tab or chip, a text field, a switch track. */
  --base: #E7ECF3;
  --base-2: #DFE5EE;
  --sd: rgba(163, 177, 198, 0.62);
  --sl: rgba(255, 255, 255, 0.92);
  --sd-in: rgba(163, 177, 198, 0.55);
  --sl-in: rgba(255, 255, 255, 0.85);
  --ink: #0F172A;
  --ink-2: #334155;
  --teal-ink: #0B7E73;
  --on-teal: #05201C;
  --raised: 7px 7px 14px var(--sd), -7px -7px 14px var(--sl);
  --raised-hi: 9px 9px 18px var(--sd), -8px -8px 16px var(--sl);
  --flat: 3px 3px 7px var(--sd), -3px -3px 7px var(--sl);
  --flat-hi: 4px 4px 9px var(--sd), -4px -4px 9px var(--sl);
  --sunk: inset 5px 5px 10px var(--sd-in), inset -5px -5px 10px var(--sl-in);
  --sunk-sm: inset 3px 3px 6px var(--sd-in), inset -3px -3px 6px var(--sl-in);
  --press: inset 4px 4px 9px var(--sd-in), inset -4px -4px 9px var(--sl-in);
  --teal-raised: 5px 5px 12px var(--sd), -4px -4px 10px var(--sl), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --teal-press: inset 4px 4px 8px rgba(5, 32, 28, 0.28), inset -3px -3px 7px rgba(255, 255, 255, 0.22);
  /* The old names, mapped onto the one material so every part keeps working. */
  --nav-glass: #E7ECF3;
  --bg: #E7ECF3;
  --bg2: #E7ECF3;
  --surface: #E7ECF3;
  --surface2: #DFE5EE;
  --text: #0F172A;
  --text2: #334155;
  --muted: #64748B;
  --border: rgba(15, 23, 42, 0.07);
  --border2: rgba(15, 23, 42, 0.1);
  --teal: #18B8A6;
  --teal2: #0B7E73;
  --amber-ink: #B45309;
  --teal-soft: rgba(24, 184, 166, 0.14);
  --navy: #080D17;
  --amber: #F2B24A;
  --amber-soft: rgba(242, 178, 74, 0.18);
  --violet: #7C5CFF;
  --violet-soft: rgba(124, 92, 255, 0.14);
  --rose: #F26D6D;
  --sky: #3B9CF0;
  --green: #3FBF7F;
  --shadow: var(--flat);
  --shadow-lg: var(--raised);
  --ring: 0 0 0 3px rgba(24, 184, 166, 0.35);
  --err: #C43D3D;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 24px;
  --font-display: 'Sora', 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', 'Manrope', system-ui, sans-serif;
  --nav-h: 68px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press-ms: 140ms;
  --z-nav: 50; --z-sheet: 60; --z-menu: 70; --z-auth: 80; --z-toast: 90; --z-skip: 100;
  --glass: #E7ECF3;
  --glass-2: #E7ECF3;
  --glass-3: #E7ECF3;
  --glass-border: transparent;
  --glass-edge: transparent;
  --glass-shadow: var(--raised);
  /* The brand mark, sampled from app/assets/brand/logo_mark_light.png */
  --mark-teal: #37BDAF; --mark-amber: #E7AB45; --mark-bar: #6A7B9D; --mark-bar-edge: #42506D;
  --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --base: #141C2B;
  --base-2: #111827;
  --sd: rgba(3, 6, 12, 0.72);
  --sl: rgba(46, 62, 88, 0.55);
  --sd-in: rgba(3, 6, 12, 0.7);
  --sl-in: rgba(46, 62, 88, 0.42);
  --ink: #F2F5F9;
  --ink-2: #B7C2D3;
  --teal-ink: #4FE0CE;
  --teal-press: inset 4px 4px 8px rgba(3, 6, 12, 0.45), inset -3px -3px 7px rgba(255, 255, 255, 0.16);
  --nav-glass: #141C2B;
  --bg: #141C2B;
  --bg2: #141C2B;
  --surface: #141C2B;
  --surface2: #111827;
  --text: #F2F5F9;
  --text2: #B7C2D3;
  --muted: #7B8799;
  --teal: #1EC9B5;
  --teal2: #4FE0CE;
  --amber-ink: #D97706;
  --border: rgba(242, 245, 249, 0.08);
  --border2: rgba(242, 245, 249, 0.1);
  --teal-soft: rgba(30, 201, 181, 0.16);
  --amber-soft: rgba(242, 178, 74, 0.18);
  --violet-soft: rgba(124, 92, 255, 0.18);
  --glass: #141C2B;
  --glass-2: #141C2B;
  --glass-3: #141C2B;
  --err: #FF8A8A;
  --mark-teal: #86E4D8; --mark-amber: #F3C170; --mark-bar: #8D9FC3; --mark-bar-edge: #536382;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --base: #141C2B;
    --base-2: #111827;
    --sd: rgba(3, 6, 12, 0.72);
    --sl: rgba(46, 62, 88, 0.55);
    --sd-in: rgba(3, 6, 12, 0.7);
    --sl-in: rgba(46, 62, 88, 0.42);
    --ink: #F2F5F9;
    --ink-2: #B7C2D3;
    --teal-ink: #4FE0CE;
    --teal-press: inset 4px 4px 8px rgba(3, 6, 12, 0.45), inset -3px -3px 7px rgba(255, 255, 255, 0.16);
    --nav-glass: #141C2B;
    --bg: #141C2B;
    --bg2: #141C2B;
    --surface: #141C2B;
    --surface2: #111827;
    --text: #F2F5F9;
    --text2: #B7C2D3;
    --muted: #7B8799;
    --teal: #1EC9B5;
    --teal2: #4FE0CE;
    --amber-ink: #D97706;
    --border: rgba(242, 245, 249, 0.08);
    --border2: rgba(242, 245, 249, 0.1);
    --teal-soft: rgba(30, 201, 181, 0.16);
    --amber-soft: rgba(242, 178, 74, 0.18);
    --violet-soft: rgba(124, 92, 255, 0.18);
    --glass: #141C2B;
    --glass-2: #141C2B;
    --glass-3: #141C2B;
    --err: #FF8A8A;
    --mark-teal: #86E4D8; --mark-amber: #F3C170; --mark-bar: #8D9FC3; --mark-bar-edge: #536382;
    color-scheme: dark;
  }
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
p, li { text-wrap: pretty; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, .h1, .h2 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .search input:focus-visible { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: rgba(24, 184, 166, 0.28); }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: var(--z-skip); background: var(--teal); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
[dir="rtl"] .flip { transform: scaleX(-1); }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(1180px, 100% - 32px); } }
/* The brand mark: the app's own tiles, inherits --mark-teal; never boxed. */
.mark { flex: none; display: inline-flex; line-height: 0; }
.mark img { display: block; }
.mark .mk-d { display: none; }
:root[data-theme="dark"] .mark .mk-d { display: block; }
:root[data-theme="dark"] .mark .mk-l { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark .mk-d { display: block; } :root:not([data-theme="light"]) .mark .mk-l { display: none; } }
.i { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.15em; }
[hidden] { display: none !important; }
.i svg { width: 100%; height: 100%; }

/* ── Type ─────────────────────────────────────────────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal2);
}
:root[data-theme="dark"] .kicker { color: var(--teal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kicker { color: var(--teal); } }
.kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; opacity: 0.7; }
.h1 { font-size: clamp(40px, 2.2rem + 2.4vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.h2 { font-size: clamp(32px, 1.6rem + 1.4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
.h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; }
.lead { font-size: 17px; line-height: 1.6; color: var(--text2); max-width: 58ch; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 36px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head .lead { max-width: 60ch; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.between { justify-content: space-between; }

/* ── Buttons: one soft family, everywhere ─────────────────────────────
 * The same pill on the website, in the app and in the popups, cut from
 * the page's own tone and lifted by two shadows. The primary is teal and
 * raised; every other button is the base tone, raised. A press sinks the
 * button into the page (inset shadows + one pixel down) over 140 ms and
 * it springs back; a hover (precise pointers only) lifts it a pixel. */
.btn {
  --gx: 0px; --gy: 0px; --ly: 0px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; white-space: nowrap; letter-spacing: -0.005em;
  border: 0; color: var(--ink); background: var(--base);
  box-shadow: var(--raised);
  transform: translateY(var(--ly));
  transition: transform var(--press-ms) ease, box-shadow var(--press-ms) ease, background 180ms ease, color 180ms ease;
}
.btn:active { --ly: 1px; box-shadow: var(--press); }
.btn .i { font-size: 18px; }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn .lq, .btn .bc { display: inline-flex; align-items: center; gap: 8px; }
/* The primary: teal, raised on the surface. */
.btn-primary, .btn-liquid {
  color: var(--on-accent, var(--on-teal));
  background: var(--accent, var(--teal));
  box-shadow: var(--teal-raised);
}
.btn-primary:active, .btn-liquid:active { box-shadow: var(--teal-press); }
/* The secondary: the base tone, raised. */
.btn-glass, .btn-ghost { color: var(--ink); background: var(--base); box-shadow: var(--raised); }
.btn-soft { color: var(--teal-ink); background: var(--base); box-shadow: var(--raised); }
.btn-dark { background: var(--ink); color: var(--base); box-shadow: var(--raised); }
.btn-danger { background: var(--err); color: #fff; box-shadow: 5px 5px 12px var(--sd), -4px -4px 10px var(--sl), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-danger:active, .btn-dark:active { box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -3px -3px 7px rgba(255, 255, 255, 0.14); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --ly: -1px; box-shadow: var(--raised-hi); }
  .btn-primary:hover, .btn-liquid:hover { box-shadow: 7px 7px 16px var(--sd), -5px -5px 12px var(--sl), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
  .btn-glass:hover, .btn-ghost:hover, .btn-soft:hover { color: var(--teal-ink); }
  .btn-dark:hover { color: var(--base); }
  .btn-danger:hover { box-shadow: 7px 7px 16px var(--sd), -5px -5px 12px var(--sl), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  .btn:hover:active { --ly: 1px; }
  .btn-primary:hover:active, .btn-liquid:hover:active { box-shadow: var(--teal-press); }
  .btn-glass:hover:active, .btn-ghost:hover:active, .btn-soft:hover:active { box-shadow: var(--press); }
}
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.btn.wide { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn { transition: box-shadow var(--press-ms) ease, background 180ms ease, color 180ms ease; } .btn:hover, .btn:active { --ly: 0px; } }


/* ── Nav ──────────────────────────────────────────────────────────── */
/* A raised pill of the page's own tone, detached from the top edge; the
   page scrolls under it. The link you are on is sunk into the pill. */
.nav { position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-h); padding-top: max(10px, env(safe-area-inset-top)); pointer-events: none; }
.nav .wrap {
  pointer-events: auto; height: 58px; display: flex; align-items: center; gap: 22px; padding: 0 10px 0 12px; border-radius: 999px;
  background: var(--base); border: 0; box-shadow: var(--raised);
  transition: box-shadow 200ms ease;
}
.nav.scrolled .wrap { box-shadow: var(--raised-hi); }
@media (max-width: 640px) {
  .nav { --nav-h: 60px; padding-top: max(6px, env(safe-area-inset-top)); }
  .nav .wrap { height: 52px; border-radius: 999px; width: calc(100% - 20px); padding: 0 8px 0 10px; }
}
@media (max-width: 400px) { .nav .wrap { gap: 12px; } .nav-right { gap: 6px; } .nav .brand { font-size: 17px; } }
/* Mark and wordmark share one baseline: the mark's base bars sit a hair
   below the baseline of the S, the way the app's splash draws it. */
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; line-height: 1; }
.brand .bw { overflow: hidden; text-overflow: ellipsis; padding-top: 1px; }
.brand .mark { transform: translateY(-1px); }
/* On the narrowest phones the mark carries the name on its own; the
   wordmark would otherwise slide under the buttons beside it. */
@media (max-width: 380px) { .nav .brand .bw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.nav-links { display: flex; align-items: center; gap: 6px; margin-inline-start: 8px; }
.nav-links a {
  position: relative; padding: 9px 14px; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--ink-2);
  transition: color 140ms, box-shadow var(--press-ms) ease, transform var(--press-ms) ease;
}
.nav-links a[aria-current="page"] { color: var(--teal-ink); box-shadow: var(--sunk-sm); }
@media (hover: hover) and (pointer: fine) { .nav-links a:not([aria-current="page"]):hover { color: var(--ink); box-shadow: var(--flat); transform: translateY(-1px); } }
.nav-links a:active { box-shadow: var(--sunk-sm); transform: translateY(1px); }
.nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--ink-2); border: 0; background: var(--base); box-shadow: var(--flat); transition: box-shadow var(--press-ms) ease, transform var(--press-ms) ease, color 140ms ease; }
.lang-btn:active { box-shadow: var(--press); transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .lang-btn:hover { color: var(--teal-ink); transform: translateY(-1px); box-shadow: var(--flat-hi); } }
.lang-btn .code { text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.06em; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--base); color: var(--ink-2); box-shadow: var(--flat); transition: box-shadow var(--press-ms) ease, transform var(--press-ms) ease, color 140ms ease; }
.theme-btn:active { box-shadow: var(--press); transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .theme-btn:hover { color: var(--teal-ink); transform: translateY(-1px); box-shadow: var(--flat-hi); } }
.theme-btn .i { font-size: 18px; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: none; }
}
.nav-right .menu-btn { display: none; }
@media (max-width: 1080px) {
  .nav-links, .nav-right .btn-ghost, .nav-right .nav-start { display: none; }
  .nav-right .menu-btn { display: inline-flex; }
}
.sheet {
  position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--bg); padding: 20px; display: none; flex-direction: column; gap: 6px;
  overflow: auto;
}
.sheet.open { display: flex; animation: menu-in 200ms var(--ease-out); transform-origin: var(--ox, 100%) var(--oy, 0); }
.sheet .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sheet a.link { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.sheet .actions { display: grid; gap: 10px; margin-top: 22px; }

/* Language menu */
.lang-menu {
  position: fixed; inset: 0; z-index: var(--z-menu); display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(8, 13, 23, 0.5);
}
.lang-menu.open { display: flex; }
.lang-panel { width: min(680px, 100%); max-height: 86dvh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-lg); animation: menu-in 180ms var(--ease-out); transform-origin: var(--ox, 50%) var(--oy, 0); }
.lang-panel .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.lang-grid a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); font-weight: 600; transition: border-color 140ms, background 140ms; }
@media (hover: hover) and (pointer: fine) { .lang-grid a:hover { border-color: var(--teal); background: var(--teal-soft); } }
.lang-grid a[aria-current="true"] { border-color: var(--teal); background: var(--teal-soft); }
.lang-grid a small { color: var(--muted); font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--border2) 1px, transparent 1.5px);
  background-size: 28px 28px; opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}
.glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: drift 14s ease-in-out infinite alternate; }
.glow.a { width: 520px; height: 520px; right: -140px; top: -180px; background: rgba(24, 184, 166, 0.35); }
.glow.b { width: 420px; height: 420px; left: -160px; top: 220px; background: rgba(124, 92, 255, 0.28); animation-delay: -6s; }
.glow.c { width: 300px; height: 300px; right: 20%; bottom: -120px; background: rgba(242, 178, 74, 0.25); animation-delay: -3s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(30px, 24px, 0) scale(1.08); } }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy .lead { font-size: clamp(17px, 1.7vw, 20px); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--font-ui); font-size: 13.5px; }
.hero-note .i { color: var(--teal); }
.hero-stage { position: relative; height: 520px; }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero-stage { height: 420px; }
}
@media (max-width: 560px) { .hero-stage { height: 360px; } }

/* Floating covers on the stage */
.float { position: absolute; animation: floaty 7s ease-in-out infinite; will-change: transform; }
.hero-stage .float { width: var(--w); }
@media (max-width: 960px) { .hero-stage { max-width: 560px; margin-inline: auto; width: 100%; } }
@media (max-width: 560px) { .stage-card { min-width: 0; max-width: 200px; padding: 10px 12px; } .stage-card.third { display: none; } }
.float:nth-child(2n) { animation-duration: 8.5s; animation-delay: -2s; }
.float:nth-child(3n) { animation-duration: 6.5s; animation-delay: -4s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--rot, 0deg)); } }
.stage-card {
  position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; min-width: 200px; max-width: 260px;
  animation: floaty 9s ease-in-out infinite;
}
.stage-card .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.stage-card .ic .i { font-size: 18px; }
.stage-card b { display: block; font-family: var(--font-ui); font-size: 13.5px; }
.stage-card span { display: block; font-size: 12.5px; color: var(--muted); }
.ic.teal { background: var(--teal-soft); color: var(--teal2); }
.ic.amber { background: var(--amber-soft); color: #B7791F; }
.ic.violet { background: var(--violet-soft); color: var(--violet); }
:root[data-theme="dark"] .ic.teal { color: var(--teal); }
:root[data-theme="dark"] .ic.amber { color: var(--amber); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic.teal { color: var(--teal); } :root:not([data-theme="light"]) .ic.amber { color: var(--amber); } }

/* ── Book cover (procedural, matches the app) ─────────────────────── */
.cover {
  position: relative; aspect-ratio: 0.7; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--c1) 55%, transparent);
  container-type: inline-size;
}
.cover::before { content: ""; position: absolute; width: 65%; aspect-ratio: 1; right: -18%; top: -18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c3) 40%, transparent), transparent 70%); }
.cover::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; left: -22%; bottom: -22%; border-radius: 50%; border: 6cqw solid rgba(255,255,255,0.10); }
.cover .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.16); }
.cover .glyph { position: absolute; right: 2%; top: 5%; width: 46%; height: auto; aspect-ratio: 1; color: color-mix(in srgb, var(--c3) 34%, transparent); transform: rotate(-12deg); }
.cover .scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.45)); }
.cover .t { position: absolute; left: 7%; right: 7%; bottom: 8%; display: grid; gap: 3cqw; }
.cover .bar { width: 22%; height: 3cqw; border-radius: 2px; background: var(--c3); }
.cover .title { font-family: var(--font-display); font-weight: 700; font-size: 10.5cqw; line-height: 1.15; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.cover .author { font-family: var(--font-ui); font-size: 6.2cqw; opacity: 0.92; text-shadow: 0 1px 2px rgba(0,0,0,0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The designed cover picture (media/bc): over the drawn cover, which stays
   underneath as the placeholder while it loads. The drawn type is hidden so
   the title is not printed twice; the aria-label still names the book. */
.cover .art { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.has-art .t, .cover.has-art .glyph, .cover.has-art .scrim, .cover.has-art .spine { display: none; }
.cover.has-art::before, .cover.has-art::after { content: none; }
.p0 { --c1: #2F7D77; --c2: #0E2E2B; --c3: #6FE3D4; }
.p1 { --c1: #6558D6; --c2: #201A55; --c3: #B1A6FF; }
.p2 { --c1: #C08420; --c2: #4F350A; --c3: #FFD48A; }
.p3 { --c1: #2478C2; --c2: #0A2A48; --c3: #8FCBFF; }
.p4 { --c1: #C25858; --c2: #471A1A; --c3: #FFA8A8; }
.p5 { --c1: #3F9A60; --c2: #143322; --c3: #95E8B4; }
.p6 { --c1: #9557C2; --c2: #331847; --c3: #D9A8FF; }
.p7 { --c1: #52607A; --c2: #161D2E; --c3: #AAB9D8; }
.p8 { --c1: #CC7C3D; --c2: #4A2810; --c3: #FFC08A; }

/* ── Stats strip ──────────────────────────────────────────────────── */
.stats { border-block: 1px solid var(--border); background: var(--bg2); }
.stats .wrap { display: flex; flex-wrap: wrap; justify-content: center; }
.stat { flex: 1 0 20%; }
.stat { padding: 22px 12px; text-align: center; border-inline-start: 1px solid var(--border); }
.stat:first-child { border-inline-start: 0; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.stat span { font-family: var(--font-ui); font-size: 13px; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) { .stat { flex-basis: 33.33%; padding: 18px 8px; } .stat:nth-child(4) { border-inline-start: 0; } }

/* ── Sections ─────────────────────────────────────────────────────── */
.sec { padding: clamp(52px, 28px + 3vw, 80px) 0; }
.sec.tint { background: var(--bg2); border-block: 1px solid var(--border); }
.sec.tint + footer { border-top: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } }
.grid2 > *, .grid3 > *, .grid4 > *, .two > *, .player > div, .about-why > *, .contact > * { min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); transition: transform 160ms var(--ease-out), box-shadow 200ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { a.card:hover, .card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border2); } }
a.card:active, .card.hover:active { transform: scale(0.985); }
.card .num { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--teal2); letter-spacing: 0.1em; }
.card .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; }
.card .ic .i { font-size: 22px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text2); }
.step { position: relative; }
.step .num { position: absolute; top: 24px; right: 24px; }

/* ── Modes demo ───────────────────────────────────────────────────── */
.modes-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.mode-tab { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--text2); transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms var(--ease-out); }
.mode-tab .i { font-size: 17px; }
@media (hover: hover) and (pointer: fine) { .mode-tab:hover { border-color: var(--border2); color: var(--text); } }
.mode-tab[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.mode-panel { display: none; animation: pop 240ms var(--ease-out); }
.mode-panel.on { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .mode-panel.on { grid-template-columns: 1fr; } }
.mode-about { display: grid; gap: 14px; padding-top: 8px; }
.mode-about .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.mode-about .ic .i { font-size: 24px; }
.mode-about .for { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.mode-about .for .cover { width: 26px; border-radius: 4px; }
.mode-about .for .cover .t, .mode-about .for .cover .glyph { display: none; }
.board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.board .bt { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.board .big { font-family: var(--font-display); font-size: clamp(44px, 6vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--teal2); }
:root[data-theme="dark"] .board .big { color: var(--teal); }
.board .why { padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); font-size: 14px; color: var(--text2); border-inline-start: 3px solid var(--amber); }
.flow { display: grid; gap: 0; }
.flow li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; position: relative; }
.flow li::before { content: attr(data-n); width: 28px; height: 28px; border-radius: 50%; background: var(--teal-soft); color: var(--teal2); display: grid; place-items: center; font-family: var(--font-ui); font-size: 12px; font-weight: 800; }
.flow li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 38px; bottom: -10px; width: 2px; background: var(--border); }
.flow b { display: block; font-family: var(--font-ui); font-size: 14.5px; }
.flow span { font-size: 13.5px; color: var(--text2); }
.mm { position: relative; display: grid; gap: 10px; }
.mm .root { justify-self: center; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.mm .branches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mm .branch { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface2); }
.mm .branch b { display: block; font-family: var(--font-ui); font-size: 13.5px; margin-bottom: 6px; color: var(--teal2); }
:root[data-theme="dark"] .mm .branch b { color: var(--teal); }
.mm .branch li { font-size: 13px; color: var(--text2); padding: 3px 0 3px 12px; position: relative; }
.mm .branch li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--border2); }
.q { display: grid; gap: 10px; }
.q .opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 14.5px; cursor: pointer; background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .q .opt:hover { border-color: var(--border2); background: var(--surface2); } }
.q .opt .k { width: 24px; height: 24px; border-radius: 8px; background: var(--surface2); display: grid; place-items: center; font-family: var(--font-ui); font-size: 12px; font-weight: 800; color: var(--muted); flex: none; }
.q .opt.right { border-color: var(--green); background: rgba(63, 191, 127, 0.12); }
.q .opt.wrong { border-color: var(--rose); background: rgba(242, 109, 109, 0.12); }
.q .expl { display: none; padding: 12px 14px; border-radius: 12px; background: var(--teal-soft); font-size: 14px; color: var(--text2); }
.q.answered .expl { display: block; animation: pop 240ms; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.days .d { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-ui); font-weight: 800; font-size: 13px; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.days .d.on { background: var(--teal); color: #05201C; border-color: var(--teal); }
.days .d.now { border-color: var(--teal); color: var(--teal2); box-shadow: inset 0 0 0 1px var(--teal); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--text2); transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms var(--ease-out); cursor: pointer; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--teal); color: var(--text); } }
.chip[aria-pressed="true"], .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip.soft { background: var(--teal-soft); color: var(--teal2); border-color: transparent; height: 28px; font-size: 12.5px; cursor: default; }
:root[data-theme="dark"] .chip.soft { color: var(--teal); }
.chip.amber { background: var(--amber-soft); color: #9A6413; border-color: transparent; }
:root[data-theme="dark"] .chip.amber { color: var(--amber); }
.chip.violet { background: var(--violet-soft); color: var(--violet); border-color: transparent; }

/* ── Rails ────────────────────────────────────────────────────────── */
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 30px 0 14px; }
.rail-head h3 { font-size: 20px; }
.rail-head a { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--teal2); display: inline-flex; align-items: center; gap: 4px; }
:root[data-theme="dark"] .rail-head a { color: var(--teal); }
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; margin: 0 -4px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail .book { flex: 0 0 150px; scroll-snap-align: start; }
@media (max-width: 560px) { .rail .book { flex-basis: 128px; } }
.book { display: grid; gap: 10px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .book:hover { transform: translateY(-3px); } .book:hover .cover { box-shadow: 0 16px 28px -8px color-mix(in srgb, var(--c1) 60%, transparent); } }
.book:active { transform: scale(0.98); }
.book .meta { display: grid; gap: 2px; }
.book .bt { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book .ba { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book .bm { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.book .bm .free { color: var(--teal2); font-weight: 700; }
:root[data-theme="dark"] .book .bm .free { color: var(--teal); }
.grid-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
@media (max-width: 560px) { .grid-books { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } }

/* ── Courses ──────────────────────────────────────────────────────── */
.programs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .programs { grid-template-columns: repeat(2, 1fr); } }
.program { display: grid; gap: 8px; padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); transition: transform 220ms, box-shadow 220ms; }
@media (hover: hover) and (pointer: fine) { .program:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.program:active { transform: scale(0.985); }
.program b { font-family: var(--font-display); font-size: 17px; }
.program .n { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.program .branches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.program .branches span { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--surface2); color: var(--text2); }
.course { display: grid; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: transform 200ms, box-shadow 200ms, border-color 200ms; }
@media (hover: hover) and (pointer: fine) { .course:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border2); } }
.course:active { transform: scale(0.985); }
.course .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.course .tags span { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 6px; background: var(--violet-soft); color: var(--violet); }
.course .tags span.core { background: var(--teal-soft); color: var(--teal2); }
:root[data-theme="dark"] .course .tags span.core { color: var(--teal); }
.course b { font-family: var(--font-display); font-size: 15.5px; line-height: 1.3; }
.course .u { font-size: 13px; color: var(--muted); }
.grid-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 960px) { .grid-courses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-courses { grid-template-columns: 1fr; } }

/* ── AI ───────────────────────────────────────────────────────────── */
.ai .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .ai .wrap { grid-template-columns: 1fr; } }
.chat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.chat .bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.chat .bar b { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 14px; }
.chat .bar b .i { color: var(--teal2); font-size: 18px; }
.seg { display: inline-flex; background: var(--surface2); border-radius: 999px; padding: 3px; }
.seg button { height: 30px; padding: 0 12px; border-radius: 999px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--muted); transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.chat .msgs { padding: 18px; display: grid; gap: 14px; min-height: 300px; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; animation: pop 300ms; }
.msg.me { justify-self: end; background: var(--text); color: var(--bg); border-end-end-radius: 6px; }
.msg.ai { background: var(--surface2); border-end-start-radius: 6px; }
.msg.ai .who { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal2); margin-bottom: 6px; }
:root[data-theme="dark"] .msg.ai .who { color: var(--teal); }
.msg.ai .who .think { color: var(--violet); }
.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.chat .input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.chat .input .txt { flex: 1; }
.chat .input .send { width: 34px; height: 34px; border-radius: 10px; background: var(--teal); color: #05201C; display: grid; place-items: center; }
.feats { display: grid; gap: 14px; margin-top: 8px; }
.feat { display: flex; gap: 14px; }
.feat .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.feat .ic .i { font-size: 20px; }
.feat b { display: block; font-family: var(--font-ui); font-size: 15px; margin-bottom: 2px; }
.feat p { color: var(--text2); font-size: 14.5px; }

/* ── Audio ────────────────────────────────────────────────────────── */
.player { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.player .cover { width: 96px; }
.player .pt { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.player .pa { display: block; font-size: 13px; color: var(--muted); }
.player .wave { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin: 12px 0 8px; overflow: hidden; }
.player .wave i { width: 4px; border-radius: 2px; background: var(--teal); height: 100%; transform-origin: bottom; transform: scaleY(0.3); animation: wave 1.2s ease-in-out infinite; }
.player .wave i:nth-child(odd) { animation-duration: 0.9s; }
.player .wave i:nth-child(3n) { animation-duration: 1.5s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); opacity: 0.6; } 50% { transform: scaleY(1); opacity: 1; } }
.player .ctrls { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.player .ctrls .play { width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; }
.player .ctrls .play .i { font-size: 16px; }
.narrators { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.narrator { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-weight: 700; font-size: 14px; }
.narrator .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; }

/* ── Languages ────────────────────────────────────────────────────── */
.langs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.langs a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 14px; transition: background 140ms ease, border-color 140ms ease, transform 120ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .langs a:hover { border-color: var(--teal); background: var(--teal-soft); } }
.langs a:active, .chip:active, .mode-tab:active { transform: scale(0.97); }
.langs a[aria-current="true"] { border-color: var(--teal); background: var(--teal-soft); }
.langs a small { color: var(--muted); font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }

/* ── Companies / app / CTA bands ──────────────────────────────────── */
.band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(32px, 5vw, 56px); background: var(--navy); color: #F3F6FB; }
.band .lead { color: rgba(243, 246, 251, 0.72); }
.band .kicker { color: var(--teal); }
.band .glow { opacity: 0.7; }
.band .wrap-in { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; }
@media (max-width: 900px) { .band .wrap-in { grid-template-columns: 1fr; } }
.band .btn-ghost { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #fff; }
@media (hover: hover) and (pointer: fine) { .band .btn-ghost:hover { background: rgba(255,255,255,0.12); } }
.band .feats .feat b { color: #fff; }
.band .feats .feat p { color: rgba(243, 246, 251, 0.72); }
.band .ic.teal { background: rgba(24, 184, 166, 0.18); color: var(--teal); }
.band .ic.amber { background: rgba(242, 178, 74, 0.18); color: var(--amber); }
.band .ic.violet { background: rgba(124, 92, 255, 0.22); color: #B1A6FF; }
.console-mock { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.console-mock .rowm { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.05); font-family: var(--font-ui); font-size: 13px; }
.console-mock .rowm .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(24, 184, 166, 0.2); color: var(--teal); }
.console-mock .rowm b { display: block; font-size: 13.5px; }
.console-mock .rowm span { color: rgba(243, 246, 251, 0.6); font-size: 12px; }
.console-mock .bar2 { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; width: 80px; }
.console-mock .bar2 i { display: block; height: 100%; background: var(--teal); border-radius: 3px; }
.console-mock .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.console-mock .kpi { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); }
.console-mock .kpi b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.console-mock .kpi span { font-family: var(--font-ui); font-size: 11.5px; color: rgba(243, 246, 251, 0.6); }
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border2); background: var(--surface); font-family: var(--font-ui); }
.store .i { font-size: 22px; }
.store b { display: block; font-size: 14px; }
.store small { display: block; font-size: 11px; color: var(--muted); }
.store.soon { opacity: 0.7; }
.phone { position: relative; width: 240px; aspect-ratio: 9/18.5; border-radius: 34px; background: var(--navy); border: 6px solid #1B2536; box-shadow: var(--shadow-lg); margin-inline: auto; overflow: hidden; }
.phone .scr { position: absolute; inset: 0; padding: 26px 14px; display: grid; gap: 10px; align-content: start; background: radial-gradient(400px 260px at 80% -10%, rgba(24, 184, 166, 0.25), transparent 60%), #0B1220; color: #fff; }
.phone .scr .hi { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.phone .scr .sub { font-size: 11px; color: rgba(243,246,251,0.6); }
.phone .scr .tile { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,0.06); }
.phone .scr .tile .cover { width: 34px; border-radius: 6px; }
.phone .scr .tile .cover .t, .phone .scr .tile .cover .glyph { display: none; }
.phone .scr .tile b { display: block; font-size: 11.5px; font-family: var(--font-ui); }
.phone .scr .tile span { font-size: 10.5px; color: rgba(243,246,251,0.6); }
.phone .dock { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 50px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: space-around; align-items: center; color: rgba(255,255,255,0.6); }
.phone .dock .i { font-size: 18px; }
.phone .dock .i.on { color: var(--teal); }

/* ── Detail pages ─────────────────────────────────────────────────── */
.page-head { padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 36px); }
.crumbs { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13.5px; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--text); } }
.crumbs .i { font-size: 14px; }
.book-hero { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
@media (max-width: 760px) { .book-hero { grid-template-columns: 1fr; } .book-hero .cover { width: 200px; } }
.book-hero .cover { box-shadow: var(--shadow-lg); border-radius: 18px; }
.book-hero .info { display: grid; gap: 16px; }
.book-hero .author { font-size: 17px; color: var(--text2); }
.book-hero .facts { display: flex; gap: 8px; flex-wrap: wrap; }
.takeaways { display: grid; gap: 12px; }
.takeaways li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 15px; }
.takeaways li .i { color: var(--teal2); font-size: 18px; margin-top: 2px; }
:root[data-theme="dark"] .takeaways li .i { color: var(--teal); }
.toc { display: grid; gap: 8px; counter-reset: s; }
.toc li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.toc li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--teal2); }
:root[data-theme="dark"] .toc li::before { color: var(--teal); }
.toc li b { font-family: var(--font-ui); font-size: 14.5px; }
.toc li p { font-size: 14px; color: var(--text2); margin-top: 3px; }
.side { display: grid; gap: 12px; }
.side .card { padding: 18px; }
.side .card h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.side .card h3 .i { font-size: 18px; color: var(--teal2); }
.side .card p { font-size: 14px; }
.two { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 960px) { .two { grid-template-columns: 1fr; } }
.two > div { display: grid; gap: 28px; }
.blk { display: grid; gap: 14px; }
.blk h2 { font-size: 22px; }
.units li { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 15px; }
.units li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; transform: translateY(-2px); }
.project { padding: 18px 20px; border-radius: 16px; background: var(--amber-soft); border-inline-start: 4px solid var(--amber); font-size: 15px; }

/* ── Explore ──────────────────────────────────────────────────────── */
.search { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--border2); background: var(--surface); box-shadow: var(--shadow); max-width: 620px; }
.search:focus-within { border-color: var(--teal); box-shadow: var(--ring); }
.search .i { font-size: 20px; color: var(--muted); }
.search input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; color: var(--text); outline: none; min-width: 0; }
.search input::placeholder { color: var(--muted); }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface2); }
.tabs button { height: 40px; padding: 0 18px; border-radius: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--muted); transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.tabs button b { margin-inline-start: 6px; font-size: 12px; color: var(--muted); font-weight: 700; }
.pane { display: none; }
.pane.on { display: block; animation: pop 260ms; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 22px; }
.empty { padding: 56px 20px; text-align: center; color: var(--muted); display: none; gap: 14px; justify-items: center; }
.empty.on { display: grid; }
.count { font-family: var(--font-ui); font-size: 14px; color: var(--muted); margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.hide { display: none !important; }

/* ── Footer ───────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); background: var(--bg2); padding: 56px 0 28px; }
footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 800px) { footer .cols { grid-template-columns: 1fr 1fr; } }
footer .brand { margin-bottom: 12px; }
footer h4 { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
footer li { margin: 8px 0; }
footer li a { color: var(--text2); font-size: 14.5px; }
@media (hover: hover) and (pointer: fine) { footer li a:hover { color: var(--text); } }
footer .bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; font-family: var(--font-ui); }

/* ── Reveal on scroll ─────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 320ms ease, transform 320ms ease; }
.rv.in { opacity: 1; transform: none; transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.rv[data-d="1"] { transition-delay: 60ms; } .rv[data-d="2"] { transition-delay: 120ms; } .rv[data-d="3"] { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .float, .stage-card, .glow, .player .wave i { animation: none !important; }
}
@view-transition { navigation: auto; }

/* ── Sign-in popup ─────────────────────────────────────────────────── */
.auth-modal { position: fixed; inset: 0; z-index: var(--z-auth); display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 13, 23, 0.55); }
.auth-modal.open { display: flex; }
/* The sign-in card: a dark side with the covers on the left, the form on the
 * right; on a phone only the form. The card is the same one the company popup
 * wears (split-card). */
.auth-card { position: relative; width: min(880px, 100%); max-height: 92dvh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: pop 260ms cubic-bezier(.2,.8,.2,1); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
.auth-main { position: relative; padding: 26px 28px 22px; overflow: auto; max-height: 92dvh; }
.auth-main .x { position: absolute; top: 14px; right: 14px; }
[dir="rtl"] .auth-main .x { right: auto; left: 14px; }
.auth-side { display: none; }
@media (min-width: 760px) {
  .auth-card { grid-template-columns: 5fr 7fr; }
  .auth-side { display: grid; grid-template-rows: auto 1fr auto auto; gap: 18px; padding: 24px 24px 22px; color: #F4F7FB; background: radial-gradient(120% 80% at 20% 0%, rgba(24, 184, 166, 0.28), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(59, 156, 240, 0.18), transparent 60%), #0B1324; position: relative; overflow: hidden; }
  .auth-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(8, 13, 23, 0.5)); }
  .auth-side > * { position: relative; z-index: 1; }
  .auth-side .brand { color: #F4F7FB; }
  .as-fan { position: relative; height: 200px; }
  .as-c { position: absolute; width: 44%; max-width: 128px; }
  .as-c .cover { border-radius: 10px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7); }
  .as-c.c0 { left: 0; top: 24%; transform: rotate(-9deg); z-index: 1; }
  .as-c.c1 { left: 28%; top: 0; transform: rotate(-1deg); z-index: 3; width: 48%; max-width: 140px; }
  .as-c.c2 { right: 0; top: 16%; transform: rotate(8deg); z-index: 2; }
  .as-c .cover { animation: hs-float 7s ease-in-out infinite; }
  .as-c.c0 .cover { animation-delay: -2s; --lift: -7px; } .as-c.c2 .cover { animation-delay: -4.5s; --lift: -8px; }
  .as-line { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
  .as-proof { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; font-family: var(--font-ui); font-size: 13px; color: rgba(244, 247, 251, 0.72); }
  .as-proof b { color: #F4F7FB; font-size: 15px; margin-inline-end: 2px; }
}
@media (prefers-reduced-motion: reduce) { .as-c .cover { animation: none; } }
/* The switch between signing in and creating an account. */
.auth-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--surface2); margin: 0 44px 18px 0; --i: 0; }
[dir="rtl"] .auth-seg { margin: 0 0 18px 44px; }
.auth-seg button { position: relative; z-index: 1; height: 38px; border-radius: 999px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--text2); transition: color 200ms ease; }
.auth-seg button[aria-selected="true"] { color: var(--text); }
.auth-ind { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); transform: translateX(calc(var(--i) * 100%)); transition: transform 340ms var(--ease-out); }
[dir="rtl"] .auth-ind { transform: translateX(calc(var(--i) * -100%)); }
:root[data-theme="dark"] .auth-ind { background: var(--bg2); }
.auth-title { font-size: 24px; }
.auth-sub { color: var(--text2); margin: 6px 0 18px; font-size: 14.5px; }
.auth-google { width: 100%; height: 48px; gap: 10px; }
.auth-google img { width: 18px; height: 18px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-family: var(--font-ui); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text2); }
.field input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border2); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; outline: none; transition: border-color 140ms, box-shadow 140ms; width: 100%; }
.field input:focus { border-color: var(--teal); box-shadow: var(--ring); }
.field .row.between { align-items: baseline; }
.auth-forgot { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--teal2); }
:root[data-theme="dark"] .auth-forgot { color: var(--teal); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-inline-end: 46px; }
.pw-eye { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.pw-eye .i { font-size: 18px; }
.pw-eye .i:last-child, .pw-eye[aria-pressed="true"] .i:first-child { display: none; }
.pw-eye[aria-pressed="true"] .i:last-child { display: inline-flex; }
@media (hover: hover) and (pointer: fine) { .pw-eye:hover { color: var(--text); background: var(--surface2); } }
.auth-modal:not(.mode-up) .only-up { display: none; }
.auth-modal.mode-up .only-in { display: none; }
.auth-error { display: none; padding: 10px 12px; border-radius: 10px; background: rgba(242, 109, 109, 0.12); color: #C43D3D; font-size: 13.5px; margin-bottom: 12px; }
.auth-error.on { display: block; }
.auth-error.ok { background: var(--teal-soft); color: var(--teal2); }
.auth-submit { width: 100%; height: 48px; }
.auth-modal.busy .auth-submit, .auth-modal.busy .auth-google { opacity: 0.6; pointer-events: none; }
.auth-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); display: grid; gap: 6px; }
.auth-foot a { color: var(--text2); font-weight: 600; }
.auth-modal.failed .auth-main::after { content: attr(data-fail); display: block; margin-top: 10px; color: var(--muted); font-size: 13px; }
@media (max-width: 540px) {
  .auth-modal { padding: 0; align-items: end; }
  .auth-card { width: 100%; max-height: 94dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; }
  .auth-main { padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 94dvh; }
}

/* ── Pricing ──────────────────────────────────────────────────────── */
.bill { display: flex; width: max-content; max-width: 100%; margin-inline: auto; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); }
.bill button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--text2); transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms var(--ease-out); }
.bill button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.bill button:active { transform: scale(0.97); }
.bill .save { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--teal-soft); color: var(--teal2); }
:root[data-theme="dark"] .bill .save { color: var(--teal); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; padding-top: 14px; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.plan { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.plan.featured { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--shadow-lg); }
.plan .badge { position: absolute; top: -13px; inset-inline-start: 24px; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--teal); color: #05201C; font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.plan .name { font-size: 22px; }
.plan .tag { color: var(--text2); font-size: 14.5px; margin-top: -8px; }
.price { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; margin: 4px 0; }
.price .amt { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .per { font-family: var(--font-ui); color: var(--muted); font-weight: 600; font-size: 14.5px; }
.price .sub { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 13.5px; color: var(--muted); margin-top: 6px; min-height: 1.4em; font-variant-numeric: tabular-nums; }
.plan .btn { width: 100%; }
.perks { display: grid; gap: 10px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--border); }
.perks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14.5px; color: var(--text2); }
.perks li .i { color: var(--teal2); font-size: 18px; margin-top: 2px; }
:root[data-theme="dark"] .perks li .i, :root[data-theme="dark"] .cmp .yes, :root[data-theme="dark"] .cmp thead th.hi, :root[data-theme="dark"] .mails a, :root[data-theme="dark"] .tlink { color: var(--teal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .perks li .i, :root:not([data-theme="light"]) .cmp .yes, :root:not([data-theme="light"]) .cmp thead th.hi, :root:not([data-theme="light"]) .mails a, :root:not([data-theme="light"]) .tlink, :root:not([data-theme="light"]) .bill .save { color: var(--teal); } }
.pricing-note { max-width: 720px; margin: 26px auto 0; text-align: center; }
.tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); scrollbar-width: thin; }
.cmp { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; font-family: var(--font-ui); font-size: 14.5px; }
.cmp th, .cmp td { padding: 13px 16px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.cmp thead th { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--surface2); }
.cmp thead th.hi { color: var(--teal2); }
.cmp th:first-child, .cmp td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; text-align: start; font-weight: 600; color: var(--text); background: var(--surface); min-width: 180px; border-inline-end: 1px solid var(--border); }
.cmp thead th:first-child { background: var(--surface2); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .cmp { min-width: 440px; font-size: 13.5px; }
  .cmp th, .cmp td { padding: 12px 10px; }
  .cmp th:first-child, .cmp td:first-child { width: 132px; min-width: 132px; max-width: 132px; padding-inline: 14px; }
  .cmp td, .cmp thead th:not(:first-child) { min-width: 96px; }
}
.cmp .yes { display: inline-grid; place-items: center; color: var(--teal2); font-size: 20px; }
.cmp .no { color: var(--muted); }
.cmp .n { font-variant-numeric: tabular-nums; font-weight: 700; }
.faq { display: grid; gap: 10px; max-width: 800px; }
.faq-item { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-radius: 16px; cursor: pointer; font-family: var(--font-ui); font-weight: 700; font-size: 15.5px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { flex: none; font-size: 18px; color: var(--muted); transition: transform 200ms var(--ease-out); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .a { padding: 0 20px 18px; color: var(--text2); font-size: 15px; }
.faq-item[open] .a { animation: fade-in 200ms var(--ease-out); }
.faq-item .a a, .tlink { color: var(--teal2); font-weight: 600; }
.tlink { font-family: var(--font-ui); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

/* ── About ────────────────────────────────────────────────────────── */
.facts4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .facts4 { grid-template-columns: repeat(2, 1fr); } }
.fact { display: grid; gap: 4px; align-content: start; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.fact .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; }
.fact .ic .i { font-size: 20px; }
.fact b { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fact span { font-family: var(--font-ui); font-size: 13.5px; color: var(--text2); font-weight: 600; }
.about-why { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .about-why { grid-template-columns: 1fr; } }
.prose { display: grid; gap: 14px; max-width: 60ch; color: var(--text2); font-size: 16.5px; }
.stack { position: relative; height: 340px; max-width: 400px; margin-inline: auto; }
.stack .cover { position: absolute; width: 46%; border-radius: 16px; box-shadow: var(--shadow-lg); }
.stack .cover:nth-child(1) { left: 0; top: 10%; transform: rotate(-8deg); }
.stack .cover:nth-child(2) { left: 27%; top: 0; z-index: 2; transform: rotate(2deg); }
.stack .cover:nth-child(3) { right: 0; top: 14%; transform: rotate(8deg); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; } }
.links2 { display: grid; gap: 12px; }
.links2 .card { padding: 20px; }
.links2 .card .ic { margin-bottom: 12px; }
.links2 .card h3 { font-size: 18px; }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.cform { position: relative; padding: 28px; }
@media (max-width: 560px) { .cform { padding: 20px; } }
.cform form { display: grid; gap: 4px; }
.field label small { font-family: var(--font-ui); font-weight: 500; color: var(--muted); margin-inline-start: 6px; }
.field textarea { min-height: 150px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border2); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; outline: none; resize: vertical; width: 100%; transition: border-color 140ms, box-shadow 140ms; }
.field textarea:focus { border-color: var(--teal); box-shadow: var(--ring); }
.field .sel { position: relative; display: block; }
.field .sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 46px; padding: 0 40px 0 14px; border-radius: 12px; border: 1px solid var(--border2); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; outline: none; transition: border-color 140ms, box-shadow 140ms; }
[dir="rtl"] .field .sel select { padding: 0 14px 0 40px; }
.field .sel select:focus { border-color: var(--teal); box-shadow: var(--ring); }
.field .sel .i { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); font-size: 18px; }
.field .err { display: none; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--err); }
.field.bad .err { display: block; }
.field.bad input, .field.bad textarea { border-color: var(--rose); }
.field .under { display: flex; justify-content: space-between; gap: 10px; }
.field .chars { margin-inline-start: auto; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.status { display: none; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 13.5px; background: var(--surface2); color: var(--text2); }
.status.on { display: block; }
.status.bad { background: rgba(242, 109, 109, 0.12); color: var(--err); }
.cform [data-send] { justify-self: start; margin-top: 4px; }
.cform [data-send][disabled] { opacity: 0.6; pointer-events: none; }
.done { display: grid; gap: 12px; justify-items: start; padding: 8px 0; animation: pop 240ms var(--ease-out); }
.done .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.done .ic .i { font-size: 26px; }
.done p { color: var(--text2); }
.contact-side .card h3 .i { color: var(--teal2); }
.mails { display: grid; gap: 12px; margin-top: 12px; }
.mails li { display: grid; gap: 2px; }
.mails li span { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mails li a { color: var(--teal2); font-weight: 700; overflow-wrap: anywhere; }
.contact-side .small .i { vertical-align: -2px; }

/* ── Craft pass (Emil Kowalski / ibelick skills) ───────────────────── */
.stat b, .stats .stat, .pill, .book .bm, .count, .console-mock .kpi b, .player .ctrls, .days .d { font-variant-numeric: tabular-nums; }
.opt:active, .action:active, .thread:active, .tracks li:active, .store:active, .lang-grid a:active { transform: scale(0.98); }
.opt, .action, .thread, .tracks li { transition: transform 120ms var(--ease-out), background 140ms ease, border-color 140ms ease; }
@media (hover: none) { a.card:hover, .card.hover:hover, .book:hover, .program:hover, .course:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mode-panel, .lang-panel, .auth-card, .sheet.open, .faq-item .a, .msg, .page, .rv-in, .outcome, .expl { animation: none !important; }
  .faq-item .chev { transition: none; }
  .book, .card, .btn, .opt, .action { transition-duration: 1ms !important; }
  .flash .inner { transition-duration: 1ms; }
}
/* Fixed layers respect the notch and the home indicator. */
.sheet, .lang-menu, .auth-modal { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
@media (prefers-reduced-transparency: reduce) { .nav .wrap, .lang-menu, .auth-modal, .app-nav, .app-dock { background: var(--bg); } }


/* ── Narrow phones (320 px is still out there) ─────────────────────── */
/* A label is information; a fixed single line is not. Below 400 px a long
   button wraps rather than pushing the page sideways. */
.btn { max-width: 100%; }
@media (max-width: 400px) {
  /* Icon buttons are squares and must stay squares. */
  .btn:not(.btn-icon) { white-space: normal; text-wrap: balance; line-height: 1.2; height: auto; min-height: 46px; padding-block: 11px; }
  .btn-sm:not(.btn-icon) { height: auto; min-height: 38px; padding-block: 8px; }
  .btn-lg:not(.btn-icon) { height: auto; min-height: 54px; padding-block: 13px; }
}
/* Grid children need permission to be narrower than their content. */
.book-hero > *, .book-hero .info > *, .two > div > *, .facts, .hero-copy > * { min-width: 0; }
/* Four tabs do not fit on a 320 px row: let them wrap instead of hiding the
   last one behind the edge. */
@media (max-width: 460px) {
  .tabs { display: flex; flex-wrap: wrap; width: 100%; }
  .tabs button { flex: 1 1 auto; padding: 0 12px; }
}

/* ── Integration pass ──────────────────────────────────────────────── */
/* A visually-hidden span is `position: absolute`, so without a positioned
   ancestor it anchors to the page and the comparison table's off-screen
   "Yes"/"No" labels push the document wider than the phone. The scroller
   is the right ancestor for them. */
.tbl-wrap { position: relative; }

/* ══ The public pages: one editorial system ═══════════════════════════
   A left-set 12-column grid, glass only on things that float (the nav,
   chips, the device frames, the chat, the ledger, the filter bar), hairlines
   for structure, one ambient element per page at most. Motion is transform
   and opacity only; every loop is paused off screen by glass.js; hover only
   under (hover: hover) and (pointer: fine); reduced motion keeps the fades. */

/* ── Materials ──────────────────────────────────────────────────────── */
.glass {
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
}
.glass p { color: var(--text2); }

/* The liquid button: a translucent teal capsule, a specular highlight that
   follows the pointer (--mx/--my from glass.js, pointer: fine only), an inner
   refraction ring, a light sweep on hover and the usual press. */
/* (buttons live in one block near the top of the file) */
.chip-glass { background: var(--glass-2); border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); color: var(--text); }
.chip-glass[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* The frosty and the high-contrast fallbacks. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn-glass, .chip-glass, .catalog-bar, .free-badge { background: var(--surface); }
  .btn-liquid, .btn-primary { background: var(--teal); }
  .btn-liquid::before, .btn-primary::before { display: none; }
}
@media (prefers-contrast: more) {
  .glass, .btn-glass, .chip-glass, .nav .wrap, .catalog-bar { background: var(--surface); border-color: var(--text); box-shadow: none; }
  .btn-liquid, .btn-primary { background: var(--teal); border-color: #05201C; box-shadow: none; }
  .btn-liquid::before, .btn-liquid::after, .btn-primary::before, .btn-primary::after { display: none; }
}

/* ── The grid and the editorial parts ──────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
.split > * { min-width: 0; }
.s5-7 > :first-child { grid-column: span 5; } .s5-7 > :last-child { grid-column: span 7; }
.s6-6 > :first-child { grid-column: span 6; } .s6-6 > :last-child { grid-column: span 6; }
.s7-5 > :first-child { grid-column: span 7; } .s7-5 > :last-child { grid-column: span 5; }
@media (max-width: 900px) { .split > :first-child, .split > :last-child { grid-column: 1 / -1; } }
.between-head { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.between-head .tlink { margin-bottom: 6px; }
.tlink { color: var(--teal2); }
:root[data-theme="dark"] .tlink { color: var(--teal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tlink { color: var(--teal); } }
@media (hover: hover) and (pointer: fine) { .tlink:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* A number set as a display figure, the kicker beneath it. */
.bignum { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(112px, 8rem + 4vw, 200px); line-height: 0.82; letter-spacing: -0.06em; color: var(--text); font-variant-numeric: tabular-nums; margin: -0.04em 0 18px -0.04em; }
@media (max-width: 900px) { .bignum { font-size: 96px; margin-bottom: 10px; } }

/* A definition list with hairlines: the term set left, the sentence right. */
.rule-list { display: grid; }
.rule-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
.rule-list > div:last-child { border-bottom: 1px solid var(--border); }
.rule-list dt { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--text); padding-top: 2px; }
.rule-list dd { margin: 0; color: var(--text2); font-size: 16.5px; }
@media (max-width: 560px) { .rule-list > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } }

/* A single line of numbers between two hairlines. */
.rule-line { display: flex; flex-wrap: wrap; gap: 8px 48px; padding: 20px 0; border-block: 1px solid var(--border); }
.rule-line .tn { display: flex; align-items: baseline; gap: 8px; }
.rule-line .tn b { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; min-width: 2ch; }
.rule-line .tn span { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--text2); }
@media (max-width: 640px) { .rule-line { gap: 6px 28px; padding: 16px 0; } .rule-line .tn b { font-size: 22px; } }

/* A pull quote in Manrope, a hairline above, the source below. */
.quote-sec { padding-block: clamp(56px, 32px + 4vw, 96px); }
.quote-sec .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 24px; align-items: center; }
.quote-side { display: grid; justify-items: center; gap: 16px; }
.quote-side .book-link { display: block; width: min(220px, 60%); }
.quote-side .cover { width: 100%; transform: rotate(2deg); }
.quote-side a.more { font-family: var(--font-ui); font-weight: 700; color: var(--teal2); }
:root[data-theme="dark"] .quote-side a.more { color: var(--teal); }
@media (max-width: 760px) { .quote-sec .wrap { grid-template-columns: 1fr; } .quote-side { justify-items: start; } .quote-side .cover { width: 160px; } }
.pull { margin: 0; max-width: 34ch; padding-top: 28px; border-top: 1px solid var(--text); }
.pull blockquote { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: clamp(26px, 1.2rem + 1.6vw, 40px); line-height: 1.25; letter-spacing: -0.015em; color: var(--text); text-wrap: pretty; }
.pull figcaption { margin-top: 22px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.pull figcaption a { color: var(--text2); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .pull figcaption a:hover { color: var(--text); } }

/* A list of links with hairlines: name, one line, a count, an arrow. */
.rule-links { display: grid; }
.rule-links li { border-top: 1px solid var(--border); }
.rule-links li:last-child { border-bottom: 1px solid var(--border); }
.rule-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; column-gap: 20px; row-gap: 4px; align-items: center; padding: 22px 0; transition: transform 160ms var(--ease-out); }
.rule-links .rl-k { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1rem + 0.8vw, 24px); letter-spacing: -0.015em; }
.rule-links .rl-b { grid-column: 1; color: var(--text2); font-size: 16px; max-width: 60ch; }
.rule-links .rl-n { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rule-links a .i { grid-column: 3; grid-row: 1 / span 2; font-size: 22px; color: var(--text2); transition: transform 160ms var(--ease-out); }
.rule-links a:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .rule-links a:hover .i { transform: translateX(4px); } [dir="rtl"] .rule-links a:hover .i { transform: translateX(-4px) scaleX(-1); } .rule-links a:hover .rl-k { color: var(--teal2); } :root[data-theme="dark"] .rule-links a:hover .rl-k { color: var(--teal); } }
@media (max-width: 560px) { .rule-links a { grid-template-columns: minmax(0, 1fr) 24px; } .rule-links .rl-n { grid-column: 1; grid-row: 3; } .rule-links a .i { grid-column: 2; grid-row: 1 / span 3; } }

/* One line of the fifteen languages, dots between. */
.lang-line { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lang-line p { min-width: 0; }
.lang-line p { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--text2); font-size: 16px; line-height: 1.6; max-width: none; }
.lang-line span[lang] { white-space: nowrap; }
.lang-line .dot { display: none; }
@media (hover: hover) and (pointer: fine) { .lang-line a:hover { color: var(--text); } }

/* A hand-placed note with an arrow, in a handwriting face. Decorative. */
.annot { position: absolute; z-index: 3; display: grid; justify-items: start; gap: 0; color: var(--text2); font-family: var(--font-hand); font-size: 22px; line-height: 1; pointer-events: none; transform: rotate(-4deg); }
.annot svg { margin: -2px 0 0 26px; }
[dir="rtl"] .annot { transform: rotate(4deg); } [dir="rtl"] .annot svg { transform: scaleX(-1); margin: -2px 26px 0 0; }
@media (max-width: 900px) { .annot { display: none; } }

/* The closing statement: type and air, nothing else. */
.final { padding-block: clamp(64px, 32px + 5vw, 110px); }
.final .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 24px; align-items: center; }
.final .shelf { display: flex; justify-content: center; gap: 0; }
.final .shelf .cover { width: 150px; box-shadow: var(--shadow-lg); }
.final .shelf .cover:nth-child(1) { transform: rotate(-6deg) translate(24px, 14px); }
.final .shelf .cover:nth-child(2) { z-index: 1; }
.final .shelf .cover:nth-child(3) { transform: rotate(6deg) translate(-24px, 14px); }
@media (max-width: 760px) { .final .wrap { grid-template-columns: 1fr; } .final .shelf { display: none; } }
.final .h1 { max-width: 18ch; }
.final .lead { max-width: 48ch; }

/* Hand-set line breaks in the English headlines hold on wide screens only. */
@media (max-width: 640px) { br.lg { display: none; } }
/* The kicker only where it earns its place. */
.page-head { padding: clamp(32px, 4vw, 64px) 0 clamp(24px, 3vw, 40px); }
.page-head .kicker { margin-bottom: 16px; }

/* ── Home: the hero ─────────────────────────────────────────────────── */
.g-hero { position: relative; padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.g-hero .wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 24px; row-gap: 40px; align-items: center; }
.g-hero .hero-copy { display: grid; gap: 20px; justify-items: start; }
.g-hero .h1 { font-size: clamp(38px, 2rem + 2.1vw, 64px); }
.g-hero .hero-lead { max-width: 50ch; }
.hero-title { font-size: clamp(40px, 2rem + 2.2vw, 72px); }
/* The one ambient element on the page: a still disc of teal behind the covers. */
.ambient { position: absolute; inset-inline-end: -12vw; top: -18vw; width: 62vw; max-width: 900px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle closest-side, rgba(24, 184, 166, 0.20), rgba(24, 184, 166, 0.07) 48%, transparent 100%); }
.hero-copy > * { animation: rise-in 640ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; } .hero-copy > :nth-child(3) { animation-delay: 140ms; } .hero-copy > :nth-child(4) { animation-delay: 220ms; } .hero-copy > :nth-child(5) { animation-delay: 300ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Three real covers, the free one in front and tilted two degrees, the
   caption outside the cover where a person would write it. */
.hero-stack { position: relative; height: clamp(360px, 30vw + 120px, 520px); transition: transform 260ms var(--ease-out); animation: fade-in 700ms var(--ease-out) both; animation-delay: 200ms; }
.hero-stack .cover { border-radius: 14px; }
/* A fan of seven: the free one in front, six behind it stepping back and out.
 * The pointer moves the whole pile (at most 8px, glass.js); every cover
 * keeps floating on its own clock on top of that - seven periods that never
 * line up, so the pile breathes rather than bobs. */
.hero-stack .hs-front { position: absolute; inset-inline-start: 28%; top: 6%; width: 46%; max-width: 260px; z-index: 7; transform: rotate(-2deg); }
.hero-stack .hs-front .cover { box-shadow: 0 40px 60px -28px rgba(13, 19, 33, 0.6), 0 12px 24px -12px color-mix(in srgb, var(--c1) 60%, transparent); }
.hero-stack .hs-front .book-link { display: block; border-radius: 14px; }
.hero-stack .hs-back { position: absolute; width: 34%; max-width: 190px; opacity: 0.94; }
.hero-stack .hs-back.a { inset-inline-start: 4%; top: 22%; z-index: 4; transform: rotate(-10deg); }
.hero-stack .hs-back.b { inset-inline-end: 6%; top: 14%; z-index: 5; transform: rotate(8deg); }
.hero-stack .hs-back.c { inset-inline-start: -3%; top: 50%; width: 26%; max-width: 150px; z-index: 2; opacity: 0.8; transform: rotate(-17deg); }
.hero-stack .hs-back.d { inset-inline-end: -2%; top: 44%; width: 26%; max-width: 150px; z-index: 3; opacity: 0.8; transform: rotate(15deg); }
.hero-stack .hs-back.e { inset-inline-start: 19%; top: -4%; width: 24%; max-width: 140px; z-index: 1; opacity: 0.7; transform: rotate(-7deg); }
.hero-stack .hs-back.f { inset-inline-end: 24%; top: -6%; width: 24%; max-width: 140px; z-index: 1; opacity: 0.7; transform: rotate(6deg); }
.hero-stack .hs-back .cover { box-shadow: 0 24px 40px -24px rgba(13, 19, 33, 0.5); }
.hero-stack .hs-front .cover { animation: hs-float 6.4s ease-in-out infinite; animation-delay: -1.2s; }
.hero-stack .hs-back.a .cover { animation: hs-float 7.6s ease-in-out infinite; animation-delay: -3.1s; --lift: -9px; }
.hero-stack .hs-back.b .cover { animation: hs-float 8.4s ease-in-out infinite; animation-delay: -5.3s; --lift: -10px; }
.hero-stack .hs-back.c .cover { animation: hs-float 9.2s ease-in-out infinite; animation-delay: -2.2s; --lift: -7px; }
.hero-stack .hs-back.d .cover { animation: hs-float 8.8s ease-in-out infinite; animation-delay: -6.4s; --lift: -8px; }
.hero-stack .hs-back.e .cover { animation: hs-float 9.8s ease-in-out infinite; animation-delay: -4.4s; --lift: -6px; }
.hero-stack .hs-back.f .cover { animation: hs-float 10.4s ease-in-out infinite; animation-delay: -7.7s; --lift: -6px; }
@keyframes hs-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(var(--lift, -11px)) rotate(0.5deg); } }
.hero-stack .hs-cap { position: absolute; inset-inline-end: 0; bottom: 0; max-width: 40%; text-align: end; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--text2); }
.hero-stack .hs-cap b { color: var(--text); }
.hero-stack .hs-annot { inset-inline-start: 0; top: 0; }
[dir="rtl"] .hero-stack .hs-front { transform: rotate(2deg); } [dir="rtl"] .hero-stack .hs-back.a { transform: rotate(10deg); } [dir="rtl"] .hero-stack .hs-back.b { transform: rotate(-8deg); } [dir="rtl"] .hero-stack .hs-back.c { transform: rotate(17deg); } [dir="rtl"] .hero-stack .hs-back.d { transform: rotate(-15deg); } [dir="rtl"] .hero-stack .hs-back.e { transform: rotate(7deg); } [dir="rtl"] .hero-stack .hs-back.f { transform: rotate(-6deg); }
@media (max-width: 960px) {
  .g-hero .wrap { grid-template-columns: 1fr; }
  .hero-stack { height: 380px; max-width: 520px; }
}
/* A phone cannot hold seven covers without them cutting each other up, so
 * it gets three: the free one centred and in front, one leaning in from
 * each side, and the caption under the pile where there is room for it. */
@media (max-width: 560px) {
  /* An explicit width, because `margin-inline: auto` on an auto-width grid
   * item shrinks it to its content and the absolute covers collapse with it. */
  .hero-stack { height: 300px; width: min(100%, 340px); margin-inline: auto; }
  .hero-stack .hs-back.c, .hero-stack .hs-back.d, .hero-stack .hs-back.e, .hero-stack .hs-back.f, .hero-stack .hs-annot { display: none; }
  .hero-stack .hs-front { inset-inline-start: 50%; top: 2%; width: 45%; max-width: 160px; transform: translateX(-50%) rotate(-2deg); }
  [dir="rtl"] .hero-stack .hs-front { transform: translateX(50%) rotate(2deg); }
  /* The two behind are the back of a pile, not covers asking to be read:
   * smaller, tucked under the front one, nowhere near the screen edge. */
  .hero-stack .hs-back { width: 34%; max-width: 122px; opacity: 1; }
  .hero-stack .hs-back.a { inset-inline-start: 3%; top: 17%; transform: rotate(-12deg); }
  .hero-stack .hs-back.b { inset-inline-end: 3%; top: 14%; transform: rotate(10deg); }
  [dir="rtl"] .hero-stack .hs-back.a { transform: rotate(11deg); }
  [dir="rtl"] .hero-stack .hs-back.b { transform: rotate(-9deg); }
  .hero-stack .hs-cap { inset-inline: 0; bottom: 0; max-width: none; text-align: center; font-size: 12.5px; }
  /* Four figures read as a block, not as a ragged wrap. */
  .rule-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .rule-line .tn { display: grid; gap: 1px; }
  .rule-line .tn b { min-width: 0; }
  .rule-line .tn span { font-size: 13px; }
  /* The page is long on a phone; give back the air that is only there to
   * separate sections on a wide screen. */
  .sec { padding: 46px 0; }
  .sec-head { margin-bottom: 26px; }
  .g-hero { padding-top: 22px; }
  .g-hero .wrap { row-gap: 28px; }
  .g-hero .hero-copy { gap: 16px; }
}
.hero-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--font-ui); font-size: 13.5px; }
.hero-note .i { color: var(--teal); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.g-hero + .rule-line { margin-top: 0; }

/* ── The shelf ──────────────────────────────────────────────────────── */
.g-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.g-rail-wrap { position: relative; }
.g-rail {
  display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 14px max(24px, calc((100% - 1180px) / 2)) 26px; scroll-padding-inline: max(24px, calc((100% - 1180px) / 2));
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.g-rail::-webkit-scrollbar { display: none; }
.g-clone { display: contents; }
.g-rail[data-loop] { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { .hero-stack .cover { animation: none !important; } }
:root[data-reduce-motion="1"] .hero-stack .cover { animation: none !important; }
.g-rail.dragging { cursor: grabbing; scroll-behavior: auto; }
@media (pointer: coarse) { .g-rail { scroll-snap-type: x mandatory; } .g-item { scroll-snap-align: start; } }
.g-item { position: relative; flex: 0 0 168px; display: grid; gap: 10px; align-content: start; border-radius: 14px; transition: transform 200ms var(--ease-out), opacity 200ms ease; }
.g-item .cover { border-radius: 12px; box-shadow: 0 18px 30px -16px rgba(13, 19, 33, 0.45); }
.g-item .sheen { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 0.7; border-radius: 12px; overflow: hidden; pointer-events: none; z-index: 2; }
.g-item .sheen::before, .citem .sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.34) 50%, transparent 80%); transform: translateX(-160%) skewX(-16deg); }
@media (hover: hover) and (pointer: fine) {
  .g-item:hover, .citem:hover { transform: translateY(-4px); }
  .g-item:hover .sheen::before, .citem:hover .sheen::before { animation: liquid-sweep 800ms var(--ease-out) 1; }
  [dir="rtl"] .g-item:hover .sheen::before, [dir="rtl"] .citem:hover .sheen::before { animation-name: liquid-sweep-rtl; }
}
.g-item:active, .citem:active { transform: scale(0.98); }
/* The caption sits under the cover, never on it. */
.g-item .cap { display: grid; gap: 2px; padding: 0 2px; color: var(--text); }
.g-item .cover .t { display: grid; }
.g-item .cap b { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-item .cap small { font-family: var(--font-ui); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-item .cap em { font-style: normal; font-weight: 700; color: var(--teal2); }
:root[data-theme="dark"] .g-item .cap em { color: var(--teal); }
.g-item.off { opacity: 0; transform: scale(0.96); pointer-events: none; }
.g-item[hidden] { display: none !important; }
.g-item.in { animation: shelf-in 320ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 30ms); }
@keyframes shelf-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.rail-btn { position: absolute; top: 34%; z-index: 4; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--text); transform: translateY(-50%); transition: transform 140ms var(--ease-out), opacity 160ms ease; }
.rail-btn .i { font-size: 20px; }
.rail-btn.prev { inset-inline-start: 14px; }
.rail-btn.next { inset-inline-end: 14px; }
.rail-btn:active { transform: translateY(-50%) scale(0.94); }
.rail-btn[disabled] { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .rail-btn:not([disabled]):hover { border-color: var(--teal); } }
@media (pointer: coarse) { .rail-btn { display: none; } }
@media (max-width: 560px) { .g-item { flex-basis: 136px; } .g-rail { gap: 14px; padding-inline: 16px; scroll-padding-inline: 16px; } }

/* ── The device (the modes demo and the mode walk) ──────────────────── */
.device { border-radius: var(--r-xl); overflow: hidden; }
.device-bar { padding: 12px 14px; border-bottom: 1px solid var(--glass-border); background: var(--glass-3); }
.device .modes-tabs { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); position: relative; -ms-overflow-style: none; }
.device .modes-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 720px) { .device .modes-tabs { -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); } [dir="rtl"] .device .modes-tabs { -webkit-mask-image: linear-gradient(270deg, #000 84%, transparent); mask-image: linear-gradient(270deg, #000 84%, transparent); } }
.device .mode-tab { flex: none; border-color: transparent; background: none; position: relative; z-index: 1; height: 40px; transition: color 160ms ease, transform 120ms var(--ease-out); }
.device .mode-tab[aria-selected="true"] { background: none; color: var(--text); border-color: transparent; }
/* One pill slides between tabs; glass.js moves it with a FLIP transform. */
.seg-track { position: relative; }
.seg-ind { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 2px rgba(13, 19, 33, 0.08), 0 6px 14px -8px rgba(13, 19, 33, 0.3); transform-origin: 0 50%; opacity: 0; z-index: 0; }
.seg-ind.ready { opacity: 1; }
.seg-ind.moving { transition: transform 260ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.device .panels { display: grid; padding: clamp(18px, 3vw, 28px); }
.device .mode-panel { display: grid; grid-area: 1 / 1; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: start; animation: none; opacity: 0; transform: scale(0.985); visibility: hidden; transition: opacity 220ms ease, transform 260ms var(--ease-out), visibility 0s linear 220ms; }
.device .mode-panel.on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s, 0s, 0s; }
@media (max-width: 900px) { .device .mode-panel { grid-template-columns: 1fr; } }
.device .board { background: var(--glass-3); border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); }
.device .q .opt, .device .mm .branch { background: var(--glass-2); border-color: var(--glass-border); }
.demo-wrap { position: relative; }
.demo-annot { top: -26px; inset-inline-start: 46%; }
.for { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.for .cover { width: 26px; border-radius: 4px; }
.for .cover .t, .for .cover .glyph { display: none; }

/* The flip card: the stat in front, the "why" behind, on one tap. */
.flipcard { position: relative; display: grid; width: 100%; text-align: start; perspective: 1000px; cursor: pointer; border-radius: 16px; }
.flipcard .face { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 520ms var(--ease-out); }
.flipcard .face p { font-size: 15px; color: var(--text2); }
.flipcard .back { transform: rotateY(180deg); background: var(--amber-soft); border-color: transparent; }
.flipcard .back .bt { color: #9A6413; }
:root[data-theme="dark"] .flipcard .back .bt { color: var(--amber); }
.flipcard.flipped .front { transform: rotateY(180deg); }
.flipcard.flipped .back { transform: rotateY(360deg); }
.flipcard:active { transform: scale(0.99); }
.flipcard:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.device .flipcard .face { background: var(--glass-2); border-color: var(--glass-border); }
.device .flipcard .back { background: var(--amber-soft); }

/* ── Bits AI chat ───────────────────────────────────────────────────── */
.glass-chat { box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg); }
.glass-chat .bar { border-bottom-color: var(--glass-border); background: var(--glass-3); }
.glass-chat .bar .ctx { font-weight: 500; color: var(--muted); }
.glass-chat .msg.ai { background: var(--glass-2); border: 1px solid var(--glass-border); }
.glass-chat .msg { animation: msg-in 320ms var(--ease-out) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.glass-chat .input { border-top-color: var(--glass-border); }
.glass-chat .msgs { align-content: start; }
.chat.big .msgs { min-height: 380px; padding: 22px; }
.chat.big .msg { font-size: 15.5px; }
.seg-liquid { background: color-mix(in srgb, var(--text) 6%, transparent); }
.seg-liquid button { position: relative; z-index: 1; color: var(--text2); transition: color 160ms ease; }
.seg-liquid button[aria-pressed="true"] { background: none; box-shadow: none; color: #05201C; }
.seg-liquid .seg-ind { top: 3px; height: calc(100% - 6px); background: color-mix(in srgb, var(--teal) 85%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 14px -8px rgba(24, 184, 166, 0.8); }
.ai-sec .split { align-items: center; }
@media (max-width: 900px) { .ai-sec .split > :first-child { order: 2; } }
@media (max-width: 480px) { .chat .bar { flex-wrap: wrap; gap: 10px; } }

/* ── The app ────────────────────────────────────────────────────────── */
.app2 { align-items: center; }
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.stores .store { border-color: var(--glass-border); height: 54px; border-radius: 999px; transition: transform 140ms var(--ease-out), border-color 160ms ease; }
.stores .store.soon { opacity: 0.72; }
@media (hover: hover) and (pointer: fine) { .stores a.store:hover { border-color: var(--teal); } }
.gphone { position: relative; width: 250px; aspect-ratio: 9 / 18.6; border-radius: 40px; margin-inline: auto; padding: 8px; overflow: hidden; }
.gphone .scr { position: absolute; inset: 8px; border-radius: 32px; background: var(--bg); padding: 26px 14px 80px; display: grid; gap: 10px; align-content: start; color: var(--text); overflow: hidden; }
.gphone .scr .top { display: grid; gap: 2px; }
.gphone .scr .hi { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.gphone .scr .sub { font-size: 11px; color: var(--text2); }
.gphone .goal { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-border); }
.gphone .goal svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.gphone .goal .track { fill: none; stroke: var(--border2); stroke-width: 7; }
.gphone .goal .ring { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rv.in .gphone .goal .ring { animation: ring 1000ms var(--ease-out) forwards; animation-delay: 300ms; }
@keyframes ring { to { stroke-dashoffset: 20; } }
.gphone .goal b { display: block; font-family: var(--font-ui); font-size: 12px; }
.gphone .goal span { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.gphone .chips3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gphone .chips3 span { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-border); font-family: var(--font-ui); }
.gphone .chips3 .i { font-size: 15px; color: var(--teal2); }
:root[data-theme="dark"] .gphone .chips3 .i { color: var(--teal); }
.gphone .chips3 b { font-size: 13px; font-variant-numeric: tabular-nums; }
.gphone .chips3 small { font-size: 9px; color: var(--text2); white-space: nowrap; }
.gphone .lbl { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.gphone .tile { display: grid; grid-template-columns: 30px 1fr; gap: 8px 10px; align-items: center; padding: 8px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-border); }
.gphone .tile .cover { width: 30px; border-radius: 5px; grid-row: span 2; }
.gphone .tile .cover .t, .gphone .tile .cover .glyph { display: none; }
.gphone .tile b { display: block; font-size: 11px; font-family: var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gphone .tile span { font-size: 10px; color: var(--text2); }
.gphone .tile .bar, .cs-rows .bar { display: block; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.gphone .tile .bar i, .cs-rows .bar i { display: block; height: 100%; width: var(--p); border-radius: 2px; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .gphone .tile .bar i, [dir="rtl"] .cs-rows .bar i { transform-origin: 100% 50%; }
.rv.in .gphone .tile .bar i, .console .bar i { animation: bar-in 700ms var(--ease-out) forwards; animation-delay: 500ms; }
@keyframes bar-in { to { transform: scaleX(1); } }
.gphone .dock { position: absolute; left: 18px; right: 18px; bottom: 18px; height: 50px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), 0 8px 18px -10px rgba(13, 19, 33, 0.35); display: flex; justify-content: space-around; align-items: center; color: var(--muted); }
.gphone .dock .i { font-size: 18px; }
.gphone .dock .i.on { color: var(--teal2); }
:root[data-theme="dark"] .gphone .dock .i.on { color: var(--teal); }

/* ── Explore: the catalogue ─────────────────────────────────────────── */
.explore-head { padding-bottom: 20px; }
.catalog-bar { position: sticky; top: var(--nav-h); z-index: calc(var(--z-nav) - 1); background: var(--nav-glass); border-bottom: 1px solid var(--glass-border); padding-top: 12px; }
.cb-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cb-row .search { flex: 1 1 280px; max-width: 520px; height: 46px; border-radius: 14px; box-shadow: none; }
.cb-row .tabs button { height: 38px; padding: 0 14px; }
.cb-chips .filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0; padding: 12px 0 14px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
[dir="rtl"] .cb-chips .filters { -webkit-mask-image: linear-gradient(270deg, #000 92%, transparent); mask-image: linear-gradient(270deg, #000 92%, transparent); }
.cb-chips .filters::-webkit-scrollbar { display: none; }
.cb-chips .chip { flex: none; }
.catalog { padding-top: 32px; }
@media (max-width: 460px) { .cb-row .tabs { flex-wrap: nowrap; width: auto; } .cb-row .tabs button { flex: none; padding: 0 10px; font-size: 13px; } .cb-row .tabs button b { margin-inline-start: 4px; } }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 30px 20px; }
@media (max-width: 560px) { .cgrid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 22px 14px; } }
.citem { display: grid; gap: 10px; align-content: start; border-radius: 12px; transition: transform 200ms var(--ease-out); }
.citem .cwrap { position: relative; display: block; border-radius: 12px; isolation: isolate; }
.citem .cover { border-radius: 12px; box-shadow: 0 14px 26px -14px rgba(13, 19, 33, 0.45); }
.citem .sheen { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; pointer-events: none; z-index: 2; }
.free-badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.75); color: #fff; background: rgba(0, 0, 0, 0.22); font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.citem .meta { display: grid; gap: 2px; padding: 0 2px; }
.citem .bt { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.citem .ba { font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.citem .bm { font-family: var(--font-ui); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.citem.hide { display: none !important; }
/* Courses: grouped by program, a heavy rule under the group, hairlines between rows. */
.cgroup { margin-bottom: 48px; }
.cg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--text); }
.cg-head .muted { font-family: var(--font-ui); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.clist li { border-bottom: 1px solid var(--border); }
.crow { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto 22px; gap: 20px; align-items: center; padding: 14px 0; transition: transform 160ms var(--ease-out); }
.crow.hide { display: none !important; }
.cr-ys { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-t { display: grid; gap: 2px; min-width: 0; }
.cr-t b { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
.cr-t span { font-size: 13.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-tag { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 6px; background: var(--violet-soft); color: var(--violet); white-space: nowrap; }
.cr-tag.core { background: var(--teal-soft); color: var(--teal2); }
:root[data-theme="dark"] .cr-tag.core { color: var(--teal); }
.crow .i { font-size: 20px; color: var(--text2); transition: transform 160ms var(--ease-out); }
.crow:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) { .crow:hover b { color: var(--teal2); } :root[data-theme="dark"] .crow:hover b { color: var(--teal); } .crow:hover .i { transform: translateX(4px); } [dir="rtl"] .crow:hover .i { transform: translateX(-4px) scaleX(-1); } }
@media (max-width: 640px) { .crow { grid-template-columns: minmax(0, 1fr) 22px; gap: 6px 12px; } .cr-ys { grid-column: 1; } .cr-t { grid-column: 1; } .cr-tag { grid-column: 1; justify-self: start; } .crow .i { grid-column: 2; grid-row: 1 / span 3; } }
.modes-links li.hide { display: none !important; }

/* ── Modes: the walk ────────────────────────────────────────────────── */
.mode-index { display: grid; align-self: end; }
.mode-index li { border-top: 1px solid var(--border); }
.mode-index li:last-child { border-bottom: 1px solid var(--border); }
.mode-index a { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; font-family: var(--font-ui); font-weight: 700; font-size: 15px; transition: color 140ms ease; }
.mode-index a span { font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--teal2); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .mode-index a span { color: var(--teal); }
@media (hover: hover) and (pointer: fine) { .mode-index a:hover { color: var(--teal2); } :root[data-theme="dark"] .mode-index a:hover { color: var(--teal); } }
.mode-walk { padding-block: clamp(48px, 24px + 3vw, 72px); scroll-margin-top: calc(var(--nav-h) + 12px); }
.mode-walk + .mode-walk { border-top: 1px solid var(--border); }
.mode-walk .split { align-items: center; }
.mode-walk.flip-side .split > :first-child { order: 2; grid-column: span 5; }
.mode-walk.flip-side .split > :last-child { order: 1; grid-column: span 7; }
@media (max-width: 900px) { .mode-walk.flip-side .split > :first-child, .mode-walk.flip-side .split > :last-child { grid-column: 1 / -1; order: initial; } }
.mw-copy { display: grid; gap: 0; justify-items: start; }
.mw-n { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--teal2); letter-spacing: 0.1em; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .mw-n { color: var(--teal); }
.mw-long { color: var(--text2); margin-top: 14px; max-width: 52ch; }
.mw-copy .for { margin-top: 26px; }
.mw-copy .tlink { margin-top: 14px; }
.mw-device { position: relative; }
.mw-annot { top: 6px; inset-inline-end: 22px; justify-items: end; transform: rotate(3deg); }
.mw-annot svg { transform: scaleX(-1); margin: -2px 26px 0 0; }
[dir="rtl"] .mw-annot svg { transform: none; margin: -2px 0 0 26px; }
.mw-bar { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mw-bar .dot, .cs-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border2); }
.mw-bar .mw-title, .cs-bar span:last-child { margin-inline-start: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-device .panels { display: block; }
.mw-device .board { padding: clamp(18px, 2.4vw, 26px); }

/* ── Pricing: the ledger ────────────────────────────────────────────── */
.price-top { align-items: start; }
.price-top .bill { margin-inline: 0; }
.price-top .h1 { font-size: clamp(40px, 2rem + 1.6vw, 60px); }
.ledger { border-radius: var(--r-xl); padding: 6px 26px 8px; }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding: 20px 0; border-top: 1px solid var(--glass-border); }
.lrow:first-child { border-top: 0; }
.lname .name { font-size: 22px; display: inline; }
.ledger .badge { display: inline-flex; align-items: center; vertical-align: 3px; margin-inline-start: 10px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--teal); color: #05201C; font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.lname .tag { color: var(--text2); font-size: 14px; margin-top: 6px; max-width: 36ch; }
.ledger .price { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 5px; text-align: end; justify-content: end; margin: 0; }
.ledger .amt { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ledger .per { font-family: var(--font-ui); color: var(--muted); font-weight: 600; font-size: 13.5px; }
.ledger .sub { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ledger .btn { min-width: 132px; }
.lnote { padding: 16px 0 12px; border-top: 1px solid var(--glass-border); }
@media (max-width: 640px) {
  .ledger { padding: 4px 18px 6px; }
  .lrow { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; }
  .lrow .lname { grid-column: 1 / -1; }
  .ledger .price { justify-content: start; text-align: start; }
  .lrow .btn { grid-column: 2; }
}

/* ── Bits AI page ───────────────────────────────────────────────────── */
.ai-hero { align-items: start; }

/* ── For companies: the console ─────────────────────────────────────── */
.console { border-radius: var(--r-xl); padding: 18px 20px 8px; display: grid; gap: 14px; align-self: center; }
.cs-bar { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cs-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cs-kpis div { padding: 12px 14px; border-radius: 14px; background: var(--glass-3); border: 1px solid var(--glass-border); }
.cs-kpis b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cs-kpis span { font-family: var(--font-ui); font-size: 11.5px; color: var(--text2); }
.cs-rows li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 80px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--glass-border); }
.cs-rows .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); font-family: var(--font-ui); font-size: 12px; font-weight: 800; }
:root[data-theme="dark"] .cs-rows .av { color: var(--teal); }
.cs-rows b { display: block; font-family: var(--font-ui); font-size: 13.5px; }
.cs-rows small { display: block; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps { display: grid; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border); }
.steps li:last-child { border-bottom: 1px solid var(--border); }
.steps .n { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--teal2); letter-spacing: 0.08em; padding-top: 4px; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .steps .n { color: var(--teal); }
.steps p { color: var(--text2); }

/* ── Reduced motion: keep the fades, drop the travel ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-stack, .g-item.in, .glass-chat .msg { animation: fade-in 240ms ease both; }
  .btn-liquid::after, .g-item .sheen::before, .citem .sheen::before, .console .bar i, .rv.in .gphone .tile .bar i { animation: none !important; }
  .console .bar i, .rv.in .gphone .tile .bar i { transform: none; }
  .seg-ind.moving, .device .mode-panel, .g-item, .citem, .hero-stack, .rule-links a .i, .crow .i { transition-duration: 1ms !important; }
  .rv.in .gphone .goal .ring { animation-duration: 1ms; }
  .flipcard .face { transition: opacity 200ms ease; transform: none; }
  .flipcard .back { opacity: 0; } .flipcard.flipped .back { opacity: 1; } .flipcard.flipped .front { opacity: 0; }
}
:root[data-reduce-motion="1"] .hero-copy > *, :root[data-reduce-motion="1"] .hero-stack, :root[data-reduce-motion="1"] .g-item.in, :root[data-reduce-motion="1"] .glass-chat .msg { animation: fade-in 240ms ease both; }
:root[data-reduce-motion="1"] .btn-liquid::after, :root[data-reduce-motion="1"] .g-item .sheen::before, :root[data-reduce-motion="1"] .citem .sheen::before, :root[data-reduce-motion="1"] .console .bar i, :root[data-reduce-motion="1"] .rv.in .gphone .tile .bar i { animation: none !important; }
:root[data-reduce-motion="1"] .console .bar i, :root[data-reduce-motion="1"] .rv.in .gphone .tile .bar i { transform: none; }
:root[data-reduce-motion="1"] .seg-ind.moving, :root[data-reduce-motion="1"] .device .mode-panel, :root[data-reduce-motion="1"] .g-item, :root[data-reduce-motion="1"] .citem, :root[data-reduce-motion="1"] .hero-stack { transition-duration: 1ms !important; }
:root[data-reduce-motion="1"] .flipcard .face { transition: opacity 200ms ease; transform: none; }
:root[data-reduce-motion="1"] .flipcard .back { opacity: 0; } :root[data-reduce-motion="1"] .flipcard.flipped .back { opacity: 1; } :root[data-reduce-motion="1"] .flipcard.flipped .front { opacity: 0; }

/* ── Pixel sweep: touch targets, focus rings ───────────────────────── */
@media (pointer: coarse) {
  .theme-btn, .lang-btn, .chip, .mode-tab, .seg button { min-height: 40px; }
  .btn-sm { height: 40px; }
  .lang-line p a { display: inline-block; padding-block: 7px; }
  .theme-btn { min-width: 40px; }
  .brand { min-height: 40px; }
  .tlink, .more { position: relative; }
  .tlink::after, .more::after { content: ""; position: absolute; inset: -8px 0; }
}
/* A focus ring on a tab that sits flush against a clipped device frame
 * must draw inward, or overflow:hidden eats it. */
.device .mode-tab:focus-visible { outline-offset: -3px; }

/* Same scrim on the public nav strip: content dissolves under the pill. */
.nav { background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 60%, transparent 100%); }
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--bg); } }

/* ══════════════════════════════════════════════════════════════════
   Polish pass, after 21st.dev's most-used patterns, redrawn by hand for
   this system: a pointer spotlight on the glass devices, headings that
   rise a word at a time, a quote that lights up as it is read, devices
   that tilt in on scroll, CTAs with a magnetic pull, a nav that
   condenses, a drifting language row, five slow strokes at the end.
   Transform and opacity only; everything stops under reduced motion.
   ══════════════════════════════════════════════════════════════════ */
/* Words: each one an inline block so it can rise on its own. */
.w { display: inline-block; }
[data-split].words .w { opacity: 0; transform: translateY(0.55em); }
.rv.in [data-split].words .w, .hero-title.words .w { animation: w-up 640ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 38ms + var(--w0, 0ms)); }
.hero-title.words .w { --w0: 120ms; }
@keyframes w-up { from { opacity: 0; transform: translateY(0.55em); } to { opacity: 1; transform: none; } }
/* The quote: muted until the word is read, one word at a time. */
[data-words] .q { display: inline-block; color: color-mix(in srgb, var(--text) 26%, transparent); transition: color 420ms ease; }
[data-words] .q.on { color: var(--text); }
:root[data-theme="dark"] /* Tilt-in: a device arrives leaning back and settles flat as it scrolls up. */
@supports (animation-timeline: view()) {
  .tilt-in { animation: tilt-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; transform-origin: 50% 100%; }
  @keyframes tilt-in { from { transform: perspective(1400px) rotateX(16deg) scale(0.94); } to { transform: perspective(1400px) rotateX(0) scale(1); } }
}
/* Magnetic: the CTA leans a few pixels toward the pointer. */
/* Arrows lead the way on hover. */
.btn .i.flip, .tlink .i.flip { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .i.flip, .tlink:hover .i.flip { transform: translateX(3px); }
  [dir="rtl"] .btn:hover .i.flip, [dir="rtl"] .tlink:hover .i.flip { transform: translateX(-3px); }
}
/* The nav condenses once the page is moving. */
.nav .wrap { transition: box-shadow 200ms ease, height 280ms var(--ease-out), gap 280ms var(--ease-out); }
@media (min-width: 641px) { .nav.scrolled .wrap { height: 50px; gap: 16px; } }
/* The hero kicker: a slow sheen across the accent, once every few seconds. */
.hero-copy .kicker { background: linear-gradient(100deg, var(--teal2) 0%, var(--teal2) 40%, color-mix(in srgb, var(--teal) 55%, #fff) 50%, var(--teal2) 60%, var(--teal2) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kicker-sheen 5.2s ease-in-out infinite; }
.hero-copy .kicker::before { background: var(--teal2); }
:root[data-theme="dark"] .hero-copy .kicker { background-image: linear-gradient(100deg, var(--teal) 0%, var(--teal) 40%, #fff 50%, var(--teal) 60%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="dark"] .hero-copy .kicker::before { background: var(--teal); }
@keyframes kicker-sheen { 0%, 55% { background-position: 100% 0; } 100% { background-position: -60% 0; } }
/* The language row drifts sideways on wide screens; a pointer stops it. */
.drift-clone { display: none; }
@media (min-width: 761px) and (hover: hover) {
  .lang-line p[data-drift] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 28px; padding-block: 2px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .lang-line p[data-drift]::-webkit-scrollbar { display: none; }
  .drift-clone { display: contents; }
}
/* Five strokes behind the last word. */
.final { position: relative; overflow: hidden; }
.final .wrap { position: relative; z-index: 1; }
.bg-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bg-paths path { fill: none; stroke: var(--teal); stroke-width: 1.2; opacity: calc(0.16 - var(--k, 0) * 0.02); stroke-dasharray: 18 22; animation: path-drift calc(28s + var(--k, 0) * 6s) linear infinite; }
@keyframes path-drift { to { stroke-dashoffset: -400; } }
:root[data-theme="dark"] .bg-paths path { opacity: calc(0.22 - var(--k, 0) * 0.03); }
@media (prefers-reduced-motion: reduce) {
  [data-split].words .w, .hero-title.words .w { opacity: 1; transform: none; animation: none !important; }
  [data-words] .q { color: var(--text); transition: none; }
  .tilt-in { animation: none !important; }
  .hero-copy .kicker { animation: none; }
  .bg-paths path { animation: none; }
  .btn { --gx: 0px !important; --gy: 0px !important; }
}
:root[data-reduce-motion="1"] [data-split].words .w, :root[data-reduce-motion="1"] .hero-title.words .w { opacity: 1; transform: none; animation: none !important; }
:root[data-reduce-motion="1"] [data-words] .q { color: var(--text); transition: none; }
:root[data-reduce-motion="1"] .tilt-in, :root[data-reduce-motion="1"] .bg-paths path, :root[data-reduce-motion="1"] .hero-copy .kicker { animation: none !important; }

/* ── The small-screen door ──────────────────────────────────────────────
 * The learner app on the web is built for a laptop, so a phone gets the
 * site and this. It is the one screen a phone visitor meets when they try
 * to sign in, so it is not a toast and not an alert — it is a room: the
 * character, one sentence that explains rather than refuses, a link they
 * can take with them, and the two apps named honestly as not-out-yet. */
.small-gate { position: fixed; inset: 0; z-index: var(--z-auth); display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 13, 23, 0.6); animation: sgFade 220ms ease both; }
.small-gate[hidden] { display: none; }
@keyframes sgFade { from { opacity: 0; } }
.sg-card { position: relative; width: min(460px, 100%); max-height: 94dvh; overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg); padding: 26px 24px calc(26px + env(safe-area-inset-bottom)); text-align: center; animation: sgUp 380ms var(--ease-out) both; }
@keyframes sgUp { from { transform: translateY(26px); opacity: 0; } }
/* One soft light behind the character, fading to nothing — no disc edge. */
.sg-glow { position: absolute; inset: 0 0 auto; height: 220px; pointer-events: none; overflow: hidden; border-radius: inherit; }
.sg-glow i { position: absolute; inset: -30% -10% auto; height: 280px; background: radial-gradient(ellipse 46% 80% at 50% 0%, var(--teal), color-mix(in srgb, var(--teal) 24%, transparent) 52%, transparent 76%); opacity: 0.22; }
:root[data-theme="dark"] .sg-glow i { opacity: 0.3; }
/* app.css is also on the app page and its `.btn.btn-icon` outranks a single
 * class, so this one is spelled out far enough to win on both pages. */
.small-gate .sg-card .sg-x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; }
.sg-bot { position: relative; display: grid; place-items: center; height: 96px; margin: 4px 0 12px; }
.sg-bot .bot-svg { width: 104px; height: 104px; max-width: none; overflow: visible; }
.small-gate .kicker { justify-content: center; }
.sg-card h2 { margin-top: 8px; font-size: clamp(22px, 5.6vw, 27px); letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
.sg-body { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--text2); text-wrap: pretty; }
.sg-copy { width: 100%; margin-top: 20px; }
.sg-copy .lq { display: inline-flex; align-items: center; gap: 9px; }
.sg-copy.done { pointer-events: none; }
.sg-host { margin-top: 9px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); font-variant-numeric: tabular-nums; }
.sg-rule { height: 1px; margin: 20px 0 16px; background: var(--border); }
.sg-apps { font-size: 13.5px; color: var(--muted); }
.sg-stores { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.sg-store { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: start; padding: 11px 13px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--text) 3%, transparent); }
.sg-store > .i { justify-self: center; font-size: 19px; color: var(--muted); }
.sg-store b { display: block; font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; }
.sg-store small { display: block; font-size: 12px; color: var(--muted); }
.sg-soon { font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal2, var(--teal)); background: var(--teal-soft); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
@media (min-width: 560px) {
  .small-gate { align-items: center; padding: 20px; }
  .sg-card { border-bottom: 1px solid var(--border); border-radius: var(--r-xl); padding-bottom: 26px; }
  @keyframes sgUp { from { transform: translateY(14px) scale(0.98); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .small-gate, .sg-card { animation: none; } }

/* The character, from the app's own stylesheet — the site does not load
 * app.css, so the few rules the bot needs live here too. Blink every
 * second and a glance every two; the app allows it nothing else. */
.bot-svg .bh0 { stop-color: var(--bot-top, #3DC3B4); } .bot-svg .bh1 { stop-color: var(--bot-bottom, #1A7870); }
:root[data-theme="dark"] .bot-svg .bh0 { stop-color: var(--bot-top, #FFFFFF); } :root[data-theme="dark"] .bot-svg .bh1 { stop-color: var(--bot-bottom, #DDF0EC); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bot-svg .bh0 { stop-color: var(--bot-top, #FFFFFF); } :root:not([data-theme="light"]) .bot-svg .bh1 { stop-color: var(--bot-bottom, #DDF0EC); } }
.bot-eyes { transform: translate(calc(var(--gx, 0) * 1.1px), calc(var(--gy, 0) * 1px)); transition: transform 380ms var(--ease-out); }
.bot-eye { transform: translate(var(--ex), 28.1px); }
.bot-eye > * { animation: botBlink 1s linear infinite; transform-origin: 0 0; }
.bot-pupil { transform: translate(calc(var(--gx, 0) * 1.5px), calc(var(--gy, 0) * 0.8px)); transition: transform 380ms var(--ease-out); }
.bot-eye .bot-pupil > * { animation: none; }
@keyframes botBlink { 0%, 85%, 100% { transform: scaleY(1); } 92% { transform: scaleY(0.08); } }
@media (prefers-reduced-motion: reduce) { .bot-eye > * { animation: none; } }

/* ── Live Controls (admin panel): announcement bar + maintenance notice ── */
.live-ann { position: relative; z-index: calc(var(--z-nav) + 1); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 48px 9px 16px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; text-align: center; background: var(--teal-soft); color: var(--teal2); border-bottom: 1px solid var(--glass-border); animation: live-in 320ms var(--ease-out) both; }
:root[data-theme="dark"] .live-ann { color: var(--teal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .live-ann { color: var(--teal); } }
.live-ann.success { background: rgba(63,191,127,.14); color: var(--green); }
.live-ann.warning { background: var(--amber-soft); color: var(--amber-ink); }
.live-ann.promo { background: var(--violet-soft); color: var(--violet); }
.live-ann .l { font-weight: 800; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.live-ann .x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; color: inherit; opacity: .7; }
.live-ann .x:hover { opacity: 1; background: rgba(0,0,0,.08); }
@keyframes live-in { from { opacity: 0; transform: translateY(-6px); } }
.live-maint { position: fixed; inset: 0; z-index: var(--z-skip); display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); animation: live-in 300ms var(--ease-out) both; }
.live-maint .box { width: min(460px, 100%); text-align: center; padding: 36px 28px; border-radius: var(--r-xl); background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
.live-maint .mk { display: flex; justify-content: center; margin-bottom: 14px; color: var(--mark-teal); }
.live-maint h2 { font-size: 26px; margin-bottom: 8px; } .live-maint p { color: var(--text2); }
:root.is-maint body > *:not(.live-maint) { filter: blur(2px); pointer-events: none; user-select: none; }

/* ── Level-3 course covers (media/cc2) on cards, rows and the course page ── */
.ccover { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); container-type: inline-size; }
.ccover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 46%, transparent 66%), linear-gradient(to top, rgba(0,0,0,.28), transparent 46%); }
.ccover .cc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* The object: frame 1 of the 9-frame swing strip (2160x240), where the scene puts it. */
.ccover .cc-obj { position: absolute; right: 7%; top: 12%; height: 64%; aspect-ratio: 1; background-size: 900% 100%; background-position: 0 0; background-repeat: no-repeat; z-index: 0; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.ccover .cc-glyph { position: absolute; right: 5%; bottom: -9%; width: 38%; height: auto; aspect-ratio: 1; color: color-mix(in srgb, var(--c3) 30%, transparent); transform: rotate(-12deg); }
.ccover .cc-ct { position: absolute; left: 6%; bottom: 8%; max-width: 58%; display: grid; gap: 4px; z-index: 2; }
.ccover .cc-kick { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccover .cc-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 6.2cqw, 18px); line-height: 1.15; letter-spacing: -0.01em; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.course.has-art { padding: 10px 10px 16px; }
.course.has-art .tags { padding: 0 8px; } .course.has-art b, .course.has-art .u { padding: 0 8px; }
.crow.has-art { grid-template-columns: 148px minmax(0, 1fr) auto 22px; }
.crow.has-art .ccover { width: 148px; border-radius: 10px; }
.crow.has-art .ccover .cc-ct { display: none; }
.course-head { display: grid; grid-template-columns: minmax(0, 1fr) min(380px, 36%); gap: 32px; align-items: center; }
.course-art .ccover { border-radius: 20px; box-shadow: var(--shadow-lg); }
@media (max-width: 760px) { .course-head { grid-template-columns: 1fr; } .course-art { order: -1; max-width: 420px; } .crow.has-art { grid-template-columns: 96px minmax(0, 1fr) 22px; } .crow.has-art .ccover { width: 96px; } .crow.has-art .cr-ys { grid-column: 2; } }

/* Explore: topics of the general catalogue */
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 6px 0 26px; }
@media (max-width: 960px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
.topic-tile { display: grid; gap: 8px; padding: 8px 8px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease; }
.topic-tile .ccover { aspect-ratio: 16 / 9; border-radius: 10px; }
.topic-tile .ccover .cc-ct { display: none; }
.topic-tile .tt-name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.25; padding: 0 6px; }
.topic-tile .tt-n { font-family: var(--font-ui); font-size: 12px; color: var(--muted); padding: 0 6px; }
@media (hover: hover) and (pointer: fine) { .topic-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border2); } }
.topic-tile:active { transform: scale(0.985); }

/* Certificate verification */
.verify-form { max-width: 560px; margin-bottom: 18px; }
.verify-form .lb-search { display: flex; gap: 10px; align-items: center; }
.verify-form input { flex: 1; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); font-family: var(--font-ui); letter-spacing: .04em; }
.verify-result { max-width: 560px; padding: 20px 22px; }
.verify-dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 14px 0 0; }
.verify-dl dt { color: var(--muted); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; } .verify-dl dd { margin: 0; }

/* ══════════════════════════════════════════════════════════════════
   Soft UI (neumorphism): the one material, applied to every part.
   Surfaces are the page's own tone (--base), lifted or sunk by two
   shadows. No translucency, no blur, no hairline on a surface. Press
   = sink (inset + 1px down) over 140 ms; hover (fine pointers) = a
   small lift. Reduced motion keeps the shadows, drops the travel.
   ══════════════════════════════════════════════════════════════════ */
@keyframes liquid-sweep { 0% { transform: translateX(-160%) skewX(-16deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(340%) skewX(-16deg); opacity: 0; } }
@keyframes liquid-sweep-rtl { 0% { transform: translateX(160%) skewX(16deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(-340%) skewX(16deg); opacity: 0; } }
body { background: var(--base); color: var(--ink); }

/* ── Materials ─────────────────────────────────────────────────────── */
/* flat cards: content never carries a shadow at rest. It is the deeper
   tone of the page with no border; a card inside a card goes back to the
   page tone so the two alternate. Only a tappable card moves: a small
   lift on hover (fine pointers), a sink while pressed. */
.glass, .card, .board, .stage-card, .program, .course, .topic-tile, .fact, .player, .chat, .plan, .faq-item, .tbl-wrap, .console, .ledger, .device, .cform, .verify-result {
  background: var(--base-2); border-color: transparent; box-shadow: none;
}
.card .card, .card .board, .card .fact, .board .board, .device .board, .gphone .scr, .console .cs-kpis div, .card .takeaways li, .card .toc li, .card .units li, .board .takeaways li, .board .mm .branch, .fact .ic, .card .ic, .feat .ic, .stage-card .ic, .mode-about .ic, .done .ic, .listrow .ic, .planrow .ic {
  background: var(--base);
}
/* floating: the language menu, the sign-in dialog, the small-screen gate, the maintenance notice */
.lang-panel, .auth-card, .sg-card, .live-maint .box { background: var(--base); border-color: transparent; box-shadow: var(--raised); }
.card { transition: transform var(--press-ms) ease, box-shadow var(--press-ms) ease; }
a.card, .card.hover, .program, .course, .topic-tile { transition: transform var(--press-ms) ease, box-shadow var(--press-ms) ease; }
@media (hover: hover) and (pointer: fine) {
  a.card:hover, .card.hover:hover, .program:hover, .course:hover, .topic-tile:hover { transform: translateY(-2px); box-shadow: var(--flat); border-color: transparent; }
}
a.card:active, .card.hover:active, .program:active, .course:active, .topic-tile:active { transform: translateY(1px); box-shadow: var(--sunk); }
.card .num { color: var(--teal-ink); }
/* Icon discs sit flat on their card in the alternate tone (coloured discs keep their tint). */
.card .ic, .feat .ic, .stage-card .ic, .mode-about .ic, .done .ic, .fact .ic, .listrow .ic, .planrow .ic { box-shadow: none; }
.ic.teal { color: var(--teal-ink); background: var(--teal-soft); }
.ic.amber { color: var(--amber-ink); background: var(--amber-soft); }
.ic.violet { background: var(--violet-soft); }
/* Flat rows and tiles (content). */
.takeaways li, .toc li, .units li, .mm .branch, .cs-kpis div, .gphone .goal, .gphone .tile, .gphone .chips3 span, .flipcard .face, .console-mock .kpi {
  background: var(--base-2); border-color: transparent; box-shadow: none;
}
.card .takeaways li, .card .toc li, .card .units li, .board .takeaways li, .board .mm .branch, .console .cs-kpis div, .gphone .goal, .gphone .tile, .gphone .chips3 span, .device .flipcard .face { background: var(--base); }
/* Small things that act: raised. */
.lang-grid a, .langs a, .narrator, .store, .sg-store { background: var(--base); border-color: transparent; box-shadow: var(--flat); }
.q .opt { background: var(--base); border-color: transparent; box-shadow: var(--flat); transition: transform var(--press-ms) ease, box-shadow var(--press-ms) ease, background 140ms ease; }
.q .opt:active { transform: translateY(1px); box-shadow: var(--press); }
@media (hover: hover) and (pointer: fine) { .q .opt:hover { background: var(--base); border-color: transparent; box-shadow: var(--flat-hi); transform: translateY(-1px); } }
.q .opt.right { background: color-mix(in srgb, var(--green) 14%, var(--base)); border-color: transparent; box-shadow: var(--sunk-sm); }
.q .opt.wrong { background: color-mix(in srgb, var(--rose) 14%, var(--base)); border-color: transparent; box-shadow: var(--sunk-sm); }
.q .opt .k { box-shadow: var(--sunk-sm); background: var(--base); }
.q .expl, .board .why, .project { box-shadow: none; background: var(--base); }
.q .expl { color: var(--ink-2); }
.lang-grid a, .langs a { transition: transform var(--press-ms) ease, box-shadow var(--press-ms) ease, color 140ms ease; }
.lang-grid a:active, .langs a:active, .store:active, .narrator:active, .sg-store:active { transform: translateY(1px); box-shadow: var(--press); }
@media (hover: hover) and (pointer: fine) {
  .lang-grid a:hover, .langs a:hover { background: var(--base); border-color: transparent; color: var(--teal-ink); transform: translateY(-1px); box-shadow: var(--flat-hi); }
  .stores a.store:hover { border-color: transparent; transform: translateY(-1px); box-shadow: var(--flat-hi); }
}
.lang-grid a[aria-current="true"], .langs a[aria-current="true"] { background: var(--base); border-color: transparent; color: var(--teal-ink); box-shadow: var(--sunk-sm); }
.days .d { background: var(--base-2); border-color: transparent; box-shadow: none; }
.board .days .d { background: var(--base); }
.days .d.on, .board .days .d.on { background: var(--teal); color: var(--on-teal); box-shadow: none; }
.days .d.now { color: var(--teal-ink); box-shadow: var(--sunk-sm); }
.flow li::before { box-shadow: none; background: var(--teal-soft); color: var(--teal-ink); }
.mm .root { background: var(--teal); color: var(--on-teal); box-shadow: none; }

/* ── Chips, tabs, segmented controls: track sunk, thumb raised ────── */
.chip, .chip-glass, .mode-tab { background: var(--base); border-color: transparent; color: var(--ink-2); box-shadow: var(--flat); transition: transform var(--press-ms) ease, box-shadow var(--press-ms) ease, color 140ms ease, background 140ms ease; }
.chip:active, .mode-tab:active { transform: translateY(1px); box-shadow: var(--press); }
@media (hover: hover) and (pointer: fine) { .chip:hover, .mode-tab:hover { border-color: transparent; color: var(--teal-ink); transform: translateY(-1px); box-shadow: var(--flat-hi); } }
.chip[aria-pressed="true"], .chip.on, .chip-glass[aria-pressed="true"], .mode-tab[aria-selected="true"] { background: var(--base); color: var(--teal-ink); border-color: transparent; box-shadow: var(--sunk-sm); transform: none; }
.chip.soft, .chip.amber, .chip.violet, span.chip { box-shadow: none; }
span.chip:not(.soft):not(.amber):not(.violet) { background: var(--base-2); }
.chip.soft { background: var(--teal-soft); color: var(--teal-ink); }
.device .modes-tabs { background: var(--base); box-shadow: var(--sunk); padding: 5px; }
.device .mode-tab, .device .mode-tab[aria-selected="true"] { box-shadow: none; background: none; }
.device .mode-tab[aria-selected="true"] { color: var(--teal-ink); }
.seg-ind { background: var(--base); box-shadow: var(--flat); }
.seg, .tabs, .bill, .auth-seg, .seg-liquid { background: var(--base); border: 0; box-shadow: var(--sunk); }
.seg button[aria-pressed="true"], .tabs button[aria-selected="true"], .bill button[aria-pressed="true"] { background: var(--base); color: var(--teal-ink); box-shadow: var(--flat); }
.seg button, .tabs button, .bill button { transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform var(--press-ms) ease; }
.seg button:active, .tabs button:active, .bill button:active { transform: translateY(1px); }
.auth-ind { background: var(--base); box-shadow: var(--flat); }
:root[data-theme="dark"] .auth-ind { background: var(--base); }
.seg-liquid button[aria-pressed="true"] { color: var(--teal-ink); box-shadow: none; }
.seg-liquid .seg-ind { background: var(--base); box-shadow: var(--flat); }
.bill .save { background: var(--teal-soft); color: var(--teal-ink); }

/* ── Fields: sunk into the page ────────────────────────────────────── */
.search, .field input, .field textarea, .field .sel select, .verify-form input { background: var(--base); border-color: transparent; box-shadow: var(--sunk); color: var(--ink); }
.search:focus-within, .field input:focus, .field textarea:focus, .field .sel select:focus, .verify-form input:focus { border-color: transparent; box-shadow: var(--sunk), var(--ring); }
.field.bad input, .field.bad textarea { box-shadow: var(--sunk), 0 0 0 3px rgba(242, 109, 109, 0.35); }
.cb-row .search { box-shadow: var(--sunk); }
.pw-eye { box-shadow: none; }
.status { box-shadow: none; background: var(--base-2); }
.auth-error { box-shadow: none; }

/* ── The chat, the device, the phone, the console ──────────────────── */
.device-bar { background: var(--base-2); border-bottom: 0; }
.chat .bar, .glass-chat .bar { background: var(--base-2); border-bottom: 0; }
.chat .input, .glass-chat .input { border-top: 0; background: var(--base-2); }
.msg.me { background: var(--teal); color: var(--on-teal); box-shadow: none; }
.msg.ai, .glass-chat .msg.ai { background: var(--base); border: 0; box-shadow: none; }
.chat .input .send { background: var(--teal); color: var(--on-teal); box-shadow: var(--teal-raised); }
.device .board, .device .q .opt, .device .mm .branch { background: var(--base); border-color: transparent; }
.device .flipcard .face { background: var(--base-2); border-color: transparent; }
.device .board { box-shadow: none; }
.flipcard .back { background: var(--base-2); box-shadow: none; }
.gphone .dock { background: var(--base); border: 0; box-shadow: var(--raised); }
.gphone .scr { background: var(--base); }
.gphone .dock .i.on { color: var(--teal-ink); }
.cs-rows li { border-top: 1px solid var(--border); }
.lrow, .lnote { border-top-color: var(--border); }
.lrow:first-child { border-top: 0; }
.rail-btn { background: var(--base); box-shadow: var(--flat); border: 0; }
.rail-btn:active { box-shadow: var(--press); transform: translateY(-50%) translateY(1px); }
@media (hover: hover) and (pointer: fine) { .rail-btn:not([disabled]):hover { color: var(--teal-ink); box-shadow: var(--flat-hi); } }
.catalog-bar { background: var(--base); border-bottom: 0; box-shadow: 0 12px 18px -16px var(--sd); }
.free-badge { border: 0; background: rgba(8, 13, 23, 0.55); }
.player .ctrls .play { background: var(--teal); color: var(--on-teal); box-shadow: var(--teal-raised); }

/* ── Pricing ───────────────────────────────────────────────────────── */
.plan.featured { border-color: transparent; box-shadow: inset 0 0 0 2px var(--teal); }
.plan .badge, .ledger .badge { box-shadow: none; }
.perks { border-top-color: var(--border); }
.cmp th, .cmp td { border-bottom-color: var(--border); }
.cmp thead th, .cmp thead th:first-child { background: var(--base); }
.cmp th:first-child, .cmp td:first-child { background: var(--base-2); border-inline-end-color: transparent; }
.cmp thead th:first-child { background: var(--base); }
.cmp thead th.hi, .cmp .yes { color: var(--teal-ink); }
.faq-item summary { transition: color 140ms ease; }
.faq-item[open] { box-shadow: none; }

/* ── Sign-in, language, the small-screen door, live notices ────────── */
.auth-foot { border-top-color: var(--border); }
.auth-or::before, .auth-or::after { background: var(--border2); }
.sheet { background: var(--base); }
.sheet a.link { border-bottom-color: var(--border); }
.sg-card { border: 0; }
.sg-store { background: var(--base); border: 0; }
.sg-rule { background: var(--border2); }
.sg-soon { color: var(--teal-ink); }
.live-ann { border-bottom: 0; box-shadow: 0 8px 16px -12px var(--sd); color: var(--teal-ink); }
.live-maint { background: color-mix(in srgb, var(--base) 86%, transparent); }
.live-maint .box { border: 0; }

/* ── The band (navy, on both themes) keeps its own depth ───────────── */
.band .btn-ghost, .band .btn-glass { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.45), -4px -4px 10px rgba(255, 255, 255, 0.05); }
.band .btn-ghost:active, .band .btn-glass:active { box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.5), inset -3px -3px 7px rgba(255, 255, 255, 0.06); }
@media (hover: hover) and (pointer: fine) { .band .btn-ghost:hover, .band .btn-glass:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } }

/* ── Text in teal reads as teal-ink ────────────────────────────────── */
.kicker, .tlink, .rail-head a, .faq-item .a a, .mails li a, .auth-forgot, .g-item .cap em, .cr-tag.core, .mode-index a span, .mw-n, .steps .n, .quote-side a.more, .takeaways li .i, .toc li::before, .perks li .i, .side .card h3 .i, .contact-side .card h3 .i, .book .bm .free, .mm .branch b, .msg.ai .who, .board .big, .hero-note .i { color: var(--teal-ink); }
.hero-copy .kicker::before { background: var(--teal-ink); }
.kicker::before { background: currentColor; }

/* ── High contrast and reduced transparency: the material is already opaque ── */
@media (prefers-contrast: more) {
  .glass, .btn-glass, .chip-glass, .nav .wrap, .catalog-bar, .card { background: var(--base); border: 2px solid var(--ink); box-shadow: none; }
  .btn-liquid, .btn-primary { background: var(--teal); border: 2px solid var(--on-teal); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card, a.card, .chip, .mode-tab, .q .opt, .lang-grid a, .langs a, .nav-links a, .lang-btn, .theme-btn, .rail-btn, .program, .course, .topic-tile { transition: box-shadow var(--press-ms) ease, color 140ms ease, background 140ms ease; }
  a.card:hover, .card.hover:hover, .program:hover, .course:hover, .topic-tile:hover, .chip:hover, .mode-tab:hover, .q .opt:hover, .lang-grid a:hover, .langs a:hover, .nav-links a:hover, .lang-btn:hover, .theme-btn:hover { transform: none; }
}

/* ── The app's ambient background on every page: three still discs of
   colour (teal, violet, gold) on the base, the same as the phone app's
   AmbientOrbs. Pure gradients, no blur. ── */
.bg-orbs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-orbs i { position: absolute; display: block; border-radius: 50%; --o: 0.10; }
.bg-orbs i:nth-child(1) { top: -120px; right: -90px; width: 420px; height: 420px; background: radial-gradient(circle closest-side, rgba(24, 184, 166, var(--o)), transparent); }
.bg-orbs i:nth-child(2) { top: 34%; left: -160px; width: 380px; height: 380px; background: radial-gradient(circle closest-side, rgba(139, 124, 246, calc(var(--o) * 0.8)), transparent); }
.bg-orbs i:nth-child(3) { bottom: -100px; right: -60px; width: 340px; height: 340px; background: radial-gradient(circle closest-side, rgba(232, 163, 61, calc(var(--o) * 0.7)), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-orbs i { --o: 0.16; } }
:root[data-theme="dark"] .bg-orbs i { --o: 0.16; }