/* brand-tokens.css */
/* LankFit design tokens · v0.4 · generated from the design guidelines canvas (section 18).
   Dark is the default. Light theme applies under [data-theme="light"] (app only; the marketing site is dark-only, D5).
   Drop-in replacement for brand-tokens.css v1. See MIGRATION.md for every changed or removed token. */

:root {
  /* Fixed constants (do not theme) */
  --th-ink: #101820;
  --th-chalk: #F4F2EC;
  --th-pace-deep: #D24E14; /* logo dot on light backgrounds */

  /* Neutrals */
  --th-bg: #101820;  /* Page background */
  --th-surface: #18222D;  /* Cards, panels, sidebar */
  --th-surface-2: #212D3A;  /* Raised: inputs, menus, selected rows */
  --th-surface-3: #2A3847;  /* Hover on raised, active segment */
  --th-line: #2E3B4A;  /* Hairlines, card borders, grid */
  --th-line-strong: #465567;  /* Input borders, focus-adjacent, dividers that must read */
  --th-text: #F4F2EC;  /* Primary text, headings, numbers */
  --th-text-2: #C9CED6;  /* Secondary text, body copy on dense screens */
  --th-text-muted: #9AA3B2;  /* Labels, captions, axis text */
  --th-text-disabled: #5E6978;  /* Disabled controls only */

  /* Brand */
  --th-pace: #FF6B1F;  /* The brand. CTAs, logo dot, focus ring, active nav, 'you, now' in charts */
  --th-pace-hover: #FF8A4C;  /* Primary button hover */
  --th-pace-pressed: #E85A10;  /* Primary button pressed */
  --th-pace-text: #FF6B1F;  /* Orange text and links */
  --th-pace-soft: rgba(255,107,31,.14);  /* Tinted fills: selected chips, focus halo */
  --th-on-pace: #101820;  /* Text on orange */

  /* Disciplines */
  --th-swim: #3D8BFF;  /* Swim, everywhere */
  --th-bike: #9F8CFF;  /* Bike, everywhere */
  --th-run: #C8F03C;  /* Run, everywhere */
  --th-strength: #2DD4BF;  /* Strength and other gym work */
  --th-transition: #9AA3B2;  /* T1, T2, 'other' activities */

  /* Status */
  --th-positive: #3FD08A;  /* Ahead, improved, confirmed, success */
  --th-negative: #FF5A5F;  /* Behind, to find, errors, destructive */
  --th-warning: #FFC857;  /* Needs attention, review, draft */
  --th-gold: #FFC857;  /* PBs and records only */

  /* Data ramps */
  --th-z1: #A3A9B3;  /* Heart-rate / power zone 1 · warm-up */
  --th-z2: #2E9BF0;  /* Zone 2 · easy */
  --th-z3: #48C75A;  /* Zone 3 · aerobic */
  --th-z4: #FF9A1F;  /* Zone 4 · threshold */
  --th-z5: #F0413C;  /* Zone 5 · maximum */
  --th-heat-1: #5A4A2A;  /* Heatmap quartile 1 (lightest trained days) */
  --th-heat-2: #B88A2E;  /* Heatmap quartile 2 */
  --th-heat-3: #FF9A1F;  /* Heatmap quartile 3 */
  --th-heat-4: #F0413C;  /* Heatmap quartile 4 (biggest days) */
  --th-sleep-deep: #2A5FD9;  /* Sleep stage: deep */
  --th-sleep-light: #5CB4F5;  /* Sleep stage: light */
  --th-sleep-rem: #C060E6;  /* Sleep stage: REM */
  --th-sleep-awake: #F59AC4;  /* Sleep stage: awake */

  /* Semantic aliases kept from v1 */
  --th-accent: var(--th-pace);
  --th-on-accent: var(--th-on-pace);

  /* Type */
  --th-font-display: "Archivo", "Arial Black", system-ui, sans-serif; /* weight 800, font-stretch 125% */
  --th-font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --th-font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* every number; tabular-nums */
  --th-text-xs: 12px; --th-text-sm: 14px; --th-text-md: 16px; --th-text-lg: 18px; --th-text-xl: 20px; --th-text-2xl: 24px; --th-text-3xl: 34px; --th-text-4xl: 48px; --th-text-5xl: 64px;

  /* Space (4px base), radius */
  --th-space-1: 4px; --th-space-2: 8px; --th-space-3: 12px; --th-space-4: 16px; --th-space-5: 24px; --th-space-6: 32px; --th-space-7: 48px; --th-space-8: 64px; --th-space-9: 96px; --th-space-10: 128px;
  --th-radius-sm: 6px; --th-radius-md: 10px; --th-radius-lg: 16px; --th-radius-xl: 20px; --th-radius-full: 999px;

  /* Motion */
  --th-ease: cubic-bezier(.6, 0, .2, 1);
  --th-ease-out: cubic-bezier(.2, 0, 0, 1);
  --th-dur-fast: 150ms; --th-dur-base: 250ms; --th-dur-slow: 400ms; --th-dur-draw: 900ms; --th-dur-ring: 1300ms;

  /* Focus */
  --th-focus-ring: 2px solid var(--th-pace);
  --th-focus-offset: 3px;
}

/* Retired in v0.3. Temporary aliases so nothing renders blank mid-migration.
   Delete this block once `scripts/audit-colours.sh` reports zero hits. */
:root {
  --th-rose: var(--th-negative);   /* illness → negative; fatigue lines → text-muted */
  --th-teal: var(--th-strength);   /* strength only; other uses → chalk or text-muted */
  --th-violet: var(--th-text-muted); /* NOT bike: violet used to mean sleep/recovery/other. Re-map each use */
}

