:root{
  --bg:#07080A; --bg-2:#0C0E12; --card:#101318; --card-2:#141820; --line:#1E242D;
  --ink:#F3F6F9; --ink-2:#AEB7C3; --ink-3:#7A838F;
  --accent:#FACC14; --accent-2:#FB923C; --accent-3:#F59E0B; --warn:#FB7185;
  --brand:#FACC15; --brand-ink:#0F172A;
  /* 16b inverts the chip on light grounds: yellow chip on ink, ink chip on white */
  --chip-bg:#FACC15; --chip-ink:#0F172A;
  --grad:linear-gradient(100deg,var(--accent),var(--accent-2));
  --grad-ink:var(--grad);
  --wrap:1220px; --r:12px;
  --shadow:0 18px 44px -20px rgba(0,0,0,.8);

  /* surfaces and edges the palette needs to reach — kept as variables so the
     light theme below is a palette swap and not a second stylesheet */
  --line-2:#2A323C; --line-3:#333C48; --line-4:#38424F;
  --surface:#0F1319; --surface-2:#0D1015;
  --panel-grad:linear-gradient(180deg,#141922,#0B0E13);
  --nav-bg:rgba(7,8,10,.74); --nav-bg-stuck:rgba(7,8,10,.92);
  --dot:#252C36; --notch:#212832;
  --btn-ink:#0F172A;
  --glow-1:rgba(250,204,20,.18); --glow-2:rgba(251,146,60,.15); --glow-3:rgba(245,158,11,.10);
  --tint:rgba(250,204,20,.05); --tint-2:rgba(251,146,60,.05);
  --scan:rgba(250,204,20,.18);
  --bar-fade:rgba(250,204,20,.22); --bar-fade-2:rgba(251,146,60,.2);
  --ok-bg:rgba(250,204,20,.09); --ok-line:rgba(250,204,20,.4);

  /* fluid scale — everything scales continuously, no snapping */
  --sec-y:clamp(38px,4.2vw,58px);
  --gap:clamp(10px,1.05vw,16px);
  --pad:clamp(13px,1.3vw,18px);
  --gut:clamp(18px,3vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(15.2px,.42vw + 13.7px,16.6px);line-height:1.55;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{letter-spacing:-.032em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
.wrap{width:min(100% - var(--gut),var(--wrap));margin-inline:auto}
.wrap.narrow{width:min(100% - var(--gut),820px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--accent);color:var(--btn-ink);padding:10px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.grad{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.nav.stuck{border-color:var(--line);background:var(--nav-bg-stuck)}
.nav-in{display:flex;align-items:center;gap:clamp(14px,2vw,28px);height:58px}
.brand{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.mark{
  display:inline-flex;align-items:center;gap:.25em;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:18px;line-height:1;
}
.mark-word{font-weight:500;letter-spacing:.06em;color:var(--ink)}
/* chip is 1.5x the word size with the R at half the chip — the study's ratios */
.mark-chip{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-size:.75em;width:2em;height:2em;border-radius:.478em;
  font-weight:700;background:var(--chip-bg);color:var(--chip-ink);
}
.brand.sm .mark{font-size:16px}
.nav-links{display:flex;gap:clamp(14px,1.7vw,26px);margin-left:auto;font-size:14.5px;color:var(--ink-2)}
.nav-links a{text-decoration:none;position:relative;padding:2px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--grad-ink);transition:right .22s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:21px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none;grid-template-columns:1fr;padding:4px var(--gut) 16px;border-top:1px solid var(--line)}
.mobile-menu a{padding:11px 2px;text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--line);font-size:15px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--grad);color:var(--btn-ink);font-weight:650;font-size:14.5px;
  padding:9px 17px;border-radius:9px;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;transition:transform .15s,box-shadow .2s,filter .15s;
}
.btn:hover{filter:saturate(1.15) brightness(1.05);transform:translateY(-1px);box-shadow:0 8px 22px -10px var(--accent)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none;filter:none}
.btn.lg{padding:12px 22px;font-size:15.5px;border-radius:10px}

/* hero */
.hero{position:relative;padding:clamp(32px,3.8vw,54px) 0 clamp(28px,3.4vw,44px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:600px;pointer-events:none;
  background:radial-gradient(44% 56% at 20% 34%,var(--glow-1),transparent 68%),
             radial-gradient(40% 52% at 74% 16%,var(--glow-2),transparent 68%),
             radial-gradient(30% 40% at 52% 6%,var(--glow-3),transparent 70%);
}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,3.4vw,48px);align-items:center}
.eyebrow{font-size:11.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
h1{font-size:clamp(1.95rem,3.5vw,2.9rem);font-weight:700}
.lede{color:var(--ink-2);font-size:clamp(15px,1vw,16.8px);margin-top:12px;max-width:52ch;line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
  list-style:none;padding:13px 0 0;margin:20px 0 0;border-top:1px solid var(--line);
}
.hero-facts li{display:grid;gap:1px;padding-left:10px;border-left:2px solid transparent;border-image:var(--grad-ink) 1;border-top:0;border-right:0;border-bottom:0}
.hero-facts strong{font-size:14px}
.hero-facts span{font-size:12.5px;color:var(--ink-3);line-height:1.35}

/* hero panel */
.panel{background:var(--panel-grad);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dot)}
.panel-title{margin-left:8px;font-size:11.5px;color:var(--ink-3);font-family:"JetBrains Mono",ui-monospace,monospace}
.panel-body{padding:13px;display:grid;gap:11px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.kpi span{font-size:11px;color:var(--ink-3)}
.kpi b{font-size:clamp(16px,1.3vw,19px);letter-spacing:-.025em}
.kpi i{font-style:normal;font-size:11px;color:var(--ink-3)}
.kpi i.up{color:var(--accent)} .kpi i.warn{color:var(--warn)}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}
.bars{display:flex;align-items:flex-end;gap:5px;height:clamp(58px,6vw,84px)}
.bars span{flex:1;height:var(--h);border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--bar-fade))}
.bars span:nth-child(even){background:linear-gradient(180deg,var(--accent-2),var(--bar-fade-2))}
.chart-cap{margin-top:8px;font-size:11px;color:var(--ink-3)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px;color:var(--ink-2)}
.feed li{display:flex;gap:8px;align-items:baseline;border-top:1px solid var(--line);padding-top:6px}
.feed em{font-style:normal;font-size:10px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);min-width:42px}

