@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* MyFitsy — shared styles. Palette taken from the logo: purple → navy. */
:root {
  --purple: #7C3AED;
  --purple-deep: #5B21B6;
  --navy: #131A3A;
  --ink: #0F172A;
  --slate: #475569;
  --muted: #94A3B8;
  --border: #E2E8F0;
  --surface: #F8FAFC;
  --card: #FFFFFF;
  --emerald: #059669;
  --radius: 16px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  font-feature-settings: 'cv05' 1, 'cv08' 1, 'ss03' 1;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: var(--card);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ── header ─────────────────────────────────────────────── */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 24px; height: 68px; }
.nav a.brand { display: flex; align-items: center; }
.nav img.mark { height: 26px; width: auto; display: block; }
.nav .links { margin-left: auto; display: flex; gap: 24px; align-items: center; }
.nav .links a {
  color: var(--slate);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.nav .links a:hover { color: var(--purple); }

/* ── hero ───────────────────────────────────────────────── */
.hero { padding: 72px 0 56px; text-align: center; }
.hero img.logo { width: min(320px, 72vw); height: auto; margin-bottom: 8px; }
h1 {
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 16px 0 12px;
}
.hero p.lede {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--slate);
  max-width: 620px;
  margin: 0 auto 32px;
}
.grad {
  background: linear-gradient(92deg, var(--purple) 0%, var(--purple-deep) 55%, var(--navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── store badges ───────────────────────────────────────── */
.badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.badge.soon {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: default;
}
.badge small { display: block; font-size: 11px; font-weight: 500; opacity: 0.75; }

/* ── sections ───────────────────────────────────────────── */
section { padding: 64px 0; }
section.alt { background: var(--surface); border-block: 1px solid var(--border); }
h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
section > .wrap > p.sub {
  color: var(--slate);
  max-width: 640px;
  margin: 0 0 36px;
  font-size: 17px;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 32px; } }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
section.alt .card { background: var(--card); }
.card h3 { margin: 12px 0 6px; font-size: 18px; }
.card p { margin: 0; color: var(--slate); font-size: 15px; }
.ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  display: grid;
  place-items: center;
  font-size: 20px;
}

/* ── phone screenshots ──────────────────────────────────── */
.shots { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.phone {
  width: 232px;
  border-radius: 34px;
  border: 9px solid var(--navy);
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
}
.phone img { width: 100%; display: block; }
.shot-label {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}

/* ── prose (legal pages) ────────────────────────────────── */
.prose { max-width: 760px; margin: 0 auto; padding: 56px 24px 88px; }
.prose h1 { font-size: 34px; margin-bottom: 6px; }
.prose .updated { color: var(--muted); font-size: 14px; margin-bottom: 36px; }
.prose h2 { font-size: 21px; margin: 36px 0 10px; }
.prose h3 { font-size: 17px; margin: 24px 0 6px; }
.prose p, .prose li { color: var(--slate); font-size: 16px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--purple); }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.prose th, .prose td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.prose th { color: var(--ink); font-weight: 600; }
.prose td { color: var(--slate); }
.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 22px 0;
}
.callout p { margin: 0; }

/* ── footer ─────────────────────────────────────────────── */
footer.site {
  background: var(--navy);
  color: #CBD5E1;
  padding: 44px 0 36px;
  font-size: 14px;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
footer.site a { color: #E2E8F0; text-decoration: none; margin-right: 20px; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site .copy { margin-left: auto; color: #94A3B8; }
@media (max-width: 700px) { footer.site .copy { margin-left: 0; width: 100%; } }

/* ── multi-page site additions ──────────────────────────────────── */

.nav .links { overflow-x: auto; scrollbar-width: none; }
.nav .links::-webkit-scrollbar { display: none; }
.nav .links a { white-space: nowrap; }
.nav .links a.on { color: var(--purple); font-weight: 600; }

.hero.small { padding: 56px 0 32px; text-align: left; }
.hero.small h1 { font-size: clamp(28px, 4.6vw, 42px); margin-top: 0; }
.hero.small .lede { margin-left: 0; max-width: 680px; }
.microcopy { margin-top: 20px; font-size: 13px; color: var(--muted); }

main.prose section > .wrap { padding: 0; }

.narrow { max-width: 720px; }
.narrow h3 { margin-top: 28px; }

.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .cards.c2, .cards.c3, .cards.c4 { grid-template-columns: 1fr; }
}

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--slate); }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--purple); font-weight: 700;
}

.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps .n {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.steps h4 { margin: 4px 0 4px; font-size: 17px; }
.steps p { margin: 0; color: var(--slate); }

.deep { padding: 18px 0; border-top: 1px solid var(--border); }
.deep:first-child { border-top: 0; }
.deep h3 { margin: 0 0 6px; font-size: 18px; }
.deep h4 { margin: 0 0 6px; font-size: 16px; }
.deep p { margin: 0; color: var(--slate); }

.featgrid h4 { margin: 18px 0 4px; font-size: 15px; color: var(--ink); }
.featgrid h4:first-child { margin-top: 0; }
.featgrid p { margin: 0; color: var(--slate); }

.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a {
  font-size: 14px; text-decoration: none; color: var(--slate);
  border: 1px solid var(--border); background: var(--card);
  padding: 7px 13px; border-radius: 999px;
}
.toc a:hover { border-color: var(--purple); color: var(--purple); }

.tablewrap { overflow-x: auto; }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.tablewrap th, .tablewrap td {
  text-align: left; padding: 11px 12px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.tablewrap th { font-weight: 600; color: var(--ink); }
.tablewrap td { color: var(--slate); }
table.compare td:last-child { color: var(--ink); font-weight: 500; }
table.compare th:last-child { color: var(--purple); }

details {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); padding: 0 16px; margin-bottom: 10px;
}
details summary {
  cursor: pointer; padding: 15px 0; font-weight: 600;
  color: var(--ink); list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
details[open] summary::after { content: "–"; }
details > div { padding: 0 0 16px; color: var(--slate); }
details a { color: var(--purple); }

ul.cols { columns: 2; column-gap: 32px; padding-left: 20px; }
ul.cols li { color: var(--slate); margin-bottom: 7px; break-inside: avoid; }
@media (max-width: 720px) { ul.cols { columns: 1; } }

.meta { color: var(--slate); font-size: 15px; }
.tlink { color: var(--purple); font-weight: 600; text-decoration: none; }
.tlink:hover { text-decoration: underline; }

section.cta {
  background: linear-gradient(135deg, var(--purple-deep), var(--navy));
  color: #fff; text-align: center; padding: 60px 0;
}
section.cta h2 { color: #fff; }
section.cta .sub { color: #CBD5E1; margin-inline: auto; }
section.cta a { color: #fff; text-decoration: underline; }
section.cta .badge.soon { background: rgba(255,255,255,.1); color: #E2E8F0; border-color: rgba(255,255,255,.2); }

footer.site .fgrid {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 28px; align-items: start; padding-bottom: 28px;
}
@media (max-width: 900px) { footer.site .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.site .fgrid { grid-template-columns: 1fr; } }
footer.site .fmark { height: 24px; filter: brightness(0) invert(1); opacity: .92; }
footer.site .fbrand p { color: #94A3B8; font-size: 13px; margin-top: 10px; max-width: 240px; }
footer.site .fcol h4 { color: #fff; font-size: 13px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; }
footer.site .fcol a { display: block; margin: 0 0 8px; color: #CBD5E1; font-size: 14px; }
footer.site .fbase {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px;
  color: #94A3B8; font-size: 13px;
}

.crosses { list-style: none; padding: 0; }
.crosses li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--slate); }
.crosses li::before {
  content: "\2715"; position: absolute; left: 0; top: 0;
  color: var(--muted); font-weight: 700;
}
.pill {
  display: inline-block; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; letter-spacing: .02em;
}
section h3 { font-size: 19px; margin: 32px 0 8px; }
section h4 { font-size: 16px; margin: 22px 0 6px; }
.tablewrap { margin: 14px 0 6px; }
.tablewrap table td:nth-child(2), .tablewrap table td:nth-child(3),
.tablewrap table td:nth-child(4) { white-space: nowrap; }

.pill.ghost { background: var(--surface); color: var(--slate); border: 1px solid var(--border); }
.pill { margin-right: 6px; }
ol.num { padding-left: 20px; margin: 8px 0 0; }
ol.num li { color: var(--slate); margin-bottom: 7px; }

/* ── problem cards ──────────────────────────────────────────────── */
.problems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 860px) { .problems { grid-template-columns: 1fr; } }
.problem {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .07);
}
.problem .pbody { flex: 1; padding: 28px 28px 22px; }
.problem .ico { margin-bottom: 16px; }
.problem h3 {
  margin: 0 0 8px; font-size: 18px; line-height: 1.35; color: var(--ink);
  letter-spacing: -.01em;
}
.problem .pbody p { margin: 0; color: var(--slate); font-size: 15px; }
.problem .why {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 18px 28px 20px;
  font-size: 14px;
  color: var(--slate);
}
.problem .why span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--purple); margin-bottom: 5px;
}

/* ── academy index ──────────────────────────────────────────────── */
ul.cols li.pub { list-style: none; margin-left: -20px; }
ul.cols li.pub a { color: var(--purple); font-weight: 600; text-decoration: none; }
ul.cols li.pub a:hover { text-decoration: underline; }
ul.cols li.pub .tag {
  display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  padding: 2px 7px; border-radius: 999px; vertical-align: 2px;
}
.cardmeta { margin-top: 10px !important; font-size: 13px; color: var(--muted); }
.card h3 a { text-decoration: none; }

/* ── article pages ──────────────────────────────────────────────── */
.col { max-width: 760px; }
.posthead {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 44px 0 40px;
}
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--purple); }
.crumbs span { margin: 0 7px; }
.posthead h1 {
  font-size: clamp(28px, 4.4vw, 42px); line-height: 1.14;
  margin: 0 0 10px; letter-spacing: -.02em;
}
.postmeta { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.answer {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.05);
}
.answer span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--purple); margin-bottom: 7px;
}
.answer p { margin: 0; font-size: 17.5px; color: var(--ink); line-height: 1.6; }