.th-display { font-family: var(--th-font-display); font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; line-height: 0.95; }
.th-metric  { font-family: var(--th-font-data); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
:focus-visible { outline: var(--th-focus-ring); outline-offset: var(--th-focus-offset); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* base.css */
/* LankFit marketing site styles. From handoff/reference-html/styles.css, split in three (cascade order preserved: base, components, charts).
   brand-tokens.css loads first, unchanged. Mobile-first: base rules are 375px; breakpoints at 720px and 1040px. No hex colours here: use the --th-* tokens. */
body{margin:0;background:var(--th-ink);color:var(--th-chalk);font-family:var(--th-font-ui);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}
p,li,span,a,dd,dt,td,th{overflow-wrap:break-word}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ch-lg{display:none}.ch-sm{display:block}
a.card{transition:border-color 150ms var(--th-ease),transform 250ms var(--th-ease)}
a.card:hover{border-color:color-mix(in srgb,var(--th-chalk) 30%,var(--th-line));transform:translateY(-2px)}
.row>*{min-width:0}
.tbl{font-size:13px}
.drawer .sub{min-height:44px;font-size:15px;color:var(--th-text-muted);padding-left:16px}
.toc-wrap{padding:16px;border:1px solid var(--th-line);border-radius:16px;background:var(--th-surface)}
.mega{max-height:calc(100vh - 64px);overflow-y:auto}
@media (prefers-reduced-motion:reduce){a.card:hover{transform:none}}
a{color:var(--th-chalk)}a:hover{color:var(--th-pace)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--th-pace);outline-offset:3px;border-radius:6px}
.th-display{font-family:var(--th-font-display);font-weight:800;font-stretch:125%;letter-spacing:-0.02em;line-height:0.95;overflow-wrap:break-word;text-wrap:balance}
.th-metric,.mono{font-family:var(--th-font-data);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.wrap{max-width:1400px;margin:0 auto;padding:0 16px}
.narrow{max-width:800px}
.sec{padding-top:64px;padding-bottom:64px}
.sec-sm{padding-top:40px;padding-bottom:40px}
.bt{border-top:1px solid var(--th-line)}
.band{background:var(--th-surface)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrapf{flex-wrap:wrap}
.muted{color:var(--th-text-muted)}
.eyebrow{margin:0;font-family:var(--th-font-data);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--th-text-muted)}
.h1{margin:0;font-size:clamp(30px,8.4vw,38px)}
.h2{margin:0;font-size:clamp(24px,6.6vw,28px)}
.h3{margin:0;font-size:20px;font-weight:600;line-height:1.3}
.h4{margin:0;font-size:16px;font-weight:600;line-height:1.35}
.lead{margin:0;font-size:17px;line-height:1.6;color:var(--th-text-muted);max-width:60ch}
.body{margin:0;font-size:15px;line-height:1.6;color:var(--th-text-muted)}
.small{font-size:13px;color:var(--th-text-muted)}
.xs{font-size:12px;color:var(--th-text-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:10px;font:600 16px var(--th-font-ui);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background 150ms var(--th-ease),border-color 150ms var(--th-ease),color 150ms var(--th-ease)}
.btn-p{background:var(--th-pace);color:var(--th-ink)}.btn-p:hover{background:var(--th-pace-hover)}
.btn-s{border-color:var(--th-line);color:var(--th-chalk);background:transparent;font-weight:500}.btn-s:hover{border-color:var(--th-text-muted);color:var(--th-chalk)}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;text-decoration:none;color:var(--th-chalk)}
.card{background:radial-gradient(120% 80% at 100% 0%,var(--glow,color-mix(in srgb,var(--th-pace) 9%,transparent)) 0%,transparent 55%),linear-gradient(180deg,var(--th-surface-2) 0%,var(--th-surface) 70%);border:1px solid var(--th-line);border-radius:20px}
.pad{padding:20px}.pad-l{padding:22px}
.g-swim{--glow:color-mix(in srgb,var(--th-swim) 13%,transparent)}
.g-bike{--glow:color-mix(in srgb,var(--th-bike) 12%,transparent)}
.g-run{--glow:color-mix(in srgb,var(--th-run) 10%,transparent)}
.g-chalk{--glow:color-mix(in srgb,var(--th-chalk) 5%,transparent)}
.g-pace{--glow:color-mix(in srgb,var(--th-pace) 12%,transparent)}
.g-negative{--glow:color-mix(in srgb,var(--th-negative) 10%,transparent)}
.g-gold{--glow:color-mix(in srgb,var(--th-gold) 11%,transparent)}
.g-positive{--glow:color-mix(in srgb,var(--th-positive) 10%,transparent)}
.g-none{--glow:color-mix(in srgb,var(--th-chalk) 4%,transparent)}
.g-transition{--glow:color-mix(in srgb,var(--th-chalk) 5%,transparent)}
.ficon{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;flex-shrink:0}
.grid2,.grid3,.grid4,.grid5,.split,.g-hero,.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.split{gap:32px;align-items:center}
.grid5{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid5>:last-child:nth-child(odd){grid-column:1/-1}
.g-hero{gap:40px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--th-line);font-size:14px;font-weight:600;color:var(--th-chalk);background:transparent}
.pill{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-family:var(--th-font-data);font-size:11px;font-weight:600;border:1px solid var(--th-line);color:var(--th-text-muted);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.dash{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5}
.dash li{display:flex;gap:12px}.dash li::before{content:"—";color:var(--th-text-muted)}
.checks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.checks li{display:flex;gap:10px;align-items:flex-start}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:10px 0;text-align:right;border-top:1px solid var(--th-line);vertical-align:middle}
.tbl thead th{border-top:0;font-size:12px;font-weight:500;color:var(--th-text-muted);padding:4px 0}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl tbody th{font-weight:500}
.tbl td{font-family:var(--th-font-data);font-weight:600;font-variant-numeric:tabular-nums}
.tbl.txt td{font-family:var(--th-font-ui);font-weight:400}
.tbl td+td,.tbl th+th{padding-left:10px}
@media (min-width:720px){.tbl{font-size:14px}.tbl td+td,.tbl th+th{padding-left:12px}}
.kpi{display:flex;flex-direction:column;gap:4px}
.kpi b{font-family:var(--th-font-data);font-weight:600;font-size:24px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--th-text-muted)}
.scroll-x{overflow-x:auto}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.input{min-height:48px;padding:0 14px;border-radius:10px;border:1px solid var(--th-line);background:var(--th-ink);color:var(--th-chalk);font:400 16px var(--th-font-ui);width:100%}
textarea.input{padding:12px 14px;min-height:140px;resize:vertical}
.input::placeholder{color:var(--th-text-muted)}

/* components.css */
/* Header, footer, toggle, tabs, docs, chat, FAQ */
/* header */
.hdr{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--th-ink) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--th-line)}
.hdr-in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-d{display:none;align-items:center;gap:4px}
.nav-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:8px;font:500 15px var(--th-font-ui);color:var(--th-text-muted);text-decoration:none;background:transparent;border:0;cursor:pointer}
.nav-a:hover,.nav-a[aria-current="page"],.nav-a[aria-expanded="true"]{color:var(--th-chalk)}
.nav-a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--th-chalk)}
.mega{position:absolute;left:0;right:0;top:64px;background:var(--th-surface);border-bottom:1px solid var(--th-line);box-shadow:0 24px 48px rgba(0,0,0,.35)}
.mega-g{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:24px 0}
.mega-i{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:12px;text-decoration:none;color:var(--th-chalk)}
.mega-i:hover{background:var(--th-surface-2);color:var(--th-chalk)}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--th-line);background:transparent;color:var(--th-chalk);cursor:pointer}
.drawer{border-top:1px solid var(--th-line);background:var(--th-surface);padding:12px 0 20px}
.drawer a{display:flex;align-items:center;min-height:48px;padding:0 4px;color:var(--th-chalk);text-decoration:none;font-size:17px;border-bottom:1px solid var(--th-line)}
.hide-sm{display:none}
/* footer */
.ftr{border-top:1px solid var(--th-line);background:var(--th-surface)}
.ftr-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.ftr h2,.ftr h3{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--th-chalk)}
.ftr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ftr ul a{color:var(--th-text-muted);text-decoration:none;font-size:14px}.ftr ul a:hover{color:var(--th-chalk)}
.soc{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px dashed var(--th-line);color:var(--th-text-muted);font-size:13px;cursor:not-allowed;opacity:.75}
.soc:hover{opacity:1;border-style:solid}
.soc em{font-style:normal;font-family:var(--th-font-data);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
/* toggle + tabs + filters */
.seg{display:inline-flex;padding:4px;border-radius:12px;border:1px solid var(--th-line);background:var(--th-ink);gap:4px}
.seg button{min-height:44px;padding:0 14px;border-radius:8px;border:0;background:transparent;color:var(--th-text-muted);font:600 14px var(--th-font-ui);cursor:pointer}
.seg button.on{background:var(--th-surface-2);color:var(--th-chalk);box-shadow:inset 0 0 0 1px var(--th-line)}
.fbtn{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--th-line);background:transparent;color:var(--th-text-muted);font:500 14px var(--th-font-ui);cursor:pointer}
.fbtn.on{background:var(--th-chalk);border-color:var(--th-chalk);color:var(--th-ink)}
/* docs */
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.toc{display:flex;flex-direction:column;gap:2px}
.toc a{display:block;padding:14px 12px;border-left:2px solid var(--th-line);color:var(--th-text-muted);text-decoration:none;font-size:14px}
.toc a:hover{color:var(--th-chalk);border-left-color:var(--th-chalk)}
.prose{max-width:720px;font-size:16px;line-height:1.7;color:color-mix(in srgb,var(--th-chalk) 88%,var(--th-text-muted))}
.prose h2{font-family:var(--th-font-ui);font-size:24px;font-weight:700;line-height:1.25;color:var(--th-chalk);margin:48px 0 12px;scroll-margin-top:96px}
.prose h3{font-size:18px;font-weight:600;color:var(--th-chalk);margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose strong{color:var(--th-chalk)}
.prose a{color:var(--th-pace)}
.todo{display:inline;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--th-gold) 16%,transparent);color:var(--th-gold);font-family:var(--th-font-data);font-size:.85em;font-weight:600}
.draft{border:1px solid color-mix(in srgb,var(--th-gold) 50%,transparent);background:color-mix(in srgb,var(--th-gold) 8%,transparent);color:var(--th-gold);border-radius:12px;padding:14px 18px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center}
.quote{margin:32px 0;padding:8px 0 8px 24px;border-left:3px solid var(--th-chalk);font-family:var(--th-font-display);font-weight:800;font-stretch:125%;font-size:26px;line-height:1.15;letter-spacing:-.01em;color:var(--th-chalk)}
/* chat */
.bub-u{align-self:flex-end;max-width:85%;background:var(--th-surface-2);border:1px solid var(--th-line);border-radius:16px 16px 4px 16px;padding:12px 16px;font-size:15px}
.bub-a{align-self:flex-start;max-width:92%;border-radius:16px 16px 16px 4px;padding:14px 16px;font-size:15px;line-height:1.55;background:color-mix(in srgb,var(--th-chalk) 10%,var(--th-surface));border:1px solid color-mix(in srgb,var(--th-chalk) 30%,var(--th-line))}
/* faq */
details.qa{border-top:1px solid var(--th-line)}
details.qa summary{list-style:none;cursor:pointer;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:17px;font-weight:600}
details.qa summary::-webkit-details-marker{display:none}
details.qa .pl{transition:transform 250ms var(--th-ease)}
details.qa[open] .pl{transform:rotate(45deg)}
details.qa p{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--th-text-muted);max-width:680px}

