/* ============================================================
   oliviernijman.com — shared stylesheet
   Used by /, /products/ and /coaches/.
   Change something here and every page changes together.
   Colours live in the :root block; dark mode overrides them below.
   ============================================================ */

@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/instrument-sans.woff2") format("woff2");
}

:root{
  color-scheme:light dark;

  --bg:#ffffff;
  --surface:#f5f7fa;
  --ink:#0b1630;
  --muted:#596277;
  --line:#e3e7ee;
  --accent:#1d3a75;
  --accent-soft:#edf1f8;
  --hot:#e88a96;
  --btn-bg:#0b1630;
  --btn-fg:#ffffff;
  --deep:#0b1630;
  --on-deep:#ffffff;
  --on-deep-muted:#aab4cc;
  --deep-line:rgba(255,255,255,.14);
  --band:#0b1630;
  --band-hover:#1a2d57;
  --ice:#c9d4ea;
  --shadow:0 1px 2px rgba(11,22,48,.04), 0 18px 40px -22px rgba(11,22,48,.22);
  --err:#c0262d;
  --header-bg:rgba(255,255,255,.9);

  --sans:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* labels in capitals: the same face as the text */
  --caps:var(--sans);

  --wrap:1160px;
  --gutter:clamp(20px, 5vw, 40px);
  --text:38rem;
  --r:16px;
  --r-sm:10px;
  --header-h:68px;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#060b18;
    --surface:#0d162b;
    --ink:#eef1f7;
    --muted:#9aa4b8;
    --line:#1e2a44;
    --accent:#b7c6e8;
    --accent-soft:#14213f;
    --hot:#f0a0aa;
    --btn-bg:#eef1f7;
    --btn-fg:#0b1630;
    --deep:#0d1a36;
    --band:#0d1a36;
    --band-hover:#ffffff;
    --shadow:none;
    --err:#ff9a9d;
    --header-bg:rgba(6,11,24,.88);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 20px)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block; max-width:100%}
a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
::selection{background:var(--accent); color:#fff}
[hidden]{display:none !important}

h1,h2,h3{margin:0; text-wrap:balance; font-weight:500}
h1{font-size:clamp(2.05rem, 1.15rem + 3.7vw, 3.9rem); line-height:1.06; letter-spacing:-.032em}
h2{font-size:clamp(1.7rem, 1.1rem + 2.5vw, 2.7rem); line-height:1.1; letter-spacing:-.028em; max-width:20em}
h3{font-size:1.12rem; line-height:1.3; letter-spacing:-.01em; font-weight:600}
p{margin:0 0 1.1em; max-width:var(--text); text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.lead{font-size:clamp(1.12rem, 1.02rem + .5vw, 1.34rem); line-height:1.45; color:var(--muted); max-width:36em; letter-spacing:-.01em}
.small{font-size:.9rem; color:var(--muted)}
.kicker{
  display:block; margin:0 0 1.5em;
  font-family:var(--sans); font-size:.86rem; font-weight:500; line-height:1.4;
  letter-spacing:.14em; text-transform:uppercase; font-variant-numeric:lining-nums; color:var(--accent);
}

.skip{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--ink); color:var(--bg); padding:10px 16px;
}
.skip{border-radius:var(--r-sm)}
.skip:focus{top:12px; color:var(--bg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 1.7em; border:1px solid var(--btn-bg); border-radius:24px;
  background:var(--btn-bg); color:var(--btn-fg);
  font:inherit; font-size:1rem; font-weight:600; line-height:1.2; letter-spacing:-.01em; text-decoration:none;
  cursor:pointer; transition:background-color .15s, border-color .15s, color .15s;
}
.btn:hover{background:var(--band-hover); border-color:var(--band-hover); color:var(--btn-fg)}
.btn:disabled{opacity:.6; cursor:default}
.btn-ghost,.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover,.btn-outline:hover{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.btn-sm{padding:.68em 1.2em; font-size:.92rem}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:2.2em}

/* ---------- header ---------- */
.site-header{
  position:relative; z-index:40;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:var(--header-h);
}
.brand{text-decoration:none; color:var(--ink); display:block; line-height:1.2; flex:none}
.brand:hover{color:var(--ink)}
.brand-name{display:block; font-size:1.12rem; font-weight:600; letter-spacing:-.02em}
.brand-tag{display:block; font-size:.76rem; color:var(--muted); letter-spacing:.01em}

.nav{display:flex; align-items:center; gap:clamp(12px, 1.8vw, 26px); font-size:.94rem; font-weight:500}
.nav a:not(.btn){color:var(--muted); text-decoration:none; padding:6px 0; border-bottom:1.5px solid transparent}
.nav a:not(.btn):hover,
.nav a[aria-current]:not(.btn){color:var(--ink); border-bottom-color:var(--accent)}
.nav .btn{margin-left:4px}

.nav-toggle{
  display:none; align-items:center; gap:10px;
  background:none; border:1px solid var(--line); border-radius:24px;
  padding:11px 18px; font:inherit; font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer;
}
.nav-toggle .bars{position:relative; width:16px; height:10px}
.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform .2s, top .2s;
}
.nav-toggle .bars::before{top:0}
.nav-toggle .bars::after{top:8px}
.nav-toggle[aria-expanded="true"] .bars::before{top:4px; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{top:4px; transform:rotate(-45deg)}

@media (max-width:900px){
  /* without JavaScript the links simply wrap under the name */
  .site-header .wrap{flex-wrap:wrap; padding-block:12px}
  .nav{flex-wrap:wrap; row-gap:2px}

  .js .site-header .wrap{flex-wrap:nowrap; padding-block:0}
  .js .nav-toggle{display:inline-flex}
  .js .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:6px var(--gutter) 22px; box-shadow:0 18px 30px -20px rgba(31,39,64,.25); font-size:1.1rem;
  }
  .js .nav.open{display:flex}
  .js .nav a:not(.btn){padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink)}
  .js .nav .btn{margin:18px 0 0}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px, 8vw, 104px); overflow:hidden}
.hero h1{max-width:13.5em}
.hero .lead{margin-top:1.6em}
.hero-sub{padding-bottom:clamp(48px, 8vw, 96px)}

