/* The site around the app, built from the app's own design tokens rather than a new theme.
   Everything below traces to style.css: --zen-bg-obsidian #0A0D14, --zen-card-bg rgba(16,22,34,.75)
   with blur(16px), --zen-card-radius 28px, --zen-card-shadow, --zen-pill-bg, --accent-cyan #38bdf8
   and --zen-cyan-glow. Numbers are set in the same mono the HUD uses, with tabular figures, because
   the figures are what the product is. */
:root {
  color-scheme: dark;
  --bg: #0A0D14;
  --card: rgba(16, 22, 34, .75);
  --card-line: rgba(255, 255, 255, .08);
  --card-radius: 28px;
  --card-shadow: 0 24px 64px -12px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
  --pill: rgba(22, 30, 48, .65);

  --ink: #f8fafc;
  --ink-2: #cbd5e1;
  --muted: #94a3b8;
  --dim: #64748b;

  --cyan: #38bdf8;
  --cyan-deep: #0ea5e9;
  --glow: 0 0 38px rgba(56, 189, 248, .35);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  --measure: 64ch;
  /* One page width for the hero, every section and the footer, so their left edges line up;
     running text inside a section keeps the narrower reading column. */
  --page: 1240px;
  --text-col: 940px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink-2); background: var(--bg);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* The ambient field the app sits in. Two very soft pools, no hard edges. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(56, 189, 248, .07), transparent 70%),
    radial-gradient(40rem 30rem at 90% 15%, rgba(20, 184, 166, .05), transparent 70%);
}
body > * { position: relative; z-index: 1; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; padding: 10px 16px; background: #101622; border-radius: 999px; z-index: 20; }

/* Numbers, in the HUD's own typeface. */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .93em; letter-spacing: -.02em; color: #e8f4fb; }

/* --- masthead ------------------------------------------------------------------------------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* The line runs the full width; the logo and links line up with the page column (--page) on wide screens,
     where they used to sit at the far edges of a 2560 or 3840 px window. */
  padding: 20px max(clamp(18px, 5vw, 60px), calc((100% - var(--page)) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.brand { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 1.06rem; letter-spacing: -.012em; }
.mark { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cyan); position: relative; box-shadow: 0 0 16px rgba(56, 189, 248, .3); }
.mark::after { content: ''; position: absolute; inset: 6px 5px auto 5px; height: 7px; border-bottom: 1.5px solid var(--cyan); border-radius: 0 0 60% 60%; }
.bar nav { display: flex; gap: clamp(14px, 3vw, 32px); }
.bar nav a { color: var(--dim); text-decoration: none; font-size: .9rem; letter-spacing: .005em; white-space: nowrap; transition: color .18s ease; }
/* The six section links need about 1,180 px beside the brand; below that they take their own row under it,
   spread edge to edge, so the brand never shrinks or wraps. Where one row no longer fits they sit in three
   even columns, two rows of three; phones get the two-column grid further down. */
@media (max-width: 1180px) {
  .bar { flex-wrap: wrap; row-gap: 12px; }
  .bar nav { width: 100%; justify-content: space-between; gap: 16px; }
}
@media (max-width: 950px) {
  .bar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
}
.bar nav a:hover { color: var(--cyan); }

main { padding: 0 clamp(18px, 5vw, 60px); }

/* --- hero ----------------------------------------------------------------------------------- */
.hero { max-width: var(--page); margin: clamp(36px, 6vw, 72px) auto clamp(36px, 6vw, 64px); text-align: center; }
h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.15rem, 5.4vw, 3.6rem); line-height: 1.1; letter-spacing: -.02em;
  color: #fff; text-wrap: balance;
}
/* A long centred paragraph reads as a grey wall: a wider measure takes it from six ragged lines to
   four, pretty wrapping stops single-word last lines, and the lighter grey lifts it off the background. */
.lede { margin: 28px auto 0; max-width: 64ch; color: var(--ink-2); font-size: clamp(1.02rem, 1.55vw, 1.12rem); line-height: 1.72; text-wrap: pretty; }
.hero .lede { margin: 18px auto 0; max-width: 58ch; }
.hero .lede + .lede { margin-top: 12px; }
/* The one primary action on the page. It is a link, so the browser underline is taken off, and it is
   tinted with the app's cyan so it reads as the way in rather than as one more grey pill. */
.start {
  appearance: none; cursor: pointer; font: 600 1.04rem/1 var(--sans); letter-spacing: -.005em;
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 18px 40px 18px 34px; border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .45);
  background: linear-gradient(180deg, rgba(56, 189, 248, .22), rgba(56, 189, 248, .08)), var(--pill);
  color: #fff;
  box-shadow: 0 10px 34px -12px rgba(56, 189, 248, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: border-color .22s ease, box-shadow .22s ease, transform .18s ease, background .22s ease;
}
.start::before {
  content: ""; width: 12px; height: 14px; flex: none; background: var(--cyan);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.start:hover { border-color: rgba(56, 189, 248, .8); box-shadow: var(--glow), 0 14px 40px -12px rgba(56, 189, 248, .7); transform: translateY(-1px); }
.start:active { transform: translateY(1px); }
.start:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* The product, in the same glass frame the app uses for its own panels. */
.shot { margin: clamp(40px, 6vw, 64px) auto 0; max-width: 960px; }
.shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--card-line); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow), 0 0 80px -20px rgba(56, 189, 248, .22);
  background: #05070c;
}
.shot figcaption { margin-top: 16px; color: var(--dim); font-size: .85rem; text-align: center; }
/* The hero now holds the trainer's frame, so hiding the whole hero on open hid the trainer with it:
   the app loaded, measured 0x0, and could not be seen. Hide the hero's own content and keep the frame. */
/* With the trainer open, the hero keeps only the trainer and what follows it (benefit cards, video); what sat above it goes. */
body.app-open .hero > :not(#app-frame, #app-frame ~ *) { display: none; }

/* The quick answer. */
.tldr {
  margin: clamp(40px, 6vw, 60px) auto 0; max-width: 70ch; text-align: left;
  padding: 26px 30px; border: 1px solid var(--card-line); border-radius: var(--card-radius);
  background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
  color: var(--ink-2); font-size: .98rem; line-height: 1.75;
}

.app-frame { max-width: 1140px; margin: 0 auto clamp(30px, 6vw, 60px); }
/* The trainer lays itself out against whatever height this frame gives it, and its own grid holds
   420px of fixed rows, so every pixel taken off the frame comes out of the single flexible row that
   carries the ring. At 86vh the frame was 688px on an 800px page and the ring collapsed from 236px
   to 131px, barely half. Giving the frame nearly the whole page hands the trainer close to the
   viewport it was designed against. */
.app-shell { width: 100%; height: min(96vh, 1040px); border: 1px solid var(--card-line); border-radius: var(--card-radius); background: #000; display: block; }
/* Expanded from the trainer's own button: the frame covers the window, the page waits underneath. */
body.app-extended { overflow: hidden; }
body.app-extended .app-frame { position: fixed; inset: 0; z-index: 1000; max-width: none; margin: 0; }
body.app-extended .app-shell { height: 100%; border: 0; border-radius: 0; }

/* --- sections ------------------------------------------------------------------------------- */
.s { max-width: var(--page); margin: 0 auto; padding: clamp(44px, 6vw, 76px) 0; }
/* Every block in a section, running text included, uses the full page width like the figures (owner 2026-10-03: the
   940 px reading column read as off-centre next to full-width figures and cards). */
.s > :is(p, h2, h3, header, aside, .note, ol.steps, ol.exercise-set, ul.compare3, ul.pair, .citations) { max-width: none; }
.s + .s { border-top: 1px solid rgba(255, 255, 255, .05); }
.s h2 {
  margin: 0 0 18px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.95rem, 3.8vw, 2.7rem); line-height: 1.15; letter-spacing: -.02em; color: #fff;
  text-wrap: balance;
}
.s p { margin: 0 0 14px; max-width: none; }
.s p:last-child { margin-bottom: 0; }
.lead { color: var(--ink); }
.src, .small { font-size: .82rem; color: var(--dim); }
.src { margin-top: 20px; }
.src a, .more a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(56, 189, 248, .3); transition: border-color .18s ease; }
.src a:hover, .more a:hover { border-bottom-color: var(--cyan); }
.more { margin-top: 18px; font-size: .95rem; }