/* charts.css */
/* Charts, motion, responsive grid, app frame */
/* charts */
.hm{aspect-ratio:1;border-radius:2px;background:var(--th-surface-2)}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 900ms var(--th-ease) forwards}
.draw.d2{animation-delay:250ms}.draw.d3{animation-delay:500ms}
.fade{opacity:0;animation:fade 600ms var(--th-ease) 400ms forwards}
.pop{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop 250ms var(--th-ease) 900ms forwards}
.ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:ripple 1.8s var(--th-ease) 1.1s infinite}
.grow{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:grow 600ms var(--th-ease) forwards}
.growx{transform-origin:left;transform:scaleX(0);animation:growx 700ms var(--th-ease) forwards}
.ring{stroke-dasharray:var(--v) 100;animation:ring 1.3s var(--th-ease) both}
.skel{background:linear-gradient(90deg,var(--th-surface-2) 0%,color-mix(in srgb,var(--th-surface-2) 60%,var(--th-line)) 50%,var(--th-surface-2) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:6px}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pop{to{transform:scale(1)}}
@keyframes ripple{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@keyframes grow{to{transform:scaleY(1)}}
@keyframes growx{to{transform:scaleX(1)}}
@keyframes ring{from{stroke-dasharray:0 100}}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.draw,.fade,.pop,.ring,.grow,.growx,.skel{animation:none!important;stroke-dashoffset:0;opacity:1;transform:none}.ripple{animation:none;opacity:0}}
@media (min-width:720px){
.wrap{padding:0 clamp(24px,3.2vw,56px)}
.sec{padding-top:96px;padding-bottom:96px}
.sec-sm{padding-top:48px;padding-bottom:48px}
.pad{padding:24px}.pad-l{padding:28px}
.h1{font-size:46px}.h2{font-size:34px}
.ch-lg{display:block}.ch-sm{display:none}
.grid5{gap:16px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid5{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.ftr-g{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.hide-sm{display:revert}
}
@media (min-width:1040px){
.h1{font-size:54px}.h2{font-size:38px}
.hero-h{font-size:56px}
.nav-d{display:flex}.burger{display:none}
.g-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:56px}
.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
.split.rev>:first-child{order:2}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mega-g{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento{grid-template-columns:repeat(6,minmax(0,1fr))}
.b2{grid-column:span 2}.b3{grid-column:span 3}.b4{grid-column:span 4}.b6{grid-column:span 6}
.doc{grid-template-columns:240px minmax(0,1fr);gap:64px}
.toc-wrap{position:sticky;top:96px;align-self:start;padding:0;border:0;background:none}
}

@media (min-width:1040px){.split.side{grid-template-columns:200px minmax(0,1fr)}.split.wide{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.gx{display:none}@media (min-width:720px){.gx{display:inline}}
.pace{display:block;font-size:11px;font-weight:500;color:var(--th-text-muted);margin-top:2px}

.hm.l1{background:var(--th-heat-1)}
.hm.l2{background:var(--th-heat-2)}
.hm.l3{background:var(--th-heat-3)}
.hm.l4{background:var(--th-heat-4)}
.hm.hm-today{box-shadow:0 0 0 1.5px var(--th-chalk);position:relative;z-index:1}
@media (max-width:719px){.hm-mo span:nth-child(even){visibility:hidden}}
.bs{display:inline-block}
.bs-illness{background:color-mix(in srgb,var(--th-negative) 20%,transparent);box-shadow:inset 0 2px 0 var(--th-negative)}
.bs-injury{background:color-mix(in srgb,var(--th-warning) 20%,transparent);box-shadow:inset 0 2px 0 var(--th-warning)}
.bs-taper{background:repeating-linear-gradient(135deg,rgba(244,242,236,.18) 0 2px,transparent 2px 7px);box-shadow:inset 0 2px 0 var(--th-text-muted)}
.bs-recovery{background:radial-gradient(rgba(244,242,236,.32) 1.2px,transparent 1.5px) 0 0/7px 7px;box-shadow:inset 0 2px 0 var(--th-text-muted)}
.appframe{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--th-line);border-radius:20px;overflow:hidden;background:var(--th-ink);box-shadow:0 40px 80px rgba(0,0,0,.45)}
.app-side{display:none;border-right:1px solid var(--th-line);background:color-mix(in srgb,var(--th-surface) 60%,var(--th-ink));padding:18px 12px}
.app-side .grp{font-family:var(--th-font-data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--th-text-muted);padding:14px 10px 6px}
.app-side .it{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--th-text-muted)}
.app-side .it.on{background:var(--th-surface-2);color:var(--th-chalk);box-shadow:inset 2px 0 0 var(--th-pace)}
.rng{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--th-line);border-radius:10px}
.rng span{padding:4px 9px;border-radius:7px;font-size:11px;color:var(--th-text-muted)}
.rng span.on{background:var(--th-pace);color:var(--th-ink);font-weight:600}
@media (min-width:1040px){.appframe{grid-template-columns:200px minmax(0,1fr)}.app-side{display:block}}

/* app-ui.css */
/* Sample-data mockup of the app's Today dashboard. Uses only brand tokens. */
.dash{container-type:inline-size;display:grid;gap:14px;text-align:left}
.dash-card{position:relative;background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--th-pace) 9%,transparent) 0%,transparent 58%),linear-gradient(180deg,var(--th-surface-2) 0%,var(--th-surface) 72%);border:1px solid var(--th-line);border-radius:22px;padding:22px}
.dash-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:600 11px/1 var(--th-font-data);letter-spacing:.1em;text-transform:uppercase;color:var(--th-text-muted)}
.dash-eyebrow svg{flex-shrink:0}
.dash-today{display:grid;grid-template-columns:1fr;gap:20px}
.dash-greet{margin:0;font-size:clamp(28px,5.2cqi,44px);line-height:1}
.dash-date{margin:6px 0 10px;font-size:13px;color:var(--th-text-muted)}
.dash-advice{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--th-chalk);max-width:52ch}
.dash-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dash-tile{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--th-line);border-radius:14px;background:color-mix(in srgb,var(--th-ink) 40%,transparent)}
.dash-tile-l{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--th-text-muted)}
.dash-tile-v{font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--th-chalk);line-height:1}
.dash-tile-s{font-size:12px;color:var(--th-text-muted)}
.dash-chip{display:inline-block;padding:3px 9px;border-radius:999px;font:600 11px/1.2 var(--th-font-ui)}
.dash-chip-pos{color:var(--th-positive);background:color-mix(in srgb,var(--th-positive) 16%,transparent)}
.dash-chip-warm{color:var(--th-pace);background:color-mix(in srgb,var(--th-pace) 16%,transparent)}
.dash-chip-neg{color:var(--th-negative);background:color-mix(in srgb,var(--th-negative) 14%,transparent)}
.dash-ready{display:flex;flex-direction:column;align-items:center;gap:16px}
.dash-ring{position:relative;width:min(100%,176px);aspect-ratio:1}
.dash-ring svg{width:100%;height:100%;display:block}
.dash-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.dash-ring-v{font-size:40px;font-weight:600;line-height:1;color:var(--th-chalk)}
.dash-ring-v small{font-size:16px;margin-left:2px;color:var(--th-text-muted)}
.dash-ring-l{font-size:12px;color:var(--th-text-muted)}
.dash-bars{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%;max-width:280px}
.dash-bars li{display:grid;grid-template-columns:62px 1fr 38px;align-items:center;gap:10px;font-size:12px;color:var(--th-text-muted)}
.dash-bar{display:block;height:6px;border-radius:3px;background:var(--th-line);overflow:hidden}
.dash-bar b{display:block;height:100%;border-radius:3px}
.dash-bars em{font-style:normal;text-align:right;color:var(--th-chalk)}
.dash-grid{display:grid;grid-template-columns:1fr;gap:14px}
.dash-col{display:grid;gap:14px;align-content:start}
.dash-race{display:flex;gap:16px;align-items:center}
.dash-count{flex-shrink:0;width:84px;height:84px;border-radius:18px;border:1px solid color-mix(in srgb,var(--th-pace) 40%,var(--th-line));background:color-mix(in srgb,var(--th-pace) 10%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center}
.dash-count .mono{font-size:36px;font-weight:600;line-height:1;color:var(--th-pace)}
.dash-count small{font-size:12px;color:var(--th-text-muted)}
.dash-race-n{margin:0 0 4px;font-size:clamp(20px,3.4cqi,28px);line-height:1.05}
.dash-race-m{margin:0 0 6px;font-size:13px;color:var(--th-text-muted);line-height:1.4}
.dash-phase{position:relative;display:flex;height:8px;border-radius:4px;margin-top:18px;gap:2px}
.dash-ph-a{flex:1;border-radius:4px;background:color-mix(in srgb,var(--th-pace) 60%,var(--th-line))}
.dash-ph-b{flex:5;border-radius:4px;background:var(--th-swim)}
.dash-ph-dot{position:absolute;right:-3px;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--th-gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--th-gold) 25%,transparent)}
.dash-phase-l{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:11px;color:var(--th-text-muted)}
.dash-goal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--th-line);font-size:14px}
.dash-goal-l{color:var(--th-text-muted)}
.dash-goal-v{color:var(--th-chalk);font-weight:600}
.dash-feel{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:15px;color:var(--th-chalk)}
.dash-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dash-dot-pos{background:var(--th-positive)}.dash-dot-warm{background:var(--th-gold)}.dash-dot-mute{background:var(--th-text-muted)}
.dash-fakebtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dash-fake{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--th-line);border-radius:12px;background:color-mix(in srgb,var(--th-ink) 35%,transparent);font:600 13px/1.2 var(--th-font-ui);color:var(--th-chalk);text-align:center;white-space:nowrap}
.dash-note{margin:12px 0 0;font-size:12px;color:var(--th-text-muted)}
.dash-count-pill{margin-left:4px;padding:2px 8px;border-radius:999px;background:var(--th-pace);color:var(--th-on-accent);font-size:11px;letter-spacing:0}
.dash-attn{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dash-attn li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--th-line);border-radius:14px;background:color-mix(in srgb,var(--th-ink) 35%,transparent)}
.dash-attn b{display:block;font-size:14px;color:var(--th-chalk)}
.dash-attn p{margin:2px 0 0;font-size:12px;color:var(--th-text-muted);line-height:1.4}
.dash-next{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--th-line);border-radius:14px;background:color-mix(in srgb,var(--th-ink) 35%,transparent)}
.dash-next b{font-size:15px;color:var(--th-chalk)}
.dash-next p{margin:4px 0 0;font-size:13px;color:var(--th-text-muted);line-height:1.5}
.dash-next-i{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--th-positive);background:color-mix(in srgb,var(--th-positive) 14%,transparent)}
@container (min-width:560px){
  .dash-today{grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:start}
  .dash-today-main{display:contents}
  .dash-today>.dash-ready{grid-column:2;grid-row:1 / span 4;align-items:flex-start}
  .dash-tiles{grid-column:1 / -1}
  .dash-today-main>*{grid-column:1}
  .dash-today-main>.dash-tiles{grid-column:1 / -1}
}
@container (min-width:560px){
  .dash-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container (min-width:820px){
  .dash-grid{grid-template-columns:1.25fr 1fr}
}
@container (max-width:559px){
  .dash-attn li{grid-template-columns:auto 1fr}
  .dash-attn .dash-fake{grid-column:2;justify-self:start}
}

/* reset the site's list styling inside the mock */
.dash ul{list-style:none;margin:0;padding:0}
.dash li::before{content:none!important;display:none!important}
.dash li{padding-left:0}
.dash-hero .dash-greet{font-size:clamp(26px,4.4cqi,38px)}

/* ---- Round two: the dashboard as it is now (today's training, what to do next, watch-outs) and the coach view ---- */
.dash-rows{display:grid;gap:10px}
.dash-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--th-line);border-radius:14px;background:color-mix(in srgb,var(--th-ink) 35%,transparent)}
.dash-row b{display:block;font-size:14px;color:var(--th-chalk)}
.dash-row p{margin:2px 0 0;font-size:12px;color:var(--th-text-muted);line-height:1.45}
.dash-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--th-surface-3);color:var(--th-text-2)}
.dash-ico svg{width:20px;height:20px}
.dash-pts{font:600 15px/1 var(--th-font-data);color:var(--th-positive);text-align:right;white-space:nowrap}
.dash-pts small{display:block;margin-top:4px;font:500 11px/1.2 var(--th-font-data);color:var(--th-text-muted)}
.dash-chip-ok{color:var(--th-positive);background:color-mix(in srgb,var(--th-positive) 16%,transparent)}
.dash-chip-gold{color:var(--th-gold);background:color-mix(in srgb,var(--th-gold) 16%,transparent)}
.dash-chip-mute{color:var(--th-text-2);background:var(--th-surface-3)}
.dash-chip-line{color:var(--th-text-2);border:1px solid var(--th-line)}
.dash-deltas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.dash-delta{font-size:11px;color:var(--th-text-muted)}
.dash-delta b{display:block;margin-top:3px;font:600 13px/1.2 var(--th-font-data);color:var(--th-chalk)}
.dash-delta b i{font-style:normal;color:var(--th-text-muted);padding:0 3px}
.dash-sub{margin:0 0 10px;font-size:12px;color:var(--th-text-muted)}
.dash-hr{height:1px;background:var(--th-line);margin:14px 0;border:0}
.dash-kv{display:grid;grid-template-columns:1fr auto;gap:8px 16px;font-size:14px;color:var(--th-text-2)}
.dash-kv span:nth-child(even){font-family:var(--th-font-data);font-weight:600;color:var(--th-chalk);text-align:right}
.dash-meter{position:relative;height:10px;border-radius:5px;background:var(--th-line);margin:18px 0 6px}
.dash-meter i{position:absolute;top:0;bottom:0;border-radius:5px}
.dash-meter em{position:absolute;top:-4px;width:2px;height:18px;background:var(--th-chalk);border-radius:1px}
.dash-meter-l{display:flex;justify-content:space-between;font-size:11px;color:var(--th-text-muted)}
.dash-fake-sm{padding:6px 12px;font-size:12px}
/* coach */
.dash-athletes{width:100%;border-collapse:collapse;font-size:13px}
.dash-athletes th{text-align:left;font:600 11px/1 var(--th-font-data);letter-spacing:.08em;text-transform:uppercase;color:var(--th-text-muted);padding:0 10px 10px 0}
.dash-athletes td{padding:10px 10px 10px 0;border-top:1px solid var(--th-line);color:var(--th-text-2);vertical-align:middle}
.dash-athletes td:first-child{color:var(--th-chalk);font-weight:600;white-space:nowrap}
.dash-athletes .dash-bar{width:84px;display:inline-block;vertical-align:middle;margin-right:8px}
.dash-athletes .num{font-family:var(--th-font-data);color:var(--th-chalk)}
.dash-scroll{overflow-x:auto}
.dash-chart{display:block;width:100%;height:auto}
.dash-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:11px;color:var(--th-text-muted)}
.dash-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:baseline}
.dash-pill-view{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--th-line-strong);border-radius:999px;font-size:12px;color:var(--th-text);background:var(--th-surface-2)}
.dash-pill-view b{color:var(--th-pace)}
/* activity detail */
.dash-map{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--th-line);background:var(--th-surface-2)}
.dash-map svg{display:block;width:100%;height:auto}
.dash-splits{display:grid;gap:6px;margin-top:12px}
.dash-split{display:grid;grid-template-columns:34px 1fr 62px;gap:10px;align-items:center;font-size:12px;color:var(--th-text-muted)}
.dash-split .dash-bar{height:8px}
.dash-split .mono{text-align:right;color:var(--th-chalk)}
/* trial steps */
.trial-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:ts}
.trial-step{position:relative;padding:20px 20px 20px 20px;border:1px solid var(--th-line);border-radius:16px;background:var(--th-surface)}
.trial-step::before{counter-increment:ts;content:counter(ts);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--th-surface-3);color:var(--th-chalk);font:600 13px/1 var(--th-font-data);margin-bottom:12px}
.trial-step.now::before{background:var(--th-pace);color:var(--th-on-accent)}
.trial-step b{display:block;font-size:16px;color:var(--th-chalk);margin-bottom:4px}
.trial-step span{font-size:14px;color:var(--th-text-muted);line-height:1.5}
@container (max-width:559px){.dash-deltas{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-row{grid-template-columns:auto 1fr}.dash-row>.dash-pts,.dash-row>.dash-fake{grid-column:2;justify-self:start;text-align:left}}
.dash-pill-view{flex-wrap:wrap;max-width:100%}
.dash-col,.dash-card{min-width:0}

/* Coach mocks */
.coach-charts{grid-template-columns:1fr}
@container (min-width:700px){.coach-charts{grid-template-columns:1fr 1fr}}
.coach-cons{display:grid;gap:6px}
.coach-cons-r{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;font-size:12px;color:var(--th-text-muted)}
.coach-cons-c{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.coach-cons-c .hm{border-radius:3px}
.coach-mixes{display:grid;gap:10px}
.coach-mix-r{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;font-size:12px;color:var(--th-text-muted)}
.dash-bar.coach-mix{display:flex;height:10px;gap:2px;background:none}
.dash-bar.coach-mix b{display:block;height:100%;border-radius:3px}
.coach-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.coach-locks{display:flex;flex-wrap:wrap;gap:8px}
.coach-modal{padding:16px;border:1px solid var(--th-line-strong);border-radius:16px;background:color-mix(in srgb,var(--th-ink) 45%,transparent)}
.coach-modal>b{font-size:16px;color:var(--th-chalk)}
.coach-modal>p{margin:4px 0 12px;font-size:13px;color:var(--th-text-muted)}
.coach-window{border:1px solid var(--th-line);border-radius:26px;padding:14px;background:var(--th-surface);box-shadow:0 30px 80px color-mix(in srgb,var(--th-ink) 70%,transparent)}
.coach-window-bar{display:flex;align-items:center;gap:7px;padding:2px 6px 12px}
.coach-window-bar i{width:10px;height:10px;border-radius:50%;background:var(--th-line-strong)}
.coach-window-bar span{margin-left:10px;font:500 12px var(--th-font-data);color:var(--th-text-muted)}
.coach-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--th-line);border-bottom:1px solid var(--th-line)}
.coach-facts>div{padding:20px 20px 20px 0}
.coach-facts b{display:block;font:600 22px/1.1 var(--th-font-display);color:var(--th-chalk);margin-bottom:4px}
.coach-facts span{font-size:14px;color:var(--th-text-muted);line-height:1.5}
.coach-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.coach-vs{grid-template-columns:1fr}}
.coach-vs ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.coach-vs li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--th-text-2)}
.coach-vs li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;border-radius:1px;background:var(--th-text-muted)}
.coach-vs .yes li::before{background:var(--th-pace)}
.coach-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.coach-rule{padding:20px;border:1px solid var(--th-line);border-radius:18px;background:var(--th-surface);display:grid;gap:10px;align-content:start}
.coach-rule b{font-size:17px;color:var(--th-chalk)}
.coach-rule p{margin:0;font-size:14px;color:var(--th-text-muted);line-height:1.5}
.coach-rule .dash-row{margin-top:2px}
.fc-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
@media (max-width:900px){.fc-hero{grid-template-columns:1fr;gap:32px}}
.coach-cons-c .hm{background:var(--th-surface-3)}
.coach-cons-c .hm.l1{background:color-mix(in srgb,var(--th-pace) 20%,var(--th-surface-3))}
.coach-cons-c .hm.l2{background:color-mix(in srgb,var(--th-pace) 42%,var(--th-surface-3))}
.coach-cons-c .hm.l3{background:color-mix(in srgb,var(--th-pace) 70%,var(--th-surface-3))}
.coach-cons-c .hm.l4{background:var(--th-pace)}

