/* Fitable — pre-launch landing page
   Fonts are loaded from the <head> rather than @import so they don't block render. */

:root{
  --bg:#ffffff; --bg2:#f6f3f2; --bg3:#ffffff;
  --fg:#181414; --muted:#6d6360; --line:rgba(20,16,16,.12);
  --accent:#e0293d;
  --wa:#25D366; --email:#2563eb;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:'Manrope',system-ui,sans-serif; overflow-x:hidden; }
h1,h2,h3,h4{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:800; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ opacity:.8; }
img,video{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
fieldset{ margin:0; padding:0; border:0; }
legend{ padding:0; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:#fff;
  padding:12px 18px; font-weight:800; border-radius:0 0 10px 0; }
.skip-link:focus{ left:0; }

.eyebrow{ color:var(--accent); font-weight:800; letter-spacing:.09em; text-transform:uppercase; font-size:12px; margin-bottom:14px; }

.section{ padding:52px 20px; }
.section-alt{ background:var(--bg2); }
@media (min-width:820px){ .section{ padding:96px 120px; } }

.h1{ font-size:clamp(32px, 8vw, 56px); line-height:1.06; }
.h2{ font-size:clamp(28px, 6.2vw, 42px); line-height:1.08; }
.h3-lg{ font-size:clamp(22px, 5vw, 28px); line-height:1.1; }
.h3-md{ font-size:clamp(19px, 4.2vw, 24px); }
.h3-sm{ font-size:clamp(18px, 3.6vw, 22px); }
.h3-xs{ font-size:clamp(17px, 3.2vw, 20px); }

/* Visually a second deck line, but not a second heading in the outline. */
.h2-sub{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:800; letter-spacing:-.01em;
  color:var(--muted); line-height:1.08; }
.spaced{ margin-bottom:28px; }
.spaced-top{ margin-top:14px; }

.lead{ font-size:clamp(15px, 3.8vw, 18px); color:var(--muted); line-height:1.55; max-width:620px; }
.fineprint{ font-size:13px; color:var(--muted); line-height:1.5; }
.footnote{ margin-top:24px; max-width:680px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px;
  padding:16px 26px; font-weight:800; font-size:15px; cursor:pointer; border:none; width:100%;
  text-align:center; font-family:'Manrope',system-ui,sans-serif; }
@media (min-width:820px){ .btn{ width:auto; } }
.btn-block{ width:100%; }
@media (min-width:820px){ .btn-block{ width:100%; } }
.btn-inline{ width:auto; padding:12px 22px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-ghost{ background:transparent; color:var(--fg); border:1.5px solid var(--line); }
.btn-whatsapp{ background:var(--wa); color:#0b1f13; }
.btn-email{ background:var(--email); color:#fff; }
.hero-cta, .pricing-cta{ margin-top:0; }
.pricing-cta{ margin-top:32px; }

.card{ background:var(--bg3); border:1px solid var(--line); border-radius:18px; padding:22px;
  box-shadow:0 1px 2px rgba(20,16,16,.04), 0 10px 28px rgba(20,16,16,.05); }
@media (min-width:820px){ .card{ border-radius:20px; padding:28px; } }
.card-sub{ margin:10px 0 16px; }
.card-email form{ margin-top:18px; }
.card-sub-sm{ color:var(--muted); font-size:14px; margin:6px 0 10px; }

.card-email{ border-color:rgba(37,99,235,.35); transition:box-shadow .15s,border-color .15s,background .15s; }
.card-email:hover{ border-color:var(--email); background:rgba(37,99,235,.04); box-shadow:0 6px 20px rgba(37,99,235,.16); }
.card-whatsapp{ border-color:rgba(37,211,102,.4); transition:box-shadow .15s,border-color .15s,background .15s; }
.card-whatsapp:hover{ border-color:var(--wa); background:rgba(37,211,102,.05); box-shadow:0 6px 20px rgba(37,211,102,.18); }

.dark-section{ --bg:#141212; --bg2:#141212; --bg3:#1e1b1b; --fg:#f7f4f2; --muted:#8f8582;
  --line:rgba(247,244,242,.14); background:var(--bg); color:var(--fg); }
.dark-section .card{ box-shadow:none; }

.tag{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px;
  border-radius:999px; background:var(--bg2); color:var(--muted); display:inline-block; margin-bottom:18px; }
.dark-section .tag{ background:var(--bg3); }

/* ---------- FAQ ---------- */
.faq-head{ margin-bottom:24px; }
details{ border-top:1px solid var(--line); padding:20px 0; }
details:last-of-type{ border-bottom:1px solid var(--line); }
summary{ cursor:pointer; font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
  font-size:clamp(17px,4vw,20px); list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:12px; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:'+'; font-size:24px; font-weight:400; transition:transform .15s; flex-shrink:0; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ color:var(--muted); margin-top:14px; font-size:15px; line-height:1.6; max-width:700px; }

/* ---------- exercise carousel ---------- */
.carousel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.carousel-nav{ display:none; gap:8px; flex-shrink:0; }
@media (min-width:820px){ .carousel-nav{ display:flex; } }
.c-arrow{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--bg);
  color:var(--fg); cursor:pointer; display:grid; place-items:center; transition:background .15s,border-color .15s,opacity .15s; }
.c-arrow svg{ width:20px; height:20px; }
.c-arrow:hover{ border-color:var(--accent); color:var(--accent); }
.c-arrow[disabled]{ opacity:.3; cursor:default; }
.c-arrow[disabled]:hover{ border-color:var(--line); color:var(--fg); }

.scrollrow{ display:flex; gap:14px; overflow-x:auto; padding:4px 4px 16px; margin-top:28px;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scroll-behavior:smooth; }
.scrollrow::-webkit-scrollbar{ height:8px; }
.scrollrow::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.ex-card{ flex:0 0 220px; scroll-snap-align:start; }
.ex-card .ex-media{ width:100%; aspect-ratio:3/4; border-radius:16px; overflow:hidden; background:var(--bg2); }
.ex-card .ex-media video{ width:100%; height:100%; object-fit:cover; }
.ex-card .ex-name{ margin-top:10px; font-weight:700; font-size:14px; }
.swipe-hint{ font-size:13px; color:var(--muted); margin-top:4px; }
@media (min-width:820px){ .swipe-hint{ display:none; } }

/* ---------- forms ---------- */
input[type="text"], input[type="email"]{ width:100%; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:13px 14px; color:var(--fg); font-family:'Manrope',system-ui,sans-serif; font-size:16px; }
input::placeholder{ color:var(--muted); }
input[type="text"]:focus-visible, input[type="email"]:focus-visible{ border-color:var(--accent); }
label, legend{ font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; display:block; margin-bottom:6px; }
.field{ margin-bottom:16px; }
.interest-field{ margin-bottom:4px; }

/* Pills are real radio inputs so the browser handles keyboard/state and the value
   is actually submitted; the input itself is hidden and the label is the control. */
.pill-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pill{ padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--line);
  cursor:pointer; font-family:'Manrope',system-ui,sans-serif; transition:background .12s,border-color .12s,color .12s;
  background:var(--bg); color:var(--fg); margin-bottom:0; text-transform:none; letter-spacing:normal; }
.pill-input:checked + .pill{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pill-input:focus-visible + .pill{ outline:3px solid var(--accent); outline-offset:3px; }
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }

/* Inline email capture — hero and the sticky bar. Stacks on mobile, sits on one
   row from 560px up. */
.inline-form{ margin-top:4px; }
.inline-row{ display:flex; flex-direction:column; gap:10px; }
.inline-row input[type="email"]{ flex:1 1 auto; min-width:0; }
.inline-row .btn{ width:100%; flex:0 0 auto; white-space:nowrap; }
@media (min-width:560px){
  .inline-row{ flex-direction:row; align-items:stretch; }
  .inline-row .btn{ width:auto; padding:16px 28px; }
}
.hero-smallprint{ margin-top:10px; }
.dark-section .inline-row input[type="email"]{ background:var(--bg3); }

/* ---------- permanent capture bar ----------
   Brand red rather than the page's dark, so it reads as the one thing to act on.
   On red, a red primary button would vanish — it inverts to white-on-red instead,
   and the copy is solid white (not a muted tint) to stay legible at 13px. */
.sticky-capture{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--accent); color:#fff;
  box-shadow:0 -8px 28px rgba(0,0,0,.25); padding:12px 20px;
  transform:translateY(100%); transition:transform .25s ease; }
.sticky-capture.is-visible{ transform:translateY(0); }
.sticky-inner{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column;
  gap:10px; align-items:stretch; }
.sticky-copy{ font-size:13px; color:#fff; line-height:1.4; }
.sticky-copy strong{ color:#fff; font-weight:800; }
.sticky-capture .inline-form{ margin-top:0; }
.sticky-capture input[type="email"]{ background:#fff; border-color:transparent;
  color:#181414; padding:11px 14px; }
.sticky-capture input::placeholder{ color:#6d6360; }
.sticky-capture input[type="email"]:focus-visible{ outline:3px solid #fff; outline-offset:2px;
  border-color:transparent; }
.sticky-capture .btn-primary{ background:#fff; color:var(--accent); padding:11px 22px; font-size:14px; }
.sticky-capture .btn-primary:hover{ opacity:.92; }
.sticky-capture :focus-visible{ outline-color:#fff; }
/* The shared green/red status colours are both unreadable on red. */
.sticky-capture .form-status, .sticky-capture .form-status.is-ok,
.sticky-capture .form-status.is-error{ color:#fff; }
.sticky-capture .form-status{ margin-top:8px; font-size:13px; }
.sticky-capture .form-status:empty{ display:none; }
/* The bar is permanent, so it has to stay small on a phone: the field and button
   share one row at every width, and the longer sentence drops below 560px. */
.sticky-capture .inline-row{ flex-direction:row; align-items:stretch; gap:8px; }
.sticky-capture .inline-row .btn{ width:auto; }
@media (max-width:559px){ .sticky-copy span{ display:none; } }
@media (min-width:820px){
  .sticky-capture{ padding:14px 20px; }
  .sticky-inner{ flex-direction:row; align-items:center; justify-content:space-between; gap:28px; }
  .sticky-copy{ font-size:14px; flex:1 1 auto; }
  .sticky-capture .inline-form{ flex:0 0 auto; min-width:420px; }
}
/* Set by script.js to the bar's measured height, so it never covers the footer. */
body{ padding-bottom:var(--sticky-pad, 0px); }

.hp-field{ display:none; }
.form-status{ font-size:14px; font-weight:700; margin-top:12px; min-height:0; }
.form-status.is-error{ color:var(--accent); }
.form-status.is-ok{ color:#0f7a3d; }
.form-smallprint{ font-size:12px; margin-top:10px; }

/* Submitted state — swap the form out for a confirmation so the CTA can't be double-fired. */
.form-done{ display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.form-done .tick{ width:38px; height:38px; border-radius:50%; background:#0f7a3d; color:#fff;
  display:grid; place-items:center; font-size:20px; font-weight:800; }

.wa-preview{ font-size:14px; color:var(--muted); font-style:italic; margin-bottom:18px; }

/* WhatsApp card ships disabled and is switched on by script.js once a number is set,
   so an unconfigured wa.me link can never render as a live-looking button. */
.card-whatsapp.is-disabled{ border-color:var(--line); }
.card-whatsapp.is-disabled:hover{ border-color:var(--line); background:var(--bg3); box-shadow:none; }
.card-whatsapp.is-disabled .pill-row, .card-whatsapp.is-disabled .wa-preview{ display:none; }
.card-whatsapp.is-disabled .btn-whatsapp{ background:var(--bg2); color:var(--muted);
  border:1px solid var(--line); pointer-events:none; cursor:default; }
.card-whatsapp:not(.is-disabled) #wa-disabled-note{ display:none; }

/* ---------- layout ---------- */
.grid-2{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:820px){ .grid-2{ grid-template-columns:1fr 1fr; gap:28px; } }
.app-grid{ margin-top:32px; }
/* One capture card instead of two, while WhatsApp has no number. */
.solo-capture{ max-width:560px; }

.grid-3{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

.stat-card{ text-align:left; }
.stat-card .num{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:800; font-size:30px;
  color:var(--accent); line-height:1; margin-bottom:8px; }
.stat-card p{ color:var(--muted); font-size:13px; }

.hero-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:820px){ .hero-grid{ grid-template-columns:1fr 1fr; gap:64px; align-items:center; } }
.hero-stats{ margin:28px 0; }
.hero-grid .lead{ margin-bottom:22px; }
.hero-grid .h1{ margin-top:14px; }

.portability-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:820px){ .portability-grid{ grid-template-columns:1fr 1fr; gap:56px; align-items:center; } }
.portability-stats{ margin-top:28px; }

.bullet-list{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.bullet-list .item{ display:flex; gap:12px; align-items:flex-start; }
.bullet-list .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:8px; flex-shrink:0; }
.bullet-list p{ color:var(--muted); font-size:15px; line-height:1.55; }
.bullet-list strong{ color:var(--fg); }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:#141212; color:#f7f4f2; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; }
.wordmark{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:800; font-size:22px;
  letter-spacing:.02em; color:#f7f4f2; }
.site-header .btn{ padding:10px 20px; font-size:13px; width:auto; }

/* ---------- media blocks ---------- */
.media-rounded{ border-radius:16px; overflow:hidden; background:var(--bg2); }
/* Height is left to flow unless the wrapper sets its own aspect-ratio, so the
   intrinsic width/height attributes on the <img> can't pin it to the wrong box. */
.media-rounded img{ width:100%; height:auto; object-fit:cover; }

/* The hero footage is shot portrait (9:16), so the frame matches it rather than
   cropping two thirds of the shot away into a landscape box. Capped by viewport
   height so it never towers over the copy. */
.hero-media{ aspect-ratio:9/16; width:100%; max-width:min(100%, 34vh); margin-inline:auto; }
.hero-media video{ width:100%; height:100%; object-fit:cover; }
@media (min-width:820px){ .hero-media{ max-width:min(100%, 38vh); } }

.why-media{ margin-top:28px; max-width:420px; }
.why-media img{ border-radius:16px; width:100%; height:auto; }

/* ---------- how it works ---------- */
.hiw-steps{ display:flex; flex-direction:column; gap:36px; margin-top:36px; }
.hiw-row{ display:flex; gap:8px; }
.hiw-row .media-rounded{ flex:1; aspect-ratio:1/1; }
.hiw-row video, .hiw-single video{ width:100%; height:100%; object-fit:cover; }
.hiw-single .media-rounded{ aspect-ratio:1/1; }
.hiw-single .h3-md{ margin-bottom:14px; }
.hiw-solo{ max-width:420px; }
.step-num{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:800; font-size:14px;
  color:var(--accent); margin-bottom:6px; }
.hiw-caption{ margin-top:28px; }
/* The caption sits in muted grey; the lead-in question needs the full
   foreground colour to read as emphasis rather than disappearing. */
.hiw-steps ~ .lead strong, .hiw-caption strong{ color:var(--fg); }

/* ---------- single product ---------- */
/* One product, so the kit photo and its details sit side by side rather than
   leaving an empty second column where the other card used to be. */
.product-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:820px){ .product-grid{ grid-template-columns:1fr 1fr; gap:56px; align-items:center; } }
.product-media img{ border-radius:16px; }
.product-grid .variant-price{ margin-top:6px; }
.product-grid .footnote{ margin-top:18px; }
.price-card{ max-width:420px; }

/* ---------- variants ---------- */
/* The kit photos are tall portrait flat-lays; cap the height so the price and
   spec lines stay visible with the product rather than being pushed below it. */
.variant-card img{ width:100%; height:auto; border-radius:14px; aspect-ratio:3/4; max-height:420px;
  object-fit:cover; margin-bottom:18px; }
.variant-price{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:800; font-size:32px; color:var(--accent); }
.variant-spec{ margin:10px 0; }
.variant-note{ font-size:14px; color:var(--muted); margin-bottom:10px; line-height:1.5; }

/* ---------- science ---------- */
.curve-grid{ margin-top:40px; }
.curve-card{ margin-top:18px; }
.curve-card figcaption{ margin-bottom:14px; }
.curve-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.curve-legend{ display:flex; gap:18px; margin-top:10px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.curve-legend .sw{ display:inline-block; width:14px; height:3px; margin-right:6px; vertical-align:middle; }
.sw-fixed{ background:#8f8582; }
.sw-fitable{ background:var(--accent); }

.why-head{ margin-top:48px; margin-bottom:24px; }
.why-list{ display:flex; flex-direction:column; gap:28px; }
.why-card{ display:flex; gap:16px; }
.why-card .lead{ margin-top:8px; }
.why-num{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:800; font-size:28px;
  color:var(--accent); flex-shrink:0; width:36px; }
.why-proof{ margin-top:10px; font-size:13px; color:var(--muted); font-style:italic; line-height:1.5; }
.disclaimer{ font-size:12px; color:var(--muted); margin-top:28px; }

/* ---------- footer ---------- */
.site-footer{ text-align:center; }
.site-footer .wordmark{ margin-bottom:10px; }
.footer-tagline{ margin:0 auto 10px; }
.site-footer .fineprint{ margin-top:4px; }
.footer-links{ display:flex; gap:14px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Respect a reduced-motion preference: videos hold on their poster frame instead of
   looping, and the page stops smooth-scrolling. script.js checks the same query. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .scrollrow{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
}