/* --- tables, as instrument panels ------------------------------------------------------------ */
.tbl {
  margin: 26px 0 20px; overflow-x: auto;
  border: 1px solid var(--card-line); border-radius: var(--card-radius);
  background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
}
.tbl table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tbl caption { caption-side: top; text-align: left; color: var(--dim); font-size: .8rem; padding: 22px 28px 0; }
.tbl th, .tbl td { text-align: left; padding: 15px 28px; vertical-align: top; }
.tbl thead th {
  color: var(--dim); font-weight: 500; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding-top: 20px; padding-bottom: 12px;
}
.tbl tbody tr { border-top: 1px solid rgba(255, 255, 255, .05); }
.tbl tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; padding-right: 36px; }
.tbl td { color: var(--muted); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { padding-bottom: 22px; }

/* --- cards ----------------------------------------------------------------------------------- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 26px 0 20px; }
.card {
  border: 1px solid var(--card-line); border-radius: var(--card-radius); padding: 26px 28px;
  background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
}
.card h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 1.08rem; color: #fff; line-height: 1.3; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }

/* --- fact lists ------------------------------------------------------------------------------ */
.facts {
  margin: 26px 0 20px; display: grid; gap: 0;
  border: 1px solid var(--card-line); border-radius: var(--card-radius); overflow: hidden;
  background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
}
.facts > div { display: grid; grid-template-columns: minmax(150px, 17ch) 1fr; gap: 28px; padding: 18px 28px; }
.facts > div + div { border-top: 1px solid rgba(255, 255, 255, .05); }
.facts dt { color: var(--ink); font-weight: 500; font-size: .94rem; }
.facts dd { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }


/* --- close ------------------------------------------------------------------------------------ */
.cta { text-align: center; }
.cta p { margin-left: auto; margin-right: auto; }
.cta .start { margin-top: 22px; }

.foot { width: min(var(--page), 100% - 2 * clamp(18px, 5vw, 60px)); max-width: var(--page); margin: clamp(40px, 7vw, 80px) auto 0; padding: 0 0 36px; color: var(--muted); font-size: .9rem; position: relative; }
.foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .35), transparent); }
.foot p { margin: 0; }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; padding: 44px 0 34px; }
.foot-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--serif); font-size: 1.4rem; text-decoration: none; }
.foot-logo img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(56, 189, 248, .18), 0 0 24px -6px rgba(56, 189, 248, .5); }
.foot-brand p { margin: 14px 0 20px; color: var(--ink-2); line-height: 1.6; }
.foot-start { font-size: .95rem; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-head { margin-bottom: 4px !important; color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.foot-col a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--cyan); }
.foot-private p:not(.foot-head) { color: var(--ink-2); line-height: 1.6; }
.foot-legal { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--dim); font-size: .84rem; line-height: 1.6; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--dim); font-size: .82rem; }
.foot-adult { margin-left: auto; padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(251, 191, 36, .35); color: #fbbf24; font-size: .75rem; }
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .foot-brand, .foot-private { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-adult { margin-left: 0; } }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .facts > div { grid-template-columns: 1fr; gap: 5px; }
  .tbl tbody th { white-space: normal; }
  .tbl th, .tbl td { padding: 13px 20px; }
  .tbl caption { padding: 18px 20px 0; }
  .card, .tldr { padding: 22px 22px; }
  .facts > div { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .start { transition: none; } }

/* Keep the wordmark intact and give mobile navigation its own rows. */
@media (max-width: 640px) {
  .bar { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 16px; }
  .bar .brand { flex: none; white-space: nowrap; }
  .bar .mark { flex: none; }
  .bar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0 16px; }
  .bar nav a { display: flex; align-items: center; min-height: 44px; white-space: nowrap; }
}
/* Wherever the six links no longer fit on one line beside the brand (below 1,180 px), they fold behind a Menu
   button, once the header script has run. The open menu is a panel over the page, so the header keeps one
   row and opening it never pushes the hero down. Without the script the links stay in rows, as above. */
.menu-btn { display: none; }
@media (max-width: 1180px) {
  .bar.has-menu { position: relative; z-index: 60; flex-direction: row; flex-wrap: nowrap; align-items: center; padding-block: 14px; }
  .bar.has-menu .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: auto; padding: 0 16px;
    border: 1px solid var(--card-line); border-radius: 999px; background: rgba(255, 255, 255, .03);
    color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer;
  }
  .bar.has-menu .menu-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
  .menu-icon::before { top: -5px; }
  .menu-icon::after { top: 5px; }
  .bar.menu-open .menu-icon { background: transparent; }
  .bar.menu-open .menu-icon::before { transform: translateY(5px) rotate(45deg); }
  .bar.menu-open .menu-icon::after { transform: translateY(-5px) rotate(-45deg); }
  .bar.has-menu:not(.menu-open) nav { display: none; }
  .bar.has-menu nav {
    position: absolute; top: calc(100% - 4px); right: clamp(18px, 5vw, 60px); z-index: 60;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: min(320px, calc(100vw - 32px)); padding: 8px;
    border: 1px solid var(--card-line); border-radius: 18px; background: #0b0f17;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7);
  }
  .bar.has-menu nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; white-space: nowrap; color: var(--ink-2); }
  .bar.has-menu nav a:hover, .bar.has-menu nav a:focus-visible { background: rgba(255, 255, 255, .05); color: var(--cyan); }
}
@media (prefers-reduced-motion: reduce) { .menu-icon, .menu-icon::before, .menu-icon::after { transition: none; } }

/* --- the planned surfaces (2026-09-18 rewrite) ------------------------------------------------ */
.s h3 {
  margin: 34px 0 12px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.25; letter-spacing: -.015em; color: #fff;
}
.s p a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(56, 189, 248, .3); }
.s p a:hover { border-bottom-color: var(--cyan); }
.level-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 10px 0 22px; padding: 0; list-style: none; }
.level-grid li {
  border: 1px solid var(--card-line); border-radius: var(--card-radius); padding: 24px 26px;
  background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow); color: var(--muted); font-size: .92rem; line-height: 1.7;
}
.level-name { display: block; margin-bottom: 8px; font-family: var(--serif); font-weight: 400; font-size: 1.06rem; color: #fff; line-height: 1.3; }
/* Same width and caption alignment as the photo figures around it, so the figures in a section share one edge. */
.diagram { margin: 26px 0 22px; padding: 26px clamp(20px, 5%, 56px) 18px;
  border: 1px solid var(--card-line); border-radius: var(--card-radius);
  background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow); }
.diagram figcaption { margin-top: 14px; color: var(--dim); font-size: .85rem; text-align: center; }
.s .shot { margin-top: 26px; margin-bottom: 22px; }
/* Pain and solution cards under the hero shot: the reader's problem first, the Body Zen answer under it. */
.tool-parts { max-width: none; margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; text-align: left; }
@media (max-width: 640px) {
  .bar nav a { white-space: normal; line-height: 1.25; }
  .diagram { padding: 16px 16px 12px; }
}

/* The hero picture: the session screen mid-session, beside the hero text on desktop. Pressing Start
   launches the session in the frame below, and the app-open rule above hides it with the hero text. */
.hero-shot { margin: 0; max-width: none; }
.hero-shot .shot-frame { display: block; border-radius: var(--card-radius); overflow: hidden; border: 1px solid var(--card-line); box-shadow: var(--card-shadow); }
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot figcaption { margin-top: 12px; color: var(--dim); font-size: .85rem; text-align: center; }

/* The labelled parts of a figure: a definition list that carries every label the raster leaves unlabelled.
   The name column is capped rather than max-content, so one long pair of muscle names cannot squeeze
   every description into a narrow strip; rows are ruled so each name sits level with its own line. */