/* Records mocks (sample data): class, level and XP, a milestone ladder, placings. Tokens only. */
.rec-mock{display:grid;gap:18px}
.rec-eyebrow{display:block;font:600 11px var(--th-font-data);letter-spacing:.08em;text-transform:uppercase;color:var(--th-text-2)}
.rec-top{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.rec-class,.rec-level,.rec-cab{border:1px solid var(--th-line);border-radius:16px;padding:18px 20px;display:grid;gap:8px;align-content:start;background:color-mix(in srgb,var(--th-ink) 40%,transparent)}
.rec-tier{font:800 30px/1.1 var(--th-font-display);color:var(--th-chalk)}
.rec-sub{font-size:13px;color:var(--th-text-2);line-height:1.5}.rec-sub b{color:var(--th-chalk)}.rec-up{color:var(--th-chalk)}
.rec-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.rec-chips span{border:1px solid var(--th-line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--th-text-2)}.rec-chips b{color:var(--th-chalk)}
.rec-lvl{display:flex;align-items:baseline;gap:10px}.rec-lvl b{font:800 46px/1 var(--th-font-display);color:var(--th-chalk)}.rec-lvl span{color:var(--th-gold);font-size:17px}
.rec-bar{height:8px;border-radius:4px;background:var(--th-line);overflow:hidden}.rec-bar i{display:block;height:100%;background:var(--th-gold);border-radius:4px}
.rec-quests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rec-quest{display:flex;gap:14px;align-items:center;border:1px solid var(--th-line);border-radius:16px;padding:14px 16px}.rec-quest div{display:grid;gap:3px;font-size:13px}.rec-quest b{color:var(--th-chalk);font-size:14px}.rec-quest span{color:var(--th-chalk)}.rec-quest em{font-style:normal;color:var(--th-text-2)}
.rec-ladder-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--th-text-2)}.rec-ladder-head b{color:var(--th-chalk)}
.rec-meter{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.rec-meter i{height:7px;border-radius:4px;background:var(--th-line)}.rec-meter i.d{background:color-mix(in srgb,var(--th-run) 55%,transparent)}.rec-meter i.h{background:var(--th-run);box-shadow:0 0 10px color-mix(in srgb,var(--th-run) 60%,transparent)}
.rec-meter-note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0;font-size:12px;color:var(--th-text-2)}.rec-meter-note b{color:var(--th-chalk)}.rec-pill{border:1px solid var(--th-line);border-radius:999px;padding:2px 9px;font:700 11px var(--th-font-data);letter-spacing:.05em;text-transform:uppercase}
.rec-rungs{display:flex;gap:12px;overflow-x:auto;padding:14px 2px 10px;scrollbar-width:thin}
.rec-rung{position:relative;flex:0 0 190px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:3px;align-items:center;padding:14px 16px 28px;border:1px dashed color-mix(in srgb,var(--th-text-2) 45%,transparent);border-radius:14px;opacity:.6;color:var(--th-text-2);font-size:12px}
.rec-rung b{color:var(--th-text-2);font-size:14px}.rec-rung span:not(.rec-badge){grid-column:2;font-family:var(--th-font-data)}.rec-rung small{grid-column:2;font:700 10px var(--th-font-data);letter-spacing:.06em;text-transform:uppercase}
.rec-badge{grid-row:1/span 4;align-self:start;width:36px;height:36px;border-radius:50%;border:1px dashed var(--th-text-2);display:grid;place-items:center}
.rec-prog{grid-column:2;height:5px;border-radius:3px;background:var(--th-line);overflow:hidden}.rec-prog i{display:block;height:100%;background:var(--th-text-2)}
.rec-xp{position:absolute;bottom:10px;right:14px;font:600 11px var(--th-font-data);font-style:normal}
.rec-rung.is-hit{opacity:1;border:1px solid color-mix(in srgb,var(--th-positive) 65%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--th-positive) 20%,transparent),color-mix(in srgb,var(--th-positive) 6%,transparent));color:var(--th-chalk)}
.rec-rung.is-hit b{color:var(--th-chalk)}.rec-rung.is-hit .rec-badge{background:var(--th-positive);border:1px solid var(--th-positive);color:var(--th-ink)}.rec-rung.is-hit .rec-xp{color:var(--th-positive)}
.m-bronze{color:var(--th-pace)}.m-silver{color:var(--th-text-2)}
.rec-rung.is-next{opacity:1;border:1.5px solid var(--th-pace);background:color-mix(in srgb,var(--th-pace) 9%,transparent)}.rec-rung.is-next .rec-badge{border:1px solid var(--th-pace);color:var(--th-pace)}.rec-rung.is-next .rec-prog{background:color-mix(in srgb,var(--th-pace) 22%,var(--th-line))}.rec-rung.is-next .rec-prog i{background:var(--th-pace)}.rec-rung.is-next .rec-xp{color:var(--th-pace)}.rec-rung.is-next b{color:var(--th-chalk)}
.rec-flag{position:absolute;top:-9px;right:12px;font:700 9px/1 var(--th-font-data);letter-spacing:.1em;font-style:normal;padding:3px 7px;border-radius:999px;background:var(--th-pace);color:var(--th-ink)}
.rec-cab{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:14px}.rec-cab div{border:1px solid var(--th-line);border-radius:12px;padding:12px 4px;text-align:center;opacity:.6;display:grid;gap:3px}.rec-cab div.on{opacity:1;border-color:color-mix(in srgb,var(--th-gold) 55%,var(--th-line));background:color-mix(in srgb,var(--th-gold) 8%,transparent)}.rec-cab b{font:800 24px/1 var(--th-font-display);color:var(--th-chalk)}.rec-cab span{font-size:10.5px;color:var(--th-text-2);line-height:1.25}
.rec-best{border:1px solid var(--th-line);border-radius:14px;overflow:hidden}.rec-best>div{display:grid;grid-template-columns:24px minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,.8fr);gap:8px 18px;align-items:center;padding:14px 18px;border-top:1px solid var(--th-line);font-size:13px;color:var(--th-text-2)}.rec-best>div:first-child{border-top:0}.rec-best i{font:800 18px var(--th-font-display);font-style:normal;color:var(--th-text-2)}.rec-best>div:first-child i{color:var(--th-gold)}.rec-best b{color:var(--th-chalk)}.rec-best small{display:block;font-size:11px;color:var(--th-text-2)}
.rec-field{font:600 10px var(--th-font-data);font-style:normal;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;border:1px solid var(--th-gold);color:var(--th-gold);margin-left:6px}.rec-field.s{border-color:var(--th-line);color:var(--th-text-2)}
.rec-next{display:flex;gap:8px;align-items:center;margin:0;font-size:12.5px;color:var(--th-text-2)}.rec-next b{color:var(--th-chalk)}
@media (max-width:760px){.rec-top,.rec-quests{grid-template-columns:1fr}.rec-cab{grid-template-columns:repeat(3,minmax(0,1fr))}.rec-best>div{grid-template-columns:24px 1fr}.rec-best>div>span:nth-child(n+3){grid-column:2}}