.mods{
  list-style:none;margin:var(--gap) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:8px;
}
.mods li{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;display:grid;gap:1px;transition:background .16s,border-color .16s;
}
.mods li:hover{background:var(--card-2);border-color:var(--line-3)}
.mods b{font-size:13.8px;font-weight:600}
.mods span{font-size:12.2px;color:var(--ink-3);line-height:1.3}

/* strip */
.strip{border-block:1px solid var(--line);background:linear-gradient(90deg,var(--tint),var(--tint-2))}
.strip-in{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.2vw,16px);padding:11px 0;font-size:13px;color:var(--ink-2)}
.strip-in i{color:var(--accent);font-style:normal;opacity:.5}

/* sections */
.section{padding:var(--sec-y) 0;position:relative}
.section.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec-head{max-width:56ch;margin-bottom:clamp(16px,1.9vw,26px)}
h2{font-size:clamp(1.45rem,2.4vw,2rem);font-weight:700}
.sec-lede{color:var(--ink-2);margin-top:11px;font-size:clamp(15px,1vw,16.8px);line-height:1.5}

.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--gap)}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);display:grid;gap:7px;align-content:start;position:relative;overflow:hidden}
.step::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-ink);opacity:.65}
.step .num{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--accent)}
.step h3{font-size:16px}
.step p{color:var(--ink-2);font-size:14px;line-height:1.45}

.grid{display:grid;gap:var(--gap)}
.grid.modules{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.grid.trust{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.grid.roles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);transition:border-color .18s,transform .18s,background .18s}
.card:hover{border-color:var(--line-4);background:var(--card-2);transform:translateY(-2px)}
.card h3{font-size:15.5px;margin-bottom:5px}
.card p{color:var(--ink-2);font-size:13.8px;line-height:1.45}
.card a:not(.btn){color:var(--accent);text-decoration:none;white-space:nowrap}
.card.role h3{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}

