/* ==========================================================================
   ButtonBench website: one stylesheet for every page.

   1. Tokens (colors, fonts, sizes): change the brand here
   2. Base
   3. Layout
   4. Header, app bar and footer
   5. Components (keycap buttons, switches, labels, panels, tiles, chips)
   6. Page sections
   7. App themes (HR Broadcast, Centurion)
   8. Device mockups
   9. Long text pages (support, privacy)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* ButtonBench: indigo toggle, white knob, ink wordmark */
  --brand: #5B4CF0;
  --brand-deep: #3D30C4;      /* the "depth" edge under keycap buttons */
  --brand-soft: #ECEAFE;
  --knob: #FFFFFF;

  --bg: #F5F5FA;
  --surface: #FFFFFF;
  --surface-2: #ECECF4;
  --text: #1A1B2E;
  --muted: #5D5F78;
  --line: rgba(26, 27, 46, 0.11);
  --line-strong: rgba(26, 27, 46, 0.2);
  --peg: rgba(91, 76, 240, 0.17);      /* pegboard dots */
  --switch-off: #D5D5E2;

  --btn-dark: #12131F;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-xl: 32px;
  --r-lg: 24px;
  --r: 18px;
  --r-sm: 12px;
  --max: 1160px;
  --gutter: 24px;

  color-scheme: light;
}

/* Dark: follows the device, or the switch in the header (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #7D70FF; --brand-deep: #4F42D6; --brand-soft: #24224B;
    --bg: #0E0F1C; --surface: #171829; --surface-2: #1F2137;
    --text: #F4F4FA; --muted: #A2A4BF;
    --line: rgba(244, 244, 250, 0.1); --line-strong: rgba(244, 244, 250, 0.2);
    --peg: rgba(125, 112, 255, 0.2); --switch-off: #3A3C58;
    --btn-dark: #F4F4FA;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #7D70FF; --brand-deep: #4F42D6; --brand-soft: #24224B;
  --bg: #0E0F1C; --surface: #171829; --surface-2: #1F2137;
  --text: #F4F4FA; --muted: #A2A4BF;
  --line: rgba(244, 244, 250, 0.1); --line-strong: rgba(244, 244, 250, 0.2);
  --peg: rgba(125, 112, 255, 0.2); --switch-off: #3A3C58;
  --btn-dark: #F4F4FA;
  color-scheme: dark;
}

/* 2. Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.2; }
p  { margin: 0 0 1em; text-wrap: pretty; }
a  { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-color: var(--brand); }
img, svg { display: block; max-width: 100%; }
code, .mono { font-family: var(--font-mono); font-size: .88em; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 8px; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3. Layout ----------------------------------------------------------------- */

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section.tight { padding: clamp(40px, 6vw, 72px) 0; }
.section.alt { background: var(--surface-2); }
.section-head { max-width: 700px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--muted); line-height: 1.55; }
.muted { color: var(--muted); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stack > * + * { margin-top: 16px; }
.split > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }

@media (max-width: 900px) {
  .split, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pegboard: the workbench wall the apps hang on */
.pegboard {
  background-image: radial-gradient(var(--peg) 1.7px, transparent 2px);
  background-size: 24px 24px;
  background-position: 12px 12px;
}

/* 4. Header, app bar and footer --------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand-link { display: flex; align-items: center; color: var(--text); text-decoration: none; margin-right: auto; }
.brand-link svg { height: 30px; width: auto; }
.logo .lg-brand { fill: var(--brand); }
.logo .lg-legs { stroke: var(--brand); }
.logo .lg-knob { fill: var(--knob); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a { text-decoration: none; font-weight: 600; font-size: .96rem; padding: 8px 14px; border-radius: 10px; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; font-weight: 700; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--line-strong); }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 48px; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.25); display: grid; }
.menu nav a { text-decoration: none; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.menu nav a:hover { background: var(--surface-2); }
@media (max-width: 760px) { .site-header .nav { display: none; } .menu { display: block; } }

/* The theme switch looks like the logo: a toggle with a knob */
.theme-switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--muted); font: 600 .85rem var(--font); }
.theme-switch .sw { pointer-events: none; }