/* premium.css */
/* Premium layer for the home page: faint discipline line-art, manifesto band, results-over-time, discipline tabs, reveal-on-scroll. Tokens only. */
.hero-sec{position:relative;overflow:hidden}
.bg-ico{position:absolute;pointer-events:none;color:var(--ico,var(--th-chalk));opacity:.055;width:min(52vw,460px);height:auto;aspect-ratio:2/1;z-index:0;-webkit-mask-image:radial-gradient(closest-side,rgb(0 0 0) 40%,transparent 100%);mask-image:radial-gradient(closest-side,rgb(0 0 0) 40%,transparent 100%)}
.hero-sec>.wrap,.mf>.wrap,.rs-band>.wrap,.dc-sec>.wrap{position:relative;z-index:1}
.hero-ico{left:-6%;bottom:-8%;width:min(54vw,560px)}

/* Manifesto */
.mf{position:relative;overflow:hidden;padding:clamp(72px,10vw,140px) 0;background:radial-gradient(60% 80% at 50% 0%,color-mix(in srgb,var(--th-pace) 8%,transparent),transparent 70%)}
.mf-in{max-width:980px;margin:0 auto;text-align:center}
.mf-line{margin:14px 0 22px;font-size:clamp(36px,5.6vw,76px);line-height:.98;letter-spacing:-.025em}
.mf-sub{margin:0 auto;max-width:56ch;font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--th-text-muted)}
.mf-stats{display:grid;grid-template-columns:1fr;gap:0;margin:clamp(40px,6vw,72px) auto 0;border-top:1px solid var(--th-line);border-bottom:1px solid var(--th-line)}
.mf-stats>div{padding:26px 16px;display:flex;flex-direction:column;gap:8px;align-items:center}
.mf-stats b{font-size:clamp(40px,5vw,64px);font-weight:600;line-height:1;color:var(--th-chalk);letter-spacing:-.02em}
.mf-stats span{font-size:14px;color:var(--th-text-muted);max-width:26ch;line-height:1.45}
.mf-stats>div+div{border-top:1px solid var(--th-line)}
.mf-ico-a{left:-4%;top:6%;width:min(40vw,380px);transform:rotate(-8deg)}
.mf-ico-b{right:-5%;bottom:4%;width:min(42vw,420px);transform:rotate(6deg)}
@media (min-width:760px){.mf-stats{grid-template-columns:repeat(3,1fr)}.mf-stats>div+div{border-top:0;border-left:1px solid var(--th-line)}}

