/* Belva's site: the app's own colours (app/src/theme/theme.tsx), Archivo and DM Mono. The same palette is in the
   trainer page. Light or dark follows the phone, unless the theme button (site.js) sets data-theme on <html>.
   Macro colours: the plain ones fill bars and dots, the -ink ones are for text. */
/* The fonts come from belvafit.com itself (assets/fonts, SIL Open Font License), so no visitor's address goes to Google. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-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: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-mono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-mono-400-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: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-mono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-mono-500-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; }

:root {
  --bg: #F1F3F2; --surface: #FBFCFA; --surface2: #E4E8E7; --line: #D5DBDA;
  --fg: #11161A; --fg2: #4C565C; --fg3: #5F686F;
  --accent: #2A3AE0; --on-accent: #FFFFFF; --accent-wash: #E0E3FB; --accent-ink: #2A3AE0;
  --protein: #D03F2C; --carbs: #CF9A10; --fat: #0A78B0;
  --protein-ink: #BC3526; --carbs-ink: #8C5F00; --fat-ink: #0A6EA3;
  --ok: #0A7356; --amber: #8C5F00; --danger: #B3261E;
  color-scheme: light;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #0E1113; --surface: #171B1E; --surface2: #22282C; --line: #2B3237;
  --fg: #E8ECEC; --fg2: #A7B0B5; --fg3: #8A9499;
  --accent: #4C5DFF; --on-accent: #FFFFFF; --accent-wash: #1B2046; --accent-ink: #A9B2FF;
  --protein: #D9402F; --carbs: #BA8D14; --fat: #1E94B8;
  --protein-ink: #EA6B5B; --carbs-ink: #BA8D14; --fat-ink: #2AA3C8;
  --ok: #4FC3A1; --amber: #F2B94B; --danger: #FF7A6B;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1113; --surface: #171B1E; --surface2: #22282C; --line: #2B3237;
  --fg: #E8ECEC; --fg2: #A7B0B5; --fg3: #8A9499;
  --accent: #4C5DFF; --on-accent: #FFFFFF; --accent-wash: #1B2046; --accent-ink: #A9B2FF;
  --protein: #D9402F; --carbs: #BA8D14; --fat: #1E94B8;
  --protein-ink: #EA6B5B; --carbs-ink: #BA8D14; --fat-ink: #2AA3C8;
  --ok: #4FC3A1; --amber: #F2B94B; --danger: #FF7A6B;
  color-scheme: dark;
}
/* Switching themes fades instead of flashing. Only while it switches, so hovers and taps stay instant. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease, box-shadow 0.35s ease !important;
}
@media (prefers-reduced-motion: reduce) { html.theme-fade, html.theme-fade * { transition: none !important; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.55 Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
a { color: var(--accent-ink); }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { font-weight: 600; font-stretch: 125%; letter-spacing: 0.28em; font-size: 15px; color: var(--fg); text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; gap: 10px; }
/* The mark: Belva's B (11 Nov 2026), in the page's own ink, black on light and white on dark. */
.brand .mark { width: 28px; height: 28px; flex: none; color: var(--fg); margin: -4px 0; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang button { border: 0; background: transparent; color: var(--fg2); font: 500 12px/1 "DM Mono", ui-monospace, monospace; letter-spacing: 0.06em; padding: 8px 10px; min-height: 34px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--surface2); color: var(--fg); }
.theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn:hover { color: var(--fg); }
.theme-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; font-weight: 500; text-decoration: none; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font-size: 15px; }
.btn.primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn:hover { filter: brightness(1.06); }
.btn:focus-visible, .lang button:focus-visible, a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Type: heavy, wide headlines like the app's titles; no typewriter labels. */
.kicker { font: 700 12px/1.2 Archivo, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg3); margin: 0 0 14px; }
h1 { font-weight: 800; font-stretch: 115%; font-size: clamp(36px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; text-wrap: balance; }
h2 { font-weight: 800; font-stretch: 112%; font-size: clamp(28px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px; text-wrap: balance; }
h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.lead { font-size: 19px; color: var(--fg2); max-width: 34em; margin: 0 0 28px; }
.muted { color: var(--fg3); }
.mail { font-family: "DM Mono", ui-monospace, monospace; font-size: 15px; user-select: all; }

/* Sections */
section { padding-block: 96px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ask { margin: 18px 0 0; color: var(--fg2); font-size: 15px; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; min-width: 0; }
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--fg2); }
.list li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; background: var(--fg); -webkit-mask: var(--tick) center / 18px no-repeat; mask: var(--tick) center / 18px no-repeat; }
:root { --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--fg3); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* Testers area */
.intro { padding-block: 48px 24px; }
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tgrid .box { display: grid; gap: 12px; align-content: start; }
.tgrid .box p { margin: 0; color: var(--fg2); }
.notice { border: 1px solid var(--accent); background: var(--accent-wash); border-radius: 14px; padding: 14px 16px; color: var(--fg); max-width: 40em; }
.soon { font-size: 13px; color: var(--fg3); }