.signal{margin-top:clamp(36px, 6vw, 64px)}
.signal svg{width:100%; height:clamp(64px, 10vw, 120px)}
.signal path{fill:none; stroke:url(#settle); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.signal .stop-a{stop-color:var(--hot)}
.signal .stop-b{stop-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .signal svg{animation:settle 2.6s cubic-bezier(.3,.6,.2,1) .15s both}
  @keyframes settle{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
}

.facts{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  margin:clamp(20px, 3vw, 36px) 0 0; padding:0;
  border-top:1px solid var(--line);
}
.facts div{padding:16px 20px 22px 0}
.facts div + div{padding-left:20px; border-left:1px solid var(--line)}
.facts dt{font-family:var(--caps); font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.facts dd{margin:6px 0 0; font-size:1rem; font-weight:500; letter-spacing:-.01em}
@media (max-width:760px){
  .facts{grid-template-columns:1fr 1fr}
  .facts div{padding:14px 14px 16px 0}
  .facts div + div{padding-left:0; border-left:0}
  .facts div:nth-child(even){padding-left:16px; border-left:1px solid var(--line)}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- sections ---------- */
.section{padding-block:clamp(60px, 9vw, 112px); border-top:1px solid var(--line)}
.hero + .section{margin-top:clamp(28px, 5vw, 56px)}
.section-grid{display:grid; grid-template-columns:minmax(0, 190px) minmax(0, 1fr); gap:clamp(24px, 4vw, 56px)}
.section-label{
  align-self:start; position:sticky; top:calc(var(--header-h) + 28px);
  margin:0; padding-top:.9em;
  font-family:var(--caps); font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.section-label b{display:block; margin-bottom:6px; font-weight:600; color:var(--accent)}
.section-body > h2 + *{margin-top:1.6rem}
.section-body > * + .cards,
.section-body > * + .steps,
.section-body > * + .price,
.section-body > * + .tiers,
.section-body > * + .checks,
.section-body > * + .benefits{margin-top:clamp(28px, 4vw, 44px)}
@media (max-width:860px){
  .section-grid{grid-template-columns:1fr; gap:18px}
  .section-label{position:static; padding-top:0; display:flex; align-items:baseline; gap:10px}
  .section-label b{margin:0}
}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 1.6vw, 20px); align-items:stretch}
.card{
  padding:clamp(24px, 3.2vw, 38px); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
}
.form.card{background:var(--bg); box-shadow:var(--shadow)}
.card .kicker{margin-bottom:1.1em}
.card h3{font-size:clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height:1.1; letter-spacing:-.03em; margin-bottom:.7em}
.card-deep{
  background:var(--deep); border-color:var(--deep); color:var(--on-deep);
  --ink:var(--on-deep); --muted:var(--on-deep-muted); --line:var(--deep-line); --accent:var(--ice);
}
@media (max-width:760px){ .cards{grid-template-columns:1fr} }

.list{list-style:none; margin:1.3em 0; padding:0}
.list li{position:relative; padding:.62em 0; border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}

.list-plain li{padding-left:0}
.list-plain li::before{display:none}

.aside{
  margin-top:clamp(24px, 3vw, 36px); padding-left:1.2em; border-left:2px solid var(--accent-soft);
  color:var(--muted); max-width:var(--text);
}
.aside p{max-width:none}

.pull{
  margin:clamp(26px, 4vw, 40px) 0 0; padding:clamp(22px, 3vw, 32px);
  background:var(--accent-soft); border-radius:var(--r); max-width:44rem;
}
.pull p{font-size:clamp(1.2rem, 1.05rem + .8vw, 1.6rem); font-weight:500; line-height:1.35; max-width:none; letter-spacing:-.02em}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px); counter-reset:step}
.steps li{counter-increment:step; padding:clamp(22px, 2.6vw, 30px); background:var(--surface); border-radius:var(--r)}
.steps li::before{
  content:"Step " counter(step, decimal-leading-zero);
  display:block; margin-bottom:18px;
  font-family:var(--caps); font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.steps h3{margin-bottom:.5em; font-size:1.25rem; letter-spacing:-.025em}
.steps p{color:var(--muted)}
@media (max-width:560px){ .steps{grid-template-columns:1fr; row-gap:12px} }

/* ---------- pricing ---------- */
.price{width:100%; border-collapse:collapse; max-width:46rem}
.price th,.price td{padding:20px 0; border-top:1px solid var(--line); vertical-align:top; text-align:left; font-weight:400}
.price tr:last-child th,.price tr:last-child td{border-bottom:1px solid var(--line)}
.price th{padding-right:24px}
.price th b{display:block; font-size:1.12rem; font-weight:600; letter-spacing:-.01em}
.price th span{display:block; margin-top:3px; color:var(--muted); font-size:.95rem}
.price td{
  text-align:right; white-space:nowrap; font-weight:500; letter-spacing:-.03em;
  font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); line-height:1.1; font-variant-numeric:tabular-nums;
}
.price + p{margin-top:1.4em}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(28px, 4vw, 56px); align-items:start}
.about .card h3{font-weight:600; font-size:.76rem; font-family:var(--caps); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:0}
.about .list{margin-bottom:0}
.about .list li:last-child{border-bottom:0; padding-bottom:0}
.portrait{margin:0 0 20px; border-radius:var(--r); overflow:hidden; background:var(--surface)}
.portrait img{width:100%; aspect-ratio:4 / 5; object-fit:cover}
@media (max-width:860px){ .about{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(28px, 5vw, 64px); align-items:start}
.contact h2{max-width:11em}
.contact-copy p:first-of-type{margin-top:1.4rem}
@media (max-width:860px){ .contact{grid-template-columns:1fr} }

.form{display:grid; gap:18px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form label{display:block; margin-bottom:7px; font-size:.9rem; font-weight:600}
.form .opt{font-weight:400; color:var(--muted)}
.form input,.form textarea,.form select{
  width:100%; padding:.8em .95em; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s;
}
.form textarea{min-height:140px; resize:vertical; line-height:1.5}
.form input::placeholder,.form textarea::placeholder{color:var(--muted); opacity:.75}
.form input:focus,.form textarea:focus,.form select:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.form .btn{justify-self:start}
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{margin:0; font-size:.97rem}
.form-status:empty{display:none}
.form-status.ok{color:var(--accent); font-weight:600}
.form-status.err{color:var(--err)}
@media (max-width:560px){ .form .row{grid-template-columns:1fr} }

/* ---------- products ---------- */
.badge{
  display:inline-block; padding:.4em .9em; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  font-size:.72rem; font-family:var(--caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}

.checks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(20px, 3vw, 40px)}
.checks li{position:relative; padding:.8em 0 .8em 2em; border-top:1px solid var(--line)}
.checks li::before{
  content:""; position:absolute; left:3px; top:1.25em;
  width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
@media (max-width:700px){ .checks{grid-template-columns:1fr} }

.benefits{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 1.6vw, 20px)}
.benefits li{padding:clamp(20px, 2.6vw, 28px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.benefits strong{display:block; margin-bottom:.35em; font-size:1.08rem; letter-spacing:-.015em}
.benefits span{color:var(--muted)}
.benefits-3{grid-template-columns:repeat(3, 1fr)}
@media (max-width:820px){ .benefits,.benefits-3{grid-template-columns:1fr} }

.tiers{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 1.6vw, 20px); align-items:stretch}
.tier{position:relative; display:flex; flex-direction:column; padding:clamp(20px, 2.6vw, 28px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.tier-n{margin:0 0 .7em; font-family:var(--caps); font-size:.72rem !important; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent) !important}
.tier h3{font-size:1.35rem; font-weight:500; letter-spacing:-.02em; margin-bottom:.35em}
.tier .tier-q{font-size:1rem; color:var(--ink); font-weight:500; margin-bottom:.9em}
.tier .tier-price b{font-size:2rem; font-weight:500; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums}
.tier .tier-price{font-size:.9rem; color:var(--muted); margin-bottom:1.2em; padding-bottom:1.2em; border-bottom:1px solid var(--line)}
.tier p{font-size:.97rem; color:var(--muted)}
.tier .badge{position:absolute; top:-1.1em; left:clamp(20px, 2.6vw, 28px); background:var(--band); color:#fff}
.tier-best{border-color:var(--accent); background:var(--bg); box-shadow:var(--shadow)}
.tiers + p{margin-top:1.4em}
@media (max-width:820px){ .tiers{grid-template-columns:1fr; row-gap:22px} }

.note{
  margin-top:clamp(28px, 4vw, 44px); padding:18px 22px; max-width:46rem;
  background:var(--surface); border-radius:var(--r-sm); color:var(--muted); font-size:.94rem;
}
.note p{max-width:none}

/* ---------- closing band ---------- */
.band{background:var(--band); color:#fff; --ink:#fff; --muted:rgba(255,255,255,.82); --line:rgba(255,255,255,.25)}
.band .wrap{padding-block:clamp(56px, 8vw, 100px)}
.band h2{max-width:16em}
.band p{color:var(--muted); margin-top:1.3rem}
.band .btn{background:transparent; border-color:#fff; color:#fff}
.band .btn:hover{background:#fff; border-color:#fff; color:#0b1630}
.band a:not(.btn){color:#fff}

/* ---------- footer ---------- */
.site-footer{padding:clamp(40px, 6vw, 64px) 0 clamp(48px, 7vw, 80px); border-top:1px solid var(--line); font-size:.93rem; color:var(--muted)}
.band + .site-footer, main:has(.band:last-child) + .site-footer{border-top:0}
.footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 40px}
.footer-links{display:flex; flex-wrap:wrap; gap:6px 22px; list-style:none; margin:0; padding:0}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--ink); text-decoration:underline}
.site-footer .where{margin:14px 0 0}
.disc{margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:.84rem; line-height:1.6; max-width:60em}

@media print{
  .site-header{position:static}
  .nav,.nav-toggle,.signal{display:none !important}
}

/* ---- traffic light: who the program is for ---- */
.lights{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 1.6vw, 20px); align-items:start}
.light{padding:clamp(20px, 2.6vw, 28px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.light h3{display:flex; align-items:center; gap:.6em; margin-bottom:.4em}
.light h3::before{content:""; flex:none; width:14px; height:14px; border-radius:50%; background:var(--dot)}
.light > p{color:var(--muted); font-size:.97rem}
.light .list{margin:1em 0 0; font-size:.97rem}
.light .list li{padding-left:0}
.light .list li::before{display:none}
.light .list li:last-child{border-bottom:0; padding-bottom:0}
.light-red{--dot:#e25563}
.light-orange{--dot:#f0a23b}
.light-green{--dot:#3bab7c}
.section-body > * + .lights,
.section-body > * + .questions{margin-top:clamp(28px, 4vw, 44px)}
@media (max-width:900px){ .lights{grid-template-columns:1fr} }

/* ---- the seven questions ---- */
.questions{list-style:none; margin:0; padding:0; counter-reset:q; max-width:46rem}
.questions li{counter-increment:q; display:grid; grid-template-columns:2.6rem 1fr; align-items:baseline; padding:.85em 0; border-top:1px solid var(--line); font-size:1.08rem}
.questions li:last-child{border-bottom:1px solid var(--line)}
.questions li::before{content:counter(q); font-size:.8rem; font-weight:600; color:var(--accent)}

/* ---- 1-on-1 pointer on the home page ---- */
.split{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(28px, 4vw, 56px); align-items:start}
.split .card .list{margin-bottom:0}
.split .card .list li:last-child{border-bottom:0; padding-bottom:0}
@media (max-width:860px){ .split{grid-template-columns:1fr} }

/* ---- form inside the blue band ---- */
.band-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(28px, 5vw, 64px); align-items:start}
.band .form{padding:clamp(22px, 3vw, 32px); background:#fff; border-radius:var(--r); color:#0b1630; --ink:#0b1630; --muted:#596277; --line:#e3e7ee; --bg:#fff; --accent:#1d3a75; --accent-soft:#edf1f8}
.band .form .btn{background:#0b1630; border-color:#0b1630; color:#fff}
.band .form .btn:hover{background:#1a2d57; border-color:#1a2d57; color:#fff}
.band .form p{margin-top:0}
.band .form .form-status.ok{color:#1d3a75}
.band .form .form-status.err{color:#c0262d}
@media (max-width:860px){ .band-grid{grid-template-columns:1fr} }

/* ---- product picker ---- */
.products{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 1.6vw, 20px); margin-top:clamp(32px, 5vw, 56px)}
.product{
  display:flex; flex-direction:column; padding:clamp(22px, 2.8vw, 30px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
a.product:hover{border-color:var(--accent); color:var(--ink); box-shadow:var(--shadow); transform:translateY(-2px)}
.product .status{margin:0; font-family:var(--caps); font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.product h3{margin:.55em 0 .4em; font-size:clamp(1.3rem, 1.1rem + .8vw, 1.6rem); font-weight:500; line-height:1.12; letter-spacing:-.025em}
.product p{max-width:none; color:var(--muted); font-size:.97rem}
.product .more{margin:auto 0 0; padding-top:1.3em; font-size:.95rem; font-weight:600; color:var(--accent)}
.product .btn-outline{align-self:flex-start; margin-top:auto}
.product-featured{
  grid-column:span 2; background:var(--deep); border-color:var(--deep); color:var(--on-deep);
  --ink:var(--on-deep); --muted:var(--on-deep-muted); --accent:var(--ice);
}
.product-featured .status{color:var(--ice)}
.product-featured h3{font-size:clamp(1.8rem, 1.3rem + 2vw, 2.6rem)}
.product-featured p{font-size:1.05rem; max-width:26em}
@media (max-width:900px){ .products{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .products{grid-template-columns:1fr} .product-featured{grid-column:auto} }
.hero .signal{margin-top:clamp(28px, 4vw, 48px)}

/* ============================================================
   Paid area: login, my products, the programs themselves
   ============================================================ */
.app-main{padding-block:clamp(36px, 8vw, 88px)}
.app-card{
  max-width:30rem; margin:0 auto; padding:clamp(24px, 5vw, 40px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.app-card h1,.app-wide h1{font-size:clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); line-height:1.1; margin-bottom:.5em}
.app-card h2{font-size:1.35rem; font-weight:500; letter-spacing:-.02em; margin-bottom:.5em}
.app-card .form{margin-top:1.5rem}
.app-card > .btn{margin-top:1.5rem}
.app-card-flat{margin:2rem 0 0; max-width:none}
.app-wide{max-width:46rem; margin:0 auto}
.app-meta{color:var(--muted); font-size:.95rem}
.btn-block{display:flex; width:100%; min-height:50px}
.form input{min-height:48px}
.code-input{font-size:1.8rem !important; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums}
.app-error{margin:1rem 0 0; color:var(--err); font-weight:600}
.app-notice{margin:1rem 0 0; padding:12px 16px; background:var(--accent-soft); border-radius:var(--r-sm)}
.app-help{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4em .7em; margin-top:1.5rem; font-size:.94rem; color:var(--muted)}
.app-help p{width:100%; margin:0 0 .2em}
/* the code screen */
#code-paste{margin-top:.2rem}
.inline-form{display:inline; margin:0}
.linklike{background:none; border:0; padding:0; min-height:44px; font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:.18em; cursor:pointer}
.site-footer .linklike{color:var(--muted); text-decoration:none; min-height:0}
.site-footer .linklike:hover{color:var(--ink); text-decoration:underline}
.owned{display:grid; gap:16px; margin-top:2rem}
.owned-item{padding:clamp(22px, 4vw, 32px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.owned-item .status{margin:0; font-size:.72rem; font-family:var(--caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.owned-item h2{margin:.4em 0 1.2em; font-size:clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight:500; letter-spacing:-.025em}

/* ---------- the program: reading ---------- */
.reader{max-width:38rem; margin:0 auto; font-size:1.08rem; line-height:1.65}
.reader h1{font-size:clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height:1.1; margin-bottom:.7em}
.reader h2{font-size:1.45rem; margin:1.8em 0 .6em}
.reader h3{font-size:1.2rem; margin:1.8em 0 .5em; letter-spacing:-.015em}
.reader p{max-width:none}
.reader ul,.reader ol{margin:0 0 1.1em; padding-left:1.3em}
.reader li{margin:.35em 0}
.reader .kicker{margin-bottom:1em}
.reader > .btn{margin-top:2rem}
.reader-strong{font-weight:600; font-size:1.15rem}
.reader-next{margin-top:2.5rem}
.reader-back{display:inline-block; margin-top:1rem; min-height:44px; padding-top:10px}
.reader-links{display:flex; flex-direction:column; gap:.3rem; margin-top:2rem}
.reader-links a{min-height:44px; display:flex; align-items:center}
.chapter-media{margin:1.5em 0}
.chapter-media img,.chapter-media video{width:100%; height:auto; border-radius:var(--r-sm)}

/* traffic light blocks and notes */
.box{position:relative; margin:1.5em 0; padding:18px 20px 18px 24px; background:var(--surface); border-radius:var(--r-sm); overflow:hidden}
.box::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--tone, var(--accent))}
.box > :first-child{margin-top:0}
.box > :last-child{margin-bottom:0}
.box h3{display:flex; align-items:center; gap:.55em; margin-top:0}
.box-red{--tone:#C4412C}
.box-orange{--tone:#E39B26}
.box-green{--tone:#3E8E5A}
.box-red h3::before,.box-orange h3::before,.box-green h3::before{content:""; flex:none; width:16px; height:16px; border-radius:50%; background:var(--tone)}
.box-note{--tone:var(--accent)}

/* Chapter 1: the three choices */
.choice{margin-top:2.5rem}
.choice h2{margin-top:0}
.choice-btn{
  position:relative; display:flex; align-items:center; min-height:64px; margin-top:12px; padding:14px 18px 14px 50px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg); color:var(--ink);
  font-weight:600; text-decoration:none; line-height:1.3;
}
.choice-btn::before{content:""; position:absolute; left:18px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%; background:var(--tone)}
.choice-btn:hover{border-color:var(--tone); color:var(--ink)}
.choice-red{--tone:#C4412C}
.choice-orange{--tone:#E39B26}
.choice-green{--tone:#3E8E5A}

/* your chapters */
.progress-line{margin:1.5rem 0 .5rem; color:var(--muted)}
.progress{height:8px; border-radius:999px; background:var(--surface); overflow:hidden}
.progress span{display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .3s}
.chapter-list{list-style:none; margin:2rem 0 0 !important; padding:0 !important}
.chapter-list li{margin:0 0 10px}
.chapter-list a{
  display:grid; grid-template-columns:2.6rem 1fr auto; align-items:center; gap:12px; min-height:64px;
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); color:var(--ink); text-decoration:none;
}
.chapter-list a:hover{border-color:var(--accent); color:var(--ink)}
.chapter-no{font-weight:600; color:var(--accent)}
.chapter-name{display:block; font-weight:600; line-height:1.3}
.chapter-why{display:block; margin-top:2px; font-size:.9rem; color:var(--muted); line-height:1.4}
.chapter-state{font-size:.8rem; font-weight:600; color:#3E8E5A}
.chapter-list .is-read a{background:var(--surface)}
.guidance{margin-top:2.5rem; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r); font-size:.97rem}
.guidance p{margin:0 0 .4em}

/* ---------- the questions ---------- */
.questions{max-width:38rem; margin:0 auto}
.q-top{display:flex; justify-content:space-between; align-items:center; min-height:44px; margin-bottom:8px}
.q-back{min-height:44px; padding:0 4px; background:none; border:0; font:inherit; font-weight:600; color:var(--accent); cursor:pointer}
.q-count{font-size:.9rem; color:var(--muted)}
.q-progress{margin-bottom:28px}
.q-step + .q-step{margin-top:3rem}
.questions.is-stepped .q-step + .q-step{margin-top:0}
.q-title{font-size:clamp(1.5rem, 1.25rem + 1vw, 1.9rem); line-height:1.2; margin-bottom:.4em}
.q-hint{font-weight:400; color:var(--muted); font-size:.75em}
.q-why{font-size:.92rem; color:var(--muted); margin-bottom:1.5rem}
.q-part{border:0; margin:0 0 1.8rem; padding:0; min-width:0}
.q-part legend{padding:0; margin-bottom:.7rem; font-weight:600; font-size:1.02rem; line-height:1.35}
.q-missing{margin:.6rem 0 0; color:var(--err); font-weight:600; font-size:.95rem}
.q-nav{position:sticky; bottom:0; margin-top:1.5rem; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to bottom, transparent, var(--bg) 30%)}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.opts{display:grid; gap:10px}
.opts-row{grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr))}
.opt{position:relative; display:block; cursor:pointer}
.opt input{position:absolute; opacity:0; width:1px; height:1px}
.opt span{
  display:flex; align-items:center; min-height:56px; padding:12px 16px 12px 48px;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--bg); line-height:1.35;
}
.opt span::before{
  content:""; position:absolute; left:16px; top:50%; width:20px; height:20px; margin-top:-10px;
  border:2px solid var(--muted); border-radius:50%; background:var(--bg);
}
.opt input[type=checkbox] + span::before{border-radius:5px}
.opt input:checked + span{border-color:var(--accent); background:var(--accent-soft)}
.opt input:checked + span::before{border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--bg)}
.opt input[type=checkbox]:checked + span::before{box-shadow:none; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.opt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
/* setup: chips for the moves in a class, and the days that suit them */
.mini-q{margin:.6rem 0 .4rem; font-weight:600}
.class-work{display:grid; gap:4px}
.lm-text{display:block; font-style:normal}
.lm-text b{display:block; margin-bottom:2px}
[data-own-legs][hidden]{display:none}
.move-chips{display:flex; flex-wrap:wrap; gap:8px}
.move-chip, .day-pick{position:relative; cursor:pointer}
.move-chip{flex:0 0 auto; max-width:100%}
.move-chip input, .day-pick input{position:absolute; opacity:0; width:1px; height:1px}
.move-chip span{display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:.92rem}
.move-chip input:checked + span, .day-pick input:checked + span{border-color:var(--accent); background:var(--accent); color:var(--bg)}
.move-chip input:focus-visible + span, .day-pick input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.day-picks{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px}
.day-pick span{display:grid; gap:2px; justify-items:center; text-align:center; padding:10px 2px; border:1px solid var(--line); border-radius:12px}
.day-pick small{font-size:.68rem; line-height:1.15; opacity:.75; overflow-wrap:anywhere}

.chips{display:grid; grid-template-columns:repeat(6, 1fr); gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; width:1px; height:1px}
.chip span{display:flex; align-items:center; justify-content:center; min-height:48px; border:1.5px solid var(--line); border-radius:var(--r-sm); font-weight:600; font-variant-numeric:tabular-nums}
.chip input:checked + span{border-color:var(--accent); background:var(--accent); color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}

.check-row{display:flex; gap:12px; align-items:flex-start; margin:1.2rem 0 0; cursor:pointer; line-height:1.45}
.check-row input{flex:none; width:24px; height:24px; margin:0; accent-color:var(--accent)}
.field-hint{margin:.5rem 0 0; font-size:.88rem; color:var(--muted)}

/* the knee drawing */
.knee{display:grid; grid-template-columns:1.35fr 1fr; gap:12px; margin:0 0 1.5rem; padding:12px; background:var(--surface); border-radius:var(--r)}
.knee figure{margin:0}
.knee svg{width:100%; height:auto; display:block}
.knee figcaption{text-align:center; font-size:.82rem; color:var(--muted)}
.knee-leg{fill:var(--bg); stroke:var(--muted); stroke-width:2}
.knee-other{fill:none; stroke:var(--line); stroke-width:2; stroke-dasharray:5 5}
.knee-cap{fill:var(--line)}
.knee-small{font-size:12px; fill:var(--muted)}
.area{cursor:pointer; outline:none}
.area ellipse,.area rect{fill:rgba(61,91,217,.08); stroke:var(--accent); stroke-width:2; stroke-dasharray:4 4}
.area text{font-size:16px; font-weight:700; fill:var(--accent); text-anchor:middle; pointer-events:none}
.area:hover ellipse,.area:hover rect,.area:focus-visible ellipse,.area:focus-visible rect{fill:rgba(61,91,217,.2)}
.area.is-picked ellipse,.area.is-picked rect{fill:var(--accent); stroke-dasharray:none; fill-opacity:.85}
.area.is-picked text{fill:#fff}

/* checkout */
.checkout-price{font-size:2.2rem; font-weight:500; letter-spacing:-.03em; margin:.2em 0 .6em}

/* ---------- one-program offer ---------- */
.hero-aside{margin-top:1.1rem; font-size:.95rem; color:var(--muted)}
.offer{max-width:34rem; padding:clamp(24px, 4vw, 36px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.offer h2{margin-bottom:.1em}
.offer .kicker{margin-bottom:1em}
.offer-price{font-size:2.4rem; font-weight:500; letter-spacing:-.03em; margin:.1em 0 .5em}
.offer .btn{margin-top:1.4rem}
.offer-note{margin:.8rem 0 0; text-align:center}
.offer-aside{margin-top:1.2rem; font-size:.95rem; color:var(--muted)}
.form .check-row{display:flex; margin:0; font-size:.95rem; font-weight:400}
.form .check-row input{width:24px; min-height:0; height:24px; padding:0; flex:none}
.knee-hint{margin:-.8rem 0 1.2rem; text-align:center}
.reader .box h2{display:flex; align-items:center; gap:.55em; margin-top:0; font-size:1.2rem}
.box-red h2::before,.box-orange h2::before,.box-green h2::before{content:""; flex:none; width:16px; height:16px; border-radius:50%; background:var(--tone)}

/* ---------- chapters: pictures, stories, "try this now" ---------- */
.reader-time{margin:-.6em 0 1.4em; font-size:.9rem; color:var(--muted)}
.chapter-media{margin:1.6em 0; padding:10px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm)}
.chapter-media img,.chapter-media video{border-radius:6px}
.box-story{--tone:#2C6E78; background:#EAF0EE; color:#18323A}
.box-try{--tone:#E39B26; background:#FBF1DF; color:#3A2A0C}
.box-story a,.box-try a{color:inherit}
@media (prefers-color-scheme:dark){
  .box-story{background:#14282c; color:#dbe9e6}
  .box-try{background:#2e2410; color:#f3e3c2}
}

/* ============================================================
   The webapp: tab bar, home, marking, sheets, placeholders
   ============================================================ */
.has-tabs{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.has-tabs .app-main{padding-block:clamp(24px, 6vw, 56px)}
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(4, 1fr);
  background:var(--header-bg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
.tabs a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:60px; font-size:.72rem; font-weight:600; color:var(--muted); text-decoration:none}
.tabs svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tabs a[aria-current]{color:var(--accent)}
@media (min-width:900px){
  .tabs{left:50%; right:auto; transform:translateX(-50%); width:min(560px, 100%); bottom:16px; border:1px solid var(--line); border-radius:999px; overflow:hidden; padding-bottom:0}
}

/* home */
.home-goal{margin:0 0 1.6rem; padding:16px 18px; background:var(--accent-soft); border-radius:var(--r-sm); font-size:1.1rem; font-weight:500; line-height:1.35}
.home-goal span{display:block; margin-bottom:4px; font-size:.72rem; font-family:var(--caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.home-next{display:block; margin:0 0 1rem; padding:16px 18px; border:1.5px solid var(--accent); border-radius:var(--r); color:var(--ink); text-decoration:none}
.home-next strong,.home-next span{display:block}
.home-next span{color:var(--muted); font-size:.95rem}
.home-cards{display:grid; gap:12px}
.home-card{display:block; padding:22px 20px; min-height:112px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); text-decoration:none}
.home-card:hover{border-color:var(--accent); color:var(--ink)}
.home-card h2{margin:0 0 .25em; font-size:1.5rem}
.home-card p{margin:0 0 .8em; color:var(--muted); font-size:.95rem}
.home-card .progress{display:block; background:var(--bg)}
.home-links{list-style:none; margin:1.4rem 0 0 !important; padding:0 !important}
.home-links li{margin:0; border-top:1px solid var(--line)}
.home-links li:last-child{border-bottom:1px solid var(--line)}
.home-links a{display:flex; justify-content:space-between; align-items:center; min-height:52px; color:var(--ink); text-decoration:none; font-weight:500}
.home-links a::after{content:"\203A"; color:var(--muted); font-size:1.3rem}
.home-links a span{margin-left:auto; margin-right:10px; padding:2px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.8rem; font-weight:600}

/* reading */
.reader-tip{margin:.6em 0 1.4em; font-size:.88rem; color:var(--muted)}
.reader-content ::selection{background:#FFE89A; color:#0b1630}
mark.hl{background:#FFE89A; color:#0b1630; border-radius:3px; padding:.08em 0; cursor:pointer; -webkit-box-decoration-break:clone; box-decoration-break:clone}
mark.hl.has-note{border-bottom:2px dotted #a8791a}
sup.fn{font-size:.72em; line-height:0}
sup.fn a{display:inline-block; min-width:1.5em; margin-left:2px; padding:.15em .3em; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:600; text-align:center; text-decoration:none}
details.sources{margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.86rem; color:var(--muted)}
details.sources summary{cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center}
details.sources ol{padding-left:1.4em}
.chapter-placeholder{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:150px; padding:20px; background:var(--surface); border:1.5px dashed var(--line); text-align:center}
.chapter-placeholder span{font-size:.72rem; font-family:var(--caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.chapter-placeholder figcaption{font-size:.92rem; color:var(--muted); line-height:1.4}
.chapter-qr{margin:1.5em auto; max-width:220px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm)}
.chapter-qr svg{display:block; width:100%; height:auto}

/* the small menus and the sheets */
.mark-menu{position:fixed; z-index:60; display:flex; background:#0b1630; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25); overflow:hidden}
.mark-menu[hidden]{display:none}
.mark-menu button{min-height:44px; padding:0 16px; background:none; border:0; color:#fff; font:inherit; font-size:.95rem; font-weight:600; cursor:pointer}
.mark-menu button + button{border-left:1px solid rgba(255,255,255,.2)}
dialog.sheet{width:min(34rem, calc(100% - 24px)); margin:auto auto 12px; padding:22px; border:0; border-radius:var(--r); background:var(--bg); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.sheet::backdrop{background:rgba(31,39,64,.45)}
dialog.sheet h2{margin:0 0 .5em; font-size:1.25rem}
dialog.sheet textarea{width:100%; padding:.8em .95em; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.sheet-quote{margin:0 0 .8em; padding:8px 10px; background:#FFE89A; color:#0b1630; border-radius:6px; font-size:.92rem; max-height:6.5em; overflow:auto}
.sheet-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px}
#source-text{font-size:.95rem; overflow-wrap:anywhere}
@media (min-width:700px){ dialog.sheet{margin:auto} }

/* my marked */
.marked-alt{margin:.8rem 0 0; text-align:center; font-size:.95rem}
.marked-chapter{font-size:1.15rem !important; margin:2rem 0 .8rem !important}
.marked-item{margin:0 0 14px; padding:14px; border:1px solid var(--line); border-radius:var(--r-sm)}
.marked-quote{display:block; text-decoration:none; line-height:1.5}
.marked-quote mark{background:#FFE89A; color:#0b1630; border-radius:3px; padding:.08em .15em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.marked-note{margin-top:10px}
.marked-note textarea{width:100%; padding:.6em .8em; font:inherit; font-size:.95rem; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.marked-actions{display:flex; gap:18px; margin-top:2px}

/* questions: extra field types */
.follow-up{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px}
.follow-up[hidden]{display:none}
.follow-up input,.follow-up select{min-height:48px; padding:0 12px; font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm)}
.follow-up input{width:5.5rem}
.q-example{margin:0 0 .8rem; color:var(--muted); font-size:.95rem}
.q-text{width:100%; padding:.8em .95em; font:inherit; font-size:1.05rem; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm)}
.plan-questions .q-part{margin-bottom:2.2rem}
.plan-questions legend{font-size:1.1rem}
.check-row a{color:var(--accent)}
.btn-danger{background:var(--err); border-color:var(--err); color:#fff}
.btn-danger:hover{background:#8f1c22; border-color:#8f1c22; color:#fff}
.install-box{margin:1.5rem 0}
.addon{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--bg); cursor:pointer; font-size:.95rem; font-weight:400 !important; line-height:1.45}
.addon input{flex:none; width:24px !important; height:24px; min-height:0 !important; padding:0; margin:0; accent-color:var(--accent)}
.addon strong{display:block; margin-bottom:2px}
.addon em{font-style:normal; color:var(--accent)}
.addon:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}

/* Privacy and terms pages */
.legal h2{margin-top:2.2em}
.legal h3{margin-top:1.6em}
mark.todo{background:#ffe9a8; color:#3a2c00; padding:.1em .45em; border-radius:6px; font-weight:600}
mark.todo::before{content:"To fill in: "; font-weight:400}

/* ============================================================
   The training part
   ============================================================ */
.training h2{margin-top:2.2rem}
.subnav{display:flex; gap:8px; margin:0 calc(var(--gutter) * -1) 1.4rem; padding:2px var(--gutter) 6px; overflow-x:auto; scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none; display:flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:.92rem; font-weight:600; text-decoration:none; white-space:nowrap}
.subnav a[aria-current]{background:var(--accent); border-color:var(--accent); color:#fff}

.advice{margin:0 0 1.4rem; padding:16px 18px; border-radius:var(--r-sm); background:var(--surface); border-left:5px solid var(--line)}
.advice p{margin:0 0 .6em} .advice p:last-child,.advice form:last-child{margin-bottom:0}
.advice-extra{padding-top:.6em; border-top:1px solid rgba(0,0,0,.08)}
.advice-green{background:#E7F4EC; border-left-color:#3B9C6E; color:#16382a}
.advice-orange{background:#FBF1DF; border-left-color:#E39A2D; color:#3A2A0C}
.advice-red{background:#FBE9E7; border-left-color:#D2544B; color:#4a1612}
.card-form{margin:0 0 1.4rem; padding:18px; border:1.5px solid var(--accent); border-radius:var(--r)}
.card-form h2{margin:0 0 .2em !important; font-size:1.3rem}
.card-form .q-part{margin:1.2rem 0}
.week-line{display:flex; flex-direction:column; gap:2px; margin:0 0 1rem}
.week-line span{color:var(--muted); font-size:.92rem}
.own-pick{display:flex; flex-wrap:wrap; gap:8px}
.own-pick a{padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:.9rem; text-decoration:none; color:var(--ink)}
.own-pick a[aria-current]{border-color:var(--accent); background:var(--accent-soft)}

.ex-list{list-style:none; margin:1rem 0 0 !important; padding:0 !important}
.ex{display:grid; grid-template-columns:auto 1fr; gap:14px; margin:0 0 10px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg)}
.ex.lib{grid-template-columns:1fr}
.ex.is-done{background:var(--surface)}
.ex.is-done h3{text-decoration:line-through; text-decoration-color:var(--muted)}
.ex h3{margin:0; font-size:1.08rem}
.ex-amount{margin:.15em 0 0; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums}
.ex-how,.ex-options,.ex-top{margin:.4em 0 0; font-size:.92rem; color:var(--muted); line-height:1.45}
.ex-top{color:#8a5a0a}
.ex details{margin-top:.5em}
.ex summary{display:inline-flex; align-items:center; min-height:40px; font-size:.9rem; font-weight:600; color:var(--accent); cursor:pointer}
.ex .ex-video{min-height:110px; margin:.6em 0}
.ex .btn{margin-top:.7em}
.ex-weight{display:block; margin-top:.8em; font-size:.9rem; font-weight:600}
.ex-weight input{display:block; width:8rem; min-height:44px; margin-top:6px; padding:.5em .8em; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.ex-tick{position:relative; display:block; width:44px; height:44px; cursor:pointer}
.ex-tick input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.ex-tick span[aria-hidden]{display:block; width:36px; height:36px; margin:4px; border:2px solid var(--muted); border-radius:50%; background:var(--bg)}
.ex-tick input:checked + span{border-color:#3B9C6E; background:#3B9C6E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.ex-tick input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.cheer{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:50; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); margin:0; padding:12px 18px; border-radius:var(--r); background:#0b1630; color:#fff; font-weight:600; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cheer.is-in{animation:cheer .35s ease-out}
@keyframes cheer{from{opacity:0; transform:translate(-50%, 12px)} to{opacity:1; transform:translate(-50%, 0)}}

.pain-chips{grid-template-columns:repeat(11, 1fr); gap:4px}
.pain-chips .chip span{min-height:44px; font-size:.95rem}
.chip-g input:checked + span{background:#3B9C6E; border-color:#3B9C6E}
.chip-o input:checked + span{background:#E39A2D; border-color:#E39A2D}
.chip-r input:checked + span{background:#D2544B; border-color:#D2544B}
.chip-g span{border-bottom-color:#3B9C6E} .chip-o span{border-bottom-color:#E39A2D} .chip-r span{border-bottom-color:#D2544B}
.pain-chips .chip span{border-bottom-width:3px}
.pain-scale{display:flex; justify-content:space-between; margin:6px 0 0; font-size:.8rem; color:var(--muted)}
.chips.days{grid-template-columns:repeat(7, 1fr); gap:4px}
.chips.days .chip span{font-size:.85rem}

.log-row{display:grid; gap:12px; padding:14px; border:1px solid var(--line); border-radius:var(--r-sm)}
.log-row[hidden]{display:none}
.log-numbers{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.log-other{border-top:1px solid var(--line)}
.log-other:last-of-type{border-bottom:1px solid var(--line)}
.log-other summary{display:flex; align-items:center; min-height:52px; font-weight:600; cursor:pointer}
.log-other .log-numbers{padding-bottom:16px}
.form select{width:100%; min-height:48px}

.phases,.impact{list-style:none; margin:1.2rem 0 .6rem !important; padding:0 !important}
.phases li{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line)}
.phases p{margin:.3em 0 0; font-size:.95rem; color:var(--muted)}
.phase-no{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:2px solid var(--line); font-weight:600; color:var(--muted)}
.is-now .phase-no{border-color:var(--accent); background:var(--accent); color:#fff}
.is-done .phase-no{border-color:#3B9C6E; color:#3B9C6E}
.phase-weeks{font-size:.85rem; color:var(--muted)}
.phase-now{display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.76rem; font-weight:600; vertical-align:middle}
.impact{counter-reset:impact}
.impact li{counter-increment:impact; display:flex; align-items:center; gap:10px; min-height:44px; margin:0; padding:6px 12px; border-top:1px solid var(--line)}
.impact li::before{content:counter(impact); flex:none; width:1.6em; font-weight:600; color:var(--muted)}
.impact .is-now{background:var(--accent-soft); border-radius:var(--r-sm); border-top-color:transparent; font-weight:600}
.impact .is-locked{color:var(--muted)}
.why{margin:1.2rem 0; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-sm)}
.why summary,.checkin summary{display:flex; align-items:center; min-height:52px; font-weight:600; cursor:pointer}
.why p{font-size:.97rem}
.plan-items{list-style:none; margin:1rem 0 !important; padding:0 !important}
.plan-items li{display:grid; gap:10px; padding:12px 0; border-top:1px solid var(--line); margin:0}
.plan-items li > div{display:flex; justify-content:space-between; gap:12px}
.plan-items li > div span{font-weight:600; color:var(--accent); white-space:nowrap}
.swap{display:flex; gap:8px}
.swap select{flex:1; min-width:0; min-height:44px; padding:0 .6em; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.home-links .linklike{display:flex; align-items:center; width:100%; min-height:52px; padding:0; text-align:left; font-weight:500; color:var(--ink); text-decoration:none}
.home-links .inline-form{display:block}

.breathe{display:flex; flex-direction:column; align-items:center; margin:1.5rem 0; padding:28px 16px; background:var(--surface); border-radius:var(--r)}
.breathe-circle{width:200px; height:200px; border-radius:50%; background:var(--accent); opacity:.85; transform:scale(.45); transition:transform 4s ease-in-out}
.breathe-circle.is-big{transform:scale(1)}
.breathe-word{margin:16px 0 0; font-size:1.4rem; font-weight:600}
.breathe-time{margin:4px 0 0; min-height:1.4em; color:var(--muted); font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .breathe-circle{transition:none} .cheer.is-in{animation:none} }

.graph{margin:1rem 0; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg)}
.graph svg{display:block; width:100%; height:auto}
.graph-grid{stroke:var(--line); stroke-width:1}
.graph-label{font-size:10px; fill:var(--muted)}
.graph-line{fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.graph-line.graph-after{stroke:var(--accent)} .graph-dot.graph-after{fill:var(--accent)}
.graph-line.graph-morning{stroke:#E39A2D} .graph-dot.graph-morning{fill:#E39A2D}
.graph figcaption{margin-top:8px; font-size:.85rem; color:var(--muted)}
.key{display:inline-flex; align-items:center; gap:6px; margin-right:12px; color:var(--ink); font-weight:600}
.key::before{content:""; width:10px; height:10px; border-radius:50%}
.key-after::before{background:var(--accent)} .key-morning::before{background:#E39A2D}
.bars{display:grid; grid-template-columns:repeat(12, 1fr); gap:4px; align-items:end; height:120px; margin:1rem 0 .4rem}
.bar{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%}
.bar span{display:block; width:100%; min-height:3px; border-radius:4px 4px 0 0; background:var(--accent)}
.bar.is-spike span{background:#E39A2D}
.bar b{margin-top:4px; font-size:.75rem; font-weight:600; color:var(--muted)}
.scores{width:100%; border-collapse:collapse; margin:1rem 0 .4rem}
.scores th,.scores td{padding:10px 6px; border-top:1px solid var(--line); text-align:left; font-weight:400}
.scores thead th{font-size:.8rem; font-weight:600; color:var(--muted); border-top:0}
.scores td{width:4.5rem; font-weight:600; font-variant-numeric:tabular-nums}
.checkin{margin:.6rem 0; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-sm)}
.checkin[open]{padding-bottom:16px}
.score-row{display:grid; grid-template-columns:1fr 6.5rem; align-items:center; gap:12px}
.score-row label{margin:0 !important}
.log-list{list-style:none; margin:1rem 0 0 !important; padding:0 !important}
.log-list li{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; margin:0; padding:12px 0; border-top:1px solid var(--line)}
.log-list div{display:flex; flex-direction:column; gap:2px; min-width:0}
.log-list span:not(.dot){font-size:.95rem} .log-list small{color:var(--muted)}
.log-list .linklike{font-size:.85rem; color:var(--muted)}
.dot{width:12px; height:12px; margin-top:6px; border-radius:50%; background:var(--line)}
.dot-green{background:#3B9C6E} .dot-orange{background:#E39A2D} .dot-red{background:#D2544B}
.dot-pending{background:transparent; border:2px solid var(--muted)}
.home-banner{display:block; margin:0 0 1rem; padding:16px 18px; border-radius:var(--r); background:var(--accent); color:#fff; text-decoration:none}
.home-banner:hover{color:#fff}
.home-banner strong,.home-banner span{display:block}
.home-banner span{opacity:.9; font-size:.95rem}
@media (prefers-color-scheme:dark){
  .advice-green{background:#12281d; color:#d5efe0}
  .advice-orange{background:#2e2410; color:#f3e3c2}
  .advice-red{background:#331614; color:#f6d6d2}
  .ex-top{color:#e0b565}
}
.training .app-notice{margin:0 0 1rem}

/* ---------- training app, version 2: setup, today cards, three parts ---------- */
.q-count{margin:-.4rem 0 1.2rem; font-size:.9rem; color:var(--muted)}
.setup h2{margin-top:2.4rem}
.week-row{display:grid; grid-template-columns:6.5rem 1fr; align-items:center; gap:12px}
.week-row label{margin:0 !important}
.pick{border-top:1px solid var(--line)}
.pick:last-of-type{border-bottom:1px solid var(--line)}
.pick summary{display:flex; align-items:center; min-height:52px; font-weight:600; cursor:pointer}
.pick[open]{padding-bottom:14px}
.pick-row{display:grid; grid-template-columns:1fr 4.2rem 4.2rem; align-items:end; gap:8px; padding:8px 0; border-top:1px solid var(--line)}
.pick-row .check-row{align-self:center; margin:0 !important}
.pick-row .mini{margin:0 !important; font-size:.75rem !important; font-weight:600; color:var(--muted)}
.pick-row .mini input{min-height:44px; padding:.4em .5em; text-align:center}
.pick .log-row{margin-top:10px}
.log-numbers.two{grid-template-columns:repeat(2, 1fr)}
.today-cards{display:grid; gap:10px; margin:0 0 1.6rem}
.today-card{display:grid; gap:2px; padding:16px 18px; border:1px solid var(--line); border-left:5px solid var(--line); border-radius:var(--r); background:var(--bg); color:var(--ink); text-decoration:none}
.today-card:hover{border-color:var(--accent); color:var(--ink)}
.today-card strong{font-size:1.1rem}
.today-card span{font-size:.92rem; color:var(--muted)}
.today-part{font-size:.72rem !important; font-family:var(--caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent) !important}
.today-card.is-main{border-left-color:var(--accent); background:var(--accent-soft)}
.today-card.is-done{border-left-color:#3B9C6E; background:var(--surface)}
.today-card.is-waiting{border-left-color:#E39A2D}
.today-card.is-rest strong{font-weight:500}
.goal-why{display:block; margin-top:6px; font-size:.92rem; font-weight:400; font-style:normal; color:var(--muted)}
.ex-from{margin:0 0 2px; font-size:.72rem; font-family:var(--caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.ex-amount span{margin-left:8px; padding:2px 8px; border-radius:999px; background:var(--accent-soft); font-size:.82rem}
.ex-note{margin:.4em 0 0; font-size:.9rem; color:var(--muted)}
.chip-n input:checked + span{background:var(--accent); border-color:var(--accent)}
.pain-chips .chip-n span{border-bottom-color:var(--line)}
#sleep-text{margin:-.6rem 0 1.4rem}
#sleep-text[hidden],#holds-questions[hidden],#settled[hidden]{display:none}
.week-table th{width:3.2rem; font-weight:600}
.week-table td{width:auto; font-weight:400}
.week-table td:last-child{color:var(--muted); font-size:.92rem}
.week-table td strong{color:var(--accent)}
.week-table .is-today th,.week-table .is-today td{background:var(--accent-soft)}
.plan-items li .field-hint{margin:0}
.cheer{left:16px; right:16px; width:auto; max-width:none; transform:none}
.cheer.is-in{animation:cheer2 .35s ease-out}
@keyframes cheer2{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* ---------- feedback of 8 October: quieter screens ---------- */
.fold{margin:.6rem 0; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-sm)}
.fold > summary{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; font-weight:600; cursor:pointer; list-style:none}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::after{content:"+"; flex:none; font-size:1.3rem; font-weight:400; color:var(--muted)}
.fold[open] > summary::after{content:"\2212"}
.fold > summary span{margin-left:auto; font-weight:400; font-size:.9rem; color:var(--muted)}
.fold[open]{padding-bottom:14px}
.fold .box{margin:.4em 0 .6em}
.check .btn{margin-top:1.4rem}
.check-other{margin:1rem 0 0; font-size:.9rem; color:var(--muted); text-align:center}
.check-other a{color:var(--muted)}
.paid{display:flex; align-items:center; gap:12px; margin:0 0 1.6rem; font-size:1.6rem; font-weight:600; line-height:1.2; color:#2E8B57}
.paid span{flex:none; width:36px; height:36px; border-radius:50%; background:#2E8B57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.start-line{font-size:1.15rem; line-height:1.5}
.start .btn{margin:1rem 0 1.6rem}
.back-link{display:inline-flex; align-items:center; min-height:44px; margin-bottom:.4rem; font-weight:600; text-decoration:none}
.q-range{display:block; margin-top:.2em; font-size:1.05rem; font-weight:400; color:var(--muted)}
.chips-number .chip span{min-height:60px; font-size:1.3rem}
.chips-fold{margin-top:1.4rem}
.chapter-list a{grid-template-columns:1.8rem 1fr auto}
.chapters-fold{margin-top:1.4rem}
.chapters-fold .chapter-list{margin-top:.4rem !important}
.knee{grid-template-columns:1fr 1fr}

/* training: everything visible in one glance */
.training h1{margin-bottom:.15em}
.sub-line{margin:0 0 1.1rem; font-size:.95rem; color:var(--muted)}
.subnav-5{display:grid; grid-template-columns:repeat(5, 1fr); gap:0; margin:0 0 1.4rem; padding:3px; overflow:visible; background:var(--surface); border-radius:12px}
.subnav-5 a{justify-content:center; min-height:40px; padding:0 2px; border:0; border-radius:9px; font-size:.78rem; text-align:center; white-space:normal; line-height:1.15}
.subnav-5 a[aria-current]{background:var(--bg); color:var(--accent); box-shadow:var(--shadow)}
.rows{list-style:none; margin:0 0 1.2rem !important; padding:0 !important; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.rows li{margin:0}
.rows li + li{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; min-height:64px; padding:0 16px; color:var(--ink); text-decoration:none; background:var(--bg)}
.row::after{content:"\203A"; color:var(--muted); font-size:1.4rem}
.row strong{font-size:1.08rem}
.row-status{font-size:.9rem; color:var(--muted)}
.row-dot{width:14px; height:14px; border-radius:50%; border:2px solid var(--line)}
.row.is-now .row-dot,.row.is-main .row-dot{border-color:var(--accent); background:var(--accent)}
.row.is-main{background:var(--accent-soft)}
.row.is-main .row-status,.row.is-now .row-status{color:var(--accent); font-weight:600}
.row.is-done .row-dot{border-color:#3B9C6E; background:#3B9C6E}
.row.is-done .row-status{color:#3B9C6E; font-weight:600}
.row.is-wait .row-dot{border-color:#E39A2D}
.goal-line{margin:0 0 .8rem; font-size:.95rem}
.goal-line span{margin-right:6px; font-size:.72rem; font-family:var(--caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.more-links{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; font-size:.92rem}
.more-links a{min-height:40px; display:inline-flex; align-items:center}

.ex{align-items:center; padding:8px 12px; gap:8px}
.ex details.ex-body{margin:0; min-width:0}
.ex details.ex-body > summary{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; color:var(--ink); font-size:1rem; font-weight:400; list-style:none; cursor:pointer}
.ex details.ex-body > summary::-webkit-details-marker{display:none}
.ex details.ex-body > summary strong{font-weight:600; line-height:1.25}
.ex details.ex-body > summary .ex-amount{flex:none; max-width:55%; margin:0; font-size:.92rem; text-align:right; text-wrap:balance}
.ex details.ex-body[open]{padding-bottom:8px}
.ex details.ex-body[open] > summary strong{color:var(--accent)}
.ex.is-done details.ex-body > summary strong{text-decoration:line-through; text-decoration-color:var(--muted)}
.ex-flag{display:inline-block; width:8px; height:8px; margin-left:6px; border-radius:50%; background:#E39A2D; vertical-align:middle}
.session .pain{margin:1.4rem 0}
.breathe{padding:20px 16px; margin:0 0 1rem}
.breathe-circle{width:150px; height:150px}
.breathe-minutes{display:flex; gap:8px; margin:12px 0}
.breathe-minutes .chip span{min-height:40px; padding:0 14px; font-size:.9rem}
.week-table{margin-top:0}
.week-table th,.week-table td{padding:8px 6px}
.ex{align-items:start}
.ex .ex-tick{margin-top:2px}
.products-one{grid-template-columns:minmax(0, 48rem)}

/* ---------- feedback of 8 October, second round ---------- */
.reader-short{margin:.6em 0 0; padding:12px 16px; background:var(--accent-soft); border-radius:var(--r-sm); font-size:.97rem}
.chapters-fold .steps{display:block; margin:.2rem 0 .4rem; padding-left:1.3em; list-style:decimal}
.chapters-fold .steps li{margin:0 0 .7em; padding-top:0; border-top:0}
.chapters-fold .steps li::before{display:none}
.day-tabs{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:0 0 .8rem}
.day-tabs a{display:flex; align-items:center; justify-content:center; min-height:44px; border:1.5px solid var(--line); border-radius:var(--r-sm); color:var(--ink); font-weight:600; font-size:.95rem; text-decoration:none}
.day-tabs a[aria-current]{border-color:var(--accent); background:var(--accent); color:#fff}
.day-plan{margin:0 0 1.2rem}
.day-activity{margin:0 0 .7rem; font-size:1.25rem; font-weight:600; line-height:1.3}
.day-activity span{display:block; margin-bottom:2px; font-size:.72rem; font-family:var(--caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.day-plan .rows{margin-bottom:.6rem !important}
.quote-line{margin:0 0 1.2rem; padding-left:14px; border-left:3px solid var(--accent); font-size:.95rem; color:var(--muted)}
.plan-head{padding:14px 0 4px !important; border-top:0 !important; font-weight:600; font-size:.78rem; font-family:var(--caps); letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.tick-fixed{display:block; width:36px; height:36px; margin:4px; border-radius:50%; background:var(--line)}
.own-fields{display:grid; gap:12px}
.own-fields[hidden]{display:none}
.sport-row{margin:0}
.sport-row legend{padding:0 6px; font-weight:600}
.workout-fold [data-rows]{display:grid; gap:12px}
.setup .goal-line{margin-top:1.4rem}
.tick-fixed{background:#3B9C6E url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M5 10.5l3.2 3L15 6.5%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/22px no-repeat}
.day-line{margin:0 0 .5rem; font-size:.97rem}
.inbox-body{margin:.6rem 0; padding:12px; background:var(--surface); border-radius:var(--r-sm); font:inherit; font-size:.92rem; white-space:pre-wrap; overflow-wrap:anywhere}
.tag{margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--surface); color:var(--muted); font-size:.72rem; font-weight:600; font-style:normal; vertical-align:middle}
.test-set{margin:.6em 0; padding:12px; border-radius:var(--r-sm); background:var(--accent-soft); font-size:.92rem}
.test-set p{margin:0 0 .6em}
.test-set label{display:block; font-weight:600}
.test-set input{display:block; width:8rem; min-height:44px; margin-top:6px; padding:.5em .8em; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.ex-weight select{display:block; width:100%; min-height:44px; margin-top:6px; padding:.4em .6em; font:inherit; font-weight:400; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.inline-actions{display:flex; flex-wrap:wrap; gap:8px; margin:.6em 0}
.inline-actions form{margin:0}
.sport-back{margin-top:10px}
.sport-back .log-numbers{margin-top:8px}
.dash-tiles{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin:1rem 0 .6rem}
.dash-tiles div{padding:14px 16px; background:var(--soft, #f3f5fb); border-radius:var(--r-md, 14px)}
.dash-tiles strong{display:block; font-size:1.5rem; line-height:1.2; font-variant-numeric:tabular-nums}
.dash-tiles span{font-size:.85rem; color:var(--muted)}
.dash h2{display:flex; align-items:baseline; gap:.5em}
.dash-count{font-size:.85rem; font-weight:400; color:var(--muted)}
.dash-table th{width:auto}
.dash-table td{width:auto; text-align:right; white-space:nowrap}
.dash-table td small{font-weight:400; color:var(--muted); margin-left:.3em}
.dash-bar{display:block; height:6px; margin-top:6px; background:var(--line); border-radius:3px; overflow:hidden}
.dash-bar span{display:block; height:100%; background:var(--accent); border-radius:3px}
.dash-pay td{text-align:left; white-space:normal; font-weight:400; word-break:break-word}
@media (min-width:700px){ .dash-tiles{grid-template-columns:repeat(3, 1fr)} }
.dash-learn td{font-weight:400; white-space:normal}
.dash-learn td:nth-child(2){font-weight:600}
.week-days{margin:1rem 0 .3rem; border-top:1px solid var(--line)}
.week-day{border-bottom:1px solid var(--line)}
.week-day summary{display:grid; grid-template-columns:3.2rem 1fr auto 1rem; gap:8px; align-items:center; padding:12px 6px; cursor:pointer; list-style:none}
.week-day summary::-webkit-details-marker{display:none}
.week-day summary::after{content:"+"; color:var(--muted); text-align:right}
.week-day[open] summary::after{content:"\2212"}
.week-day summary em{font-style:normal; font-size:.9rem; color:var(--muted)}
.week-day summary em b{color:var(--accent)}
.week-day.is-today{background:var(--accent-soft)}
.week-day > p, .week-day > ul{margin:0 6px 12px}
.week-day > p{font-size:.95rem}

/* the weight box on Build: always in view, + and - for one step */
.ex-kg{grid-column:2; display:flex; align-items:center; gap:6px; margin:0 0 6px}
.ex-kg input{width:4.6rem; min-height:44px; padding:.4em .5em; font:inherit; font-weight:600; text-align:center; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); font-variant-numeric:tabular-nums}
.kg-btn{width:44px; height:44px; padding:0; font:inherit; font-size:1.3rem; line-height:1; color:var(--accent); background:var(--accent-soft); border:0; border-radius:50%; cursor:pointer}
.kg-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.kg-unit{font-size:.9rem; color:var(--muted)}
.ex-kg{flex-wrap:wrap}
.kg-tag{flex-basis:100%; margin:0; font-size:.8rem; color:var(--muted)}
.kg-tag b{font-weight:600; color:#8a5a0a}
.log-hard{margin-top:10px}

/* checkout: the discount code */
.code-box{display:flex; gap:8px}
.code-box input{flex:1; min-width:0; text-transform:uppercase}
.code-box .btn{flex:none; margin:0}
.code-ok{margin:.5em 0 0; font-size:.92rem; font-weight:600; color:#2f7d58}

/* the footer closes the page in navy, like the hero opens it */
.site-footer{background:#0b1630; color:#aab4cc; border-top:0; --ink:#fff; --muted:#aab4cc; --line:rgba(255,255,255,.14)}
.site-footer .brand,.site-footer .brand:hover{color:#fff}
.site-footer .brand-tag{color:#aab4cc}
@media (prefers-color-scheme:dark){ .site-footer{background:#040814} }


/* ============================================================
   Round three: a glass header, one button, a light hero with a photo
   ============================================================ */

/* ---- the header: transparent, full width, not sticky. The glass is a slight blur of what is behind it ---- */
.site-header{background:transparent; border-bottom:0; -webkit-backdrop-filter:none; backdrop-filter:none}
.site-header::before{
  /* on its own layer, so the open menu can blur the page too. It runs 14px past the bottom and fades out there */
  content:""; position:absolute; inset:0 0 -14px 0; z-index:-1; pointer-events:none;
  background:inherit;
  -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%);
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 14px), transparent); mask-image:linear-gradient(180deg, #000 calc(100% - 14px), transparent);
}
.site-header .wrap{background:inherit}
@media (max-width:900px){
  .js .site-header .nav{
    top:100%; border-bottom:0; box-shadow:none;
    background:inherit;
    -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%);
  }
  /* only the three lines: the word stays for screen readers, but is not shown */
  .js .site-header .nav-toggle,
  .js .site-header .nav-toggle:hover{gap:0; padding:12px 6px; border:0; background:transparent; box-shadow:none; color:var(--ink); font-size:0}
  .js .site-header .nav-toggle .bars{width:22px; height:14px}
  .js .site-header .nav-toggle .bars::after{top:12px}
  .js .site-header .nav-toggle[aria-expanded="true"] .bars::before,
  .js .site-header .nav-toggle[aria-expanded="true"] .bars::after{top:6px}
  .js .site-header .nav .btn{align-self:flex-start}
}
/* on the home page the header sits on the photo: light text */
body:has(.hero-image) .site-header{
  color:#fff; --ink:#fff; --muted:rgba(255,255,255,.82); --line:rgba(255,255,255,.22); --accent:#fff;
  --hover-bg:#fff; --hover-fg:#0b1630;
}
body:has(.hero-image) .site-header .brand{color:#fff}
body:has(.hero-image) .js .site-header .nav a:not(.btn),
.js body:has(.hero-image) .site-header .nav a:not(.btn){color:#fff}

/* ---- one button for the whole website: outlined, 24px corners, filled only while the pointer is on it ----
   On light backgrounds it fills navy, on the photo and on navy it fills white */
:root{--hover-bg:var(--ink); --hover-fg:var(--bg)}
.hero-image,.product-featured,.offer,.band,.card-deep,.site-footer,
body:has(.hero-image) .site-header{--hover-bg:#fff; --hover-fg:#0b1630}
body:not(.app-page) .btn,
.site-header .btn,
.site-header .nav-toggle,
.product .btn-outline{
  align-items:center; justify-content:center; gap:.5em; width:auto; min-height:0;
  padding:11px 22px; border:1px solid var(--ink); border-radius:24px;
  background:transparent; color:var(--ink); font-size:.95rem; font-weight:600; line-height:1.2; letter-spacing:-.005em;
  box-shadow:none; transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
body:not(.app-page) .btn:hover,
.site-header .btn:hover,
.site-header .nav-toggle:hover,
.product .btn-outline:hover{
  background:var(--hover-bg); border-color:var(--hover-bg); color:var(--hover-fg);
  box-shadow:0 3px 10px -5px rgba(11,22,48,.3);
}
body:not(.app-page) .btn,.site-header .btn,.product .btn-outline{display:inline-flex}
.site-header .nav-toggle{display:none}
@media (max-width:900px){ .js .site-header .nav-toggle{display:inline-flex} }
/* a full-width button stays full width, in the same style */
body:not(.app-page) .btn-block{display:flex; width:100%}
.product .btn-outline{align-self:flex-start; margin-top:auto}
/* the app keeps a filled main button, in the same shape */
.app-page .btn{padding:12px 22px; border-width:1px; border-radius:24px; font-size:.95rem}
/* ---- the hero: a light photo, the text on a soft navy wash, the program card bridging into the page ---- */
.hero-image{
  position:relative; isolation:isolate; color:#fff;
  --ink:#fff; --muted:rgba(255,255,255,.88); --accent:#fff; --line:rgba(255,255,255,.2);
  margin-top:calc(-1 * var(--header-h)); padding-top:calc(var(--header-h) + clamp(44px, 7vw, 104px));
  padding-bottom:clamp(56px, 7vw, 104px);
}
.hero-image::before{
  /* PHOTO: a placeholder from Unsplash for the preview. Replace it with your own photo, saved on this site */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(9,20,44,.6) 0%, rgba(9,20,44,.34) 48%, rgba(9,20,44,.06) 100%),
    #9fb2cf url("img/hero-runner.jpg") center 34% / cover no-repeat;
}
.hero-image h1{max-width:none; font-size:clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem); text-shadow:0 1px 24px rgba(9,20,44,.25)}
.hero-image .lead{text-shadow:0 1px 16px rgba(9,20,44,.3)}
.hero-image a:not(.btn):not(.product){color:#fff}
.hero-image + .section{margin-top:0; border-top:0}
@media (max-width:760px){
  .hero-image::before{
    background:
      linear-gradient(180deg, rgba(9,20,44,.5) 0%, rgba(9,20,44,.42) 100%),
      #9fb2cf url("img/hero-runner.jpg") 62% 30% / cover no-repeat;
  }
}

/* the line, where the kicker was: restless on the left, calm on the right */
.hero-image .signal{margin:clamp(14px, 1.8vw, 22px) 0 0; max-width:34rem}
.hero-image .signal + .lead{margin-top:clamp(14px, 1.8vw, 22px)}
.hero-image .signal svg{height:clamp(34px, 4vw, 48px)}
.hero-image .signal path{stroke-width:1.75}
.hero-image .signal .stop-a{stop-color:#f2a3ad}
.hero-image .signal .stop-b{stop-color:#fff}

/* ---- the program card under the text: wide enough to read, narrow enough that the runner stays free ---- */
.products-one{margin-top:clamp(32px, 4.5vw, 52px)}
.products-one .product-featured{grid-column:auto}
.hero-image .products-one{grid-template-columns:minmax(0, 39rem)}
.product-featured.has-img{
  position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 44%; padding:0; overflow:hidden;
  background:rgba(11,22,48,.34); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 24px 48px -30px rgba(9,20,44,.45);
  transition:box-shadow .25s, border-color .25s, background-color .25s;
}
.product-featured.has-img .product-text{position:relative; z-index:1; display:flex; flex-direction:column; padding:clamp(26px, 3.4vw, 44px)}
/* the knee photo: the knee in focus, the rest fading into the card. Strongest to the left and the bottom, a touch at the top */
.product-featured.has-img .product-img{
  position:relative; margin:0; min-height:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 52%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 16%, #000 48%, rgba(0,0,0,.35) 76%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 52%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 16%, #000 48%, rgba(0,0,0,.35) 76%, transparent 100%);
          mask-composite:intersect;
}
.product-featured.has-img .product-img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:35% 32%;
  /* larger, and moved to the right, so the knee sits where the photo is fully visible */
  transform:translateX(16%) scale(1.3); transform-origin:35% 34%;
}
a.product-featured.has-img:hover{transform:none; border-color:transparent; background-color:rgba(11,22,48,.4);
  box-shadow:0 24px 48px -28px rgba(9,20,44,.55), 0 6px 16px -10px rgba(201,212,234,.25)}
/* "Available now": a small, quiet label */
.product-featured .status{
  align-self:flex-start; padding:0; border:0; border-radius:0;
  background:none; color:#fff; font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.14em;
}
.product-featured.has-img h3{margin-top:.75em}
/* on the glass the small text needs a little more white */
.product-featured.has-img p{color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(9,20,44,.35)}
.product-featured.has-img h3{text-shadow:0 1px 18px rgba(9,20,44,.3)}
@media (max-width:600px){
  .product-featured.has-img{grid-template-columns:1fr}
  .product-featured.has-img .product-img{order:-1; height:210px; min-height:0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 18%, #000 50%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 18%, #000 50%, transparent 100%)}
  .product-featured.has-img .product-img img{transform:scale(1.15); object-position:35% 34%}
  .product-featured.has-img .product-text{padding-top:4px}
}
/* tablet: a little narrower, so the runner stays free here too */
@media (min-width:601px) and (max-width:1100px){
  .hero-image .products-one{grid-template-columns:minmax(0, 28rem)}
  .product-featured.has-img{grid-template-columns:minmax(0, 1fr) 36%}
  .hero-image::before{background-position:0 0, 20% 34%}
}

/* ============================================================
   Round four: a lower card, the runner on phones, How it works, the offer and the footer
   ============================================================ */
/* the card: less tall */
.product-featured.has-img .product-text{padding:clamp(22px, 2.6vw, 32px)}
.product-featured.has-img h3{margin:.55em 0 .35em; font-size:clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem)}
.product-featured.has-img p:not(.status){font-size:1rem}
.product-featured.has-img .btn-outline{margin-top:1.1rem}

/* phones: no line, a small card with the knee beside the text, and room above it for the runner */
@media (max-width:600px){
  .hero-image .signal{display:none}
  .hero-image::before{background-position:0 0, 57% 50%}
  .hero-image .products-one{margin-top:clamp(120px, 34vw, 150px)}
  .product-featured.has-img{grid-template-columns:minmax(0, 1fr) 34%}
  .product-featured.has-img .product-img{order:0; height:auto; min-height:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 25%, #000 60%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 18%, #000 55%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 25%, #000 60%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 18%, #000 55%, transparent 100%)}
  .product-featured.has-img .product-img img{transform:translateX(-4%) scale(1.3); object-position:35% 32%}
  .product-featured.has-img .product-text{padding:18px 4px 18px 18px}
  .product-featured.has-img h3{font-size:1.4rem}
  .product-featured.has-img p:not(.status){font-size:.92rem}
  .product-featured.has-img .btn-outline{margin-top:.9rem; padding:9px 16px; font-size:.9rem}
}

/* the menu stays in view while it is open, as navy glass on the photo and light glass elsewhere */
.site-header:has(.nav.open){position:sticky; top:0}
.site-header:has(.nav.open)::before{inset:0; -webkit-mask-image:none; mask-image:none; background:rgba(255,255,255,.62)}
@media (max-width:900px){
  .js .site-header .nav.open{background:rgba(255,255,255,.62)}
  body:has(.hero-image) .site-header:has(.nav.open)::before,
  .js body:has(.hero-image) .site-header .nav.open{background:rgba(11,22,48,.5)}
}

/* How it works: no side label, three steps in a row, each with its number in a circle and a small line icon */
#how .section-grid{grid-template-columns:1fr}
#how .steps{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 20px)}
#how .steps li{
  position:relative; padding:clamp(22px, 2.4vw, 30px);
  background:linear-gradient(160deg, #f8fafd 0%, #eef2f8 100%); border:1px solid rgba(11,22,48,.06); border-radius:var(--r);
}
#how .steps li::before{
  content:counter(step); display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-bottom:18px; border-radius:50%;
  background:#dfe6f2; color:#0b1630; font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:0; text-transform:none;
  cursor:default; user-select:none;
}
#how .step-icon{position:absolute; top:clamp(22px, 2.4vw, 30px); right:clamp(22px, 2.4vw, 30px); width:28px; height:28px; color:#7d879b}
#how .step-icon svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:900px){ #how .steps{grid-template-columns:1fr} }
@media (prefers-color-scheme:dark){
  #how .steps li{background:linear-gradient(160deg, #101a31 0%, #0c152a 100%); border-color:rgba(255,255,255,.06)}
  #how .steps li::before{background:#1b2a4d; color:#eef1f7}
}

/* Start here: the offer looks like the program card, without the photo */
.offer{
  max-width:39rem; padding:clamp(24px, 3vw, 36px); color:#fff;
  --ink:#fff; --muted:rgba(255,255,255,.88); --accent:#fff; --line:rgba(255,255,255,.16);
  background:linear-gradient(150deg, rgba(24,41,80,.96) 0%, rgba(11,22,48,.96) 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  box-shadow:0 24px 48px -30px rgba(9,20,44,.45);
}
.offer .kicker{margin:0 0 .9em; color:#fff; font-size:.72rem; letter-spacing:.14em}
.offer h2{font-size:clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem)}
.offer-price{font-size:1.9rem; color:#fff}
.offer p{color:rgba(255,255,255,.92)}
.offer .btn{margin-top:1.2rem}
body:not(.app-page) .offer .btn-block{display:inline-flex; width:auto}

/* the footer: navy glass over a soft blur of the photo */
.site-footer{position:relative; isolation:isolate; overflow:hidden; background:#0b1630}
.site-footer::before{
  content:""; position:absolute; inset:-60px; z-index:-2;
  background:url("img/hero-runner.jpg") center 40% / cover no-repeat;
  filter:blur(30px) saturate(130%);
}
.site-footer::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,22,48,.74) 0%, rgba(11,22,48,.86) 100%);
  border-top:1px solid rgba(255,255,255,.12);
}
.site-footer .disc{border-top-color:rgba(255,255,255,.14)}
/* ============================================================
   Round five: colour in two sections, livelier icons, Start here, the about photo, back to the top
   ============================================================ */
/* How it works and Work with me: light, with a soft cool gradient */
#how, #one-on-one{
  border-top:0;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(201,212,234,.55) 0%, rgba(201,212,234,0) 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(214,226,246,.6) 0%, rgba(214,226,246,0) 70%),
    linear-gradient(180deg, #f3f6fc 0%, #eaf0f9 100%);
}
#how + .section, #one-on-one + .section{border-top:0}
#how .steps li{background:rgba(255,255,255,.72); border-color:rgba(11,22,48,.07); box-shadow:0 10px 24px -18px rgba(11,22,48,.25)}
#how .steps li::before{background:#e1e8f4}
@media (prefers-color-scheme:dark){
  #how, #one-on-one{background:linear-gradient(180deg, #0b1428 0%, #0e1a33 100%)}
  #how .steps li{background:rgba(255,255,255,.04)}
}

/* the icons: a little larger, tilted, each placed a bit differently */
#how .step-icon{width:46px; height:46px; color:#5f6b84; transform-origin:50% 50%}
#how .step-icon svg .fill{fill:rgba(29,58,117,.08); stroke:none}
#how .steps li:nth-child(1) .step-icon{top:18px; right:22px; transform:rotate(10deg)}
#how .steps li:nth-child(2) .step-icon{top:24px; right:18px; transform:rotate(14deg)}
#how .steps li:nth-child(3) .step-icon{top:16px; right:26px; transform:rotate(8deg)}
#how .steps h3{padding-right:48px}

/* Start here: the heading above the card, like How it works */
#modules .section-grid{grid-template-columns:1fr}
#modules .offer{margin-top:1.6rem}
.offer h3{margin:0 0 .15em; font-size:clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem); font-weight:500; letter-spacing:-.025em; line-height:1.12}

/* the remaining side labels: a little larger and bolder */
.section-label{font-size:.8rem; font-weight:600; letter-spacing:.14em}

/* the card next to "Rather work with me": a soft gradient, and no empty line above the list */
.split .card{
  background:linear-gradient(160deg, #ffffff 0%, #eef3fb 100%);
  border:1px solid rgba(11,22,48,.07); box-shadow:0 10px 24px -18px rgba(11,22,48,.25);
}
.split .card .list{margin-top:0}
.split .card .list li:first-child{border-top:0; padding-top:0}
@media (prefers-color-scheme:dark){ .split .card{background:rgba(255,255,255,.04)} }

/* About me: a round photo with a navy half-ring behind it */
.about-photo{position:relative; margin:0 auto; width:min(100%, 340px); aspect-ratio:1}
.about-photo::before{
  content:""; position:absolute; inset:-14px -14px auto auto; width:100%; height:100%; border-radius:50%;
  border:1.5px solid rgba(29,58,117,.35); border-left-color:transparent; border-bottom-color:transparent; transform:rotate(-10deg);
}
.about-photo img{position:relative; width:100%; height:100%; object-fit:cover; border-radius:50%; box-shadow:0 24px 48px -28px rgba(11,22,48,.45)}
.about{align-items:center}

/* back to the top */
.to-top{
  position:fixed; right:clamp(16px, 3vw, 28px); bottom:clamp(16px, 3vw, 28px); z-index:45;
  display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0;
  border:1px solid rgba(255,255,255,.18); border-radius:50%; color:#fff; cursor:pointer;
  background:rgba(11,22,48,.62); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 8px 20px -10px rgba(11,22,48,.5);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background-color .2s;
}
.to-top.is-shown{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:rgba(11,22,48,.85)}
.to-top svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){ .to-top{transition:none} }@media (max-width:860px){ .about-photo{width:min(70%, 260px); margin-top:8px} }

/* ---- hero card and line, final touches ---- */
/* the card: no border; a little more navy, and clearer on hover */
.product-featured.has-img{border:0; background:rgba(11,22,48,.48)}
a.product-featured.has-img:hover{border:0; background-color:rgba(11,22,48,.3)}
.product-featured .status{font-weight:600}
/* the line right under the headline, the text after it with the same rhythm as before */
.hero-image .signal{margin:clamp(4px, .8vw, 10px) 0 0}
.hero-image .signal + .lead{margin-top:clamp(16px, 2vw, 26px)}
/* the line exactly as wide as the headline: both sit in a box that is as wide as the headline's text */
.hero-title{width:fit-content; max-width:100%}
.hero-image .hero-title .signal{max-width:none; width:100%}
.hero-image .hero-title + .lead{margin-top:clamp(16px, 2vw, 26px)}

/* ============================================================
   Design 2: the hero with one button; the program card in Start here
   ============================================================ */
/* the hero: headline, line, text and one button. A fixed height keeps the photo and the runner in view */
.hero-actions{margin-top:clamp(22px, 2.6vw, 32px)}

/* Start here: the program card, on white, so a solid navy instead of glass */
#modules .products-one{grid-template-columns:minmax(0, 54rem); justify-content:start; margin-top:1.6rem}
#modules .product-featured.has-img{
  background:linear-gradient(150deg, rgba(24,41,80,.97) 0%, rgba(11,22,48,.97) 100%);
  box-shadow:0 24px 48px -30px rgba(9,20,44,.45);
}
#modules a.product-featured.has-img:hover{background:linear-gradient(150deg, rgba(30,50,96,.97) 0%, rgba(15,28,60,.97) 100%)}
@media (min-width:601px) and (max-width:1100px){ #modules .products-one{grid-template-columns:minmax(0, 1fr)} }
#modules .offer-aside{text-align:left}
/* the hero button: larger, it is the one thing to do here */
body:not(.app-page) .hero-actions .btn{padding:13px 26px; font-size:1.06rem}
@media (max-width:600px){ body:not(.app-page) .hero-actions .btn{padding:12px 23px; font-size:1rem} }
/* the invisible card in the hero: it takes its old place, minus the room the button now takes, so the hero keeps its old height */
.hero-spacer{visibility:hidden; pointer-events:none}
.hero-image .hero-spacer{margin-top:calc(clamp(32px, 4.5vw, 52px) - clamp(22px, 2.6vw, 32px) - 48px)}
@media (max-width:600px){ .hero-image .hero-spacer{margin-top:calc(clamp(140px, 40vw, 170px) - clamp(22px, 2.6vw, 32px) - 68px)} }
/* the wider card in Start here: the photo a little less zoomed, so the whole knee shows */
#modules .product-featured.has-img{grid-template-columns:minmax(0, 1fr) 40%}
#modules .product-featured.has-img .product-img img{object-position:35% 38%; transform:translateX(12%) scale(1.05)}
@media (max-width:600px){ #modules .product-featured.has-img .product-img img{transform:translateX(-4%) scale(1.3); object-position:35% 32%} }
/* the step numbers: a soft circle with a clear number, in light and in dark mode */
#how .steps li::before{background:#e1e8f4; color:#0b1630}
@media (prefers-color-scheme:dark){ #how .steps li::before{background:#24365f; color:#ffffff} }

/* ============================================================
   Design 3
   ============================================================ */
/* phones: the hero 25% lower. The photo keeps the size and position it had (as if the hero were 739px high),
   so the bottom quarter, mostly dark grass, is simply cut off and the runner stays where he was */
@media (max-width:600px){
  .hero-image .hero-spacer{display:none}
  .hero-image{min-height:554px}
  .hero-image::before{background-size:100% 100%, auto 739px; background-position:0 0, 57% 0}
}
/* phones: the line under the headline is back */
@media (max-width:600px){ .hero-image .signal{display:block} }

/* ============================================================
   Design 4: the trees move, very slowly
   ============================================================ */
/* A copy of the hero photo, cut out around the tree at the top left, sways a fraction of a degree
   around the top-left corner. It is opaque, so the still tree underneath never shows through. */
.hero-image::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(9,20,44,.6) 0%, rgba(9,20,44,.34) 48%, rgba(9,20,44,.06) 100%),
    #9fb2cf url("img/hero-runner.jpg") center 34% / cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 64% 54% at 0% 0%, #000 66%, transparent 100%);
          mask-image:radial-gradient(ellipse 64% 54% at 0% 0%, #000 66%, transparent 100%);
  transform-origin:-4% -8%;
}
@media (min-width:601px) and (max-width:1100px){
  .hero-image::after{background-position:0 0, 20% 34%}
}
@media (max-width:600px){
  .hero-image::after{
    background:
      linear-gradient(180deg, rgba(9,20,44,.5) 0%, rgba(9,20,44,.42) 100%),
      #9fb2cf url("img/hero-runner.jpg") 57% 0 / auto 739px no-repeat;
    background-size:100% 100%, auto 739px;
    -webkit-mask-image:radial-gradient(ellipse 95% 55% at 0% 0%, #000 62%, transparent 100%);
            mask-image:radial-gradient(ellipse 95% 55% at 0% 0%, #000 62%, transparent 100%);
  }
}
@media (prefers-reduced-motion:no-preference){
  .hero-image::after{animation:sway 7s ease-in-out infinite alternate}
  @keyframes sway{
    0%{transform:rotate(-.25deg)}
    30%{transform:rotate(.75deg) skewX(-.5deg)}
    60%{transform:rotate(.2deg) skewX(.3deg)}
    100%{transform:rotate(.9deg) skewX(-.3deg)}
  }
}

/* ============================================================
   Design 5: the headshot in About me
   ============================================================ */
/* the round frame shows the face and the crossed arms; the taller frames on the other pages keep the head in view */
.about-photo img{object-position:50% 22%}
.portrait img{object-position:50% 20%}
/* home: the photo in the same frame as on Work with me (rounded corners, 4:5), so the crossed arms show */
.about-photo{aspect-ratio:4 / 5}
.about-photo::before{display:none}
.about-photo img{border-radius:var(--r); object-position:50% 20%}
/* Work with me: the photo in the gym, his face in view */
.portrait-gym img{object-position:50% 30%}

/* ============================================================
   The product page (The Painful Knee): the theme of the front page, its own content. 18 October 2026
   ============================================================ */
/* the top: navy, the knee photo on the right fading into it */
.hero-knee::before{background:linear-gradient(160deg, #13234a 0%, #0b1630 60%, #08112a 100%)}
.hero-knee{overflow:hidden}
.hero-knee::after{display:none}          /* the swaying tree belongs to the runner photo on the front page */
.hero-knee .wrap{position:relative; z-index:1}
.hero-knee-img{position:absolute; inset:0 0 0 auto; z-index:0; width:min(56%, 760px); margin:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 28%, #000 60%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 28%, #000 60%), linear-gradient(180deg, #000 70%, transparent 100%);
          mask-composite:intersect}
.hero-knee-img img{width:100%; height:100%; object-fit:cover; object-position:40% 32%; opacity:.9}
.hero-knee h1{max-width:11.5em}
.hero-knee .lead{max-width:32rem}
.hero-knee .hero-aside{margin-top:1rem; color:rgba(255,255,255,.88)}
@media (max-width:760px){
  .hero-knee-img{width:100%; opacity:.6;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 40%, transparent 100%)}
  .hero-knee-img img{object-position:60% 30%}
}

/* headings above the content, like How it works on the front page */
#inside .section-grid, #familiar .section-grid, #buy .section-grid{grid-template-columns:1fr}
#familiar .checks{margin-top:1.6rem}

/* ---------- a look inside: one iPhone and a list that plays by itself (like Mollie's Tap page) ---------- */
/* light sections take turns, like on the front page: Built around you soft blue, A look inside white, Sound familiar soft blue */
#familiar{background:linear-gradient(180deg, #f6f8fc 0%, #e9eef8 100%)}
#how + #inside, #inside + #familiar{border-top:0}
.inside{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:clamp(32px, 6vw, 96px); margin-top:clamp(28px, 4vw, 48px)}
/* the iPhone: a dark titanium frame, side buttons, the island, the status bar and the home bar */
.iphone{position:relative; width:clamp(240px, 24vw, 290px); aspect-ratio:9 / 19.3; padding:10px; border-radius:52px;
  background:linear-gradient(145deg, #3a4253 0%, #1b202b 45%, #2c3341 100%); box-shadow:0 0 0 1.5px #4a5366 inset, 0 40px 80px -40px rgba(0,0,0,.8)}
.iphone::before,.iphone::after{content:""; position:absolute; width:3px; border-radius:2px; background:#2a303c}
.iphone::before{left:-3px; top:22%; height:12%; box-shadow:0 16% 0 #2a303c}
.iphone::after{right:-3px; top:28%; height:16%}
.iphone-screen{position:relative; height:100%; overflow:hidden; border-radius:42px; padding:44px 14px 26px; background:linear-gradient(180deg, #0b1630 0%, #060d1f 100%); color:#f3f6fc; font-size:11.5px; line-height:1.35}
.iphone-status{position:absolute; left:0; right:0; top:0; height:40px; display:flex; align-items:center; justify-content:space-between; padding:6px 24px 0; font-size:12px; font-weight:600; color:#fff}
.iphone-island{position:absolute; left:50%; top:10px; width:86px; height:24px; margin-left:-43px; border-radius:14px; background:#000}
.iphone-icons{display:flex; gap:3px; align-items:flex-end}
.iphone-icons b{display:block; width:4px; border-radius:1px; background:#fff}
.iphone-icons b:nth-child(1){height:5px} .iphone-icons b:nth-child(2){height:8px} .iphone-icons b:nth-child(3){width:18px; height:9px; border-radius:3px; background:none; box-shadow:0 0 0 1.2px #fff inset}
.iphone-home{position:absolute; left:50%; bottom:8px; width:100px; height:4px; margin-left:-50px; border-radius:2px; background:rgba(255,255,255,.75)}
/* the screens inside: one at a time, each a small copy of the real app (navy, ice, the tab bar at the bottom) */
.how-intro{max-width:40rem; margin:.6rem 0 0; color:var(--muted)}
.iphone-screen{padding:0}
.iphone-status{z-index:4}
.ph-view{position:absolute; inset:0; overflow:hidden; opacity:0; transition:opacity .45s; pointer-events:none; color:#f3f6fc; font-size:9.5px; line-height:1.35}
.ph-view.is-active{opacity:1}
.pa-scroll{padding:40px 12px 70px; transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.pa-head{display:flex; justify-content:space-between; align-items:center; margin:0 0 10px}
.pa-head b{display:block; font-size:10.5px; color:#fff}
.pa-head small{font-size:8px; color:#9eb0d2}
.pa-head i{font-style:normal; font-size:8.5px; padding:3px 8px; border:1px solid rgba(201,212,234,.4); border-radius:99px; color:#c9d4ea}
.pa-k{margin:0; font-size:7.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#c9d4ea}
.pa-k2{margin-top:6px}
.pa-h{margin:2px 0 4px; font-size:19px; font-weight:700; letter-spacing:-.035em; line-height:1.05; color:#fff}
.pa-sub{margin:0 0 8px; color:#9eb0d2}
.pa-h2{margin:12px 0 6px; font-size:13px; font-weight:700; color:#fff}
.pa-back{margin:0 0 4px; color:#c9d4ea; font-weight:600}
.pa-lbl{margin:8px 0 4px; font-weight:600; color:#fff}
/* setup */
.pa-weekrow{display:grid; grid-template-columns:4.6em 1fr; align-items:center; gap:6px; margin:0 0 4px}
.pa-weekrow span{font-weight:600}
.pa-weekrow em,.pa-field em,.pa-three em{display:block; padding:5px 7px; border:1px solid rgba(201,212,234,.16); border-radius:7px; background:rgba(6,13,31,.6); font-style:normal; color:#f3f6fc; transition:border-color .3s, background-color .3s}
.pa-weekrow em.is-on,.pa-field em.is-on,.pa-three em.is-on{border-color:#c9d4ea; background:rgba(201,212,234,.12)}
.pa-card{padding:8px; border-radius:10px; background:#132450}
.pa-card .pa-lbl:first-child{margin-top:0}
.pa-three{display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin-top:6px}
.pa-three p{margin:0}
.pa-three small{display:block; margin-bottom:2px; font-weight:600}
.pa-btn{display:block; margin:10px 0 0; padding:8px; border-radius:99px; background:#c9d4ea; color:#0b1630; font-weight:700; text-align:center; transition:transform .2s, background-color .2s}
.pa-btn.is-on{transform:scale(.95); background:#eef3fc}
/* the flash at the top, like the app's message after saving */
.pa-flash{position:absolute; left:10px; right:10px; top:38px; z-index:3; margin:0; padding:9px 10px; border-radius:12px; background:#1d4a3c; color:#e7fbf2; font-weight:600; text-align:center;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6); opacity:0; transform:translateY(-8px); transition:opacity .35s, transform .35s}
.pa-cheer{top:auto; bottom:56px; background:#c9d4ea; color:#0b1630}
.pa-flash.is-on{opacity:1; transform:none}
/* today */
.pa-hero{margin:-40px -12px 8px; padding:40px 12px 10px; background:linear-gradient(180deg, rgba(11,22,48,.25), rgba(11,22,48,.75) 70%, #0b1630), #34425f url("img/hero-runner.jpg") 62% 30% / cover}
.pa-hero-row{display:flex; justify-content:space-between; align-items:flex-end; margin-top:14px}
.pa-hero-h{font-size:22px}
.pa-goal{margin:0; color:#eef3fc}
.pa-ring{position:relative; display:grid; place-items:center; width:54px; height:54px; flex:none}
.pa-ring svg{position:absolute; inset:0; transform:rotate(-90deg)}
.pa-ring circle{fill:none; stroke-width:4; stroke-linecap:round}
.pa-track{stroke:rgba(201,212,234,.22)}
.pa-fill{stroke:#c9d4ea; stroke-dasharray:50 100; transition:stroke-dasharray 1s ease}
.pa-fill.is-on{stroke-dasharray:100 100}
.pa-ring b{position:relative; display:grid; justify-items:center; font-size:12px; color:#fff; line-height:1}
.pa-ring em{font-style:normal}
.pa-ring small{margin-top:2px; font-size:5.5px; letter-spacing:.06em; text-transform:uppercase; color:#9eb0d2; text-align:center}
.pa-strip{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; margin-bottom:8px; text-align:center}
.pa-strip span{position:relative; display:grid; padding:4px 0 6px; border-radius:8px; background:#132450; color:#9eb0d2; font-size:6.5px; text-transform:uppercase}
.pa-strip b{font-size:11px; color:#fff}
.pa-strip .on{background:#c9d4ea; color:#0b1630} .pa-strip .on b{color:#0b1630}
.pa-strip .has-dot::after{content:""; position:absolute; left:50%; bottom:2px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:#c9d4ea}
.pa-day{margin:0 0 6px; font-size:13px; font-weight:700; color:#fff}
.pa-row{display:flex; align-items:center; gap:8px; margin:0 0 6px; padding:8px; border-radius:11px; background:#132450}
.pa-row p{margin:0; display:grid}
.pa-row b{font-size:11px; color:#fff}
.pa-ic{flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:rgba(201,212,234,.12)}
.pa-ic svg{width:13px; height:13px; fill:none; stroke:#c9d4ea; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pa-st{font-style:normal; color:#9eb0d2}
.pa-st.is-on{color:#5fd3a0; font-weight:700}
.pa-row-main{background:linear-gradient(135deg, #eef3fc, #c9d4ea)}
.pa-row-main b{color:#0b1630} .pa-row-main .pa-st{color:#0b1630; opacity:.7} .pa-row-main .pa-ic{background:#0b1630}
.pa-row-main.is-on{background:#132450} .pa-row-main.is-on b{color:#fff} .pa-row-main.is-on .pa-ic{background:rgba(201,212,234,.12)} .pa-row-main .pa-st.is-on{color:#5fd3a0; opacity:1}
.pa-list{margin:-2px 2px 8px; color:#9eb0d2; font-size:8.5px}
/* the morning check */
.pa-opt{margin:0 0 5px; padding:7px 9px 7px 24px; position:relative; border:1px solid rgba(201,212,234,.16); border-radius:9px; background:rgba(201,212,234,.05); transition:border-color .3s, background-color .3s}
.pa-opt::before{content:""; position:absolute; left:8px; top:50%; width:9px; height:9px; margin-top:-5.5px; border:1.5px solid #9eb0d2; border-radius:50%}
.pa-opt.is-on{border-color:#c9d4ea; background:rgba(201,212,234,.16)}
.pa-opt.is-on::before{border-color:#c9d4ea; background:#c9d4ea; box-shadow:inset 0 0 0 2px #0b1630}
.pa-chips{display:grid; grid-template-columns:repeat(11, 1fr); gap:2px}
.pa-chips span{padding:4px 0 3px; border:1px solid rgba(201,212,234,.18); border-bottom-width:2px; border-radius:5px; text-align:center; font-size:8px; transition:background-color .3s, color .3s}
.pa-chips .g{border-bottom-color:#5fd3a0} .pa-chips .o{border-bottom-color:#ffb057}
.pa-chips .g.is-on{background:#5fd3a0; border-color:#5fd3a0; color:#0b1630; font-weight:700}
.pa-chips .n.is-on{background:#c9d4ea; border-color:#c9d4ea; color:#0b1630; font-weight:700}
.pa-ends{display:flex; justify-content:space-between; margin:3px 0 0; font-size:7.5px; color:#9eb0d2}
/* the session */
.pa-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin:6px 0 4px}
.pa-stats p{margin:0; display:grid; padding:6px; border-radius:9px; background:#132450}
.pa-stats small{font-size:6.5px; letter-spacing:.12em; text-transform:uppercase; color:#9eb0d2}
.pa-stats b{font-size:14px; color:#fff}
.pa-stats b small{font-size:7px; letter-spacing:0; text-transform:none}
.pa-good{color:#5fd3a0 !important}
.pa-ex{display:flex; gap:7px; margin:6px 0 0; padding:8px; border-radius:11px; background:#132450}
.pa-ex > div{flex:1; min-width:0}
.pa-tick{flex:none; width:16px; height:16px; margin-top:1px; border:1.5px solid rgba(201,212,234,.5); border-radius:50%; transition:background-color .3s, border-color .3s}
.pa-tick.is-on{border-color:#5fd3a0; background:#5fd3a0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%230b1630' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.pa-ex-top{display:flex; justify-content:space-between; gap:4px; margin:0}
.pa-ex-top b{font-size:10.5px; color:#fff}
.pa-ex-top span{color:#c9d4ea; font-size:8.5px; font-weight:600; white-space:nowrap}
.pa-kg{display:flex; align-items:center; gap:4px; margin:5px 0 0}
.pa-kg span{display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:rgba(201,212,234,.14); color:#c9d4ea; font-size:10px}
.pa-kg em{min-width:30px; padding:2px 4px; border:1px solid rgba(201,212,234,.2); border-radius:6px; background:rgba(6,13,31,.55); font-style:normal; font-weight:700; text-align:center; transition:background-color .3s, border-color .3s}
.pa-kg em.is-on{border-color:#5fd3a0; background:rgba(95,211,160,.15)}
.pa-kg small{color:#9eb0d2; font-size:7.5px}
.pa-sug{margin-left:2px}
/* progress */
.pa-goal2{margin:6px 0 0; padding-left:8px; border-left:2px solid #c9d4ea}
.pa-goal2 small{display:block; font-size:6.5px; letter-spacing:.14em; text-transform:uppercase; color:#c9d4ea}
.pa-graph{padding:8px; border-radius:11px; background:#132450}
.pa-graph-top{display:flex; justify-content:space-between; align-items:center; margin:0 0 4px; color:#9eb0d2; font-size:8px}
.pa-badge{padding:2px 6px; border-radius:99px; background:rgba(95,211,160,.18); color:#5fd3a0; font-weight:700}
.pa-graph svg{display:block; width:100%}
.pa-graph text{font-size:7px; fill:#9eb0d2}
.pa-grid{stroke:rgba(201,212,234,.14); stroke-width:1; fill:none}
.pa-line{fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.6s ease}
.pa-line.is-on{stroke-dashoffset:0}
.pa-l1{stroke:#c9d4ea} .pa-l2{stroke:#ffb057}
.pa-keys{display:flex; gap:10px; margin:4px 0 0; font-size:8px; color:#9eb0d2}
.pa-keys span::before{content:""; display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; vertical-align:middle}
.pa-keys .k1::before{background:#c9d4ea} .pa-keys .k2::before{background:#ffb057}
.pa-wrow{display:flex; justify-content:space-between; margin:0; padding:7px 2px; border-top:1px solid rgba(201,212,234,.12); opacity:.25; transition:opacity .4s}
.pa-wrow.is-on{opacity:1}
.pa-wrow b{color:#fff} .pa-wrow i{font-style:normal; color:#5fd3a0}
/* the tab bar at the bottom */
.pa-tabs{position:absolute; left:0; right:0; bottom:0; z-index:2; display:grid; grid-template-columns:repeat(4, 1fr); padding:6px 4px 18px; background:rgba(6,13,31,.96); border-top:1px solid rgba(201,212,234,.12)}
.pa-tabs span{display:grid; justify-items:center; gap:2px; font-size:7px; color:#9eb0d2}
.pa-tabs svg{width:14px; height:14px; padding:2px 8px; box-sizing:content-box; border-radius:99px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pa-tabs .on{color:#c9d4ea; font-weight:700} .pa-tabs .on svg{background:#c9d4ea; stroke:#0b1630}
.iphone-home{z-index:5}
/* the list next to the phone: the active line in white with a filling circle, the rest quiet */
.inside-steps{list-style:none; margin:0; padding:0; display:grid; gap:clamp(10px, 1.6vw, 18px)}
.inside-steps button{display:flex; align-items:flex-start; gap:16px; width:100%; padding:0; border:0; background:none; text-align:left; font:inherit; color:rgba(11,22,48,.32); cursor:pointer; transition:color .3s}
.inside-steps b{display:block; font-size:clamp(1.25rem, 1rem + 1.1vw, 2rem); font-weight:500; letter-spacing:-.02em; line-height:1.18}
.inside-steps small{display:block; max-height:0; overflow:hidden; margin-top:0; font-size:1rem; color:var(--muted); transition:max-height .4s, margin-top .4s}
.inside-steps .is-active button{color:var(--ink)}
.inside-steps .is-active small{max-height:4em; margin-top:.4em}
.inside-steps button:focus-visible{outline:2px solid #1d3a75; outline-offset:6px; border-radius:6px}
.spin{flex:none; width:26px; height:26px; margin-top:.3em; opacity:0; transition:opacity .3s}
.spin svg{width:100%; height:100%; transform:rotate(-90deg)}
.spin circle{fill:none; stroke:#1d3a75; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:0 100}
.is-active .spin{opacity:1}
.is-active .spin circle{animation:spin-fill var(--step-time, 6s) linear forwards}
@keyframes spin-fill{from{stroke-dasharray:0 100} to{stroke-dasharray:100 100}}
.inside.is-paused .spin circle{animation-play-state:paused}
@media (max-width:760px){
  .inside{grid-template-columns:1fr; justify-items:center; gap:22px}
  .iphone{width:min(205px, 54vw); padding:8px; border-radius:42px}
  .iphone-screen{border-radius:34px; font-size:10px}
  .inside-steps{width:100%; gap:8px}
  .inside-steps b{font-size:1.12rem}
  .inside-steps small{font-size:.92rem}
  .spin{width:22px; height:22px; margin-top:.1em}
}
@media (prefers-color-scheme:dark){
  #familiar{background:linear-gradient(180deg, #0b1428 0%, #0e1a33 100%)}
  .inside-steps button{color:rgba(255,255,255,.35)}
  .spin circle{stroke:#c9d4ea}
}
@media (prefers-reduced-motion:reduce){ .ph-view,.pa-scroll,.pa-fill,.pa-line,.pa-flash,.pa-tick,.pa-opt,.pa-wrow{transition:none} .is-active .spin circle{animation:none; stroke-dasharray:100 100} }

/* ---------- the buy card: the navy offer card, with the price and what you get ---------- */
.buy-offer{max-width:40rem; margin-top:1.6rem}
.buy-offer h3{margin:.2em 0 .15em; font-size:clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem); font-weight:500; letter-spacing:-.025em; color:#fff}
.buy-offer .offer-price span{display:block; margin-top:2px; font-size:.92rem; font-weight:400; color:rgba(255,255,255,.85)}
.buy-list{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.45rem}
.buy-list li{position:relative; padding-left:1.5em; color:rgba(255,255,255,.92)}
.buy-list li::before{content:""; position:absolute; left:0; top:.5em; width:.55em; height:.3em; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg)}
.buy-offer .btn{margin-top:1.4rem}
/* made by: a short line with a round photo */
.made-by{display:flex; align-items:center; gap:14px; margin-top:2rem}
.made-by-photo{flex:none; width:56px; height:56px; margin:0; overflow:hidden; border-radius:50%; background:var(--surface)}
.made-by-photo img{width:100%; height:100%; object-fit:cover}
.made-by p{margin:0; font-size:.95rem; color:var(--muted)}
.made-by b{display:block; color:var(--ink)}
.buy-note{margin-top:1.4rem; max-width:44rem; color:var(--muted)}
/* the status bar is solid, so the screen scrolls under it like on a real phone */
.iphone-status{background:#0b1630; height:34px; padding-top:4px}
.pa-flash{top:40px}
.pa-hero{margin-top:-40px; padding-top:44px}
.ph-view{background:linear-gradient(180deg, #0b1630 0%, #060d1f 100%)}
.pa-flash.pa-cheer{top:auto; bottom:52px}

.pa-opt2 b{display:block; color:#fff; font-size:10px}
.pa-opt2{color:#9eb0d2}
.pa-two{grid-template-columns:1fr 1fr}
.pa-two small{min-height:2.4em}

.pa-card-ex{margin-top:6px}
.pa-add{margin:8px 0 0; padding:6px; border:1px dashed rgba(201,212,234,.35); border-radius:99px; color:#c9d4ea; text-align:center; font-weight:600}

/* after "Make my program": the program the app made slides in, like the real My program page */
.pa-page2{position:absolute; inset:0; z-index:3; overflow:hidden; background:linear-gradient(180deg, #0b1630 0%, #060d1f 100%); opacity:0; transform:translateX(30px); transition:opacity .45s, transform .45s}
.pa-page2.is-on{opacity:1; transform:none}
.pa-weekp{padding:2px 7px; border-radius:11px; background:#132450}
.pa-wd{display:grid; grid-template-columns:2.6em 1fr auto; align-items:center; margin:0; padding:5px 0; border-top:1px solid rgba(201,212,234,.1)}
.pa-wd:first-child{border-top:0}
.pa-wd b{color:#fff}
.pa-wd em{font-style:normal; font-size:8px; color:#9eb0d2}
.pa-build{padding:1px 7px; border-radius:99px; background:#c9d4ea; color:#0b1630; font-style:normal; font-size:8px; font-weight:700}
.pa-h2 small{margin-left:6px; font-size:9px; font-weight:400; color:#9eb0d2}
.pa-pi{margin:0; padding:7px 2px; border-top:1px solid rgba(201,212,234,.12); opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s}
.pa-pi.is-on{opacity:1; transform:none}
.pa-pi p{display:flex; justify-content:space-between; gap:6px; margin:0}
.pa-pi b{color:#fff; font-size:10px}
.pa-pi span{color:#c9d4ea; font-weight:600; white-space:nowrap}
.pa-pi small{color:#9eb0d2; font-size:8px}
.pa-tabs{z-index:4}

/* the first page after buying: put the app on your phone */
.take-it{margin:2rem 0 1.5rem; padding:20px; border-radius:var(--r); background:var(--surface)}
.take-it h2{margin-top:0}
.take-it .fold{margin-top:.6rem}
.take-it svg{max-width:180px; height:auto}
/* on the phone itself the QR code is no use: the steps come first */
@media (max-width:700px) and (pointer:coarse){ .take-it .chapter-qr,.take-it .chapter-qr + p{display:none} }