/* Section heads and results over time */
.rs-head{max-width:760px;margin:0 0 clamp(28px,4vw,48px)}
.rs-head .lead{margin-top:16px}
.rs-band{background:radial-gradient(70% 60% at 85% 0%,color-mix(in srgb,var(--th-chalk) 6%,transparent),transparent 70%)}
.rs-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1040px){.rs-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:stretch}}
.rs-side{display:grid;gap:16px;align-content:start}
.rs-stat{display:flex;flex-direction:column;gap:12px}
.rs-stat-l{font-size:13px;color:var(--th-text-muted)}
.rs-chip{padding:6px 12px;border-radius:999px;font:600 12px var(--th-font-data);color:var(--th-positive);background:color-mix(in srgb,var(--th-positive) 14%,transparent)}
.rs-legs{display:grid;gap:10px}
.rs-legs>div{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;font-size:15px}
.rs-legs i{width:10px;height:10px;border-radius:50%}
.rs-legs b{font-weight:600;color:var(--th-positive);font-size:18px}
.rs-place{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rs-place b{font-size:34px;font-weight:600;color:var(--th-chalk);line-height:1}
.rs-pbs{display:flex;flex-wrap:wrap;gap:8px}
.rs-pbs span{padding:8px 12px;border:1px solid var(--th-line);border-radius:12px;font-size:14px;color:var(--th-chalk);background:color-mix(in srgb,var(--th-ink) 40%,transparent)}
.rs-pbs b{font-weight:600;color:var(--th-gold);margin-right:6px}

/* Discipline tabs */
.dc-sec{position:relative}
.dc-tabs{margin:0 0 clamp(24px,3vw,40px)}
.dc-panel{position:relative;display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:center;overflow:hidden;padding:clamp(8px,2vw,24px) 0}
.dc-panel[hidden]{display:none}
@media (min-width:900px){.dc-panel{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.dc-ico{right:-4%;top:-14%;width:min(62%,560px);color:var(--dc);opacity:.085}
.dc-copy,.dc-card{position:relative;z-index:1}
.dc-eyebrow{color:var(--dc)}
.dc-h{margin:6px 0 14px;font-size:clamp(28px,3.6vw,48px);line-height:1}
.dc-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.dc-list li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:var(--th-chalk)}
.dc-list li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;border-radius:1px;background:var(--dc);display:block}
.dc-rows{display:grid}
.dc-rows>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--th-line);font-size:15px;color:var(--th-text-muted)}
.dc-rows b{color:var(--th-chalk);font-weight:600}
.dc-tabs button.on{box-shadow:inset 0 0 0 1px var(--th-line),inset 0 -2px 0 var(--th-pace)}