.parts { margin: 20px 0 0; display: grid; grid-template-columns: minmax(8.5rem, 14.5rem) 1fr; padding: 6px 26px; margin-bottom: 28px; background: var(--card); border: 1px solid var(--card-line); border-radius: 18px; }
.parts dt, .parts dd { padding: 14px 0; border-top: 1px solid var(--card-line); }
.parts dt:first-of-type, .parts dt:first-of-type + dd { border-top: 0; }
.parts dt { color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.6; padding-right: 28px; }
.parts dd { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
@media (max-width: 640px) {
  .parts { grid-template-columns: 1fr; padding: 4px 18px; }
  .parts dt { padding: 14px 0 2px; }
  .parts dd { border-top: 0; padding-top: 0; }
}


/* The demo video: poster now, a click-to-load YouTube player once the id is set. */
.demo-video { max-width: var(--page); margin: clamp(40px, 6vw, 64px) auto 0; }
.demo-video img, .demo-play, .demo-player { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 20px; }
.demo-video img { object-fit: cover; border: 1px solid var(--card-line); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
.demo-play { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.demo-play .play { position: absolute; left: 50%; top: 44%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: rgba(56, 189, 248, .92); box-shadow: 0 0 0 10px rgba(56, 189, 248, .22), 0 12px 40px rgba(0, 0, 0, .5); transition: transform .18s ease; }
.demo-play .play::before { content: ""; position: absolute; left: 36px; top: 28px; width: 28px; height: 36px; background: #0a0d14; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.demo-play:hover .play, .demo-play:focus-visible .play { transform: scale(1.08); }
.demo-play:focus-visible { outline: 3px solid #38bdf8; outline-offset: 4px; }
.demo-player { border: 0; background: #000; }
.demo-video figcaption { margin-top: 16px; color: var(--dim); font-size: .85rem; text-align: center; }
.transcript { max-width: 760px; margin: 14px auto 0; color: var(--dim); font-size: .9rem; text-align: left; }
.transcript summary { cursor: pointer; text-align: center; }
.transcript p { margin-top: 10px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .demo-play .play { transition: none; } }

/* Benefit cards: an icon to glance at, the pain as a short question, the benefit as the title, one line on how. */
.tool-parts .benefit a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 28px 28px 26px; text-decoration: none;
  background: radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, .09), transparent 55%), linear-gradient(180deg, rgba(20, 28, 44, .88), rgba(11, 16, 26, .88));
  border: 1px solid rgba(148, 163, 184, .12); border-radius: 22px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.tool-parts .benefit a::after { content: ""; position: absolute; top: 30px; right: 28px; width: 10px; height: 10px;
  border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: rotate(45deg); opacity: 0; transition: opacity .2s ease, right .2s ease; }
.tool-parts .benefit a:hover, .tool-parts .benefit a:focus-visible { border-color: rgba(56, 189, 248, .42); transform: translateY(-2px);
  box-shadow: 0 26px 60px -32px rgba(56, 189, 248, .4); }
.tool-parts .benefit a:hover::after, .tool-parts .benefit a:focus-visible::after { opacity: .9; right: 24px; }
.benefit-icon { width: 104px; height: 104px; border-radius: 26px; margin-bottom: 22px; border: 1px solid rgba(56, 189, 248, .16);
  box-shadow: 0 18px 44px -20px rgba(56, 189, 248, .5); }
.benefit-ask { color: var(--muted); font-size: .86rem; letter-spacing: .01em; }
.benefit-title { margin-top: 6px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.6rem; line-height: 1.18; letter-spacing: -.015em; text-wrap: balance; }
.benefit-line { margin-top: 12px; color: var(--ink-2); font-size: .95rem; line-height: 1.55; text-wrap: pretty; }
@media (min-width: 700px) {
  .tool-parts .benefit:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tool-parts .benefit:last-child:nth-child(odd) a { display: grid; grid-template-columns: 104px 1fr; column-gap: 26px; align-content: center; }
  .tool-parts .benefit:last-child:nth-child(odd) .benefit-icon { grid-row: 1 / span 3; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .tool-parts .benefit a, .tool-parts .benefit a::after { transition: none; } .tool-parts .benefit a:hover { transform: none; } }


/* --- visual pass (2026-09-23) ----------------------------------------------------------------- */
/* Section heads: the section's glass icon beside its heading, so each topic starts with something to see. */
.s-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.s-head h2 { margin: 0; }
.s-icon { flex: none; width: 64px; height: 64px; border-radius: 18px; border: 1px solid rgba(56, 189, 248, .16);
  box-shadow: 0 14px 36px -18px rgba(56, 189, 248, .55); }
.s + .s { border-top: 0; position: relative; }
.s + .s::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .28), transparent); }

/* Steps: numbered cards on a line, a bold label where the step has one. */
.steps, .exercise-set { position: relative; margin: 14px 0 26px; padding: 0; list-style: none; counter-reset: step; }
.steps::before, .exercise-set::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(180deg, rgba(56, 189, 248, .5), rgba(56, 189, 248, .08)); }
.steps li, .exercise-set li { position: relative; display: flex; align-items: flex-start; gap: 20px; margin-top: 18px; }
.steps li::before, .exercise-set li::before { counter-increment: step; content: counter(step); flex: none; position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; background: #0d1420; border: 1.5px solid rgba(56, 189, 248, .7);
  box-shadow: 0 0 18px -4px rgba(56, 189, 248, .6); color: var(--cyan); font: 600 1rem/41px var(--mono); text-align: center; }
.steps li > span, .exercise-set li > span { flex: 1; padding: 9px 0 6px; color: var(--ink-2); font-size: .96rem; line-height: 1.6; }
.steps li strong, .exercise-set li strong { display: block; margin-bottom: 2px; color: #fff; font-weight: 600; }

/* Stats: the trial numbers at a glance, each with its source, on a hairline rather than in boxes. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 24px; padding: 0; list-style: none; }
.stats li { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 4px; border-top: 1px solid rgba(56, 189, 248, .35); }
.stat-big { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--cyan); letter-spacing: -.02em; }
.stat-big .num { font-family: inherit; color: inherit; font-size: inherit; }
.stat-line { color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
.stat-src { margin-top: auto; padding-top: 6px; color: var(--dim); font-size: .78rem; text-decoration: none; }
.stat-src:hover { color: var(--cyan); }

/* Exercise cards, the benefit-card family at a smaller size. */
.exercises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 24px; padding: 0; list-style: none; }
.exercises a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 22px 20px; border-radius: 20px; text-decoration: none;
  background: radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, .09), transparent 55%), linear-gradient(180deg, rgba(20, 28, 44, .88), rgba(11, 16, 26, .88));
  border: 1px solid rgba(148, 163, 184, .12); transition: border-color .2s ease, transform .2s ease; }
.exercises a:hover, .exercises a:focus-visible { border-color: rgba(56, 189, 248, .42); transform: translateY(-2px); }
.exercises img { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 8px; border: 1px solid rgba(56, 189, 248, .16); }
.exercises strong { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.exercises span { color: var(--ink-2); font-size: .92rem; line-height: 1.55; }

/* One session as a flow: four icons joined by arrows. */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 18px; padding: 0; list-style: none; counter-reset: flow; }
.flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 16px 20px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 28, 44, .88), rgba(11, 16, 26, .88)); border: 1px solid rgba(148, 163, 184, .12); }
.flow li + li::before { content: ""; position: absolute; left: -12px; top: 64px; width: 10px; height: 10px; z-index: 1;
  border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: translateX(-2px) rotate(45deg); }
.flow img { width: 88px; height: 88px; border-radius: 22px; border: 1px solid rgba(56, 189, 248, .16); box-shadow: 0 14px 36px -18px rgba(56, 189, 248, .55); }
.flow strong { margin-top: 6px; color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }
.flow span { color: var(--ink-2); font-size: .88rem; line-height: 1.5; }