/* App bar: under the header on every app page */
.app-bar { border-bottom: 1px solid var(--line); background: var(--surface); }
.app-bar .container { display: flex; align-items: center; gap: 18px; height: 60px; overflow-x: auto; }
.app-bar .app-id { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.app-bar .app-id img { width: 30px; height: 30px; border-radius: 8px; }
.app-bar nav { display: flex; gap: 4px; margin-left: 8px; }
.app-bar nav a { text-decoration: none; font-size: .92rem; font-weight: 600; color: var(--muted); padding: 7px 12px; border-radius: 9px; white-space: nowrap; }
.app-bar nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.app-bar .btn { margin-left: auto; }
@media (max-width: 760px) { .app-bar .btn { display: none; } }

.site-footer { border-top: 1px solid var(--line); padding: 64px 0 40px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer-grid h4 { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; color: var(--muted); }
.footer-grid a:hover { color: var(--text); }
.footer-brand svg { height: 28px; width: auto; margin-bottom: 14px; color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* 5. Components ------------------------------------------------------------- */

/* Keycap buttons: they have a depth edge and press down when clicked */
.btn {
  --cap: var(--surface); --cap-text: var(--text); --edge: var(--line-strong);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 14px;
  background: var(--cap); color: var(--cap-text);
  font: 700 1rem/1.2 var(--font); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--edge);
  box-shadow: 0 4px 0 var(--edge);
  transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--edge); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.btn-primary { --cap: var(--brand); --cap-text: #fff; --edge: var(--brand-deep); }
.btn-dark { --cap: var(--btn-dark); --cap-text: var(--bg); --edge: #000; }
.btn-sm { padding: 8px 14px; font-size: .9rem; border-radius: 11px; box-shadow: 0 3px 0 var(--edge); }
.btn-sm:active { box-shadow: 0 0 0 var(--edge); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-store small { display: block; font-size: .68rem; font-weight: 600; opacity: .75; letter-spacing: .02em; }
.btn-store span { line-height: 1.15; text-align: left; }

/* Switch (visual): .sw.on / .sw.off. Used for status, principles and the theme switch */
.sw {
  --w: 40px; --h: 24px;
  position: relative; display: inline-block; flex: none;
  width: var(--w); height: var(--h); border-radius: var(--h);
  background: var(--switch-off); transition: background .2s ease;
}
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: calc(var(--h) - 6px); height: calc(var(--h) - 6px); border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s cubic-bezier(.3,.7,.4,1.4);
}
.sw.on { background: var(--sw-on, var(--brand)); }
.sw.on::after { transform: translateX(calc(var(--w) - var(--h))); }
.sw.lg { --w: 64px; --h: 38px; }

/* Label: a tiny switch, then mono caps */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .76rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.label::before {
  content: ""; width: 22px; height: 12px; border-radius: 6px; flex: none;
  background: radial-gradient(circle at 16px 6px, #fff 3.6px, transparent 4.2px), var(--label-dot, var(--brand));
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 8px; font: 600 .8rem/1.3 var(--font); background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.chip.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F5A524; }
.chip.live::before { background: #22C55E; }
.chip.mono { font-family: var(--font-mono); font-weight: 500; font-size: .76rem; }

/* Panel: an iOS-Settings-style group of rows */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel-title { padding: 16px 20px 10px; font: 600 .74rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prow { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.panel-title + .prow { border-top: 0; }
.prow strong { display: block; font-size: 1.02rem; letter-spacing: -0.01em; }
.prow span.d { display: block; color: var(--muted); font-size: .93rem; line-height: 1.45; margin-top: 2px; }
.prow img.ic, .ico { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.ico { display: grid; place-items: center; background: var(--ico-bg, var(--brand)); color: #fff; }
.ico svg { width: 22px; height: 22px; }
a.prow:hover { background: var(--surface-2); }
.prow .chev { color: var(--muted); }

/* Tiles (bento) */
.tile { position: relative; border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 40px); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.tile h3 { font-size: 1.5rem; }
.more { font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.more svg { width: 18px; height: 18px; transition: transform .15s ease; }
.more:hover svg { transform: translateX(3px); }

/* Card */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.card .num { font: 600 .8rem var(--font-mono); color: var(--brand); letter-spacing: .06em; margin-bottom: 18px; display: block; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 34px; height: 20px; border-radius: 10px; flex: none; background: radial-gradient(circle at 10px 10px, #fff 6.5px, transparent 7.2px), var(--switch-off); transition: background .2s; }
.faq details[open] summary::after { background: radial-gradient(circle at 24px 10px, #fff 6.5px, transparent 7.2px), var(--faq-on, var(--brand)); }
.faq details > div { padding: 0 0 20px; color: var(--muted); }
.faq details > div p:last-child { margin: 0; }

/* Big band (call to action) */
.band { border-radius: var(--r-xl); background: var(--brand); color: #fff; padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: 1.3fr auto; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.band h2 { margin-bottom: .3em; }
.band p { color: rgba(255,255,255,.82); font-size: 1.15rem; margin: 0; }
.band .btn { --cap: #fff; --cap-text: #1A1B2E; --edge: rgba(0,0,0,.28); }
.band .pegboard { position: absolute; inset: 0; --peg: rgba(255,255,255,.14); pointer-events: none; mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); }
.band > *:not(.pegboard) { position: relative; }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; } }

/* 6. Page sections ----------------------------------------------------------- */

/* Home hero */
.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.hero .pegboard-bg { position: absolute; inset: 0; mask-image: radial-gradient(ellipse 70% 80% at 80% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 40%, #000 20%, transparent 75%); }
.hero .container { position: relative; }
.hero h1 em { font-style: normal; color: var(--brand); }

.studio-panel { max-width: 460px; margin-left: auto; box-shadow: 0 30px 60px -28px rgba(30, 20, 120, .35), 0 6px 0 var(--line); }
.studio-panel .head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.studio-panel .head svg { width: 64px; height: auto; }
.studio-panel .head .mono { color: var(--muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.studio-panel .prow.off { opacity: .6; }
.studio-panel .slot { width: 44px; height: 44px; border-radius: 11px; border: 2px dashed var(--line-strong); display: grid; place-items: center; color: var(--muted); font-weight: 700; }

/* App tiles on Home and Apps */
.app-tile { color: #fff; border: 0; min-height: 520px; display: flex; flex-direction: column; }
.app-tile .top { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.app-tile .top img { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.app-tile p { color: rgba(255,255,255,.78); }
.app-tile .chip { background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.14); }
.app-tile .actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-top: 24px; }
.app-tile .more { color: #fff; }
.app-tile .art { margin: 8px 0 0; display: flex; justify-content: center; }

/* "On the bench": the build log */
.log { display: grid; gap: 0; border-left: 2px dashed var(--line-strong); margin-left: 10px; }
.log-item { position: relative; padding: 0 0 28px 30px; }
.log-item::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
.log-item .when { font: 600 .78rem var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.log-item h3 { margin: 4px 0 6px; font-size: 1.12rem; }
.log-item p { color: var(--muted); margin: 0; }

/* Steps */
.steps { counter-reset: step; }
.step { position: relative; }
.step .n { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font: 700 1rem var(--font-mono); background: var(--brand-soft); color: var(--brand); margin-bottom: 16px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.stat b { display: block; font: 800 2.4rem/1 var(--font-display); letter-spacing: -0.04em; margin-bottom: 6px; }
.stat span { color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }

/* About: the name explained */
.equation { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font: 800 clamp(1.6rem, 3.4vw, 2.4rem)/1 var(--font-display); letter-spacing: -0.03em; }
.equation .op { color: var(--muted); font-weight: 400; }
.equation .term { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }

/* 7. App themes --------------------------------------------------------------- */

/* Each app brings its own colors, taken from its icon */
.theme-hrb { --app: #E8304A; --app-2: #FF6B7D; --app-deep: #A3142D; --app-bg: #13060A; --app-bg-2: #2A0A12; --app-soft: #FDE9EC; }
.theme-cen { --app: #B21F2E; --app-2: #D63A49; --app-deep: #6E0F19; --app-bg: #5A0C16; --app-bg-2: #8C1624; --app-soft: #FBEDE6; --gold: #F0BE4E; --gold-deep: #B8892B; }

.tile-hrb { background: radial-gradient(120% 90% at 50% 0%, #5A0D1C 0%, #13060A 62%); }
.tile-cen { background: linear-gradient(180deg, #B21F2E 0%, #6E0F19 100%); }

.app-hero { color: #fff; position: relative; overflow: hidden; padding: clamp(56px, 8vw, 100px) 0; }
.theme-hrb .app-hero { background: radial-gradient(80% 90% at 75% 35%, #5E0E1E 0%, #13060A 70%); }
.theme-cen .app-hero { background: radial-gradient(90% 100% at 75% 30%, #C02434 0%, #6E0F19 75%); }
.app-hero p.lead { color: rgba(255,255,255,.8); }
.app-hero .label { color: rgba(255,255,255,.7); --label-dot: var(--app); }
.theme-cen .app-hero .label { --label-dot: var(--gold); }
.app-hero .chip { background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.14); }
.app-hero .app-icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 28px; box-shadow: 0 16px 36px -10px rgba(0,0,0,.6); }
.app-hero .btn-dark { --cap: #fff; --cap-text: #12131F; --edge: rgba(0,0,0,.45); }
.app-hero .btn-ghost { --cap: transparent; --cap-text: #fff; --edge: rgba(255,255,255,.3); }
.theme-hrb .app-hero h1 em { font-style: normal; color: var(--app-2); }
.theme-cen .app-hero h1 em { font-style: normal; color: var(--gold); }
.app-hero .art { display: flex; justify-content: center; }

.theme-hrb, .theme-cen { --sw-on: var(--app); --faq-on: var(--app); }
.theme-hrb .label, .theme-cen .label { --label-dot: var(--app); }
.theme-cen .label { --label-dot: var(--gold-deep); }
.theme-hrb .ico { --ico-bg: var(--app); }
.theme-hrb .step .n, .theme-cen .step .n { background: var(--app-soft); color: var(--app-deep); }
:root[data-theme="dark"] .theme-hrb .step .n, :root[data-theme="dark"] .theme-cen .step .n { background: rgba(255,255,255,.08); color: var(--app-2); }

.dark-section { background: var(--app-bg); color: #fff; }
.dark-section .lead, .dark-section p { color: rgba(255,255,255,.78); }
.dark-section .label { color: rgba(255,255,255,.7); }
.dark-section .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.dark-section .chip { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.12); }

/* HR Broadcast: signal path diagram */
.signal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.signal .waves { height: 70px; }
.receivers { display: grid; gap: 10px; }
.receiver { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 16px; font-weight: 700; }
.receiver small { display: block; font: 500 .74rem var(--font-mono); color: rgba(255,255,255,.6); }
.receiver svg { width: 26px; height: 26px; color: var(--app-2); flex: none; }
@media (max-width: 760px) { .signal { grid-template-columns: 1fr; justify-items: center; } .signal .waves { transform: rotate(90deg); height: 50px; } }

/* Centurion: exercise tiles and the ladder */
.ex-tile { border-radius: var(--r-lg); padding: 22px; color: #fff; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; }
.ex-tile svg { width: 84px; height: 84px; }
.ex-tile h3 { margin: 0; font-size: 1.15rem; }
.ex-tile p { margin: 4px 0 0; font-size: .9rem; color: rgba(255,255,255,.85); }

.ladder { display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 14px); height: 300px; padding: 24px 24px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rung { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; height: 100%; }
.rung i { display: block; width: 100%; border-radius: 10px 10px 0 0; background: var(--app-soft); }
:root[data-theme="dark"] .rung i { background: rgba(255,255,255,.08); }
.rung b { font: 700 .9rem var(--font-mono); }
.rung small { font: 500 .7rem var(--font-mono); color: var(--muted); padding-bottom: 10px; }
.rung.done i { background: var(--app); }
.rung.now i { background: var(--gold); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--gold); }
.rung.goal i { background: repeating-linear-gradient(45deg, var(--gold) 0 8px, var(--gold-deep) 8px 16px); }
.pace { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.pace div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.pace div.sel { border: 2px solid var(--app); }
.pace b { display: block; }
.pace span { font-size: .88rem; color: var(--muted); }
@media (max-width: 760px) { .pace { grid-template-columns: 1fr; } .ladder { height: 240px; padding: 16px 12px 0; } .rung small { display: none; } }

.timer { font: 800 clamp(4rem, 10vw, 7rem)/1 var(--font-display); letter-spacing: -0.05em; color: var(--gold); font-variant-numeric: tabular-nums; }

/* Privacy switches: things that are OFF */

/* 8. Device mockups ----------------------------------------------------------- */

.device { filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.watch { width: min(300px, 70vw); }
.app-hero .watch { width: min(560px, 92vw); }
.phone { width: min(300px, 72vw); }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.08); } }
.beat { transform-box: fill-box; transform-origin: center; animation: beat 0.85s infinite; }
@keyframes ping { 0% { opacity: .9; } 100% { opacity: .15; } }
.ping1 { animation: ping 1.4s infinite alternate; }
.ping2 { animation: ping 1.4s .3s infinite alternate; }
.ping3 { animation: ping 1.4s .6s infinite alternate; }

/* 9. Long text pages ------------------------------------------------------- */

.page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); }
.page-head h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 96px; }
.toc { position: sticky; top: 150px; font-size: .92rem; }
.toc h4 { font: 600 .74rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.toc a { text-decoration: none; color: var(--muted); display: block; padding: 6px 12px; border-radius: 9px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--text); background: var(--surface-2); }
.prose { max-width: 720px; }
.prose h2 { font-size: 1.7rem; margin-top: 2.2em; letter-spacing: -0.025em; scroll-margin-top: 140px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1em 0 1.5em; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font: 600 .78rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.callout { background: var(--brand-soft); border-radius: var(--r); padding: 18px 22px; margin: 1.2em 0; }
.theme-hrb .callout, .theme-cen .callout { background: var(--app-soft); }
:root[data-theme="dark"] .theme-hrb .callout, :root[data-theme="dark"] .theme-cen .callout { background: rgba(255,255,255,.06); }
@media (max-width: 900px) { .doc { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }

/* Draft marker (remove at launch) */
.draft-note { background: repeating-linear-gradient(-45deg, #FFE9A8 0 12px, #FFF3CC 12px 24px); color: #5A4300; font: 600 .78rem var(--font-mono); text-align: center; padding: 6px 12px; letter-spacing: .04em; }