/* Reveal on scroll: only when JS has marked the document, so no-JS readers see everything. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--th-ease),transform .8s var(--th-ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .rs-line{stroke-dasharray:1;stroke-dashoffset:1}
.js .is-in .rs-line{animation:rsDraw 1.6s var(--th-ease) .2s forwards}
.js .rs-end{opacity:0}
.js .is-in .rs-end{animation:rsPop .6s var(--th-ease) 1.5s forwards}
@keyframes rsDraw{to{stroke-dashoffset:0}}
@keyframes rsPop{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .rs-line{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}
  .js .rs-end{opacity:1;animation:none!important}
}

/* extras.css */
/* Build additions that are not in the reference styles: skip link, hidden state, logo, menu visibility, newsletter status, placeholder pages. */
[hidden]{display:none!important}
html{overflow-x:clip}
.skip{position:absolute;left:16px;top:-64px;z-index:40;padding:12px 18px;border-radius:10px;background:var(--th-pace);color:var(--th-ink);font:600 15px var(--th-font-ui);text-decoration:none}
.skip:focus{top:12px;color:var(--th-ink)}
.logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;color:var(--th-chalk)}
.logo img{display:block;width:auto;height:22px;max-width:100%}
.drawer{max-height:calc(100vh - 64px);overflow-y:auto}
@media (max-width:1039px){.mega{display:none!important}}
@media (min-width:1280px){.drawer{display:none!important}}
.nl-status{margin:0}
.nl-status.err{color:var(--th-negative)}
.nl-status.info{color:var(--th-text-muted)}
.nl-status.ok{color:var(--th-positive)}
.input[aria-invalid="true"]{border-color:var(--th-negative)}
.seg button[aria-pressed="true"]{background:var(--th-surface-2);color:var(--th-chalk);box-shadow:inset 0 0 0 1px var(--th-line)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .skel{animation:none!important}
}
.hdr .btn{white-space:nowrap}
@media (max-width:719px){.logo img{height:16px}.hdr-in{gap:12px}}

/* legal pages: active contents link (toc.js) */
.toc a[aria-current="true"]{color:var(--th-chalk);border-left-color:var(--th-pace)}
.toc a:focus-visible{outline:2px solid var(--th-pace);outline-offset:2px}

/* Tap targets: standalone links meet the 44px minimum without changing how they read. */
.logo, .tlink { display: inline-flex; align-items: center; min-height: 44px; }
input[type="range"] { min-height: 44px; }

/* Very narrow phones (320px): tighten the header so logo, CTA and menu button fit. */
@media (max-width: 359px) {
  .hdr-in { gap: 8px; }
  .logo img { height: 13px; }
  .hdr .btn { padding-left: 12px; padding-right: 12px; font-size: 14px; }
}
@media (max-width: 400px) {
  .pill { max-width: 100%; white-space: normal; }
  [role="tablist"] { flex-wrap: wrap; max-width: 100%; }
}

/* Trust bar above the sticky header, and a fuller desktop nav (the burger takes over below 1280px so the links and the EN | AF toggle never crowd) */
.trust-bar{background:color-mix(in srgb,var(--th-chalk) 4%,var(--th-ink));border-bottom:1px solid var(--th-line);font:500 13px var(--th-font-ui);color:var(--th-text-muted)}
.trust-in{display:flex;justify-content:center;align-items:center;gap:8px 28px;min-height:38px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.trust-in span{display:inline-flex;align-items:center;gap:7px}
.trust-in .ic{color:var(--th-positive)}
@media (max-width:719px){.trust-opt{display:none}}
@media (min-width:1040px) and (max-width:1279px){.nav-d{display:none}.burger{display:inline-flex}}
.nav-a{white-space:nowrap}

/* The LankFit pulse, for any button whose action takes a moment (same mark as the app's loader) */
@keyframes th-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes th-run-head { from { stroke-dashoffset: -.27; } to { stroke-dashoffset: -1.27; } }
.th-spinner { display: inline-flex; align-items: center; vertical-align: middle; color: inherit; }
.th-spinner svg { display: block; overflow: visible; width: 24px; height: 17px; }
.th-spinner__base, .th-spinner__run { fill: none; stroke: currentColor; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.th-spinner__base { opacity: .22; }
.th-spinner__head { fill: none; stroke: var(--th-chalk); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .05 .95; animation: th-run-head 1.1s linear infinite; }
.th-spinner__run { stroke-dasharray: .32 .68; animation: th-run 1.1s linear infinite; }
.btn.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .th-spinner__run { animation-duration: 3s; } .th-spinner__head { animation: none; opacity: 0; } }

/* Blog illustrations: rim-lit macro kit, one lit edge in the discipline colour (GL-19). Hero banner on a post, 200px card art in lists. */
.post-art{border:1px solid var(--th-line);border-radius:20px;overflow:hidden;aspect-ratio:1000/340;max-height:340px;background:var(--th-ink)}
.card-art{border-radius:14px;overflow:hidden;height:170px;border:1px solid var(--th-line);background:var(--th-ink)}
.card-art-feature{height:auto;min-height:220px;align-self:stretch}
.post-art .art-svg,.card-art .art-svg{display:block;width:100%;height:100%}
@media (max-width:640px){.post-art{aspect-ratio:390/250}.card-art{height:150px}}

/* Post hero: the illustration sits behind the title, right-hand side, with an ink scrim from the left (GL-19 hero placement). */
.post-hero{position:relative;overflow:hidden}
.post-hero>.wrap{position:relative;z-index:1}
.post-hero .post-art-bg{position:absolute;top:0;right:0;bottom:0;width:72%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;background:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,black 48%);mask-image:linear-gradient(90deg,transparent 0,black 48%);opacity:.9}
.post-hero .post-art-bg .art-svg{width:100%;height:100%}
@media (max-width:760px){.post-hero .post-art-bg{width:100%;opacity:.35;-webkit-mask-image:none;mask-image:none}}

/* Features: the word is a link to /features/, the chevron opens the list */
.nav-split{display:inline-flex;align-items:center}
.nav-split .nav-a-link{padding-right:4px}
.nav-split .nav-chev{padding:0 8px 0 2px;min-width:28px;justify-content:center}
.nav-split:has(.nav-a-link[aria-current="page"]) .nav-chev,.nav-split:has(.nav-chev[aria-expanded="true"]) .nav-a-link{color:var(--th-chalk)}

/* Feature cards: a small sample of each feature, neutral tones (colour only where the data is a sport) */
.fviz{border:1px solid var(--th-line);border-radius:12px;background:color-mix(in srgb,var(--th-ink) 55%,transparent);padding:14px;min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:10px;font:500 12px var(--th-font-ui);color:var(--th-text-muted)}
.fviz b{color:var(--th-chalk);font-family:var(--th-font-data);font-weight:600}
.fv-ring{position:relative;width:64px;height:64px;flex:none}.fv-ring svg{width:100%;height:100%}.fv-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:15px}
.fviz:has(.fv-ring){flex-direction:row;align-items:center;gap:16px}
.fv-stack{display:flex;flex-direction:column;gap:6px}.fv-stack.row{flex-direction:row;flex-wrap:wrap}
.fv-tag{border:1px solid var(--th-line);border-radius:999px;padding:3px 9px;color:var(--th-chalk);font-size:11px;font-family:var(--th-font-data)}
.fv-band{position:relative;height:36px;border-radius:8px;background:repeating-linear-gradient(90deg,var(--th-line) 0 1px,transparent 1px 22px)}
.fv-band i{position:absolute;top:0;bottom:0;border-radius:6px;background:color-mix(in srgb,var(--th-chalk) 16%,transparent);border-top:3px solid var(--th-chalk)}.fv-band i.b{border-top-color:var(--th-text-muted);background:color-mix(in srgb,var(--th-chalk) 9%,transparent)}
.fv-splits{display:flex;gap:3px;height:22px}.fv-splits i{border-radius:5px}
.fv-meta{display:flex;justify-content:space-between;align-items:baseline}
.fv-cal{display:flex;gap:8px}.fv-cal span{flex:1;border:1px solid var(--th-line);border-radius:10px;padding:8px 6px;text-align:center;display:flex;flex-direction:column;font-size:11px}.fv-cal b{font-size:18px}.fv-cal .on{border-color:var(--th-chalk);color:var(--th-chalk)}
.fv-diff{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.fv-diff s{opacity:.6}.fv-diff b{color:var(--th-chalk)}
.fv-svg{width:100%;height:56px;display:block}
.fv-pb{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--th-line);padding-bottom:4px}.fv-pb:last-child{border:0;padding:0}.fv-pb b{font-size:15px}
.fv-row-chip{display:flex;gap:10px;align-items:center;border:1px solid var(--th-line);border-radius:10px;padding:8px 10px;color:var(--th-chalk)}.fv-row-chip i{width:8px;height:8px;border-radius:50%;background:var(--th-chalk);flex:none}
.fv-chat{display:flex;flex-direction:column;gap:6px}.fv-chat .q{align-self:flex-end;background:var(--th-surface-3,rgba(255,255,255,.08));color:var(--th-chalk);border-radius:12px 12px 4px 12px;padding:6px 10px}.fv-chat .a{align-self:flex-start;border:1px solid var(--th-line);border-radius:12px 12px 12px 4px;padding:6px 10px;color:var(--th-text-muted)}
.fv-conn{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--th-line);border-radius:10px;padding:7px 10px;color:var(--th-chalk)}.fv-conn b{font-size:11px;color:var(--th-text-muted);font-weight:500}
.fv-tog{display:flex;justify-content:space-between;align-items:center;color:var(--th-chalk)}.fv-tog i{width:30px;height:16px;border-radius:999px;background:var(--th-line);position:relative}.fv-tog i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--th-text-muted)}.fv-tog i.on{background:var(--th-chalk)}.fv-tog i.on::after{left:16px;background:var(--th-ink)}
.fv-row{display:flex;gap:8px;align-items:center}.fv-row i{height:6px;border-radius:3px;background:var(--th-chalk)}