.postbody { padding: 48px 0 56px; }
.posttoc {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); padding: 18px 22px; margin-bottom: 8px;
}
.posttoc p {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.posttoc ol { margin: 0; padding-left: 20px; }
.posttoc li { margin-bottom: 5px; }
.posttoc a { color: var(--slate); text-decoration: none; font-size: 15px; }
.posttoc a:hover { color: var(--purple); }

.postbody h2 {
  font-size: 25px; margin: 44px 0 14px; letter-spacing: -.015em;
  scroll-margin-top: 84px;
}
.postbody p, .postbody li { color: var(--slate); font-size: 17px; line-height: 1.72; }
.postbody strong { color: var(--ink); }
.postbody a, .postfoot a { color: var(--purple); }
.postbody .tablewrap table { min-width: 0; font-size: 15.5px; }
.postbody .callout { border-radius: 14px; }
.postbody ol.num li, .postbody ul.ticks li { margin-bottom: 11px; }

ul.ticks.big li { font-size: 17px; margin-bottom: 12px; padding-left: 30px; }
ul.ticks.big li::before { font-size: 16px; }

.postfoot { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 700px) { .postfoot { grid-template-columns: 1fr; } }
.postfoot h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 10px;
}
.postfoot ul { margin: 0; padding-left: 18px; }
.postfoot li { font-size: 15px; margin-bottom: 7px; color: var(--slate); }
.postfoot .srcs li { font-size: 14px; }

/* ── calculators ─────────────────────────────────────────── */

/* ── calculator hub ─────────────────────────────────────── */
/* Extends the site's existing .cards / .card language rather than
   replacing it: same grid, same radius, same padding. */

.ctools { padding: 8px 0 40px; }
.ctools .wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.csearchwrap { position: relative; width: 100%; max-width: 560px; }
.csearchwrap .csico {
  position: absolute; left: 18px; top: 50%; margin-top: -10px;
  color: var(--muted); pointer-events: none;
}
.csearchwrap input {
  width: 100%; padding: 15px 18px 15px 48px; font-size: 16px; font-family: inherit;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.csearchwrap input::placeholder { color: var(--muted); }
.csearchwrap input:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .10);
}
.csearchwrap input::-webkit-search-cancel-button { -webkit-appearance: none; }

.cfp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
button.cfp {
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  color: var(--slate); background: var(--card); border: 1px solid var(--border);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
button.cfp:hover { color: var(--ink); border-color: #CBD5E1; }
button.cfp.on { color: #fff; background: var(--ink); border-color: var(--ink); font-weight: 600; }

.ccount { margin: 0; font-size: 13.5px; color: var(--muted); }
.ccount .cdot { margin: 0 8px; opacity: .55; }

/* the standard .card, made clickable */
a.card.calc {
  display: flex; flex-direction: column; text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
a.card.calc:hover {
  border-color: var(--purple); transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(124, 58, 237, .30);
}
a.card.calc[hidden] { display: none; }
a.card.calc h3 { color: var(--ink); }
a.card.calc:hover h3 { color: var(--purple); }
a.card.calc p { flex: 0 0 auto; }
a.card.calc .cardmeta { margin-top: auto !important; padding-top: 14px; }

.lvl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--slate);
}
.lvl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.lvl.l-beginner::before { background: #10B981; }
.lvl.l-intermediate::before { background: #3B82F6; }
.lvl.l-advanced::before { background: #475569; }

section[hidden] { display: none; }
.cempty { text-align: center; padding: 24px 0; color: var(--slate); }
.cempty p { margin: 0 0 6px; }

@media (max-width: 620px) {
  .ctools { padding: 4px 0 28px; }
  .csearchwrap input { font-size: 16px; padding: 14px 16px 14px 44px; }
}

/* ── the calculator itself ───────────────────────────────── */
.chead { padding: 52px 0 26px; }
.chead h1 { margin-bottom: 12px; }
.cmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  margin: 16px 0 0; font-size: 13.5px; color: var(--muted);
}
.cmeta .cdot { margin: 0 9px; opacity: .55; }
.ctool { padding: 0 0 56px; }
.ctool .col { max-width: none; }
.chead .col { max-width: 860px; }

form.calc {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 26px 26px; margin: 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* grouped steps */
.cfgroup { padding: 22px 0 0; }
.cfgroup + .cfgroup { border-top: 1px solid var(--border); margin-top: 22px; }
.cgstep { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.cgstep .cgn {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 50%; font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
.cgstep h3 { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }

.calcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(216px, 100%), 1fr)); gap: 16px 20px; }
.cfield { display: block; min-width: 0; }
.cfield.wide { grid-column: 1 / -1; }
.cfield > span:first-child {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.cfield[hidden] { display: none; }

.cin { display: flex; align-items: stretch; gap: 6px; }
.cin input, .cin select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
  min-width: 0; flex: 1 1 auto; -webkit-appearance: none; appearance: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.cin select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
  cursor: pointer;
}
.cin input:focus, .cin select:focus {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, .11);
}
.cin em {
  display: flex; align-items: center; font-style: normal; font-size: 13.5px;
  color: var(--muted); white-space: nowrap;
}
.cin select.cunitsel { flex: 0 0 auto; width: auto; min-width: 76px; font-size: 14px; }
/* currency codes are longer than kg/lb, so the box needs more room */
.cin select.ccur { min-width: 96px; }
/* the slot a chart or donut is written into */
.cdslot { min-width: 0; }
.cin .cftin { display: flex; gap: 6px; flex: 1 1 auto; }
.cin .cftin[hidden], .cin .ccm[hidden] { display: none; }
.cin .ccm { display: flex; flex: 1 1 auto; gap: 6px; }
.chelp { display: block; font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }

/* segmented control */
.cseg { display: inline-flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; gap: 3px; }
.cseg label { position: relative; }
.cseg input { position: absolute; opacity: 0; width: 0; height: 0; }
.cseg span {
  display: block; padding: 8px 18px; border-radius: 8px; cursor: pointer;
  font-size: 14.5px; font-weight: 550; color: var(--slate); white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.cseg label:hover span { color: var(--ink); }
.cseg input:checked + span {
  background: var(--card); color: var(--ink); font-weight: 650;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .10);
}
.cseg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); }

/* radio cards */
.cradios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 8px; }
label.cradio {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); transition: border-color .14s ease, background .14s ease;
}
label.cradio:hover { border-color: #CBD5E1; }
label.cradio input { position: absolute; opacity: 0; width: 0; height: 0; }
.crdot {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid #CBD5E1; position: relative; transition: border-color .14s ease;
}
.crdot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--purple); transform: scale(0); transition: transform .16s ease;
}
label.cradio input:checked ~ .crdot { border-color: var(--purple); }
label.cradio input:checked ~ .crdot::after { transform: scale(1); }
label.cradio:has(input:checked) { border-color: var(--purple); background: #FCFBFF; }
label.cradio input:focus-visible ~ .crdot { box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); }
.crtext { min-width: 0; flex: 1 1 auto; }
.crbadge {
  flex: 0 0 auto; align-self: center; font-size: 12.5px; font-weight: 650;
  color: var(--slate); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums;
}
label.cradio:has(input:checked) .crbadge {
  color: var(--purple); border-color: #DDD6FE; background: #F5F3FF;
}
.crtext strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.crtext em {
  display: block; font-style: normal; font-size: 13px; color: var(--slate);
  margin-top: 2px; line-height: 1.45;
}