.split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(22px,3.2vw,44px);align-items:center}
.split.reverse>div:last-child{order:-1}
.ticks{list-style:none;padding:0;margin:15px 0 0;display:grid;gap:7px}
.ticks li{position:relative;padding-left:23px;color:var(--ink-2);font-size:14.5px;line-height:1.4}
.ticks li b{color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:1px;top:7px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

.ptcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 8px;box-shadow:var(--shadow)}
.pt-row{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 8px;border-bottom:1px solid var(--line);font-size:13.8px}
.pt-row:last-child{border-bottom:0}
.pt-row.muted{color:var(--ink-3)}
.who{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.act{color:var(--ink-2)}
.pill{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.pill.ok{color:var(--accent);border-color:var(--ok-line);background:var(--ok-bg)}

.phones{display:flex;justify-content:center;gap:16px}
.phone{width:min(210px,62%);background:var(--surface-2);border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:var(--shadow)}
.phone.back{transform:translateY(20px) scale(.95);opacity:.85}
.phone-top{width:56px;height:4px;border-radius:3px;background:var(--notch);margin:2px auto 10px}
.phone-body{display:grid;gap:8px}
.ph-title{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.ph-row{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.ph-row b{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink)}
.ph-row .pill{margin-left:auto}
.ph-note{font-size:11px;color:var(--ink-3)}
.ph-scan{height:clamp(84px,9vw,120px);border-radius:10px;border:1px dashed var(--line-2);background:radial-gradient(58% 48% at 50% 45%,var(--scan),transparent 70%)}

.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 16px;transition:border-color .18s}
.faq details[open]{border-color:var(--line-3)}
.faq summary{cursor:pointer;padding:13px 0;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:19px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--ink-2);font-size:14.5px;line-height:1.5;padding:0 0 14px}

.cta{padding:clamp(38px,4.4vw,58px) 0;border-top:1px solid var(--line);position:relative;overflow:hidden;background:var(--bg-2)}
.cta::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:340px;pointer-events:none;
  background:radial-gradient(40% 60% at 50% 100%,var(--glow-1),transparent 70%),
             radial-gradient(32% 50% at 74% 96%,var(--glow-2),transparent 70%)}
.cta-in{position:relative;text-align:center;max-width:60ch;margin-inline:auto}
.cta p{color:var(--ink-2);margin-top:12px}
.cta .hero-actions{justify-content:center;margin-top:20px}

.foot{border-top:1px solid var(--line);padding:22px 0;background:var(--bg)}
.foot-in{display:flex;flex-wrap:wrap;gap:14px clamp(18px,3vw,36px);align-items:center;justify-content:space-between}
.foot-brand p{font-size:13px;color:var(--ink-3);margin-top:4px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ink-2)}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--accent)}
.copy{font-size:12.5px;color:var(--ink-3)}