/* The ladder rule: up and back, as two arrows. */
.ladder { margin: 6px 0 26px; }
.ladder ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ladder li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 28, 44, .88), rgba(11, 16, 26, .88)); border: 1px solid rgba(148, 163, 184, .12); color: var(--ink-2); font-size: .93rem; line-height: 1.5; }
.ladder li strong { color: #fff; font-weight: 600; }
.ladder li > span:last-child { grid-column: 2; }
.ladder li strong { grid-column: 2; }
.ladder .arrow { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; position: relative; }
.ladder .up .arrow { background: rgba(56, 189, 248, .14); border: 1.5px solid rgba(56, 189, 248, .7); }
.ladder .down .arrow { background: rgba(251, 191, 36, .1); border: 1.5px solid rgba(251, 191, 36, .6); }
.ladder .arrow::before { content: ""; position: absolute; left: 15px; width: 11px; height: 11px; border-top: 2px solid; border-left: 2px solid; }
.ladder .up .arrow::before { top: 17px; color: var(--cyan); transform: rotate(45deg); }
.ladder .down .arrow::before { top: 11px; color: #fbbf24; transform: rotate(225deg); }
.ladder figcaption { margin-top: 12px; color: var(--dim); font-size: .85rem; text-align: center; }

/* Folded tables: the numbers stay on the page, one tap away. */
.fold { margin: 14px 0 22px; }
/* Outline pill: the quieter action beside a filled one. Glass fill, fine border, cyan on hover. */
.fold > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box;
  padding: 0 6px 0 16px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, .26);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  color: #e2e8f0; font: 550 .9rem/1 var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 22px -14px rgba(0, 0, 0, .8);
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.fold > summary:hover, .fold > summary:focus-visible { border-color: rgba(56, 189, 248, .55); color: #fff; background: linear-gradient(180deg, rgba(56, 189, 248, .12), rgba(56, 189, 248, .04)); }
.fold > summary { list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(56, 189, 248, .14); color: #7dd3fc; font: 600 1rem/1 var(--mono); }
.fold[open] > summary::after { content: "\2212"; }
.fold .tbl { margin-top: 14px; }

/* FAQ: questions as cards, answers open on tap. */
.faq-title { margin-bottom: 22px; }
.faq { display: grid; gap: 10px; margin: 0; }
.faq details { border-radius: 16px; border: 1px solid rgba(148, 163, 184, .12);
  background: linear-gradient(180deg, rgba(20, 28, 44, .8), rgba(12, 17, 27, .8)); transition: border-color .2s ease; }
.faq details[open] { border-color: rgba(56, 189, 248, .35); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; color: #fff; font-size: 1.02rem; font-weight: 500; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); line-height: 1.65; max-width: none; }

@media (max-width: 700px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li + li::before { display: none; }
  .ladder ul { grid-template-columns: 1fr; }
  .s-icon { width: 52px; height: 52px; border-radius: 15px; }
  .s-head { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .exercises a, .faq details, .citations details, .faq summary::after, .citations summary::after { transition: none; } .exercises a:hover { transform: none; } }

/* Guided levels: a badge with progress dots, the figures large, and an intensity bar that grows with the tempo peak. */
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 16px 0 24px; padding: 0; list-style: none; }
.levels li { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-radius: 20px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, .08), transparent 55%), linear-gradient(180deg, rgba(20, 28, 44, .88), rgba(11, 16, 26, .88));
  border: 1px solid rgba(148, 163, 184, .12); }
.lv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lv-kicker { color: var(--cyan); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.lv-dots { display: flex; gap: 5px; }
.lv-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(148, 163, 184, .22); }
.lv-dots i.on { background: var(--cyan); box-shadow: 0 0 8px rgba(56, 189, 248, .6); }
.lv-name { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.28rem; line-height: 1.22; letter-spacing: -.01em; }
.lv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lv-stats > span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .05); color: var(--muted); font-size: .76rem; letter-spacing: .04em; }
.lv-stats b { color: #fff; font-family: var(--sans); font-weight: 600; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lv-tempo { color: var(--ink-2); font-size: .88rem; line-height: 1.45; }
.lv-tempo .num { color: #fff; }
.lv-bar { position: relative; height: 6px; margin-top: auto; border-radius: 99px; overflow: hidden;
  background: linear-gradient(90deg, #38bdf8 0%, #38bdf8 30%, #fbbf24 100%); }
/* The gradient spans the whole track, so a low peak stays cyan and only the top levels reach amber; the unused part is covered. */
.lv-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--peak); right: 0; background: #1b2332; }

/* Annotated screenshot: the app screen beside what it records, each label as it appears on screen. */
.annotated { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; align-items: center; margin: 26px 0 24px; }
.annotated img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--card-line); box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9); }
.annotated-text .lead { margin: 0 0 16px; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; color: #fff; }
.annotated dl { margin: 0; display: grid; gap: 0; }
.annotated dl > div { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; column-gap: 22px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.annotated dl > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.annotated dt { color: #fff; font-family: var(--serif); font-size: 1.08rem; line-height: 1.35; }
.annotated dd { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.annotated figcaption { grid-column: 1 / -1; color: var(--dim); font-size: .85rem; text-align: center; }
@media (max-width: 760px) { .annotated { grid-template-columns: 1fr; gap: 20px; } .annotated dl > div, .annotated.wide dl > div { grid-template-columns: 1fr; row-gap: 4px; } }

/* The meditation loop: four steps around a ring, the idea they share in the middle. */
.loop { position: relative; margin: 26px 0 24px; padding: 26px 20px 20px; border-radius: 24px; border: 1px solid rgba(148, 163, 184, .12);
  background: radial-gradient(60% 60% at 50% 50%, rgba(56, 189, 248, .10), transparent 70%), linear-gradient(180deg, rgba(20, 28, 44, .7), rgba(11, 16, 26, .7)); }
.loop-stage { position: relative; width: 100%; max-width: 860px; aspect-ratio: 900 / 640; margin: 0 auto; container-type: inline-size; }
.loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24%; margin: 0; text-align: center;
  font-family: var(--serif); font-size: clamp(1rem, 2.6cqi, 1.45rem); line-height: 1.25; color: #fff; }
.loop-center .mark { display: block; margin: 0 auto 10px; width: 30px; height: 30px; }
.loop ol { margin: 0; padding: 0; list-style: none; }
.loop li { position: absolute; display: flex; align-items: center; gap: 14px; }
.loop li img { flex: none; width: 8.4cqi; height: 8.4cqi; max-width: 76px; max-height: 76px; border-radius: 22%;
  border: 1px solid rgba(56, 189, 248, .2); box-shadow: 0 12px 30px -14px rgba(56, 189, 248, .6); }
.loop li span { display: flex; flex-direction: column; gap: 3px; color: var(--ink-2); font-size: clamp(.78rem, 1.6cqi, .9rem); line-height: 1.4; }
.loop li strong { color: #fff; font-family: var(--serif); font-weight: 400; font-size: clamp(.98rem, 2.1cqi, 1.18rem); line-height: 1.2; }
.loop-top { left: 50%; bottom: 75.3%; width: 30%; transform: translateX(-50%); flex-direction: column-reverse; text-align: center; }
.loop-bottom { left: 50%; top: 75.3%; width: 30%; transform: translateX(-50%); flex-direction: column; text-align: center; }
.loop-right { left: 68%; top: 50%; width: 32%; transform: translateY(-50%); }
.loop-left { right: 68%; top: 50%; width: 32%; transform: translateY(-50%); flex-direction: row-reverse; text-align: right; }
.loop-top span, .loop-bottom span { align-items: center; }
.loop-left span { align-items: flex-end; }
.loop-brand { position: absolute; top: 20px; right: 22px; display: flex; align-items: center; gap: 9px; margin: 0;
  color: var(--muted); font-size: .82rem; font-weight: 500; letter-spacing: .02em; }
.loop-brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(56, 189, 248, .18), 0 0 18px -4px rgba(56, 189, 248, .5); }
.loop figcaption { margin-top: 14px; color: var(--dim); font-size: .85rem; text-align: center; }
@media (max-width: 880px) {
  .loop-stage { aspect-ratio: auto; }
  .loop-ring { display: none; }
  .loop-center { position: static; transform: none; width: auto; margin-bottom: 14px; font-size: 1.25rem; }
  .loop ol { display: grid; gap: 10px; counter-reset: loop; }
  .loop-brand { position: static; justify-content: center; margin-top: 12px; }
  .loop li { position: static; transform: none; width: auto; flex-direction: row !important; text-align: left !important; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
  .loop li span { align-items: flex-start !important; font-size: .88rem; }
  .loop li strong { font-size: 1.08rem; }
  .loop li img { width: 60px; height: 60px; }
}

/* Sources: a timeline, newest first. The year on the left on a thin line, the paper and its finding on the right. */
.sources-title { margin-bottom: 26px; }
.citations { display: grid; gap: 10px; margin: 0; max-width: 820px; }
.citations details { border-radius: 16px; border: 1px solid rgba(148, 163, 184, .12);
  background: linear-gradient(180deg, rgba(20, 28, 44, .8), rgba(12, 17, 27, .8)); transition: border-color .2s ease; }
.citations details[open] { border-color: rgba(56, 189, 248, .35); }
.citations summary { position: relative; cursor: pointer; list-style: none; display: grid; grid-template-columns: 84px 1fr; column-gap: 18px; align-items: center; padding: 16px 56px 16px 22px; }
.citations summary::-webkit-details-marker { display: none; }
.citations summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); transition: transform .2s ease; }
.citations details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.cite-label { color: #fff; font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; }
.cite-body { padding: 0 22px 20px 124px; }
.cite-body > * { margin: 0; max-width: none; }
.cite-body .cite-title { display: inline-block; margin-top: 12px; }
.cite-chips { display: flex; flex-direction: column; gap: 4px; }
.cite-year { font-family: var(--mono); font-size: 1.35rem; line-height: 1.1; color: var(--cyan); letter-spacing: -.02em; }
.cite-type { color: var(--dim); font-size: .75rem; line-height: 1.35; }
.cite-title { color: #fff; font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; text-decoration: none; }
.cite-title::after { content: " \2197"; color: var(--cyan); font-family: var(--sans); font-size: .85em; }
.citations summary:focus-visible, .faq summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 16px; }
.cite-title:hover, .cite-title:focus-visible { color: var(--cyan); }
span.cite-title::after { content: none; }
span.cite-title:hover { color: #fff; }
.cite-meta { margin-top: 0 !important; color: var(--dim); font-size: .84rem; line-height: 1.45; }
.cite-meta em { font-style: normal; color: var(--muted); }
.cite-finding { margin-top: 10px !important; color: var(--ink-2); font-size: .93rem; line-height: 1.6; }
@media (max-width: 620px) {
  .citations summary { grid-template-columns: 1fr; row-gap: 6px; padding: 16px 52px 16px 18px; }
  .cite-chips { flex-direction: row; align-items: baseline; gap: 10px; }
  .cite-body { padding: 0 18px 18px; }
}
}

/* Intro: the section's definition set larger, as the first thing to read. */
.s .intro { max-width: none; margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--cyan);
  color: var(--ink); font-size: 1.12rem; line-height: 1.65; }

/* Three-way comparison, ours highlighted. */
/* Side by side, unboxed: a rule on the left of each column, cyan for the one Body Zen trains. */
.compare3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 32px; margin: 4px 0 26px; padding: 0; list-style: none; }
.compare3 li { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 2px 18px; border-left: 2px solid rgba(148, 163, 184, .22);
  color: var(--muted); font-size: .92rem; line-height: 1.55; }
.compare3 strong { color: var(--ink-2); font-weight: 600; font-size: .95rem; line-height: 1.35; }
.compare3 .ours { border-left-color: var(--cyan); color: var(--ink-2); }
.compare3 .ours strong { color: #fff; }

/* A pair of short facts with icons, side by side without boxes: tighten, relax. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin: 22px 0 16px; padding: 0; list-style: none; }
.pair a, .pair div { display: flex; align-items: flex-start; gap: 16px; height: 100%; text-decoration: none; }
.pair span { padding-top: 6px; }
.pair a:hover strong, .pair a:focus-visible strong { color: var(--cyan); }
.pair img { flex: none; width: 64px; height: 64px; border-radius: 18px; border: 1px solid rgba(56, 189, 248, .16); }
.pair span { display: flex; flex-direction: column; gap: 3px; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.pair strong { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }

/* A side note, visibly set apart from the teaching. */
.note { display: flex; gap: 14px; align-items: baseline; margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 2px solid rgba(251, 191, 36, .6); }
.note strong { flex: none; color: #fbbf24; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.note p { margin: 0 !important; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }

/* The hand-off to the next section. */
.s .next > span { flex: 1 1 320px; }
.s .next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; max-width: none; margin: 18px 0 0;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--muted); font-size: .9rem; }
/* Outline pill: the quieter action beside a filled one. Glass fill, fine border, cyan on hover. */
.s .next a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box;
  padding: 0 6px 0 16px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, .26);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  color: #e2e8f0; font: 550 .9rem/1 var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 22px -14px rgba(0, 0, 0, .8);
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.s .next a:hover, .s .next a:focus-visible { border-color: rgba(56, 189, 248, .55); color: #fff; background: linear-gradient(180deg, rgba(56, 189, 248, .12), rgba(56, 189, 248, .04)); }
.s .next a::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(56, 189, 248, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 13px no-repeat; transition: transform .22s ease, background-color .22s ease; }
.s .next a:hover::after { transform: translateX(2px); background-color: rgba(56, 189, 248, .24); }
.s .next a { flex: 0 1 auto; max-width: 100%; }
/* Long hand-off labels: keep the pill inside the text column on narrow screens (round 12). */
@media (max-width: 420px) { .s .next a { gap: 8px; padding-left: 14px; font-size: .86rem; line-height: 1.2; } }


@media (max-width: 700px) {
  .compare3, .pair { grid-template-columns: 1fr; }
  .note { flex-direction: column; gap: 4px; }
}

/* The arousal chart: coded zones and curve above, the body state at each numbered point below. */
.arousal { position: relative; margin: 26px 0 22px; padding: 26px clamp(18px, 4%, 36px) 20px; border-radius: 24px; border: 1px solid rgba(148, 163, 184, .12);
  background: linear-gradient(180deg, rgba(20, 28, 44, .75), rgba(11, 16, 26, .75)); }
.arousal-title { margin: 0 !important; padding-right: 150px; color: #fff; font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.25; }
.arousal-sub { margin: 6px 0 14px !important; color: var(--muted); font-size: .9rem; }
.arousal .loop-brand { top: 26px; right: 26px; }
.arousal-chart { display: block; width: 100%; height: auto; font-family: var(--sans); }
.arousal-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: state; }
.arousal-states li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 10px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.arousal-states img { width: 100%; max-width: 132px; height: auto; aspect-ratio: 1; border-radius: 14px; }
.arousal-states strong { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.08rem; }
.arousal-states strong::before { counter-increment: state; content: counter(state); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px;
  border-radius: 50%; border: 1.5px solid currentColor; font: 600 .75rem/1 var(--sans); vertical-align: 2px; }
.arousal-states li:nth-child(1) strong::before { color: #34d399; }
.arousal-states li:nth-child(2) strong::before, .arousal-states li:nth-child(4) strong::before { color: #38bdf8; }
.arousal-states li:nth-child(3) { border-color: rgba(251, 113, 133, .35); }
.arousal-states li:nth-child(3) strong::before { color: #fb7185; }
.arousal-states span { color: var(--ink-2); font-size: .85rem; line-height: 1.45; }
.arousal figcaption { margin-top: 14px; color: var(--dim); font-size: .85rem; text-align: center; }
@media (max-width: 700px) {
  .arousal-title { padding-right: 0; }
  .arousal .loop-brand { position: static; justify-content: flex-start; margin: 0 0 10px; }
  .arousal-chart .phase, .arousal-chart .axis { display: none; }
  .arousal-chart .zone-names { font-size: 22px; }
  .arousal-states { grid-template-columns: 1fr 1fr; }
}

/* Two techniques side by side: icon and name, what it does, then how, as short lines. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 22px 0 26px; }
.duo > section { padding: 4px 0; }
.duo > section + section { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .08); }
.duo header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.duo header img { flex: none; width: 56px; height: 56px; border-radius: 16px; border: 1px solid rgba(56, 189, 248, .16); }
.s .duo h3 { margin: 0; font-size: 1.35rem; }
.duo header p { margin: 3px 0 0 !important; color: var(--cyan); font-size: .9rem; line-height: 1.4; }
.duo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.duo li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
.duo li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(56, 189, 248, .6); }
@media (max-width: 700px) { .duo { grid-template-columns: 1fr; } .duo > section + section { padding: 22px 0 4px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); } }

/* A question the page answers, with its key figure large on the left. */
.answer { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 24px; align-items: center; margin: 22px 0 26px; padding: 22px 26px; border-radius: 20px;
  background: radial-gradient(90% 120% at 0% 50%, rgba(56, 189, 248, .12), transparent 60%), linear-gradient(180deg, rgba(20, 28, 44, .88), rgba(11, 16, 26, .88));
  border: 1px solid rgba(56, 189, 248, .22); }
.answer-big { color: var(--cyan); font-family: var(--serif); font-weight: 400; font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.answer-big .num { font-family: inherit; color: inherit; font-size: inherit; }
.answer-q { margin: 0 0 6px !important; color: #fff; font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.answer-a { margin: 0 !important; color: var(--ink-2); font-size: .95rem; line-height: 1.6; max-width: none; }
.answer .stat-src { display: inline-block; margin-top: 8px; }
@media (max-width: 620px) { .answer { grid-template-columns: 1fr; gap: 10px; padding: 20px; } .answer-big { font-size: 2rem; } }

/* A short named cycle: one card per phase, icon and name over one line of meaning, joined by arrows. */
.phases { margin: 6px 0 26px; padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.phases .lead { margin: 0 0 14px !important; max-width: none; }
.phases ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.phases li { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; row-gap: 8px; align-items: center; align-content: start; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 28, 44, .9), rgba(11, 16, 26, .9)); border: 1px solid rgba(56, 189, 248, .22); }
.phases li + li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: rotate(45deg); }
.phases img { width: 48px; height: 48px; border-radius: 14px; }
.phases span { color: #fff; font-family: var(--serif); font-size: 1.14rem; }
.phases li p { grid-column: 1 / -1; margin: 0 !important; color: var(--ink-2); font-size: .88rem; line-height: 1.5; }
.phases-note { margin: 14px 0 0 !important; color: var(--muted); font-size: .9rem; }
@media (max-width: 700px) {
  .phases ol { grid-template-columns: 1fr; gap: 22px; }
  .phases li + li::before { left: 50%; top: -15px; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .phases li p { grid-column: 2; }
}

/* A wide app screenshot keeps its full width; its labelled guide sits underneath in a grid. */
.annotated.wide { grid-template-columns: 1fr; }
@media (min-width: 761px) { .annotated.wide dl > div { grid-template-columns: 200px 1fr; } }

/* Hero: who the trainer is for, one plain line under the lede with the audience in bold. */
.hero-for { max-width: 58ch; margin: 22px auto 0; color: var(--muted); font-size: .92rem; line-height: 1.6; text-wrap: pretty; }
.hero-for strong { color: #fff; font-weight: 600; }

/* Hero layout. Phone and tablet: one centred column, text, then the session screen. Desktop: the text
   column on the left and a larger session screen on the right; the button, the ticks and every text
   block in the left column share one left and one right edge. */
.hero-top { display: grid; gap: 36px; align-items: center; }
.hero-start { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-ticks { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; text-align: left; color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.hero-ticks li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-ticks svg { width: 14px; height: 14px; flex: none; color: var(--cyan); }
@media (max-width: 359px) { .hero-ticks { column-gap: 14px; font-size: .86rem; } }
/* The browser extension, one quiet text line under the ticks. Desktop Firefox only, so phones never see it. */
.hero-ext { display: inline-flex; align-items: flex-start; gap: 6px; width: fit-content; max-width: 100%; color: var(--muted); font-size: .92rem; line-height: 1.4; text-align: left; text-decoration: none; text-wrap: pretty; border-radius: 4px; transition: color .18s ease; }
.hero-ext svg { width: 14px; height: 14px; flex: none; margin-top: .2em; color: var(--cyan); }
.hero-ext:hover, .hero-ext:focus-visible { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.hero-ext:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 640px) { .hero-ext { display: none; } }

/* The three techniques the page teaches, one even row under the hero, each card opening its section. */
.hero-techniques { list-style: none; padding: 0; margin: 56px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); text-align: left; }
.hero-techniques a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px 26px; border-radius: var(--card-radius); background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); text-decoration: none; transition: border-color .2s, transform .2s; }
.hero-techniques a:hover, .hero-techniques a:focus-visible { border-color: rgba(56, 189, 248, .42); transform: translateY(-2px); }
.hero-techniques strong { color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.hero-techniques span { color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
/* Each technique card ends on a link line naming where it goes, so the card reads as clickable. */
.hero-techniques a { padding-bottom: 22px; }
.hero-techniques .tech-more { margin-top: auto; padding-top: 10px; font-style: normal; font-weight: 600; font-size: .92rem; color: #7dd3fc; display: inline-flex; align-items: center; gap: 8px; }
.hero-techniques .tech-more::after { content: "\2192"; transition: transform .2s; }
.hero-techniques a:hover .tech-more, .hero-techniques a:focus-visible .tech-more { color: #fff; }
.hero-techniques a:hover .tech-more::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .hero-techniques a, .hero-techniques .tech-more::after { transition: none; } .hero-techniques a:hover { transform: none; } .hero-techniques a:hover .tech-more::after { transform: none; } }

/* The problem cards, compact: the icon sits beside the words, so six cards take half the height. */
.tool-parts .benefit a { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto 1fr; column-gap: 18px; padding: 20px 44px 20px 20px; align-content: start; }
.tool-parts .benefit-icon { width: 72px; height: 72px; border-radius: 20px; margin: 0; grid-row: 1 / span 3; }
.tool-parts .benefit-ask { font-size: .8rem; }
.tool-parts .benefit-title { margin-top: 2px; font-size: 1.22rem; }
.tool-parts .benefit-line { margin-top: 6px; font-size: .9rem; line-height: 1.5; }
.tool-parts .benefit a::after { top: 24px; right: 20px; }
@media (max-width: 480px) {
  .tool-parts .benefit a { grid-template-columns: 56px 1fr; column-gap: 14px; padding: 16px 40px 16px 16px; }
  .tool-parts .benefit-icon { width: 56px; height: 56px; border-radius: 16px; }
}

@media (min-width: 1024px) {
  .hero { text-align: left; }
  .hero-top { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; }
  .hero-copy { max-width: 520px; }
  .hero h1 { font-size: clamp(2.6rem, 3.6vw, 3.3rem); line-height: 1.08; }
  .hero .lede { max-width: none; margin-left: 0; margin-right: 0; font-size: 1.04rem; line-height: 1.68; }
  .hero-for { max-width: none; margin-left: 0; margin-right: 0; }
  .hero-start { align-items: stretch; margin-top: 32px; gap: 18px; }
  .hero-start .start { width: 100%; justify-content: center; font-size: 1.08rem; }
  .hero-ticks { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 40px; }
  .tool-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .hero-ticks { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 12px; }
}

/* Footer contact. */
.foot-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: -6px 0 20px; }
.foot-mail { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); text-decoration: none; }
.foot-mail:hover, .foot-mail:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.foot-insta { display: inline-flex; align-items: center; gap: 10px; color: var(--cyan); text-decoration: none; }
.foot-insta svg { flex: none; border-radius: 10px; transition: transform .15s ease; }
.foot-insta:hover svg, .foot-insta:focus-visible svg { transform: scale(1.06); }
.foot-insta:hover span, .foot-insta:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

/* User feedback: two rows of quote cards gliding in opposite directions, endless because each track is doubled.
   Hover or focus pauses a row; reduced motion turns the rows into plain horizontal scrollers. */
.feedback { overflow: hidden; }
.fb-row { display: flex; width: max-content; gap: 16px; margin: 0 0 16px; animation: fb-slide 60s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fb-row.fb-reverse { animation-direction: reverse; animation-duration: 70s; }
.fb-row:hover, .fb-row:focus-within { animation-play-state: paused; }
.fb-track { display: flex; gap: 16px; }
@keyframes fb-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
/* The testimonial block carries a small plain-text label, not a heading (owner decision dl-97, 2026-10-06). */
.fb-label { margin: 0 0 14px !important; color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.fb-intro { margin: 0 0 30px !important; color: var(--muted); font-size: 1.02rem; }
.fb-card { width: 400px; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  padding: 26px 28px 22px; border-radius: 14px; background: linear-gradient(180deg, #111722, #0c1119);
  border: 1px solid rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 40px -30px rgba(0, 0, 0, .8); }
.fb-card.fb-m { width: 330px; }
.fb-card.fb-s { width: 260px; }
.fb-card blockquote { margin: 0; white-space: normal; color: #8b97a8; font-family: var(--serif); font-size: 1.22rem; line-height: 1.5; letter-spacing: -.005em; text-wrap: pretty; }
.fb-card blockquote strong { color: #f1f5f9; font-weight: 400; }
.fb-card figcaption { display: flex; align-items: center; gap: 12px; }
.fb-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
  color: #e2e8f0; font-family: var(--serif); font-size: 1rem; line-height: 1; }
.fb-card figcaption > span:last-child { display: flex; align-items: baseline; gap: 8px; }
.fb-card figcaption strong { color: #e2e8f0; font-size: .92rem; font-weight: 500; }
.fb-age { color: #64748b; font-size: .85rem; }
.fb-age::before { content: "\00B7"; margin-right: 8px; }
@media (max-width: 620px) { .fb-card { width: 290px; padding: 22px 22px 18px; } .fb-card.fb-m { width: 260px; } .fb-card.fb-s { width: 220px; } .fb-card blockquote { font-size: 1.06rem; } }
@media (prefers-reduced-motion: reduce) {
  .fb-row { animation: none; width: auto; overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .fb-track[aria-hidden="true"] { display: none; }
}

/* One kegel repetition: three steps joined by arrows, each with its share of the beat underneath. */
.kcycle { margin: 26px 0 24px; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.kcycle-lead { margin: 0 0 16px; color: var(--ink); font-size: 1rem; }
.kcycle ol { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; margin: 0; padding: 0; list-style: none; }
.kcycle li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 18px;
  background: linear-gradient(180deg, #111722, #0c1119); border: 1px solid rgba(255, 255, 255, .07); }
.kcycle li + li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: rotate(45deg); }
.kcycle img { width: 84px; height: 84px; border-radius: 22px; border: 1px solid rgba(56, 189, 248, .16); }
.kcycle strong { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.kcycle li > span:not(.kcycle-track) { color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.kcycle-track { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }
.kcycle-track i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(56, 189, 248, .6); }
.kcycle li:nth-child(2) .kcycle-track i { background: transparent; box-shadow: none; border: 1.5px solid var(--cyan); }
.kcycle-track i.rest { flex: 1; height: 8px; border-radius: 99px; background: rgba(148, 163, 184, .25); box-shadow: none; }
@media (max-width: 760px) {
  .kcycle ol { grid-template-columns: 1fr; gap: 22px; }
  .kcycle li + li::before { left: 50%; top: -15px; margin: 0 0 0 -5px; transform: rotate(135deg); }
}

/* The challenge board: one card per family, the goals as a short ladder, a button that opens the app. */
.chal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0 14px; padding: 0; list-style: none; }
.chal > li { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: 20px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, .09), transparent 55%), linear-gradient(180deg, rgba(20, 28, 44, .88), rgba(11, 16, 26, .88));
  border: 1px solid rgba(148, 163, 184, .12); }
.chal img { width: 72px; height: 72px; border-radius: 20px; border: 1px solid rgba(56, 189, 248, .16); }
.chal h3 { margin: 6px 0 0; color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.chal > li > p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.chal ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.chal ol li { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.chal ol a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 2px; font-size: .88rem; text-decoration: none; }
.chal ol a::after { content: "\2192"; color: var(--dim); transition: transform .2s ease, color .2s ease; }
.chal ol a:hover::after, .chal ol a:focus-visible::after { color: var(--cyan); transform: translateX(3px); }
.chal ol strong { color: #e2e8f0; font-weight: 600; }
.chal ol span { margin-left: auto; color: var(--dim); text-align: right; }
.chal ol a:hover strong { color: #fff; }
/* Filled pill: the action a block exists for. Light-to-deep cyan fill, dark text, a lit top edge and a soft
   glow; the arrow sits in its own disc and steps forward on hover. */
.chal-go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; box-sizing: border-box;
  padding: 0 7px 0 20px; border-radius: 999px; border: 1px solid rgba(186, 230, 253, .6);
  background: linear-gradient(180deg, #8fdcfd 0%, #38bdf8 52%, #0ea5e9 100%);
  color: #04121d; font: 650 .9rem/1 var(--sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(3, 105, 161, .35), 0 10px 26px -12px rgba(56, 189, 248, .85);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
.chal-go::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(4, 18, 29, .13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .22s ease, background-color .22s ease;
}
.chal-go:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 6px rgba(3, 105, 161, .35), 0 16px 34px -12px rgba(56, 189, 248, .95); }
.chal-go:hover::after { transform: translateX(2px); background-color: rgba(4, 18, 29, .2); }
.chal-go:active { transform: translateY(0); filter: brightness(.96); }
.chal-go:focus-visible { outline: 2px solid #bae6fd; outline-offset: 3px; }
.chal-go { margin-top: auto; align-self: flex-start; }
.chal-foot { color: var(--ink-2); font-size: .92rem; }
@media (max-width: 640px) { .chal { grid-template-columns: minmax(0, 1fr); } }
/* Two columns: the timed card, the longest ladder, takes two rows beside the edge and near-the-edge cards, so
   neither column is left with an empty stretch, and the weekly card closes the grid at full width. */
@media (min-width: 641px) { .chal > li:nth-child(2) { grid-row: span 2; } .chal > li:nth-child(5):last-child { grid-column: 1 / -1; } }
@media (max-width: 400px) { .chal-go { max-width: 100%; white-space: normal; line-height: 1.25; padding-block: 7px; } }

/* The challenge board: stats, challenge tabs, the ranking beside a feed of the newest passes. */
.board { margin: 30px 0 10px; padding: 28px 30px 26px; border-radius: 24px; border: 1px solid rgba(148, 163, 184, .12);
  background: linear-gradient(180deg, #111722, #0c1119); box-shadow: var(--card-shadow); }
.board[hidden] { display: none; }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.board-head h3 { margin: 0; color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.board-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; color: var(--muted); font-size: .88rem; }
.board-stats div { display: flex; flex-direction: row-reverse; gap: .3em; }
.board-stats div[hidden] { display: none; }
.board-stats dt, .board-stats dd { margin: 0; }
.board-stats dd { color: #f1f5f9; font-weight: 600; font-variant-numeric: tabular-nums; }
.board-more { margin: 14px 0 0; text-align: center; }
.board-more button { display: inline-block; padding: 8px 18px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 999px; background: none; color: #e2e8f0; font: inherit; font-size: .88rem; cursor: pointer; }
.board-more button:hover, .board-more button:focus-visible { border-color: rgba(56, 189, 248, .6); color: var(--cyan); }
.board-more button:disabled { opacity: .6; cursor: progress; }
.board-tabs { display: flex; flex-wrap: wrap; gap: 14px 30px; padding: 18px 0 6px; }
.board-group > span { display: block; margin-bottom: 6px; color: var(--dim); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.board-group > div { display: flex; flex-wrap: wrap; gap: 4px 2px; }
.board-tabs a { padding: 6px 2px; margin-right: 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: .92rem; text-decoration: none; }
.board-tabs a:hover { color: #fff; }
.board-tabs a[aria-current] { color: #fff; border-bottom-color: var(--cyan); }
/* Without the script every ranking shows in turn; with it, one at a time. */
.board-panel + .board-panel { margin-top: 26px; }
.board.tabbed .board-panel:not(.on) { display: none; }
.board.tabbed .board-panel + .board-panel { margin-top: 0; }
.board-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; margin-top: 16px; }
.board-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.board-title strong { color: #f1f5f9; font-weight: 600; font-size: .98rem; }
.board-title span { color: var(--dim); font-size: .82rem; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { display: grid; grid-template-columns: 2.2em 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.board-list .rank { color: var(--dim); font-family: var(--serif); font-size: 1.15rem; text-align: right; font-variant-numeric: tabular-nums; }
.board-list .top .rank { color: #e2e8f0; }
.board-list .top-1 .rank { color: #fcd34d; }
.board-list .mono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, .25);
  color: #cbd5e1; font-size: .74rem; font-weight: 600; letter-spacing: .04em; }
.board-list .who { display: grid; min-width: 0; }
.board-list .who strong { color: #f1f5f9; font-weight: 600; font-size: .95rem; }
.board-list .who small { overflow: hidden; color: var(--dim); font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }
.board-list .score { color: #e2e8f0; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-list .you { background: rgba(56, 189, 248, .07); border-radius: 12px; border-bottom-color: transparent; }
.board-list .you .who small { white-space: normal; }
.board-list .you .mono { border-color: rgba(56, 189, 248, .6); color: var(--cyan); font-size: .66rem; }
.board-list .you .rank, .board-list .you .who strong { color: var(--cyan); }
.board-list .gap { display: block; padding: 4px; color: var(--dim); text-align: center; letter-spacing: .3em; border: 0; }
.board-feed { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .07); }
.board-live { display: inline-flex; align-items: center; gap: 6px; }
.board-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); animation: board-pulse 2s infinite; }
@keyframes board-pulse { 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.board-feed ul { list-style: none; margin: 0; padding: 0; }
.board-feed li { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.board-feed li.new { animation: board-in .7s ease both; }
@keyframes board-in { from { opacity: 0; transform: translateY(-8px); background: rgba(56, 189, 248, .08); } to { opacity: 1; transform: none; } }
.board-feed p { margin: 0; font-size: .86rem; line-height: 1.45; }
.board-feed strong { color: #f1f5f9; font-weight: 600; }
.board-feed p span, .board-feed .meta { color: var(--dim); }
.board-feed .what { color: var(--ink-2); }
.board-feed .meta { font-size: .8rem; }
@media (max-width: 820px) {
  .board { padding: 22px 18px; }
  .board-body { grid-template-columns: 1fr; gap: 22px; }
  .board-feed { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07); }
  .board-list li { grid-template-columns: 1.8em 34px minmax(0, 1fr) auto; gap: 10px; }
  .board-list .mono { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .board-live::before, .board-feed li.new { animation: none; } }

/* A labelled anatomy drawing. Each label is a dot on the part with a small dark tag beside it, on the side
   the content says (l or r); the highlighted part is the one the section trains. On a phone the tags give
   way to numbered dots and the key under the image. */
.anat { margin: 26px auto 22px; max-width: 960px; }
.anat-img { position: relative; }
.anat-img img { width: 100%; height: auto; display: block; border: 1px solid var(--card-line); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow), 0 0 80px -20px rgba(56, 189, 248, .22); background: #05070c; }
.anat-pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.anat-pins li { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; transform: translate(-6px, -50%); }
.anat-pins li.l { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.anat-pins .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #f8fafc; box-shadow: 0 0 0 3px rgba(5, 7, 12, .7), 0 0 0 4px rgba(248, 250, 252, .35);
  font-size: 0; color: transparent; }
.anat-pins .tag { padding: 4px 9px; border-radius: 7px; background: rgba(5, 8, 14, .84); border: 1px solid rgba(255, 255, 255, .14);
  color: #f1f5f9; font-size: .8rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.anat-pins .hi .dot { background: var(--cyan); box-shadow: 0 0 0 3px rgba(5, 7, 12, .7), 0 0 14px rgba(56, 189, 248, .9); }
.anat-pins .hi .tag { background: rgba(8, 47, 73, .9); border-color: rgba(56, 189, 248, .7); color: #e0f2fe; }
.anat-key { display: none; }
.anat figcaption { margin-top: 16px; color: var(--dim); font-size: .85rem; text-align: center; }
/* The two squeeze grips, side by side from 900px. The long squeeze tag would run off the drawing at any
   width (it overflowed the left edge at 701-899px), so both figures always use the numbered dots and the
   key under them, as on a phone. */
.anat-pair { margin: 26px 0 22px; }
.anat-pair .anat-pins .tag { display: none; }
.anat-pair .anat-pins li, .anat-pair .anat-pins li.l { transform: translate(-50%, -50%); }
.anat-pair .anat-pins .dot { width: 20px; height: 20px; display: grid; place-items: center; font: 700 .7rem/1 var(--sans); color: #05070c; }
.anat-pair .anat-pins .hi .dot { color: #04121d; }
.anat-pair .anat-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 14px 0 0; padding: 0 0 0 1.4em; color: var(--ink-2); font-size: .88rem; }
.anat-pair .anat-key li::marker { color: var(--dim); font-weight: 600; }
.anat-pair .anat-key .hi { color: var(--cyan); }
@media (min-width: 900px) {
  .anat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .anat-pair .anat { margin: 0; max-width: none; }
}
@media (max-width: 700px) {
  .anat-pins .tag { display: none; }
  .anat-pins li, .anat-pins li.l { transform: translate(-50%, -50%); }
  .anat-pins .dot { width: 20px; height: 20px; display: grid; place-items: center; font: 700 .7rem/1 var(--sans); color: #05070c; }
  .anat-pins .hi .dot { color: #04121d; }
  .anat-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 14px 0 0; padding: 0 0 0 1.4em; color: var(--ink-2); font-size: .88rem; }
  .anat-key li::marker { color: var(--dim); font-weight: 600; }
  .anat-key .hi { color: var(--cyan); }
}

/* The session screen with every part numbered. On a wide screen the picture stays in view beside the list;
   on a phone the list follows the picture. The dots only point; the list holds the words. */
.smap { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr); gap: 20px 40px; align-items: start; margin: 18px 0 30px; }
.smap-img { position: sticky; top: 24px; }
.smap-frame { position: relative; container-type: inline-size; }
.smap-img img { width: 100%; height: auto; display: block; border: 1px solid var(--card-line); border-radius: 22px;
  box-shadow: var(--card-shadow), 0 0 80px -20px rgba(56, 189, 248, .22); background: #05070c; }
.smap-dots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.smap-dots li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.smap-dots li { scroll-margin: 120px; }
.smap-dots a { pointer-events: auto; display: grid; place-items: center; text-decoration: none; cursor: pointer;
  /* The dots grow with the picture: about 15 px on a small phone, up to 26 px on a desktop. */
  width: clamp(15px, 4.6cqi, 26px); height: clamp(15px, 4.6cqi, 26px); border-radius: 50%; background: var(--cyan); color: #04121d;
  font: 700 clamp(9px, 2.5cqi, 14px)/1 var(--sans);
  box-shadow: 0 0 0 2px rgba(5, 7, 12, .85), 0 0 12px rgba(56, 189, 248, .7); }
.smap-key { margin: 0; padding: 0; list-style: none; counter-reset: smap; display: grid; gap: 12px; }
.smap-key li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; color: var(--ink-2); font-size: .9rem; line-height: 1.5;
  scroll-margin: 90px; border-radius: 12px; }
.smap-n { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; text-decoration: none;
  background: rgba(56, 189, 248, .14); border: 1px solid rgba(56, 189, 248, .5); color: #7dd3fc; font: 700 .72rem/1 var(--sans); transition: background .2s ease; }
.smap-n:hover, .smap-n:focus-visible { background: rgba(56, 189, 248, .32); color: #fff; }
.smap-dots a:hover, .smap-dots a:focus-visible { transform: scale(1.15); outline: none; }
/* A jump lands with a short pulse, so the eye finds the part at once. */
.smap .flash { animation: smap-flash 1.6s ease; }
@keyframes smap-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); } 20% { box-shadow: 0 0 0 10px rgba(56, 189, 248, .35); } }
.smap-key li.flash { background: rgba(56, 189, 248, .08); animation: smap-row 1.8s ease; }
@keyframes smap-row { 0% { background: rgba(56, 189, 248, .22); } 100% { background: rgba(56, 189, 248, 0); } }
@media (prefers-reduced-motion: reduce) { .smap .flash, .smap-key li.flash { animation: none; } }
.smap-key strong { display: block; color: #f1f5f9; font-weight: 600; }
.smap figcaption { grid-column: 1 / -1; color: #fff; font-size: 1.02rem; font-weight: 500; }
.smap-note { margin: 12px 0 0 !important; color: var(--dim); font-size: .82rem; line-height: 1.5; text-align: center; }
@media (max-width: 900px) {
  .smap { grid-template-columns: minmax(0, 1fr); }
  .smap-img { position: static; max-width: 580px; margin: 0 auto; width: 100%; }
  .smap figcaption { grid-column: auto; }
}

/* The way into the screen guide from the top of the page, and the guide as a dialog over the page. */
.guide-row { display: flex; justify-content: center; margin: 22px 0 0 !important; max-width: none; }
.guide-open { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; box-sizing: border-box; padding: 0 6px 0 18px; border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .26); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  color: #e2e8f0; font-weight: 550; font-size: .92rem; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: border-color .22s ease, color .22s ease; }
.guide-open::after { content: "?"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(56, 189, 248, .16); color: #7dd3fc; font-weight: 700; }
.guide-open:hover, .guide-open:focus-visible { border-color: rgba(56, 189, 248, .55); color: #fff; }
.guide-dialog { width: min(1200px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 28px 28px 8px; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px; background: #0c1119; color: var(--ink-2); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); overflow: auto; }
.guide-dialog::backdrop { background: rgba(4, 6, 10, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.guide-dialog .smap { margin: 0 0 20px; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); }
@media (max-width: 1000px) {
  .guide-dialog .smap { grid-template-columns: minmax(0, 1fr); }
  .guide-dialog .smap-img { position: static; max-width: 600px; margin: 0 auto; width: 100%; }
  .guide-dialog .smap-key { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 640px) { .guide-dialog .smap-key { grid-template-columns: minmax(0, 1fr); } }
.guide-dialog .smap-img { top: 0; }
.guide-close { position: sticky; top: 0; float: right; z-index: 2; width: 36px; height: 36px; margin: -12px -12px 0 12px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); background: #111722; color: #cbd5e1; font-size: 1.2rem; cursor: pointer; }
@media (max-width: 640px) { .guide-dialog { padding: 20px 16px 4px; } }

/* The training ladder as one quiet table: hairline rows, numbers that line up, and a thin bar for the beat's
   top speed so the climb shows without boxes or glow. */
.ltable caption { caption-side: top; text-align: left; color: var(--dim); font-size: .8rem; padding: 0 0 12px; }
.ltable { width: 100%; margin: 18px 0 12px; border-collapse: collapse; font-size: .92rem; }
.ltable th, .ltable td { padding: 12px 14px 12px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ltable thead th { padding-top: 0; color: var(--dim); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ltable tbody th { color: #f1f5f9; font-weight: 500; }
.lt-n { display: inline-block; width: 1.6em; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ltable td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lt-speed { min-width: 190px; }
.lt-bar { display: block; width: 100%; max-width: 160px; height: 3px; margin-bottom: 6px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan) var(--w), rgba(255, 255, 255, .08) var(--w)); }
.ltable tbody tr:last-child td:last-child { color: #fcd34d; }
.ll-rule { color: var(--muted); font-size: .88rem; }
@media (max-width: 700px) {
  .ltable caption { display: block; width: 100%; }
  .ltable thead { display: none; }
  .ltable, .ltable tbody, .ltable tr, .ltable th, .ltable td { display: block; }
  .ltable tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .ltable th, .ltable td { border: 0; padding: 2px 0; }
  .ltable tbody th { grid-column: 1 / -1; }
  .lt-speed { min-width: 0; grid-column: 1 / -1; }
  .ltable td:nth-child(2)::after { content: ""; }
}

/* A labelled drawing that can play its animation: a play button over the drawing; while the clip plays the
   labels step aside, and when it ends the drawing and labels come back. */
.anat-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--card-radius); background: #0b101d; cursor: pointer; }
.anat-video[hidden] { display: none; }
.anat.playing .anat-pins, .anat.playing .anat-play { opacity: 0; pointer-events: none; }
.anat-pins { transition: opacity .3s ease; }
.anat-play { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px;
  border-radius: 999px; border: 1px solid rgba(186, 230, 253, .5); background: rgba(8, 14, 24, .78); color: #f1f5f9; font-size: .9rem; font-weight: 600;
  text-decoration: none; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .9), 0 0 24px -6px rgba(56, 189, 248, .5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s ease, transform .2s ease, opacity .3s ease; }
.anat-play:hover, .anat-play:focus-visible { border-color: var(--cyan); transform: translateX(-50%) translateY(-1px); }
.anat-play-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(180deg, #8fdcfd, #38bdf8 55%, #0ea5e9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.anat-play-icon::before { content: ""; width: 12px; height: 14px; margin-left: 3px; background: #04121d; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.anat-shows { display: block; margin-top: 6px; color: var(--muted); }
@media (max-width: 700px) { .anat-play { bottom: 4%; font-size: .8rem; padding: 6px 14px 6px 6px; } .anat-play-icon { width: 30px; height: 30px; } }
.anat-play-text { display: grid; line-height: 1.2; text-align: left; }
.anat-play-text small { color: var(--muted); font-size: .76rem; font-weight: 500; }
.anat-close { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(8, 14, 24, .85); color: #e2e8f0; font: inherit; font-size: .82rem; cursor: pointer; }
.board-list .clean { color: #86efac; }
.chal > li:first-child { grid-column: 1 / -1; }

/* Privacy, Terms and Support: one quiet row at the foot of every page. */
.foot-links { display: flex; gap: 18px; margin-left: auto; }
.foot-links a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
.foot-links a:hover, .foot-links a:focus-visible { color: var(--cyan); }
@media (max-width: 640px) { .foot-links { margin-left: 0; width: 100%; } }

/* The privacy, terms and support pages: one readable column under the shared header. */
.legal { padding-top: 56px; }
.legal h1 { margin: 0 0 18px; }
.legal h2 { margin: 34px 0 10px; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 0 0 8px; color: var(--ink-2); }

/* Welcome-back card (assets/progress.js): only in a browser that already holds trainer progress. Fixed in the
   corner, so it never moves the page; hidden until tomorrow with its close button. */
.bz-progress { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 16px 18px 16px;
  border: 1px solid rgba(56, 189, 248, .35); border-radius: 18px; background: rgba(8, 12, 20, .96); color: var(--ink-2);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .8), 0 0 40px -18px rgba(56, 189, 248, .5); font: .9rem/1.45 var(--sans);
  animation: bz-in .35s ease-out both; }
@keyframes bz-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .bz-progress { animation: none; } }
/* Once the trainer is open the card has done its job; left on top it covered the app and its button did nothing. */
body.app-open .bz-progress { display: none; }
.bz-progress .bz-hi { margin: 0 0 6px; color: var(--ink); font-weight: 600; font-size: 1rem; }
.bz-progress .bz-facts { margin: 0 0 8px; padding: 0; list-style: none; color: var(--muted); font-size: .84rem; }
.bz-progress .bz-line { margin: 0 0 12px; color: var(--ink); }
.bz-progress .bz-do { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bz-progress .bz-start { padding: 8px 14px; border-radius: 999px; background: var(--cyan); color: #04121d; font-weight: 600; text-decoration: none; }
.bz-progress .bz-plan, .bz-dialog button, .bz-dialog input[type=file] { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: transparent; color: var(--ink-2); font: inherit; font-size: .84rem; cursor: pointer; }
.bz-progress .bz-x { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.bz-progress .bz-x:hover, .bz-progress .bz-plan:hover, .bz-dialog button:hover { color: var(--cyan); }
@media (max-width: 640px) { .bz-progress { right: 16px; left: 16px; bottom: 16px; width: auto; } }
.bz-dialog { width: min(480px, calc(100vw - 32px)); padding: 22px 24px; border: 1px solid var(--card-line); border-radius: 20px;
  background: #0b1019; color: var(--ink-2); font: .92rem/1.5 var(--sans); }
.bz-dialog::backdrop { background: rgba(2, 4, 8, .7); }
.bz-dialog h2 { margin: 0 0 12px; color: var(--ink); font-size: 1.25rem; }
.bz-dialog h3 { margin: 22px 0 6px; color: var(--ink); font-size: 1rem; }
.bz-dialog fieldset { margin: 0 0 12px; padding: 0; border: 0; }
.bz-dialog legend { margin-bottom: 6px; color: var(--muted); font-size: .84rem; }
.bz-dialog .bz-days { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.bz-dialog .bz-days label, .bz-dialog .bz-time { display: inline-flex; gap: 6px; align-items: center; }
.bz-dialog input[type=time], .bz-dialog textarea { padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: #070a10; color: var(--ink); font: inherit; }
.bz-dialog .bz-restore { display: grid; gap: 6px; margin-top: 10px; color: var(--muted); font-size: .84rem; }
.bz-dialog .bz-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bz-dialog .bz-note { margin: 0; color: var(--muted); font-size: .84rem; }
.bz-dialog .bz-remind { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; line-height: 1.4; }
.bz-dialog .bz-remind input { margin-top: 3px; }
.bz-dialog .bz-mail { display: grid; gap: 8px; margin: 6px 0 0 26px; }
.bz-dialog .bz-mail[hidden] { display: none; }
.bz-dialog .bz-mailblock[hidden] { display: none; }
.bz-dialog .bz-email { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.bz-dialog .bz-email input { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--card-line); background: #0b0f17; color: var(--ink); font: inherit; }
.bz-dialog .bz-status { min-height: 1.4em; margin: 8px 0 0; color: var(--cyan); font-size: .84rem; }