/* Join page (Belva Link) */
.tgrid-box { display: grid; gap: 12px; align-content: start; }
.tgrid-box p { margin: 0; color: var(--fg2); }
.tgrid-box .btn { justify-self: start; }
.code { word-break: break-all; background: var(--surface2); border-radius: 10px; padding: 10px 12px; color: var(--fg); }

@media (max-width: 820px) {
  .cols, .tgrid { grid-template-columns: minmax(0, 1fr); }
  section { padding-block: 64px; }
  .top { position: static; }
}
@media (max-width: 480px) { .hide-narrow { display: none; } }
@media (prefers-reduced-motion: no-preference) { .btn { transition: filter 0.15s ease; } }

/* The privacy notice (/privacy): written out in all three languages; the page's lang shows one. */
.legal > .wrap { max-width: 780px; padding-block: 40px 64px; }
[data-legal] { display: none; }
html[lang="en"] [data-legal="en"], html[lang="es"] [data-legal="es"], html[lang="ca"] [data-legal="ca"] { display: block; }
.legal h2 { margin-top: 44px; }
.legal p, .legal li { line-height: 1.6; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.legal-meta { color: var(--fg3); font: 500 13px/1.4 "DM Mono", ui-monospace, monospace; margin: -8px 0 20px; }
.legal-lead { font-size: 19px; color: var(--fg2); }
.legal .basis { color: var(--fg2); font-style: italic; }
.legal-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 12px 0 8px; background: var(--surface); }
.legal table { border-collapse: collapse; width: 100%; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--line); }
.legal thead th { border-top: 0; background: var(--surface2); font-weight: 600; }
.legal td:first-child { font-weight: 600; }
.todo { background: color-mix(in srgb, var(--carbs) 30%, transparent); color: inherit; border-radius: 4px; padding: 0 3px; }
@media (max-width: 640px) {
  .legal table, .legal tbody, .legal tr, .legal td { display: block; }
  .legal thead { display: none; }
  .legal tr { border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 6px; }
  .legal tr:first-child { border-top: 0; }
  .legal td { border: 0; padding: 0; }
  .legal td:not(:first-child)::before { content: attr(data-label); display: block; font: 500 11px/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
}

/* Home page: the visit is a workout. A barbell to load (home.js draws it), five sets ticked off as you scroll, a
   real rest timer, and a summary at the end. Everything reads fine without the script and with reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
.eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg3); }
.nav { display: flex; gap: 4px; margin-right: 4px; }
.nav a { color: var(--fg2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 10px; border-radius: 10px; }
.nav a:hover { color: var(--fg); background: var(--surface2); }
.btn.big { min-height: 56px; padding: 0 28px; font-size: 16px; border-radius: 16px; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--fg); }
[data-magnetic] { transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.3), filter 0.15s ease; will-change: transform; }

/* Warm-up */
.hero { position: relative; padding: 56px 0 72px; overflow: hidden; }
.hero-title { font-size: clamp(56px, 11.5vw, 168px); line-height: 0.9; letter-spacing: -0.045em; margin: 0; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .line > span { display: inline-block; }
.outline { color: transparent; -webkit-text-stroke: 2px var(--fg); background: radial-gradient(circle 150px at var(--mx, -400px) var(--my, -400px), var(--fg) 0 99%, transparent 100%); -webkit-background-clip: text; background-clip: text; }
.js .hero-title .line > span { transform: translateY(105%); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.js .hero-title.in .line > span { transform: none; }
.js .hero-title.in .line + .line > span { transition-delay: 0.12s; }

.bar-stage { position: relative; margin: 8px 0 0; height: clamp(250px, 34vw, 380px); }
.bar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bar-hit { position: absolute; inset: 22% 4% 0; border: 0; background: transparent; cursor: pointer; border-radius: 24px; }
.bar-hit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -6px; }
.bar-readout { position: absolute; left: 0; right: 0; top: 0; text-align: center; pointer-events: none; z-index: 1; }
.bar-kg { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 800; font-stretch: 115%; font-size: clamp(44px, 6.5vw, 88px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bar-kg small { font-size: 0.32em; font-weight: 700; letter-spacing: 0; color: var(--fg3); }
.bar-kg.bump { animation: bump 0.45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes bump { 30% { transform: scale(1.08); } }
.bar-hint, .bar-note { margin: 6px auto 0; font-size: 15px; color: var(--fg3); max-width: 34em; padding: 0 20px; }
.bar-note { color: var(--fg2); }
.when-touch { display: none; }
@media (hover: none) { .when-mouse { display: none; } .when-touch { display: inline; } }
.hero-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin-top: 8px; }
.hero-lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--fg2); max-width: 30em; margin: 0; }

/* The session: one screen on a computer. It stays put while scrolling moves through the five sets. */
.session { border-top: 1px solid var(--line); }
.session-pin { position: relative; height: 430vh; overflow-anchor: none; }
.session-stage {
  position: sticky; top: 0; height: 100vh; min-height: 700px; max-width: 1240px; margin: 0 auto;
  padding: 96px var(--gutter-r) 36px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head phone" "sets phone"; column-gap: clamp(40px, 6vw, 104px); row-gap: 22px; align-items: center;
}
.session-head { grid-area: head; align-self: end; }
.session-head h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.035em; margin: 0 0 18px; max-width: 15ch; }
.session-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.session-bar i { height: 6px; border-radius: 99px; background: var(--surface2); transition: background-color 0.4s ease; }
.session-bar i.active { background: color-mix(in srgb, var(--fg) 40%, var(--surface2)); }
.session-bar i.done { background: var(--fg); }
.sets { grid-area: sets; align-self: start; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.set { width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 20px; padding: 13px 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 12px; align-items: start; cursor: pointer; opacity: 0.55; transition: background-color 0.35s ease, opacity 0.35s ease; }
.set:hover { opacity: 0.85; }
.set.active { opacity: 1; background: var(--surface); }
.set.done:not(.active) { opacity: 0.8; }
.set:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.set-no { font-weight: 800; font-stretch: 115%; font-size: 22px; line-height: 1.25; color: var(--fg3); font-variant-numeric: tabular-nums; }
.set.active .set-no, .set.done .set-no { color: var(--fg); }
.set-main { display: grid; min-width: 0; }
.set-prev { font-size: 13px; color: var(--fg3); }
.set-prev s { text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--fg3) 75%, transparent); }
.set-title { font-weight: 800; font-stretch: 112%; font-size: clamp(19px, 1.8vw, 27px); line-height: 1.1; letter-spacing: -0.02em; margin-top: 2px; }
.set-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(.2, .8, .2, 1); }
.set-more > span { overflow: hidden; }
.set.active .set-more { grid-template-rows: 1fr; }
.set-text { display: block; padding-top: 8px; color: var(--fg2); font-size: 16px; max-width: 34em; }
.set-tick { width: 34px; height: 34px; border-radius: 10px; background: var(--surface2); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.35s ease, transform 0.35s cubic-bezier(.2, .9, .3, 1.5); }
.set-tick svg { width: 20px; height: 20px; fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.45s ease 0.1s; }
.set.done .set-tick { background: var(--fg); transform: scale(1.06); }
.set.done .set-tick svg { stroke-dashoffset: 0; }