.reveal{opacity:0;transform:translateY(10px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:block}
  .mobile-menu:not([hidden]){display:grid}
  .hero-in,.split{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .split.reverse>div:last-child{order:0}
  .hero-panel,.phones,.ptcard{max-width:520px;width:100%;margin-inline:auto}
}
@media (max-width:560px){
  .hero-facts{grid-template-columns:1fr;gap:9px}
  .hero-facts li{padding-left:9px}
}
@media (max-width:460px){
  .pt-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .pt-row .who{grid-column:1 / -1}
  .act,.feed li,.kpi b{overflow-wrap:anywhere}
  .phone{width:100%;max-width:250px}
  .phones{flex-direction:column;align-items:center}
  .phone.back{transform:none}
}
@media (max-width:359px){
  .kpis{grid-template-columns:1fr}
}
.hero-in>*,.split>*,.panel-body>*,.pt-row>*{min-width:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ─── Light theme (opt-in) ──────────────────────────────────────────────────
   A light counterpart to the default dark chrome. Purely a palette swap:
   every surface, edge and glow above reads from a variable, so nothing below
   restates layout. Switched on with data-theme="light" on <html> — the nav
   toggle in script.js does that and remembers the choice, and a first visit
   follows the OS setting.

   The accents darken here rather than carrying over: the brand yellow #FACC14
   is tuned for a near-black background and falls to roughly 1.3:1 on white,
   which is unreadable as text. The chip keeps the true brand yellow — it always
   carries dark ink — while text accents drop to amber, and the gradient darkens
   too since it sets display type directly against the page. */
[data-theme="light"]{
  --bg:#F7F9FC; --bg-2:#EDF1F7; --card:#FFFFFF; --card-2:#F5F8FC; --line:#DDE4EC;
  --ink:#0C1219; --ink-2:#4A5768; --ink-3:#6D7A8A;
  --accent:#8A6300; --accent-2:#A34A06; --accent-3:#8A5A00; --warn:#B02A45;
  --grad:linear-gradient(100deg,#FACC14,#FB923C);
  --grad-ink:linear-gradient(100deg,#B07800,#C2410C);
  --shadow:0 18px 44px -22px rgba(15,29,48,.28);

  --line-2:#C9D3DF; --line-3:#B4C1D0; --line-4:#A6B4C6;
  --surface:#F4F7FB; --surface-2:#EEF3F9;
  --panel-grad:linear-gradient(180deg,#FFFFFF,#F2F6FB);
  --nav-bg:rgba(247,249,252,.78); --nav-bg-stuck:rgba(247,249,252,.94);
  --dot:#CBD5E1; --notch:#CBD5E1;
  --btn-ink:#0F172A;
  --chip-bg:#0F172A; --chip-ink:#FACC15;
  --glow-1:rgba(250,204,20,.20); --glow-2:rgba(251,146,60,.16); --glow-3:rgba(245,158,11,.10);
  --tint:rgba(250,204,20,.08); --tint-2:rgba(251,146,60,.07);
  --scan:rgba(250,204,20,.20);
  --bar-fade:rgba(250,204,20,.22); --bar-fade-2:rgba(251,146,60,.20);
  --ok-bg:rgba(138,99,0,.10); --ok-line:rgba(138,99,0,.38);

  color-scheme:light;
}
/* The bars are filled with the accents themselves, which are darkened above
   for text contrast; the chart wants the brighter pair back. */
[data-theme="light"] .bars span{background:linear-gradient(180deg,#EAB308,var(--bar-fade))}
[data-theme="light"] .bars span:nth-child(even){background:linear-gradient(180deg,#F97316,var(--bar-fade-2))}

/* theme toggle */
.theme-toggle{
  display:inline-flex;align-items:center;gap:7px;background:none;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:9px;padding:7px 11px;font:inherit;font-size:13px;
  cursor:pointer;transition:border-color .18s,color .18s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle svg{width:15px;height:15px;flex:none}
.theme-toggle .sun{display:none}
[data-theme="light"] .theme-toggle .sun{display:block}
[data-theme="light"] .theme-toggle .moon{display:none}
.mobile-menu .theme-toggle{margin-top:12px;align-self:start}

/* ─── Pricing ───────────────────────────────────────────────────────────────
   A plan is a set of feature groups, not a seat count, so the cards lead with
   what switches on and the table below says it row by row. The amount itself
   is quoted per gym: the price slot renders whatever PRICES in script.js
   holds, and falls back to "Quoted" while that is empty. */

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.sec-head.wide{max-width:72ch}

/* term switch — the discount ladder, as one control rather than four cards */
.termbar-wrap{display:grid;justify-items:center;gap:9px;margin-bottom:clamp(18px,2vw,26px)}
.termbar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;
}
.term-opt{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;
  background:none;border:1px solid transparent;border-radius:9px;color:var(--ink-2);
  font:inherit;font-size:14px;padding:8px 14px;cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s;
}
.term-opt:hover{color:var(--ink)}
.term-opt.is-on{background:var(--card-2);border-color:var(--line-3);color:var(--ink);font-weight:600}
.term-opt-name{line-height:1.2}
.term-save{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;color:var(--accent);border:1px solid var(--ok-line);background:var(--ok-bg);
  border-radius:999px;padding:2px 7px;line-height:1.3;
}
.term-line{color:var(--ink-3);font-size:13.2px;text-align:center;max-width:60ch}

/* plan cards */
.grid.plans{grid-template-columns:repeat(auto-fit,minmax(224px,1fr));align-items:stretch}
.card.plan{display:flex;flex-direction:column}
/* The badge makes one heading taller than the rest; a floor on all four
   keeps the prices below them on one line. */
.card.plan h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:25px}
.card.plan .ticks{margin-top:8px}
.card.plan .ticks li{font-size:13.6px}
.plan-line{color:var(--ink-2);font-size:13.8px;line-height:1.45;margin-top:5px}
/* Three lines are reserved so a short description does not lift one card's
   price and button above the rest of the row. Five plans across means the
   longest of them needs three at laptop width. */
.card.plan .plan-line{min-height:4.35em}
.price{display:flex;flex-direction:column;gap:2px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.price-amt{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(23px,2.3vw,28px);
  font-weight:700;letter-spacing:-.03em;line-height:1.1;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.price-unit{font-size:12.2px;color:var(--ink-3)}
.price-note{margin-top:7px;font-size:12.4px;color:var(--ink-2);min-height:1.4em}
.plan-cta{margin-top:14px;width:100%}
/* The trial's terms sit under its button, not inside it — a button that has to
   explain itself is too long to read at a glance. */
.plan-trial{margin-top:9px;font-size:12.2px;line-height:1.45;color:var(--ink-3)}
.plan-alt{margin-top:7px;font-size:12.6px}
.plan-alt a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .16s}
.plan-alt a:hover{border-bottom-color:currentColor}
/* The segment a plan is for, above its name — it answers "is this one mine?"
   before the price does. */
.plan-seg{
  font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;
}
.price-region{margin-top:11px;color:var(--ink-3);font-size:12.4px}
.card.plan .ticks{margin-top:16px}
.plan-limit{margin-top:auto;padding-top:14px;color:var(--ink-3);font-size:12.4px}
.card.plan.featured{border-color:var(--line-4);background:var(--card-2)}

/* comparison table — six feature groups, one row each per feature */
.cmp{margin-top:clamp(26px,3vw,42px)}
.cmp.glance{margin-top:clamp(22px,2.6vw,34px)}
.cmp .sec-head{margin-bottom:14px}
.cmp-head{font-size:clamp(19px,2.2vw,23px);letter-spacing:-.015em}
/* Positioned so the visually-hidden labels in the cells are contained and
   clipped here. Without it they resolve against the section, escape the
   scroll box at their static x, and widen the whole page on a phone. */
.cmp-scroll{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.cmp-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cmp-table{width:100%;min-width:780px;border-collapse:collapse;font-size:13.6px}
.cmp-table th,.cmp-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table thead th{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  font-weight:650;background:var(--surface-2);
}
/* The feature column stays put while the plans scroll past it, so a row never
   loses its label. It needs an opaque background and its own edge to do that. */
.cmp-table thead th:first-child,.cmp-table tbody th[scope="row"]{
  position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--line);
}
.cmp-table thead th:first-child{background:var(--surface-2)}
.cmp-table tbody th[scope="row"]{font-weight:400;color:var(--ink-2);min-width:236px}
.cmp-table td{text-align:center;color:var(--ink-2);white-space:nowrap}
.cmp-table thead th:not(:first-child){text-align:center}
.cmp-group th{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--surface)!important;
}
.cmp-table .is-featured{background:var(--card-2)}
.cmp-table thead .is-featured{color:var(--accent)}
/* the check and the dash, drawn rather than typed so they take the accent */
.yes,.no{display:inline-block;vertical-align:middle}
.yes{width:13px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) translateY(-2px)}
.no{width:11px;height:2px;background:var(--line-3);border-radius:2px}

/* the notes under it all */
.plan-note{margin-top:var(--gap);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad)}
.plan-note h3{font-size:15.5px;margin-bottom:6px}
.plan-note p{color:var(--ink-2);font-size:14px;line-height:1.5;max-width:68ch}
.plan-note p+p{margin-top:9px}
.plan-note .hero-actions{margin-top:16px}
.plan-note .ticks{margin-top:4px}
.plan-note .ticks li{font-size:14px}
.plan-foot{margin-top:14px;color:var(--ink-3);font-size:13.4px;max-width:74ch}

/* Under a laptop the table cannot show four plans at once, so say out loud
   that it moves — a scrollbar alone is easy to miss on a phone. */
.cmp-hint{display:none}
@media (max-width:860px){
  .cmp-hint{display:block;margin-bottom:8px;font-size:12.4px;color:var(--accent)}
}
@media (max-width:560px){
  /* Four equal cells beat a ragged wrap once the row no longer fits. */
  .termbar{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .term-opt{justify-content:center;padding:9px 8px;font-size:13.4px}
  .plan-cta{font-size:14px}
  /* One card per row here, so nothing needs lining up across them. */
  .card.plan .plan-line{min-height:0}
  /* A narrower label column lets a second plan share the screen with it. */
  .cmp-table{min-width:620px;font-size:13px}
  .cmp-table th,.cmp-table td{padding:9px 11px}
  .cmp-table tbody th[scope="row"]{min-width:172px;white-space:normal}
}