/* ---- Conversion layer: trust strip, floating trial bar, real-offer banner, annual saving tag ---- */
.trust-strip .trust-row{list-style:none;margin:0;padding:22px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;color:var(--th-text-2);font-size:14px}
.trust-strip .trust-row li{position:relative;padding-left:22px}
.trust-strip .trust-row li::before{content:"";position:absolute;left:0;top:50%;width:12px;height:6px;margin-top:-5px;border-left:2px solid var(--th-positive);border-bottom:2px solid var(--th-positive);transform:rotate(-45deg) scale(.9)}
.seg-save{margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--th-surface-3,var(--th-surface));color:var(--th-positive);font:600 11px/1.4 var(--th-font-data);letter-spacing:.02em}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--th-ink) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--th-line);padding:12px 0 calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.sticky-cta[hidden]{display:none}
.sticky-in{display:flex;align-items:center;justify-content:center;gap:20px}
.sticky-text{color:var(--th-text);font-size:15px}
.sticky-sub{color:var(--th-text-muted)}
.sticky-cta .btn{white-space:nowrap}
body.has-sticky{padding-bottom:76px}
@media (max-width:640px){.sticky-sub{display:none}.sticky-in{justify-content:space-between;gap:12px}.sticky-text{font-size:14px}}
.offer{background:var(--th-surface-3,var(--th-surface));border-bottom:1px solid var(--th-line-strong,var(--th-line));color:var(--th-text);font-size:14px}
.offer[hidden]{display:none}
.offer-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;padding-top:10px;padding-bottom:10px;position:relative}
.offer-tag{font:700 11px/1 var(--th-font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--th-warning,var(--th-text-muted))}
.offer-count{color:var(--th-text-muted);font-size:13px}
.offer-cta{color:var(--th-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.offer-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--th-text-muted);font-size:22px;line-height:1;width:44px;height:44px;cursor:pointer}
@media (max-width:640px){.offer-x{top:8px;transform:none;width:36px;height:36px}.offer-in{padding-right:40px}}
@media (min-width:1040px){.hero-sec .split>.stack:first-child{align-self:start;padding-top:clamp(16px,5vh,64px)}}
/* The home hero: the message sits at the top beside the product mock instead of being centred against its full height, which pushed the headline and buttons towards the fold. */
@media (min-width:1040px){.hero-sec .g-hero{align-items:start}.hero-sec .g-hero>.stack:first-child{padding-top:clamp(8px,2vh,24px)}}

/* Language chip (site/js/lang.js): off to the side, fades after 15 seconds, a quiet link stays. */
.lang-bar { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--th-line); overflow: hidden; }
.lang-bar i { display: block; height: 100%; background: var(--th-pace); transform-origin: left; animation: langBar 15s linear forwards; }
@keyframes langBar { to { transform: scaleX(0); } }
.lang-note { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--th-line); border-radius: 12px; background: var(--th-surface); color: var(--th-text-2); font-size: 14px; }

/* Afrikaans runs longer than English: keep the menu on one line. */
html[lang^="af"] .nav-a { white-space: nowrap; padding: 0 9px; font-size: 14px; }
html[lang^="af"] .nav-d { gap: 0; }
html[lang^="af"] .hdr .btn { font-size: 14px; }
@media (max-width: 560px) { html[lang^="af"] .hdr .btn { font-size: 12px; padding: 6px 10px; max-width: 132px; white-space: normal; line-height: 1.15; text-align: center; } }

/* English | Afrikaans toggle: always in the menu (desktop header, and at the top of the phone menu), so the choice can be changed any time.
   The selected side is neutral, not orange: orange is only ever for the button you press. */
.lang-toggle { display: none; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--th-line-strong); border-radius: 999px; }
.lang-toggle button { font: 600 12px/1 var(--th-font-ui); letter-spacing: .05em; min-height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--th-text-muted); cursor: pointer; }
.lang-toggle button:hover { color: var(--th-text); }
.lang-toggle button[aria-pressed="true"] { background: var(--th-surface-2); color: var(--th-text); }
.lang-toggle button:focus-visible { outline: 2px solid var(--th-focus-ring); outline-offset: 2px; }
@media (min-width: 720px) { .hdr .row > .lang-toggle { display: inline-flex; } }
.drawer-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--th-line); font-size: 15px; color: var(--th-text-muted); }
.drawer-lang .lang-toggle { display: inline-flex; }
.drawer-lang .lang-toggle button { min-height: 36px; padding: 0 16px; font-size: 13px; }
@media (min-width: 720px) { .drawer-lang { display: none; } }
/* How it works: before-you-start card and the first-week timeline (days, not steps, so no numbered circles) */
.hiw-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hiw-list li{display:grid;gap:2px;padding:14px 0;border-top:1px solid var(--th-line)}
.hiw-list li:first-child{border-top:0;padding-top:0}
.hiw-list b{color:var(--th-chalk);font-size:16px}
.hiw-list span{color:var(--th-text-muted);font-size:14px;line-height:1.5}
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.tl-i{position:relative;display:grid;gap:6px;align-content:start;padding-top:30px}
.tl-i::before{content:"";position:absolute;top:6px;left:0;right:-24px;height:2px;background:var(--th-line)}
.tl-i:last-child::before{right:0;background:linear-gradient(90deg,var(--th-line),transparent)}
.tl-i::after{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--th-surface-3);border:2px solid var(--th-ink);box-shadow:0 0 0 1px var(--th-line)}
.tl-i.now::after{background:var(--th-pace);box-shadow:0 0 0 4px color-mix(in srgb,var(--th-pace) 25%,transparent)}
.tl-day{font:600 12px/1 var(--th-font-data);letter-spacing:.08em;text-transform:uppercase;color:var(--th-text-muted)}
.tl-i b{font-size:18px;color:var(--th-chalk)}
.tl-i span:last-child{font-size:14px;color:var(--th-text-muted);line-height:1.55}
@media (max-width:900px){.tl{grid-template-columns:1fr;gap:0}.tl-i{padding:0 0 28px 34px}.tl-i::before{top:14px;bottom:-2px;left:6px;right:auto;width:2px;height:auto}.tl-i:last-child::before{display:none}.tl-i::after{top:2px}}
/* Smaller sticky sign-up strip */
.sticky-cta{padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.sticky-text{font-size:14px}
.sticky-cta .btn{padding:8px 18px;font-size:14px;min-height:40px}
body.has-sticky{padding-bottom:56px}

/* Press kit (/press/): logo previews on dark and light, download links, colour swatches, do/don't cards. */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.pk-prev{display:flex;align-items:center;justify-content:center;height:150px;padding:28px;border-radius:14px;border:1px solid var(--th-line)}
.pk-prev img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.pk-dark{background:var(--th-ink)}
.pk-light{background:var(--th-chalk)}
.pk-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pk-links .xs{margin-right:2px}
.pk-links .xs:not(:first-child){margin-left:10px}
.pk-dl{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--th-line);border-radius:999px;color:var(--th-chalk);text-decoration:none;font-size:13px}
.pk-dl:hover{border-color:var(--th-text-muted)}
.pk-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}
.pk-sw{display:flex;gap:14px;align-items:center}
.pk-chip{width:56px;height:56px;border-radius:14px;flex-shrink:0}
.pk-chip-line{border:1px solid var(--th-line)}
.pk-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.pk-list{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--th-text-muted)}