.phone-col { grid-area: phone; display: grid; justify-items: center; gap: 14px; }
.device { position: relative; width: 300px; max-width: 100%; padding: 9px; border-radius: 48px; background: #0B0C0E; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 0 0 2px #23272B, 0 50px 90px -40px rgba(0, 0, 0, 0.7); }
.phone-col .device { width: min(340px, calc((100vh - 170px) * 0.462)); transform-style: preserve-3d; will-change: transform; }
.screen-box { position: relative; aspect-ratio: 390 / 844; border-radius: 39px; overflow: hidden; background: #0A0A0C; }
.glare { position: absolute; inset: 9px; border-radius: 39px; pointer-events: none; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.14), transparent 45%); mix-blend-mode: screen; opacity: 0; transition: opacity 0.4s ease; }
.session:hover .glare { opacity: 1; }
.phone-hint { margin: 0; min-height: 1.5em; font-size: 14px; color: var(--fg3); text-align: center; }

/* The app inside the phone, at its own 390 points and colours (app/src/theme/theme.tsx, dark). */
.app { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--k, 0.8)); transform-origin: 0 0; background: #0A0A0C; color: #F7F7F4; font: 400 15px/1.35 Archivo, system-ui, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.app button { font: inherit; color: inherit; cursor: pointer; }
.app p { margin: 0; }
.a-scr { position: absolute; inset: 0; padding: 22px 18px 24px; opacity: 0; transform: translateY(26px) scale(0.98); pointer-events: none; transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.2, .8, .2, 1); }
.a-scr.past { transform: translateY(-26px) scale(0.98); }
.a-scr.on { opacity: 1; transform: none; pointer-events: auto; }
.a-top { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; margin: 0 -18px 16px; padding: 0 18px 14px; border-bottom: 1px solid #2E2E33; }
.a-icon { font-size: 22px; color: #BBBBB6; }
.a-ttl { display: grid; text-align: center; }
.a-ttl b { font-size: 18px; }
.a-ttl small { color: #BBBBB6; font-size: 14px; font-variant-numeric: tabular-nums; }
.a-btn { background: linear-gradient(#E4E4DF, #BDBDB7); color: #0A0A0C; border-radius: 16px; padding: 10px 18px; font-weight: 600; }
.a-exhead { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.a-exhead img { width: 50px; height: 50px; border-radius: 11px; object-fit: cover; border: 1px solid #2E2E33; background: #000; }
.a-exhead b { display: block; font-weight: 800; font-stretch: 125%; font-size: 21px; letter-spacing: -0.01em; }
.a-exhead small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: #A8CF6B; font-size: 13px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.g-a { background: #34E0A1; } .g-b { background: #A8CF6B; } .g-c { background: #FFB224; } .g-d { background: #FF6A5C; }
.a-more { color: #BBBBB6; letter-spacing: 2px; }
.a-chips { display: flex; gap: 6px; margin: 14px 0 16px; }
.a-chips span { background: #242428; border-radius: 999px; padding: 9px 13px; font-size: 14px; }
.a-grid { display: grid; grid-template-columns: 26px minmax(0, 1fr) 76px 62px 38px; gap: 8px; align-items: center; }
.a-head { padding: 0 6px 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8E8E88; }
.a-row { padding: 6px; margin-bottom: 4px; border-radius: 14px; transition: background-color 0.25s ease; }
.a-row.done { background: #34343A; }
.a-prev { color: #8E8E88; font-size: 13px; white-space: nowrap; }
.a-cell { width: 100%; padding: 11px 4px; border: 0; border-radius: 11px; background: #242428; color: #F7F7F4; font: 600 17px Archivo, system-ui, sans-serif; text-align: center; }
.a-cell:focus { outline: 2px solid #E4E4DF; }
.a-row.done .a-cell { background: transparent; }
.a-check { position: relative; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #242428; }
.a-row.done .a-check { background: #E4E4DF; }
.a-row.done .a-check::after { content: ""; position: absolute; inset: 0; background: #0A0A0C; -webkit-mask: var(--tick) center / 18px no-repeat; mask: var(--tick) center / 18px no-repeat; }
.a-add { display: block; margin: 6px auto 2px; padding: 8px 12px; border: 0; background: none; font-weight: 600; }
.a-next { margin-top: 10px !important; padding: 11px 13px; border-radius: 13px; background: rgba(52, 224, 161, 0.14); color: #34E0A1; font-size: 14px; font-weight: 600; }
.a-next[hidden] { display: none; }
.a-dim { margin-top: 16px; padding-top: 16px; border-top: 1px solid #2E2E33; opacity: 0.6; }
.a-legrows { margin-top: 14px; }
.a-static .a-cell { display: block; }
.a-rest { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 14px 18px 24px; background: #17171A; border-top: 1px solid #2E2E33; transform: translateY(105%); transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.a-rest.on { transform: none; }
.a-rest small { display: block; color: #BBBBB6; font-size: 13px; }
.a-rest b { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-rest button { padding: 12px 15px; border: 1px solid #2E2E33; border-radius: 15px; background: transparent; font-weight: 600; }

.a-h { margin: 4px 0 14px; font-weight: 800; font-stretch: 125%; font-size: 23px; }
.a-hbig { margin: 0; font-size: 42px; letter-spacing: -0.02em; }
.a-tabs { display: flex; justify-content: space-between; margin-bottom: 16px; border-bottom: 1px solid #2E2E33; font-size: 14px; color: #8E8E88; }
.a-tabs span { padding: 6px 2px 11px; }
.a-tabs .on { color: #F7F7F4; box-shadow: inset 0 -2px #F7F7F4; }
.a-best { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 16px; }
.a-best img { width: 124px; height: 124px; object-fit: cover; border-radius: 13px; border: 1px solid #2E2E33; background: #000; }
.a-big { display: block; font-weight: 800; font-stretch: 125%; font-size: 48px; line-height: 1; letter-spacing: -0.02em; }
.a-best small { display: block; color: #8E8E88; font-size: 12px; }
.a-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.a-two b { font-size: 18px; }
.a-toggle { display: flex; gap: 6px; margin-bottom: 12px; }
.a-toggle button { padding: 10px 12px; border: 1px solid #2E2E33; border-radius: 15px; background: transparent; font-size: 13px; line-height: 1.2; }
.a-toggle button.on { border-color: transparent; background: linear-gradient(#E4E4DF, #BDBDB7); color: #0A0A0C; }
.a-readout { margin-bottom: 4px !important; font-size: 13px; color: #BBBBB6; font-variant-numeric: tabular-nums; }
.a-chart { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.a-chart .grid { stroke: #2E2E33; stroke-dasharray: 3 4; }
.a-chart text { fill: #8E8E88; font: 11px Archivo, system-ui, sans-serif; }
.a-chart .line { fill: none; stroke: #F7F7F4; stroke-width: 2.5; stroke-linejoin: round; }
.a-chart .dot { fill: #F7F7F4; }
.a-chart .pick { fill: #0A0A0C; stroke: #F7F7F4; stroke-width: 3; }
.a-chart .cursor { stroke: #8E8E88; stroke-dasharray: 2 3; }
.a-level { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #8E8E88; }
.a-level b { color: #F7F7F4; font-size: 15px; letter-spacing: 0; text-transform: none; }
.a-levelbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.a-levelbar i { height: 7px; border-radius: 9px; background: #242428; }
.a-levelbar .on { background: #F7F7F4; }
.a-levelbar .half { background: linear-gradient(90deg, #F7F7F4 50%, #242428 50%); }

.a-pill { margin: 0 0 12px !important; padding: 13px 15px; border: 1px solid #2E2E33; border-radius: 17px; font-size: 15px; }
.a-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 420px; }
.a-body svg { width: 100%; height: 100%; }
.a-body path { stroke: #0A0A0C; stroke-width: 3; transition: fill 0.4s ease; }
.a-body path.muscle { cursor: pointer; }
.a-body path.picked { stroke: #F7F7F4; stroke-width: 8; }
.a-legend { margin: 6px 0 12px; font-size: 12px; color: #BBBBB6; }
.a-legend > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.a-legend > span[hidden] { display: none; }
.a-legend i { display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 3px; }
.a-legend i:first-child { margin-left: 0; }
.a-legend .l1 { background: rgba(239, 239, 234, 0.33); } .a-legend .l2 { background: rgba(239, 239, 234, 0.63); } .a-legend .l3 { background: #EFEFEA; }
.a-pick { display: flex; justify-content: space-between; gap: 10px; min-height: 48px; padding: 13px 15px; border-radius: 15px; background: #17171A; }
.a-pick b { font-weight: 600; }

.a-date { margin-top: 4px !important; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: #BBBBB6; }
.a-sub { margin: 4px 0 14px !important; color: #BBBBB6; }
.a-card { margin-bottom: 12px; padding: 15px 16px; border: 1px solid #2E2E33; border-radius: 21px; background: #17171A; }
.a-card > b { display: block; font-size: 16px; }
.a-card > p { margin: 4px 0 10px; font-size: 14px; }
.a-cap { margin-bottom: 8px !important; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8E8E88; }
.a-cardh { margin-bottom: 6px; font-weight: 800; font-stretch: 125%; font-size: 19px !important; }
.a-bars { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; margin-bottom: 8px; font-size: 13px; color: #BBBBB6; }
.a-bars b { color: #F7F7F4; font-size: 13px; white-space: nowrap; }
.a-bars i { height: 12px; border-radius: 9px; background: #8F8F87; }
.a-bars i.hot { background: #FF7A5C; }
.a-bars .w86 { width: 86%; } .a-bars .w87 { width: 87%; } .a-bars .w100 { width: 100%; }
.a-find { padding-top: 6px; }
.a-find + .a-find { margin-top: 6px; border-top: 1px solid #2E2E33; }
.a-findh { display: grid; grid-template-columns: 24px minmax(0, 1fr); width: 100%; padding: 6px 0; border: 0; background: none; text-align: left; font-weight: 600; font-size: 15px; }
.a-findh span:first-child { color: #FF6A5C; transform: rotate(-90deg); transition: transform 0.3s ease; }
.a-find.open .a-findh span:first-child { transform: none; }
.a-findb { display: none; padding: 6px 0 4px 24px; }
.a-find.open .a-findb { display: block; }
.a-small { margin-bottom: 8px !important; font-size: 13px; color: #BBBBB6; }
.a-explain { margin-bottom: 8px !important; padding: 10px 12px; border-radius: 12px; background: #242428; font-size: 13px; }
.a-explain[hidden] { display: none; }
.a-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.a-actions button { padding: 9px 12px; border: 1px solid #2E2E33; border-radius: 12px; background: transparent; font-size: 13px; font-weight: 600; }
.a-actions button.on { border-color: transparent; background: rgba(52, 224, 161, 0.14); color: #34E0A1; }

.a-today { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 14px; border: 0; }
.a-brand { font-weight: 700; font-stretch: 125%; letter-spacing: 0.3em; }
.a-today span { color: #BBBBB6; font-size: 14px; }
.a-rings { display: grid; justify-items: center; gap: 12px; padding: 16px 12px 18px; }
.a-center { text-align: center; }
.a-ring { position: relative; display: grid; justify-items: center; }
.a-ring svg { width: 200px; height: 200px; transform: rotate(-90deg); }
.a-ring circle { fill: none; stroke: #242428; stroke-width: 12; }
.a-ring .fill { stroke: #E4E4DF; stroke-linecap: round; transition: stroke-dashoffset 0.8s cubic-bezier(.2, .8, .2, 1); }
.a-ring > span { position: absolute; top: 0; height: 200px; display: grid; place-content: center; text-align: center; }
.a-ring > span b { font-weight: 800; font-stretch: 125%; font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }
.a-ring > span small { color: #BBBBB6; }
.a-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.a-ring.sm svg { width: 76px; height: 76px; }
.a-ring.sm > span { height: 76px; }
.a-ring.sm > span b { font-size: 15px; font-stretch: 100%; }
.a-ring.sm small { margin-top: 4px; font-size: 13px; }
.a-ring.protein .fill { stroke: #FF5A4F; } .a-ring.carbs .fill { stroke: #FFB224; } .a-ring.fat .fill { stroke: #30C5F0; }
.a-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: -2px 0 14px; }
.a-tiles span { padding: 10px 12px; border: 1px solid #2E2E33; border-radius: 15px; background: #17171A; }
.a-tiles small { display: block; color: #BBBBB6; font-size: 12px; }
.a-tiles b { font-size: 18px; font-variant-numeric: tabular-nums; }
.a-foods { display: grid; gap: 6px; }
.a-food { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid #2E2E33; border-radius: 15px; background: #17171A; text-align: left; transition: border-color 0.3s ease; }
.a-food b { color: #BBBBB6; font-size: 13px; font-weight: 500; }
.a-food.added { border-color: #34E0A1; }
.a-food.added b::before { content: "✓ "; color: #34E0A1; }
/* Nutri-Score's own colours, the same as on the label. */
.ns { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; font: 700 13px/1 Archivo, system-ui, sans-serif; font-style: normal; }
.ns-a { background: #038141; } .ns-b { background: #85BB2F; } .ns-c { background: #FECB02; color: #11161A; } .ns-d { background: #EE8100; } .ns-e { background: #E63E11; }

/* Plans */
.plans-home { padding: 120px 0 72px; border-top: 1px solid var(--line); }
.plans-home [hidden] { display: none !important; }
.plans-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-bottom: 32px; }
.plans-top h2 { margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.035em; max-width: 18ch; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border-radius: 28px; border: 1px solid var(--line); background: var(--surface); transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), box-shadow 0.45s ease; }
.pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--sx, -500px) var(--sy, -500px), color-mix(in srgb, var(--fg) 10%, transparent), transparent 60%); }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -38px rgba(0, 0, 0, 0.65); }
.pcard-plus { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pcard-plus::before { background: radial-gradient(380px circle at var(--sx, -500px) var(--sy, -500px), color-mix(in srgb, var(--bg) 16%, transparent), transparent 60%); }
.pcard-name { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
.pcard-plus .pcard-name { color: color-mix(in srgb, var(--bg) 60%, var(--fg)); }
.pcard-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0; color: var(--fg2); }
.pcard-price span { white-space: nowrap; }
.pcard-price b { font-weight: 800; font-stretch: 115%; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.pcard-plus .pcard-price, .pcard-plus .pcard-price b { color: var(--bg); }
.pcard-sub { margin: 4px 0 0; min-height: 2.8em; font-size: 14px; color: var(--fg3); }
.pcard-plus .pcard-sub { color: color-mix(in srgb, var(--bg) 65%, var(--fg)); }
.pcard-list { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 10px; }
.pcard-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; color: var(--fg2); font-size: 15px; }
.pcard-list li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; background: currentColor; -webkit-mask: var(--tick) center / 18px no-repeat; mask: var(--tick) center / 18px no-repeat; }
.pcard-plus .pcard-list li { color: color-mix(in srgb, var(--bg) 85%, var(--fg)); }
.pcard .btn { margin-top: auto; }
.pcard-plus .btn.primary { background: var(--bg); border-color: var(--bg); color: var(--fg); }
.tester-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 16px; padding: 22px 28px; border: 1px dashed color-mix(in srgb, var(--fg3) 60%, transparent); border-radius: 22px; }
.tester-strip p { margin: 0; max-width: 62em; color: var(--fg2); }
.tester-strip b { margin-right: 6px; color: var(--fg); }
.plans-home .small-print { padding: 16px 0 0; }

/* Cool-down */
.cooldown { padding: 40px 0 120px; }
.summary { border-radius: 32px; padding: clamp(28px, 5vw, 64px); background: var(--fg); color: var(--bg); }
.summary .eyebrow { color: color-mix(in srgb, var(--bg) 60%, var(--fg)); }
.summary h2 { font-size: clamp(44px, 8vw, 120px); line-height: 0.92; letter-spacing: -0.045em; }
.sum-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 36px 0; border-top: 1px solid color-mix(in srgb, var(--bg) 25%, var(--fg)); }
.sum-stats div { padding: 20px 20px 0 0; }
.sum-stats div + div { padding-left: 20px; border-left: 1px solid color-mix(in srgb, var(--bg) 25%, var(--fg)); }
.sum-stats dt { font-size: 14px; color: color-mix(in srgb, var(--bg) 60%, var(--fg)); margin-bottom: 6px; }
.sum-stats dd { margin: 0; font-weight: 800; font-stretch: 112%; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-stats dd small { font-size: 0.45em; font-weight: 700; letter-spacing: 0; }
.sum-line { font-size: 19px; max-width: 32em; margin: 0 0 28px; color: color-mix(in srgb, var(--bg) 80%, var(--fg)); }
.summary .btn.primary { background: var(--bg); border-color: var(--bg); color: var(--fg); }
.summary .actions { gap: 20px; }
.summary .mail { color: color-mix(in srgb, var(--bg) 75%, var(--fg)); }

/* The running session, like the app's mini workout bar. */
.hud { position: fixed; left: max(20px, env(safe-area-inset-left, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 6; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; background: var(--fg); color: var(--bg); text-decoration: none; font-size: 15px; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55); transform: translateY(160%); opacity: 0; transition: transform 0.5s cubic-bezier(.2, .9, .3, 1.2), opacity 0.3s ease; }
.hud.on { transform: none; opacity: 1; }
.hud-dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.hud-time, .hud-sets { font-variant-numeric: tabular-nums; }
.hud-sets { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--bg) 30%, var(--fg)); }

/* A ring that follows the mouse a little behind, and says what a click does. */
.cursor { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.cursor.on { opacity: 1; }
.cursor-ring { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--fg); transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.cursor.big .cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.cursor.label .cursor-ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--fg); border-color: var(--fg); }
.cursor-label { position: absolute; transform: translate(-50%, -50%); font-size: 14px; font-weight: 800; color: var(--bg); white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; }
.cursor.label .cursor-label { opacity: 1; }

/* Things that slide in as they reach the screen. */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.16, 1, .3, 1); }
.js [data-reveal].in { opacity: 1; transform: none; }

.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot a { color: var(--fg2); text-decoration: none; }
.site-foot a:hover { color: var(--fg); text-decoration: underline; }

@media (max-width: 960px) {
  .nav { display: none; }
  .session-pin { height: auto; }
  .session-stage { position: static; height: auto; min-height: 0; padding: 72px var(--gutter-r) 56px var(--gutter); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "sets" "phone"; row-gap: 20px; }
  .phone-col .device { width: min(310px, 78vw); }
  .set { padding: 12px 12px; grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .pcards { grid-template-columns: minmax(0, 1fr); }
  .sum-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-stats div, .sum-stats div + div { padding: 18px 16px 18px 0; border-left: 0; }
  .sum-stats div:nth-child(even) { padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--bg) 25%, var(--fg)); }
  .sum-stats div:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--bg) 25%, var(--fg)); }
}
@media (max-width: 560px) {
  .hero { padding-top: 36px; }
  .hero-title { font-size: clamp(48px, 15vw, 72px); }
  .outline { -webkit-text-stroke-width: 1.5px; }
  .bar-stage { height: 250px; }
  .actions .btn { flex: 1 1 auto; }
  .hud { font-size: 14px; gap: 10px; padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js .hero-title .line > span, .js [data-reveal] { transform: none; opacity: 1; transition: none; }
  .a-scr, .set-more, .pcard { transition: none; }
  .hud-dot { animation: none; }
}

/* Log in (/login): one account for the app, Belva on the web and the coach page. */
.login { max-width: 34rem; padding-block: 48px 64px; }
.login-box { display: grid; gap: 16px; }
.login-box .btn { width: 100%; }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--fg2); }
.field input { font: inherit; font-size: 16px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; min-height: 48px; padding: 0 14px; }
.field input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.notice.warn { border-color: var(--danger, #B3261E); background: color-mix(in srgb, var(--danger, #B3261E) 10%, var(--surface)); }
.login-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; font-size: 14px; color: var(--fg3); }
.btn.quiet { background: transparent; }
/* The tester code box, behind "Tester sign-in" (site.js). */
.code-dialog { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--fg); padding: 24px; width: min(28rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; }
.code-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.code-dialog h2 { margin: 0; font-weight: 500; font-size: 24px; line-height: 1.2; }
.code-dialog .kicker, .code-dialog .muted { margin: 0; }
.code-dialog input { font-family: "DM Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.code-dialog .btn:disabled { opacity: 0.6; cursor: progress; }
.link-btn { font: inherit; color: var(--accent-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* Plans (/pricing). */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 32px; }
.plan { display: flex; flex-direction: column; gap: 14px; }
.plan p, .plan ul { margin: 0; color: var(--fg2); }
.plan ul { padding-left: 18px; display: grid; gap: 6px; }
.plan [hidden] { display: none !important; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 42px; }
.plan-head .kicker { margin: 0; }
.plan .price { color: var(--fg2); }
.plan .price strong { font-size: 36px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); font-variant-numeric: tabular-nums; }
.plan .per { font-size: 14px; color: var(--fg3); margin-top: 4px; }
.plan .btn { margin-top: auto; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.billing { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.billing button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--fg2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--surface2); color: var(--fg); }
.billing button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.billing .save { font: 700 12px/1 Archivo, system-ui, sans-serif; color: var(--ok); }
.testers { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; border-color: var(--accent); background: var(--accent-wash); margin-bottom: 20px; }
.testers h2 { margin: 0 0 8px; }
.testers p:not(.kicker) { margin: 0; color: var(--fg2); }
.small-print { font-size: 14px; max-width: 46em; padding-bottom: 48px; }
@media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .testers { grid-template-columns: minmax(0, 1fr); } .testers .btn { width: 100%; } }

/* The page for an address that doesn't exist. */
.notfound { padding: 12vh 0 16vh; max-width: 34em; }