/* actions */
.cactions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border);
}
button.cgo {
  font: inherit; font-size: 16px; font-weight: 650; cursor: pointer;
  padding: 14px 34px; border-radius: 12px; border: 0; color: #fff;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
  box-shadow: 0 2px 10px -2px rgba(91, 33, 182, .45);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
button.cgo:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(91, 33, 182, .5); }
button.cgo:active { transform: translateY(0); }
button.cgo.done { filter: saturate(1.3); }
button.creset {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--slate);
  background: none; border: 0; padding: 6px 2px; text-decoration: underline;
  text-underline-offset: 3px;
}
button.creset:hover { color: var(--purple); }

/* results panel */
.cresults {
  margin-top: 20px; padding: 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
}
.cresults[hidden] { display: none; }
.cresults.ready { animation: crin .28s cubic-bezier(.2,.8,.2,1); }
@keyframes crin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.crhead h2 {
  margin: 0 0 18px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted);
}
/* headline row — a big figure panel beside a chart panel */
.crtop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px; margin-bottom: 16px; }
.cpanel {
  background: linear-gradient(158deg, #F3EEFF 0%, #FAF8FF 58%, #FFFFFF 100%);
  border: 1px solid #E7DEFF; border-radius: 18px; padding: 26px 22px;
  text-align: center; display: flex; flex-direction: column; justify-content: center;
  min-height: 232px;
}
.cpanel.solo { min-height: 168px; }
.cpanel.chart { background: var(--card); border-color: var(--border); }
.cpanel.chart .cmethod, .cpanel.chart .cbar, .cpanel.chart .crb,
.cpanel.chart .cdrow, .cpanel.chart .ctbl, .cpanel.chart .cramp,
.cpanel.chart .cchart { text-align: left; }
.cplbl {
  display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--purple); margin-bottom: 14px;
}
.cpanel.chart .cplbl { color: var(--muted); }
.cpstat strong {
  display: block; font-size: clamp(40px, 6.4vw, 54px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.04; font-variant-numeric: tabular-nums;
  background: linear-gradient(96deg, var(--purple), var(--purple-deep) 76%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cpstat em { font-style: normal; font-size: 13.5px; color: var(--slate); }
.cpstat + .cpstat { margin-top: 18px; padding-top: 18px; border-top: 1px solid #E7DEFF; }
.cpstat + .cpstat strong {
  font-size: 27px; letter-spacing: -0.025em; color: var(--ink);
  background: none; -webkit-text-fill-color: currentColor;
}

/* donut — a conic-gradient ring, no chart library */
.cdwrap { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.cdring { width: 138px; height: 138px; border-radius: 50%; flex: 0 0 auto; position: relative; }
.crtop > .cpanel.chart:only-child .cdring { width: 172px; height: 172px; }
.crtop > .cpanel.chart:only-child .cdhole { inset: 22px; }
.cdhole {
  position: absolute; inset: 18px; border-radius: 50%; background: var(--card);
  display: grid; place-content: center; gap: 1px;
}
.cdhole strong {
  font-size: 21px; font-weight: 750; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cdhole span { font-size: 11px; color: var(--muted); }
.cdlegend { list-style: none; margin: 0; padding: 0; min-width: 172px; text-align: left; }
.cdlegend li {
  display: grid; grid-template-columns: 10px 1fr auto 38px; align-items: center;
  gap: 9px; font-size: 14px; padding: 6px 0;
}
.cdlegend li + li { border-top: 1px solid var(--border); }
.cdlegend i { width: 10px; height: 10px; border-radius: 3px; }
.cdlegend .cdk { color: var(--slate); }
.cdlegend b { font-weight: 650; font-variant-numeric: tabular-nums; }
.cdlegend .cdp { color: var(--muted); font-size: 12.5px; text-align: right; }

/* banded scale — a number that only means something against a range */
.cscale { margin-top: 4px; }
.cstrack { position: relative; padding-top: 34px; }
.csbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; }
.csbar i { display: block; height: 100%; opacity: .38; }
.csbar i.on { opacity: 1; }
.csmark { position: absolute; top: 0; transform: translateX(-50%); }
.csmark b {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.2;
  background: var(--ink); color: #fff; padding: 4px 10px; border-radius: 8px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.csmark::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.cslabels {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.cslabels li {
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 11px;
  background: var(--card); line-height: 1.35;
}
.cslabels li b { display: block; font-size: 12.5px; font-weight: 600; color: var(--slate); }
.cslabels li span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cslabels li.on { border-color: var(--purple); background: #FCFBFF; }
.cslabels li.on b { color: var(--purple); }

/* tiles — cut / maintain / gain */
.ctilewrap { margin-bottom: 18px; }
.ctilewrap > .clbl {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.ctiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ctile {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 16px; text-align: center;
}
.ctile.mid { border-color: #DDD6FE; background: #FCFBFF; }
.ctile .cth {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; border-radius: 999px; padding: 4px 12px;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
.ctile strong {
  display: block; margin-top: 13px; font-size: 30px; font-weight: 750;
  letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ctile .ctu { font-size: 12.5px; color: var(--muted); }
.ctile em {
  display: block; font-style: normal; font-size: 12.5px; color: var(--slate);
  margin-top: 9px; line-height: 1.4;
}

.calcout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr)); gap: 18px; }
.cres { min-width: 0; }
.cres .clbl {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.cres strong {
  display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--ink); line-height: 1.15; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.cres .cunit { font-size: 13px; color: var(--slate); }
.cres.chero { grid-column: 1 / -1; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.cres.chero .clbl { color: var(--purple); }
.cres.chero strong {
  font-size: clamp(40px, 7vw, 58px); letter-spacing: -0.035em; margin-top: 6px;
  background: linear-gradient(96deg, var(--purple), var(--purple-deep) 72%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cres.chero .cunit { font-size: 15px; }
.cblock { grid-column: 1 / -1; }
.cblock[hidden] { display: none; }
.cblock > .clbl {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.cresults .cdisc {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12.5px; font-style: italic; color: var(--muted); line-height: 1.55;
}

/* bars */
.cbar { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 12px;
  margin-bottom: 8px; font-size: 14px; }
.cbar .cbl { color: var(--slate); }
.cbar .cbt { height: 10px; background: var(--card); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--border); }
.cbar .cbt i { display: block; height: 100%;
  background: linear-gradient(92deg, var(--purple), var(--purple-deep)); }
.cbar .cbv { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* result tables */
.ctbl { overflow-x: auto; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; }
.ctbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ctbl th, .ctbl td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.ctbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 650; background: var(--surface); }
.ctbl td { font-variant-numeric: tabular-nums; }
.ctbl tbody tr:last-child td { border-bottom: 0; }
.ctbl tbody tr.hi { background: #FCFBFF; }
.ctbl td:first-child { color: var(--slate); }
.ctbl td strong { color: var(--ink); }
.ctbl td em { font-style: normal; font-size: 12px; color: var(--muted); }
.ctbl .cmuted { color: var(--muted); }
.cmuted { color: var(--muted); font-weight: 400; }
.ctbl tbody tr.hi td { font-weight: 600; color: var(--ink); }
.ctbl tbody tr.hi td:first-child { box-shadow: inset 3px 0 0 var(--purple); }

/* pills, warnings, notes */
.cpill { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 12px;
  border-radius: 999px; background: var(--card); color: var(--slate);
  border: 1px solid var(--border); }
.cpill.good { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.cpill.warn { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.cpill.bad { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
p.cwarn { margin: 0; font-size: 14px; line-height: 1.55; color: #92400E;
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; padding: 12px 15px; }
.cmethod { font-size: 13.5px; color: var(--slate); line-height: 1.55; margin: 0; }

/* related strip */
.crel { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.crel a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 550;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; transition: border-color .14s ease, transform .14s ease;
}
.crel a:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-2px); }

@media (max-width: 760px) {
  .crtop { grid-template-columns: 1fr; }
  .cpanel { min-height: 0; }
  .ctiles { grid-template-columns: 1fr; }
  .ctile { display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: 4px 14px; text-align: left; padding: 14px 16px; }
  .ctile .cth { grid-row: 1; }
  .ctile strong { grid-row: 1; grid-column: 2; margin-top: 0; text-align: right; }
  .ctile .ctu { grid-row: 2; grid-column: 2; text-align: right; }
  .ctile em { grid-row: 2; grid-column: 1; margin-top: 0; }
}

@media (max-width: 620px) {
  .chead { padding: 36px 0 20px; }
  form.calc { padding: 4px 18px 20px; }
  .calcgrid { grid-template-columns: 1fr; }
  .cresults { padding: 20px 18px; }
  .cres strong { font-size: 23px; }
  .cbar { grid-template-columns: 96px 1fr auto; font-size: 13px; gap: 9px; }
  .cseg { width: 100%; }
  .cseg label { flex: 1 1 0; }
  .cseg span { text-align: center; padding: 9px 10px; }
  button.cgo { width: 100%; }
  .cactions { gap: 10px; }
  .cactions button.creset { margin: 0 auto; }
}

/* taper: paired columns per week, volume falling while intensity holds */
.ctaper { display: flex; gap: 10px; align-items: flex-end; padding: 4px 0 0; }
.ctp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ctp .ctpb { display: flex; align-items: flex-end; gap: 4px; height: 128px; }
.ctp .ctpb i { display: block; width: 16px; border-radius: 4px 4px 0 0; }
.ctp .ctpb i.vol { background: linear-gradient(180deg, var(--purple), var(--purple-deep)); }
.ctp .ctpb i.int { background: #FBBF24; }
.ctp .ctpw { order: 2; margin-top: 10px; font-size: 12.5px; font-weight: 650;
  text-align: center; }
.ctp .ctpn { order: 3; margin-top: 4px; font-size: 11.5px; color: var(--muted);
  text-align: center; line-height: 1.35; }
.ctkey { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }
.ctkey.vol { background: var(--purple); }
.ctkey.int { background: #FBBF24; }
@media (max-width: 620px) {
  .ctaper { gap: 5px; }
  .ctp .ctpb { height: 96px; }
  .ctp .ctpb i { width: 11px; }
  .ctp .ctpn { display: none; }
}

/* line chart — SVG plot stretched to fit, labels in HTML at a fixed size */
.cchart { margin: 2px 0 4px; }
.cchartrow { display: flex; gap: 10px; }
.cyaxis {
  position: relative; width: 34px; flex: 0 0 auto; height: 190px;
}
.cyaxis span {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cplot { position: relative; flex: 1 1 auto; height: 190px; min-width: 0; }
.cplot .cplotsvg { display: block; width: 100%; height: 100%; }
.cplot .cgl {
  position: absolute; left: 0; right: 0; height: 1px; background: var(--border);
}
.cplot .cthrline {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1.5px dashed #EF4444;
}
.cplot .cthrlab {
  position: absolute; right: 2px; transform: translateY(-140%);
  font-size: 11.5px; color: #DC2626; white-space: nowrap;
}
.cplot .cdot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--purple); border: 2px solid var(--card);
  transform: translate(-50%, -50%);
}
.cxaxis {
  display: flex; justify-content: space-between; margin: 8px 0 0 44px;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .cyaxis, .cplot { height: 150px; }
  .cyaxis { width: 28px; }
  .cxaxis { margin-left: 38px; }
  .cplot .cthrlab { font-size: 10.5px; }
}

/* heart rate zones */
.czbar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; }
.czbar i { display: block; height: 100%; }
.czends { display: flex; justify-content: space-between; margin: 6px 0 16px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
ul.czones { list-style: none; margin: 0; padding: 0; }
ul.czones li {
  display: grid; grid-template-columns: 12px 1fr auto 64px; align-items: center;
  gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border);
}
ul.czones li:last-child { border-bottom: 0; }
ul.czones .czc { width: 12px; height: 12px; border-radius: 4px; }
ul.czones .czn { font-size: 14.5px; font-weight: 600; color: var(--ink); min-width: 0; }
ul.czones .czn em {
  display: block; font-style: normal; font-size: 12.5px; font-weight: 400;
  color: var(--slate); margin-top: 2px; line-height: 1.45;
}
ul.czones .czr { font-size: 15px; font-weight: 650; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
ul.czones .czp { font-size: 12.5px; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  ul.czones li { grid-template-columns: 12px 1fr auto; gap: 9px; }
  ul.czones .czp { display: none; }
  ul.czones .czr { font-size: 14px; }
}

/* signed before/after bars, axis in the middle */
.cdelta { margin-top: 4px; }
.cdrow { display: grid; grid-template-columns: 116px 1fr 84px; align-items: center;
  gap: 12px; margin-bottom: 9px; font-size: 14px; }
.cdrow .cdl { color: var(--slate); }
.cdrow .cdt {
  position: relative; height: 14px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border);
}
.cdrow .cdt::before {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px;
  background: var(--muted); opacity: .6;
}
.cdrow .cdt i { position: absolute; top: 3px; height: 8px; border-radius: 999px; }
.cdrow .cdt i.down { background: #0EA5E9; }
.cdrow .cdt i.up { background: linear-gradient(92deg, var(--purple), var(--purple-deep)); }
.cdrow .cdt i.zero { background: var(--muted); min-width: 2px; }
.cdrow .cdv { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap; }
.cdrow .cdv.down { color: #0369A1; }
.cdrow .cdv.up { color: var(--purple); }
.cdrow .cdv.zero { color: var(--muted); }
@media (max-width: 620px) {
  .cdrow { grid-template-columns: 82px 1fr 70px; gap: 8px; font-size: 13px; }
}

/* bar with a target zone behind it */
.crb { display: grid; grid-template-columns: 116px 1fr auto; align-items: center;
  gap: 12px; margin-bottom: 9px; font-size: 14px; }
.crb .crbl { color: var(--slate); }
.crb .crbt {
  position: relative; height: 14px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); overflow: hidden;
}
.crb .crbzone { position: absolute; top: 0; height: 100%; background: #D1FAE5; }
.crb .crbfill { position: absolute; top: 3px; left: 0; height: 8px; border-radius: 999px; }
.crb .crbfill.in { background: linear-gradient(92deg, var(--purple), var(--purple-deep)); }
.crb .crbfill.low { background: #FBBF24; }
.crb .crbfill.high { background: #FB923C; }
.crb .crbv { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crb .crbv.in { color: var(--ink); }
.crb .crbv.low { color: #B45309; }
.crb .crbv.high { color: #C2410C; }

/* warm-up ramp */
ol.cramp { list-style: none; margin: 0; padding: 0; }
ol.cramp li {
  display: grid; grid-template-columns: 26px 92px 1fr 44px 64px; align-items: center;
  gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px;
}
ol.cramp li:last-child { border-bottom: 0; }
ol.cramp .crn {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 12.5px; font-weight: 700; color: var(--slate);
  background: var(--card); border: 1px solid var(--border);
}
ol.cramp li.target .crn {
  color: #fff; border-color: transparent;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
ol.cramp .crw { font-weight: 650; font-variant-numeric: tabular-nums; }
ol.cramp li.target .crw { color: var(--purple); }
ol.cramp .crt { height: 8px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); overflow: hidden; }
ol.cramp .crt i { display: block; height: 100%;
  background: linear-gradient(92deg, var(--purple), var(--purple-deep)); }
ol.cramp .crp { color: var(--muted); font-size: 12.5px; text-align: right;
  font-variant-numeric: tabular-nums; }
ol.cramp .crr { color: var(--slate); font-size: 13.5px; text-align: right; }
@media (max-width: 620px) {
  .crb { grid-template-columns: 82px 1fr auto; gap: 8px; font-size: 13px; }
  ol.cramp li { grid-template-columns: 24px 74px 1fr 52px; gap: 9px; font-size: 13.5px; }
  ol.cramp .crp { display: none; }
}

/* loaded-bar diagram for the plate calculator */
.cbarview { padding: 4px 0; }
.cbarline {
  display: flex; align-items: center; justify-content: center; height: 148px;
  background: linear-gradient(180deg, transparent calc(50% - 1px), var(--border) 50%,
    transparent calc(50% + 1px));
}
.cbshaft {
  flex: 0 1 210px; min-width: 40px; height: 9px; border-radius: 5px 0 0 5px;
  background: linear-gradient(180deg, #CBD5E1, #94A3B8 45%, #64748B);
}
.cbcollar {
  flex: 0 0 auto; width: 11px; height: 38px; border-radius: 3px; margin-left: 2px;
  background: linear-gradient(180deg, #94A3B8, #475569);
}
.cbplates {
  display: flex; align-items: center; gap: 3px; height: 100%;
  list-style: none; margin: 0; padding: 0 3px;
}
.cbplates li {
  width: 24px; flex: 0 0 auto; border-radius: 5px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .14);
}
.cbplates li span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11.5px; font-weight: 700; color: #fff; letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4); font-variant-numeric: tabular-nums;
}
.cbplates li.light span { color: var(--ink); text-shadow: none; }
.cbsleeve {
  flex: 0 0 auto; width: 34px; height: 13px; border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, #CBD5E1, #94A3B8 45%, #64748B);
}
.cbcap { margin: 14px 0 0; font-size: 13px; color: var(--slate); line-height: 1.5; }
@media (max-width: 620px) {
  .cbarline { height: 116px; }
  .cbplates li { width: 19px; }
  .cbplates li span { font-size: 10.5px; }
  .cbsleeve { width: 20px; }
}

/* plate chips */
.cplates { display: flex; flex-wrap: wrap; gap: 8px; }
.cplate {
  display: inline-flex; align-items: center; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 8px 14px; border-radius: 10px;
  color: #fff; background: linear-gradient(160deg, var(--purple), var(--purple-deep));
  box-shadow: 0 2px 6px rgba(91, 33, 182, .22);
}
.cblock .cmethod { margin-top: 8px; }

/* rest timer */
.ctimer {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 22px; margin: 0 0 24px; text-align: center;
}
.ctimer .tdisp {
  font-size: clamp(48px, 12vw, 76px); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.ctimer.done .tdisp { color: var(--emerald); }
.ctimer .tring {
  height: 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; margin: 16px auto 20px; max-width: 420px;
}
.ctimer .tring i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(92deg, var(--purple), var(--purple-deep));
  transition: width .25s linear;
}
.ctimer.done .tring i { background: var(--emerald); }
.tpresets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.tpresets button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: 999px;
  color: var(--slate); background: var(--surface); border: 1px solid var(--border);
}
.tpresets button:hover { color: var(--purple); border-color: var(--purple); }
.tpresets button.on { color: #fff; background: var(--purple); border-color: var(--purple); }
.tctrl { display: flex; gap: 10px; justify-content: center; }
.tctrl button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 11px 30px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--ink);
}
.tctrl button[data-tstart] {
  color: #fff; border-color: transparent;
  background: linear-gradient(92deg, var(--purple), var(--purple-deep));
}
.tctrl button:hover { opacity: .9; }

/* ── public coach profiles ───────────────────────────────────────
   Shares the site's tokens and card language; only the pieces a profile
   needs that nothing else has are defined here. */

.thero { padding: 48px 0 40px; }
.theroin { display: flex; gap: 30px; align-items: flex-start; }
.tface {
  flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%;
  object-fit: cover; background: var(--surface);
  box-shadow: 0 0 0 4px var(--card), 0 6px 22px -6px rgba(15, 23, 42, .28);
}
.tface.tinitials {
  display: grid; place-items: center; font-size: 44px; font-weight: 700;
  color: #fff; letter-spacing: -0.02em;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
.theromain { min-width: 0; flex: 1 1 auto; }
.theromain h1 { font-size: clamp(28px, 4.4vw, 42px); margin: 0 0 6px; }
.twhere { margin: 0 0 14px; color: var(--slate); font-size: 16.5px; }

ul.tchips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; padding: 0; }
.tchip {
  font-size: 13.5px; font-weight: 550; color: var(--slate);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 13px;
}
.tchip.on { color: var(--purple); border-color: #DDD6FE; background: #F5F3FF; }

.tfacts { display: flex; flex-wrap: wrap; gap: 26px; margin: 0 0 22px; }
.tfact { display: flex; flex-direction: column; gap: 1px; }
.tfact strong { font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }
.tfact span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tstars { color: #F59E0B; font-size: 15px; letter-spacing: 1px; display: block; }
/* `.tfact span` is more specific than `.tstars`, so it was overriding the amber
   with the muted grey. Name both. */
.tfact .tstars { color: #F59E0B; display: inline; font-size: 13px; }

.tcta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Getting the app, in the hero rather than below the bio: somebody arriving
   from a coach's invite should not have to scroll to find out what to do. */
.tjoin {
  flex: 0 0 300px;
  align-self: stretch;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
}
.tjoin h2 { font-size: 20px; margin: 0 0 4px; }
.jlede { margin: 0 0 16px; color: var(--slate); font-size: 14.5px; line-height: 1.5; }
.jlede strong { color: var(--ink); font-weight: 700; }
/* The three steps, numbered, because "get the app" alone leaves somebody
   holding an empty account with no idea how to reach the coach who sent them.
   A fresh install cannot know who that was, so step two is search by hand. */
.jsteps {
  list-style: none;
  counter-reset: jstep;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.jsteps li {
  counter-increment: jstep;
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--slate);
}
.jsteps li::before {
  content: counter(jstep);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--purple, #7C3AED);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jsteps strong { color: var(--ink); font-weight: 700; }
/* Side by side, and the same height as each other: the two badges ship at
   different sizes (120x40 and 129x50), so left alone one sits noticeably
   larger than the other. Matched heights make them read as a pair, and at 42px
   the two together fit the card's 256px of content without wrapping. */
.tjoin .badges { flex-wrap: nowrap; gap: 10px; align-items: center; }
.tjoin .storebadge img { height: 42px; width: auto; }
a.tbtn {
  display: inline-block; font-size: 16px; font-weight: 650; text-decoration: none;
  padding: 13px 26px; border-radius: 12px; color: #fff;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
  box-shadow: 0 2px 10px -2px rgba(91, 33, 182, .45);
}
a.tbtn:hover { filter: brightness(1.06); }
a.tbtn.ghost {
  color: var(--ink); background: var(--card); border: 1px solid var(--border);
  box-shadow: none;
}
a.tbtn.ghost:hover { border-color: var(--purple); color: var(--purple); }

.tsplit { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; align-items: start; }
.tprose p { color: var(--slate); font-size: 16.5px; margin: 0 0 14px; max-width: 62ch; }
.tsides { display: grid; gap: 22px; }
.tside h3 { font-size: 15px; margin: 0 0 10px; }
ul.tlinks { list-style: none; margin: 0; padding: 0; }
ul.tlinks li { margin-bottom: 6px; }
ul.tlinks a { color: var(--purple); text-decoration: none; font-size: 14.5px; }
ul.tlinks a:hover { text-decoration: underline; }

.tprices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.tprice {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.tprice .tplabel { display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--purple); }
.tprice strong { display: block; font-size: 30px; font-weight: 750;
  letter-spacing: -0.03em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.tprice .tpunit { font-size: 13.5px; color: var(--muted); }
.tprice p { margin: 12px 0 0; font-size: 14.5px; color: var(--slate); line-height: 1.55; }

.tcases { display: grid; gap: 22px; }
.tcase {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.tcasehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.tcasehead h3 { margin: 0; font-size: 19px; }
.tcasemeta { font-size: 13.5px; color: var(--muted); }
/* Before and after stack rather than sitting in two columns: with up to three
   images a side, a half-width column made each thumbnail either enormous or
   unreadably narrow. A fixed-height strip handles one to three the same way. */
.tshots { display: grid; gap: 16px; }
.tshot .tshotlab {
  display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 8px;
}
.tshotimgs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.tshotimgs img {
  /* A fixed 3:4 thumbnail rather than a height with width:auto. Phone photos
     arrive in every shape, including panoramas, and letting the source decide
     the width turned one into a 30 px sliver. object-fit crops to the box. */
  width: 156px; height: 208px; flex: 0 0 auto;
  object-fit: cover; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
@media (min-width: 900px) {
  /* side by side once there is room for both strips */
  .tshots { grid-template-columns: 1fr 1fr; align-items: start; }
}
.tcase p { margin: 16px 0 0; color: var(--slate); font-size: 15.5px; line-height: 1.6; max-width: 70ch; }

.treviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
blockquote.treview {
  margin: 0; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
}
.trhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.trhead .tstars { display: inline-block; }
.trwho { font-size: 13px; font-weight: 600; color: var(--emerald); }
.trwhen { font-size: 12.5px; color: var(--muted); margin-left: auto;
  font-variant-numeric: tabular-nums; }
blockquote.treview p { margin: 0; color: var(--slate); font-size: 15.5px; line-height: 1.6; }

@media (max-width: 820px) {
  .tsplit { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 620px) {
  .thero { padding: 32px 0 28px; }
  .theroin { flex-direction: column; gap: 18px; }
  .tjoin { flex: 1 1 auto; width: 100%; }
  .tface { width: 96px; height: 96px; }
  .tface.tinitials { font-size: 32px; }
  .tfacts { gap: 18px; }
  .tcta { flex-direction: column; align-items: stretch; }
  a.tbtn { text-align: center; }
}

/* ── coach directory ─────────────────────────────────────────────── */

.tsearch { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 26px; }
.tsr { display: block; flex: 2 1 260px; min-width: 0; }
.tsel { display: block; flex: 1 1 180px; min-width: 0; }
.tsr span, .tsel span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.tsel select {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 34px 12px 13px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.tsel select:focus {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, .11);
}
.tsr input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; -webkit-appearance: none; appearance: none;
}
.tsr input:focus {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, .11);
}
.tsearch button {
  font: inherit; font-size: 15.5px; font-weight: 650; cursor: pointer; color: #fff;
  padding: 13px 26px; border: 0; border-radius: 11px;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
.tsearch button:hover { filter: brightness(1.06); }
.tclear { align-self: center; font-size: 14px; color: var(--slate); text-decoration: underline;
  text-underline-offset: 3px; }

.tdir { padding: 10px 0 64px; }

.tcount { margin: 6px 0 14px; font-size: 13.5px; color: var(--muted); }

.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
a.tcard {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
a.tcard:hover {
  border-color: var(--purple); transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(15, 23, 42, .22);
}
.tchead { display: flex; align-items: center; gap: 13px; }
.tcface {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; background: var(--surface);
}
.tcface.tinitials {
  display: grid; place-items: center; font-size: 19px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
.tcwho { min-width: 0; flex: 1 1 auto; }
.tcwho strong { display: block; font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; }
.tcwhere { display: block; font-size: 13.5px; color: var(--muted); }
.tcrate { flex: 0 0 auto; text-align: right; font-size: 13px; color: var(--slate); }
.tcrate .tstars { font-size: 12px; letter-spacing: 0; }
.tcrate b { font-variant-numeric: tabular-nums; }
.tcbio { margin: 14px 0 0; font-size: 14.5px; color: var(--slate); line-height: 1.55; }
a.tcard .tchips { margin: 14px 0 0; }
a.tcard .tchip { font-size: 12.5px; padding: 4px 11px; }

.tempty {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px; text-align: center; color: var(--slate);
}
.tempty p { margin: 0 0 6px; }
.tempty a { color: var(--purple); }

.tpager { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.tpage {
  min-width: 40px; text-align: center; font-size: 14.5px; text-decoration: none;
  color: var(--slate); background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px;
}
.tpage:hover { border-color: var(--purple); color: var(--purple); }
.tpage.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 650; }

@media (max-width: 620px) {
  .tsr, .tsel { flex: 1 1 100%; }
  .tsearch button { width: 100%; }
  .tclear { align-self: flex-start; }
  }

/* The @handle: quiet, monospaced, and unmistakably a thing you can type.
   Two coaches with the same name are told apart by this and nothing else. */
.tchandle { font-size: 12.5px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.thandle { font-size: 14.5px; margin: 2px 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.thandle a { color: var(--muted); text-decoration: none;
  border-bottom: 1px dotted var(--border); }
.thandle a:hover { color: var(--purple); border-bottom-color: var(--purple); }

/* ── consent banner ──────────────────────────────────────────
   Bottom sheet rather than a full-screen interstitial: nothing here is a
   condition of reading the page, so it must not behave like a paywall.
   Both choices are real buttons of equal weight — a greyed-out "reject" next to
   a bright "accept" is the pattern regulators object to. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, .10);
  transition: transform .25s ease, opacity .25s ease;
}
.consent.gone { transform: translateY(110%); opacity: 0; }
.consentwrap {
  max-width: 1080px; margin: 0 auto; padding: 18px 24px;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.consentcopy { flex: 1 1 420px; min-width: 0; }
.consentcopy strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.consentcopy p { font-size: 13.5px; line-height: 1.5; color: var(--slate); margin: 0 0 6px; }
a.consentlink { font-size: 13px; color: var(--purple); text-decoration: underline;
  text-underline-offset: 3px; }
.consentbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.consentbtn {
  font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
  padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
  color: #fff; background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
.consentbtn.ghost { background: var(--surface); color: var(--slate); border-color: var(--border); }
.consentbtn.ghost:hover { border-color: var(--purple); color: var(--purple); }

/* Reopened from the footer: the current setting, shown before the buttons that
   change it. The dot is the only colour, and it is not the whole message —
   the sentence beside it says the same thing in words. */
.consentstate { display: flex; align-items: flex-start; gap: 9px; }
.consentdot {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%;
  background: var(--border); border: 1px solid var(--muted);
}
.consentdot.on { background: #16A34A; border-color: #15803D; }

@media (max-width: 620px) {
  .consentwrap { padding: 16px; gap: 14px; }
  .consentbtns { width: 100%; }
  .consentbtn { flex: 1 1 auto; }
}

/* ── admin ────────────────────────────────────────────────────────
   Not linked from anywhere and never indexed. Deliberately plain: this is a
   working surface, not a marketing page. */

.alogin { padding: 90px 0; max-width: 420px; margin: 0 auto; }
.alogin h1 { font-size: 30px; margin-bottom: 20px; }
.alogin form { display: grid; gap: 14px; }
.alogin label span, .apw label span {
  display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.alogin input, .apw input {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.alogin input:focus, .apw input:focus { outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .11); }
.alogin button, .apw button {
  font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; color: #fff;
  padding: 13px 24px; border: 0; border-radius: 11px;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
.aerr { color: #B91C1C; background: #FEF2F2; border: 1px solid #FECACA;
  border-radius: 10px; padding: 11px 14px; font-size: 14.5px; margin: 0 0 4px; }
.aok { color: #166534; background: #F0FDF4; border: 1px solid #BBF7D0;
  border-radius: 10px; padding: 11px 14px; font-size: 14.5px; margin: 0 0 4px; }
/* A standing state rather than the result of what you just pressed: amber
   because an unlisted coach is neither in good standing nor banned. */
.awarn { color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: 10px; padding: 11px 14px; font-size: 14.5px; margin: 0 0 8px; }

/* Change password. Narrow on purpose: three password fields in a full-width
   column read as a form you are meant to fill in by accident. */
.apw { display: grid; gap: 13px; max-width: 380px; margin: 14px 0 0;
  justify-items: start; }
.apw label { width: 100%; }
.aout { margin: 18px 0 0; }
.aout button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--slate); background: var(--card); padding: 9px 18px;
  border: 1px solid var(--border); border-radius: 999px;
}
.aout button:hover { border-color: var(--purple); color: var(--purple); }

.ahead { padding: 34px 0 8px; }
.atop { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.atop h1 { margin: 0; font-size: 30px; }
.aranges { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
a.arange {
  font-size: 13.5px; text-decoration: none; color: var(--slate);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
  background: var(--card);
}
a.arange:hover { border-color: var(--purple); color: var(--purple); }
a.arange.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.asec { padding: 26px 0; }
.asec.alt { background: var(--surface); border-block: 1px solid var(--border); }
.asec h2 { font-size: 21px; margin: 0 0 16px; }
.asec h3 { font-size: 15px; margin: 26px 0 10px; }
.anote { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }

.astats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 14px; }
.astat { background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; }
.astat .alabel { display: block; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.astat strong { display: block; font-size: 27px; font-weight: 750; letter-spacing: -0.03em;
  margin-top: 5px; font-variant-numeric: tabular-nums; }
.astat .asub { font-size: 12px; color: var(--muted); }

.achart { display: flex; align-items: flex-end; gap: 3px; height: 132px;
  margin: 22px 0 0; overflow-x: auto; }
.abar { flex: 1 0 14px; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-width: 0; }
.abar i { display: block; border-radius: 3px 3px 0 0; min-height: 3px;
  background: linear-gradient(180deg, var(--purple), var(--purple-deep)); }
/* Bar heights as classes: the CSP forbids inline styles, and this page does not
   load the script that applies data-h. */
.abar i.h5 { height: 5%; }
.abar i.h10 { height: 10%; }
.abar i.h15 { height: 15%; }
.abar i.h20 { height: 20%; }
.abar i.h25 { height: 25%; }
.abar i.h30 { height: 30%; }
.abar i.h35 { height: 35%; }
.abar i.h40 { height: 40%; }
.abar i.h45 { height: 45%; }
.abar i.h50 { height: 50%; }
.abar i.h55 { height: 55%; }
.abar i.h60 { height: 60%; }
.abar i.h65 { height: 65%; }
.abar i.h70 { height: 70%; }
.abar i.h75 { height: 75%; }
.abar i.h80 { height: 80%; }
.abar i.h85 { height: 85%; }
.abar i.h90 { height: 90%; }
.abar i.h95 { height: 95%; }
.abar i.h100 { height: 100%; }
.abar span { font-size: 9px; color: var(--muted); text-align: center; margin-top: 4px;
  white-space: nowrap; transform: rotate(-60deg); transform-origin: center;
  height: 22px; }

.acols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.atbl { overflow-x: auto; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; }
.atbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.atbl th, .atbl td { text-align: left; padding: 9px 13px;
  border-bottom: 1px solid var(--border); }
.atbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: var(--surface); font-weight: 650; }
.atbl td { font-variant-numeric: tabular-nums; }
.atbl tbody tr:last-child td { border-bottom: 0; }
.atbl a { color: var(--purple); text-decoration: none; }
.atbl a:hover { text-decoration: underline; }
.aempty { font-size: 14px; color: var(--muted); background: var(--card);
  border: 1px dashed var(--border); border-radius: 12px; padding: 20px; margin: 0; }

.atag { display: inline-block; font-size: 11px; font-weight: 650; padding: 2px 8px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  color: var(--slate); }
.atag.trainer { background: #F5F3FF; border-color: #DDD6FE; color: var(--purple); }
.atag.trainee { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.atag.ok { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.atag.warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.atag.ban { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.auid { font-size: 11.5px; color: var(--muted); cursor: help; }

/* ── tabs ────────────────────────────────────────────────────
   Seven sections is too many for one scroll, and moderation and metrics are
   read in different frames of mind. One request per tab keeps each one fast. */
a.asite { font-size: 13.5px; color: var(--muted); text-decoration: none;
  border-bottom: 1px dotted var(--border); }
a.asite:hover { color: var(--purple); }

.atabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 0;
  border-bottom: 1px solid var(--border); }
a.atab { font-size: 14.5px; font-weight: 600; text-decoration: none;
  color: var(--slate); padding: 10px 15px; border-radius: 10px 10px 0 0;
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
a.atab:hover { color: var(--purple); background: var(--surface); }
a.atab.on { background: var(--card); border-color: var(--border);
  color: var(--ink); }
.acount { display: inline-block; margin-left: 6px; font-size: 11px;
  font-weight: 700; background: #B91C1C; color: #fff; border-radius: 999px;
  padding: 1px 7px; vertical-align: 1px; }

/* ── a thing that needs your attention ───────────────────────── */
.aalert { font-size: 14.5px; background: #FFFBEB; border: 1px solid #FDE68A;
  color: #92400E; border-radius: 10px; padding: 12px 15px; margin: 0 0 16px; }
.aalert a { color: #92400E; font-weight: 650; }

/* ── proportion bars ─────────────────────────────────────────
   Width by class for the same reason the chart uses height by class: the CSP
   drops inline styles, and this page loads no JavaScript at all. */
.ameter { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.ameter i { display: block; height: 7px; border-radius: 999px; flex: 0 0 auto;
  background: linear-gradient(90deg, var(--purple), var(--purple-deep)); }
.ameter span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ameter i.w0 { width: 0; }
.ameter i.w5 { width: 5%; }
.ameter i.w10 { width: 10%; }
.ameter i.w15 { width: 15%; }
.ameter i.w20 { width: 20%; }
.ameter i.w25 { width: 25%; }
.ameter i.w30 { width: 30%; }
.ameter i.w35 { width: 35%; }
.ameter i.w40 { width: 40%; }
.ameter i.w45 { width: 45%; }
.ameter i.w50 { width: 50%; }
.ameter i.w55 { width: 55%; }
.ameter i.w60 { width: 60%; }
.ameter i.w65 { width: 65%; }
.ameter i.w70 { width: 70%; }
.ameter i.w75 { width: 75%; }
.ameter i.w80 { width: 80%; }
.ameter i.w85 { width: 85%; }
.ameter i.w90 { width: 90%; }
.ameter i.w95 { width: 95%; }
.ameter i.w100 { width: 100%; }

/* ── report cards ────────────────────────────────────────────
   A report is a paragraph of someone's words plus a decision, which a table row
   cannot hold without truncating the part that matters. */
.acards { display: grid; gap: 14px; }
.acard { background: var(--card); border: 1px solid var(--border);
  border-radius: 13px; padding: 16px 18px; }
.acard header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  justify-content: space-between; }
.acard header > div { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; }
.acard header strong { font-size: 16px; }
.aago { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ameta { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.areason { margin: 12px 0 0; padding: 11px 14px; font-size: 14.5px;
  line-height: 1.55; background: var(--surface); border: 0;
  border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0;
  /* Their words, wrapped as they typed them. */
  white-space: pre-wrap; overflow-wrap: anywhere; }
.aids { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }
.aids code { font-size: 11.5px; }

/* ── moderation form ─────────────────────────────────────────── */
.amod { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 14px 0 0; }
.amod.wide { margin: 12px 0 0; }
.amod.tight { margin: 0; }
.amod select, .amod input {
  font: inherit; font-size: 14.5px; padding: 9px 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: 9px; color: var(--ink); }
.amod input { flex: 1 1 220px; min-width: 0; }
.amod input:focus, .amod select:focus { outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .11); }
.amod button { font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
  color: #fff; padding: 10px 18px; border: 0; border-radius: 9px;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep)); }
.amod.tight button { padding: 7px 14px; font-size: 13px;
  background: var(--card); color: var(--slate); border: 1px solid var(--border); }
.amod.tight button:hover { border-color: var(--purple); color: var(--purple); }

.asearch { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 14px; }
.asearch input { flex: 1 1 240px; font: inherit; font-size: 15px; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.asearch button { font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
  color: #fff; padding: 11px 20px; border: 0; border-radius: 10px;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep)); }
.aclear { font-size: 13.5px; color: var(--slate); text-decoration: underline;
  text-underline-offset: 3px; }

/* ── traffic: grain picker and the visitor routes ─────────────
   Plain links, because a select would need JavaScript to navigate and the CSP
   allows no inline handler. */
.agrains { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 18px; }
.agrains .alabel { font-size: 12px; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.agrain { font-size: 13.5px; font-weight: 650; color: var(--slate);
  padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); text-decoration: none; }
.agrain:hover { border-color: var(--purple); color: var(--purple); }
.agrain.on { background: var(--purple); border-color: var(--purple); color: #fff; }

.amuted { color: var(--muted); cursor: help; }

/* The route sits in its own row under its visitor, spanning every column, so a
   long path list stays readable instead of being squeezed into one cell. */
.avisitors td { vertical-align: middle; }
.aroute td { padding-top: 0; padding-bottom: 12px;
  font-size: 12.5px; line-height: 1.9; color: var(--muted);
  border-top: 0; overflow-wrap: anywhere; }
.aroute a { color: var(--slate); text-decoration: none;
  padding: 1px 6px; background: var(--surface); border-radius: 5px; }
.aroute a:hover { color: var(--purple); }

/* ── one account's page ──────────────────────────────────────
   Reached from Manage in the accounts list. Everything that can be done to a
   single person lives here rather than on a row, so a hard delete is never one
   mis-aimed click away from somebody else's account. */
.amanage { font-size: 13px; font-weight: 650; color: var(--purple);
  white-space: nowrap; text-decoration: none; }
.amanage:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Key and value rather than a grid of many rows: two columns, the label
   narrow and quiet, the value readable. */
.akv table { width: auto; }
.akv th { width: 1%; white-space: nowrap; padding-right: 22px;
  font-size: 13px; font-weight: 650; color: var(--muted); }
.akv td { font-size: 14.5px; }
.akv code { font-size: 12.5px; overflow-wrap: anywhere; }

.abtn { display: inline-block; font-size: 14.5px; font-weight: 650;
  padding: 11px 20px; border-radius: 10px; color: #fff; text-decoration: none;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep)); }
.abtn:hover { opacity: .92; }

/* A number is a number: it should not stretch across the row the way a
   free-text reason should. */
.amod input[type="number"] { flex: 0 0 84px; }
.amod label { display: flex; gap: 8px; align-items: center; flex: 0 0 auto;
  font-size: 13px; font-weight: 650; color: var(--muted); }
.aconfirm code { font-size: 13px; font-weight: 700; color: var(--ink);
  padding: 2px 6px; background: var(--surface); border-radius: 5px; }
.aconfirm input { flex: 0 0 96px; }

/* The one action with no undo, dressed so it cannot be mistaken for the
   others. Red is the whole point, not decoration. */
.adanger { padding: 14px; margin-top: 12px; border-radius: 11px;
  background: #FEF2F2; border: 1px solid #FECACA; }
.adanger input { background: #fff; }
.amod button.adestroy { background: #B91C1C; }
.amod button.adestroy:hover { background: #991B1B; }

@media (max-width: 760px) {
  .acols { grid-template-columns: 1fr; gap: 22px; }
  .aranges { margin-left: 0; }
}

/* ── utilities ───────────────────────────────────────────────
   The CSP sets style-src 'self' with no 'unsafe-inline', so a style="" attribute
   in the markup is ignored by the browser. Anything that needs a one-off tweak
   gets a class here; anything computed at runtime is set through element.style
   in JS, which CSP does not restrict. */
.mt18 { margin-top: 18px; }
.mt22 { margin-top: 22px; }
.mt28 { margin-top: 28px; }
.tcenter { text-align: center; }
.plain { text-decoration: none; }
.badges.start { justify-content: flex-start; }

/* ── official store badges ────────────────────────────────────
   Apple's and Google's own artwork, unmodified, as both require. Both ship
   dark-on-transparent, so on the dark CTA they sit on a light plate rather
   than being recoloured — recolouring is what the guidelines forbid, and a
   black badge on a navy gradient cannot be read anyway. */
.storebadge { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.storebadge img { display: block; height: 40px; width: auto; }
/* Google's PNG carries its required clear space inside the file, so it is set
   taller to make the two read as the same size. */
.storebadge + .storebadge img { height: 50px; }

/* Both apps at once. The label is not decoration: the client app and the coach
   app are separate downloads with separate accounts, so four unlabelled badges
   would leave the reader guessing which pair installs the one they want. */
.badges.dual { flex-direction: column; gap: 20px; align-items: center; }
.badges.start.dual { align-items: flex-start; }
.badgegroup { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.badges.start .badgegroup { align-items: flex-start; }
.badgerow { display: flex; align-items: center; gap: 14px; }
.badgelabel {
  font-size: 12px; font-weight: 800; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
}
@media (min-width: 700px) {
  .badges.dual { flex-direction: row; gap: 32px; align-items: flex-start; }
}

/* The dark CTA underlines its links. A badge is artwork, not a text link, and
   an underline drawn under Apple's or Google's badge is a modification of it. */
section.cta .storebadge { text-decoration: none; }

section.cta .badges {
  display: inline-flex;
  background: #fff;
  padding: 10px 16px;
  border-radius: 14px;
}

/* ── mobile navigation ────────────────────────────────────────
   Nine links need ~790px; a phone gives ~330. Above the breakpoint they are a
   row. Below it they collapse behind a button, because the previous fallback
   was a sideways-scrolling strip inside a sticky header — swiping near the top
   moved the nav instead of the page. */
.navbtn {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; padding: 0;
}
.navbars, .navbars::before, .navbars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink); content: ""; position: relative;
}
.navbars::before { top: -6px; }
.navbars::after  { top: 4px; }
.navbtn[aria-expanded="true"] .navbars { background: transparent; }
.navbtn[aria-expanded="true"] .navbars::before { top: 0; transform: rotate(45deg); }
.navbtn[aria-expanded="true"] .navbars::after  { top: -2px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .navbtn { display: flex; }
  /* Only collapse once the button is known to work. Without the script the
     links keep their old behaviour rather than becoming unreachable. */
  .has-navbtn .nav .links {
    position: absolute; top: 68px; left: 0; right: 0;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 6px 0 10px;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
    overflow-x: visible;
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .has-navbtn .nav .links.open { display: flex; }
  .has-navbtn .nav .links a { padding: 13px 24px; font-size: 16px; }
  .has-navbtn .nav .links a.on { background: var(--surface); }
  header.site .wrap.nav { position: relative; }
}

/* The badge plate must be able to shrink and wrap on a narrow phone rather
   than pushing the page wider than the screen. */
section.cta .badges { max-width: 100%; flex-wrap: wrap; justify-content: center; }

/* ── let scroll containers actually scroll ────────────────────
   A grid or flex item defaults to min-width:auto, which resolves to the
   min-content of its contents — not zero. So a 520px-wide table inside an
   overflow-x:auto wrapper, or a row of 156px portfolio thumbnails, becomes the
   *column's* minimum width. The column then pushes past the viewport and the
   whole page scrolls sideways, which is what "the page moves around" is.
   Zeroing the item's minimum lets the inner container do the scrolling it was
   always meant to do. */
.split > *,
.tsplit > *,
.tsides > *,
.tshots > *,
.tcases > *,
.problems > *,
.cards > *,
.tprices > *,
.treviews > *,
.shots > * { min-width: 0; }

/* And the scroll containers themselves must never exceed their column. */
.tablewrap,
.tshotimgs { max-width: 100%; }

/* No image may exceed its column. There was no global guard at all, so a
   single oversized upload — a coach's portfolio photo, an article
   illustration — would have widened the page. Rules that set an explicit size
   (the wordmark, the store badges, portfolio thumbnails) are more specific and
   still win. */
img { max-width: 100%; height: auto; }

/* The nav links are a flex item and a scroll container, so their automatic
   minimum is already zero by spec — pinned anyway so the header cannot be the
   thing that widens a page. */
.nav .links { min-width: 0; }

/* Which languages a coach works in, under their location on the public page. */
.tspeaks { margin: 2px 0 10px; font-size: 14.5px; color: var(--slate); }

/* Thumbnail beside a flagged image in the admin moderation queue. Fixed size
   rather than max-width, so a row's height cannot change with the photograph. */
.athumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); display: block; }