/* The three families are pulled from Google Fonts here rather than only from
   index.html's <link>, so this stylesheet carries its own @font-face closure and
   works standalone. Swap this line for local @font-face rules once the .woff2
   files are in the project — keep the family names exactly as they are. */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@700;800&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* DICED — site.css
   Coal base · bone type · ONE volt. Volt is the go-signal and the verdict: it
   appears on CTAs, on the seam, and on the single number that matters in a
   block. Nowhere else. If a section has two volt things, one of them is wrong.

   PHOTO CROPS ARE MEASURED, NOT EYEBALLED. Three source images carry things
   that must stay out of frame — a bystander and red gym branding in the
   off-season shot, restroom pictograms in the stage-ready shot, TECHNOGYM
   plates and two background bystanders in the leg-press shot. Every crop below
   is computed from source pixel coordinates. Do not "improve" them by nudging
   background-position; re-derive from the source if the container ratio
   changes. Ratios are pinned with aspect-ratio for exactly this reason. */

:root{
  --coal:#0C0C0E; --graphite:#141519; --steel:#1D2026; --raise:#22262E;
  --line:rgba(255,255,255,0.07); --lineHi:rgba(255,255,255,0.14);
  --bone:#F2F0EA; --dim:#808795; --ash:#7A808D; --rule:#4C525E;
  --volt:#C8F03C; --voltInk:#141902; --verified:#6E9BC4; --alarm:#FF5A3D;
  --dsp:'Saira Condensed',system-ui,sans-serif; /* @kind font */
  --ui:'Archivo',system-ui,sans-serif; /* @kind font */
  --mono:'JetBrains Mono',ui-monospace,monospace; /* @kind font */
  --pad:clamp(20px,5vw,64px);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--coal);color:var(--bone);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--volt);text-decoration:none}
a:hover{color:var(--bone)}
::selection{background:var(--volt);color:var(--voltInk)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-family:var(--mono);font-size:clamp(9px,1.1vw,10px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.eyebrow.volt{color:var(--volt)}
.mono{font-family:var(--mono);letter-spacing:.1em;font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--dsp);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:.86;text-wrap:balance}
h1{font-size:clamp(46px,7.6vw,92px)}
h2{font-size:clamp(34px,5.2vw,62px)}
h3{font-size:clamp(19px,2.2vw,25px);line-height:.94;letter-spacing:-.015em}
p{color:var(--ash);font-size:clamp(14px,1.4vw,15.5px);line-height:1.6;text-wrap:pretty}
p b,p strong{color:var(--bone);font-weight:600}
.lede{font-size:clamp(15px,1.7vw,18px);line-height:1.55}
section{padding:clamp(64px,9vw,124px) 0}
.rule{height:1px;background:var(--line)}

/* ─── THE SEAM ─────────────────────────────────────────────
   The wordmark's -4.6deg cut, used as the site's only divider. It is the brand
   gesture, so it does the job a horizontal rule would otherwise do. */
.seam{height:2px;background:var(--volt);transform:rotate(-.6deg);transform-origin:left center;opacity:.9}

/* ─── BUTTONS ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ui);font-weight:700;font-size:clamp(14.5px,1.5vw,16px);
  padding:16px 26px;border-radius:13px;border:none;cursor:pointer;
  background:var(--volt);color:var(--voltInk);transition:transform 140ms cubic-bezier(.2,.8,.2,1),box-shadow 140ms linear}
.btn:hover{color:var(--voltInk);transform:translateY(-1px);box-shadow:0 0 26px rgba(200,240,60,.28)}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--lineHi);font-weight:600}
.btn.ghost:hover{border-color:var(--bone);box-shadow:none}
.btn-note{margin-top:11px;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--bone)}
.btn-note svg{flex-shrink:0}

/* ─── NAV ──────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:50;background:rgba(12,12,14,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:64px}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.nav-links a:hover{color:var(--bone)}
nav .btn{padding:9px 16px;font-size:13px;border-radius:9px}
@media(max-width:820px){.nav-links{display:none}}

/* the sliced wordmark, as a component */
.mark{position:relative;display:inline-block;font-family:var(--dsp);font-weight:800;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.8;color:var(--bone);font-size:22px}
.mark span{display:block}
.mark .up{clip-path:polygon(0 0,100% 0,100% 41%,0 57%)}
.mark .lo{clip-path:polygon(0 57%,100% 41%,100% 100%,0 100%);transform:translateX(.055em);margin-top:-17.6px}
.mark i{position:absolute;left:-3%;right:-3%;top:49%;height:1.4px;background:var(--volt);transform:rotate(-4.6deg);transform-origin:left center}

/* ─── HERO ─────────────────────────────────────────────── */
.hero{padding-top:clamp(44px,6vw,76px);padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{margin-top:18px}
.hero h1 .v{color:var(--volt)}
.hero p{margin-top:20px;max-width:460px}
.hero-cta{margin-top:30px}
.hero-photo{position:relative;aspect-ratio:.78;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  /* stage-ready. Source 1089x1753. Visible band cols 300-1089, rows 200-1211 —
     excludes the restroom pictograms at cols 98-261. */
  background-image:url(/landing/img/andras-stageready.jpg);background-size:138% auto;background-position:100% 27%;
  filter:grayscale(1) contrast(1.3) brightness(.62)}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,14,.34) 0%,transparent 34%,rgba(12,12,14,.86) 100%)}
.hero-tag{position:absolute;left:16px;bottom:16px;z-index:2;font-family:var(--mono);font-size:9.5px;
  font-weight:600;letter-spacing:.16em;color:var(--bone)}
.hero-tag b{color:var(--volt);font-weight:600}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{aspect-ratio:1.05;order:-1;background-size:auto 178%;background-position:74% 24%}
}

/* ─── PROOF BAR ────────────────────────────────────────── */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;margin-top:clamp(48px,7vw,88px)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-in>div{padding:clamp(20px,3vw,30px) clamp(14px,2vw,24px);border-right:1px solid var(--line)}
.proof-in>div:last-child{border-right:none}
.proof-v{font-family:var(--dsp);font-weight:800;font-size:clamp(24px,3.4vw,40px);line-height:.9;letter-spacing:-.02em}
.proof-v.volt{color:var(--volt)}
.proof-l{margin-top:9px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--rule)}
@media(max-width:720px){
  .proof-in{grid-template-columns:repeat(2,1fr)}
  .proof-in>div:nth-child(2n){border-right:none}
  .proof-in>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ─── GENERIC BLOCKS ───────────────────────────────────── */
.head{max-width:660px}
.head h2{margin-top:12px}
.head p{margin-top:18px}
.cols{display:grid;gap:clamp(16px,2.4vw,26px);margin-top:clamp(34px,5vw,54px)}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.c3,.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.c2,.c3,.c4{grid-template-columns:1fr}}

.card{background:var(--graphite);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2.4vw,24px)}
.card h3{margin-top:14px}
.card p{margin-top:9px;font-size:13.5px}
.card .n{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;color:var(--volt)}

/* ─── FOUNDER / BEFORE-AFTER ───────────────────────────── */
.founder{background:var(--graphite);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,60px);align-items:center}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba figure{position:relative;aspect-ratio:.75;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:0}
/* Exposure is matched PER PHOTO, not shared. The off-season source is a dark
   gym at night and the stage-ready source is a lit corridor; one filter value
   across both makes the before panel read as murky and the comparison stops
   being about the body. */
.ba .before{filter:grayscale(1) contrast(1.22) brightness(.86)}
.ba .after{filter:grayscale(1) contrast(1.3) brightness(.62)}
/* off-season. Source 776x1211. Visible cols 268-776 — excludes the bystander in
   the mirror (cols ~100-200) and the red gym branding (cols ~155-233). */
.ba .before{background-image:url(/landing/img/andras-offseason.jpg);background-size:153% auto;background-position:100% 24%}
/* stage-ready. Source 1089x1753. Visible cols 300-1089 — excludes the pictograms. */
.ba .after{background-image:url(/landing/img/andras-stageready.jpg);background-size:138% auto;background-position:100% 34%;
  border-color:rgba(200,240,60,.42)}
.ba figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 11px;
  background:linear-gradient(180deg,transparent,rgba(12,12,14,.92));
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.14em;color:var(--dim)}
.ba .after figcaption{color:var(--volt)}
.ba .pill{position:absolute;top:9px;left:9px;z-index:2;font-family:var(--mono);font-size:7.5px;font-weight:700;
  letter-spacing:.18em;padding:4px 8px;border-radius:99px;background:rgba(12,12,14,.66);color:var(--bone)}
.ba .after .pill{background:var(--volt);color:var(--voltInk)}
.ba-note{margin-top:14px;text-align:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--rule)}
blockquote{margin:0;border-left:2px solid var(--volt);padding-left:20px}
blockquote p{color:var(--bone);font-size:clamp(15px,1.8vw,18.5px);line-height:1.55}
blockquote p+p{margin-top:14px;color:var(--ash);font-size:clamp(14px,1.5vw,16px)}
.byline{display:flex;align-items:center;gap:13px;margin-top:26px}
.byline .av{width:46px;height:46px;border-radius:12px;flex-shrink:0;border:1px solid var(--lineHi);
  background-image:url(/landing/img/andras-headshot.jpg);background-size:cover;background-position:50% 22%;
  filter:grayscale(1) contrast(1.12) brightness(.92)}
@media(max-width:860px){.f-grid{grid-template-columns:1fr}}

/* ─── METHOD ───────────────────────────────────────────── */
.steps{counter-reset:s}
.step{display:flex;gap:clamp(16px,2.4vw,28px);padding:clamp(20px,3vw,28px) 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--rule);
  width:34px;flex-shrink:0;padding-top:5px}
.step .body{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(14px,2.4vw,32px);align-items:baseline}
.step h3{color:var(--bone)}
@media(max-width:720px){.step .body{grid-template-columns:1fr;gap:9px}}

/* ─── APP TILES ────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(14px,2vw,20px);margin-top:clamp(34px,5vw,54px)}
.tile{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2.6vw,26px);min-height:340px}
.tile::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.tile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,12,14,.2) 0%,rgba(12,12,14,.72) 46%,rgba(12,12,14,.96) 100%)}
.tile>*{position:relative;z-index:2}
/* leg press. Source 1206x1510. Visible cols 620-1206 — excludes the TECHNOGYM
   plates (cols 0-560) and the two bystanders in the background windows. */
.tile.train::before{background-image:url(/landing/img/andras-legpress.jpg);background-size:206% auto;background-position:100% 62%;
  filter:grayscale(1) contrast(1.24) brightness(.72)}
/* the only colour photograph on the page. Food is the one thing that should
   not be desaturated — grey food looks inedible and undercuts the section. */
.tile.fuel::before{background-image:url(/landing/img/meal-bowl.jpg);filter:contrast(1.08) brightness(.5) saturate(.78)}
.tile.scan::before{background-image:url(/landing/img/physique.jpg);background-position:50% 30%;
  filter:grayscale(1) contrast(1.28) brightness(.58)}
.tile h3{margin-top:12px}
.tile p{margin-top:8px;font-size:13.5px;max-width:340px}
.tile-row2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);margin-top:clamp(14px,2vw,20px)}
.tile-row2 .tile,.tile-row2 .card{min-height:300px}
@media(max-width:820px){.tiles,.tile-row2{grid-template-columns:1fr}}

/* ═══ THE USP · FIVE FEEDS, ONE COACH ═══════════════════
   The five cards are INPUTS, not features. They are deliberately smaller and
   quieter than the coach card below them, and the connector band between the
   two is what carries the argument. */
.feeds{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,16px);margin-top:clamp(30px,4vw,44px)}
.feed{position:relative;min-height:200px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(15px,1.8vw,19px)}
.feed::before{content:"";position:absolute;inset:0;background-size:cover;z-index:0}
.feed::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,12,14,.34) 0%,rgba(12,12,14,.8) 52%,rgba(12,12,14,.97) 100%)}
.feed>*{position:relative;z-index:2}
/* crops are the measured ones from .tile — do not re-derive */
.feed.train::before{background-image:url(/landing/img/andras-legpress.jpg);background-size:206% auto;
  background-position:100% 62%;filter:grayscale(1) contrast(1.24) brightness(.66)}
.feed.fuel::before{background-image:url(/landing/img/meal-bowl.jpg);background-position:center;
  filter:contrast(1.08) brightness(.46) saturate(.78)}
.feed.scan::before{background-image:url(/landing/img/physique.jpg);background-position:50% 22%;
  filter:grayscale(1) contrast(1.28) brightness(.52)}
/* check-in has no photograph of its own — a fifth image would dilute the three
   that are carrying real weight. Volt-tinted graphite instead. */
.feed.checkin::before{background:linear-gradient(165deg,rgba(200,240,60,.13),rgba(20,21,25,0) 62%),var(--graphite)}
.feed.checkin::after{background:none}
.feed .fi{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(200,240,60,.14);border:1px solid rgba(200,240,60,.34);color:var(--volt);margin-bottom:12px}
.feed h3{font-family:var(--dsp);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:-.01em;color:var(--bone)}
.feed p{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--ash)}

.converge{height:74px;margin:0 auto;max-width:1000px}
.converge svg{width:100%;height:100%;display:block}

.coach{position:relative;background:var(--graphite);border:1px solid var(--lineHi);
  border-top:2px solid var(--volt);border-radius:18px;padding:clamp(20px,2.8vw,30px)}
.coach-h{display:flex;align-items:center;gap:13px}
.coach .ci{width:34px;height:34px;border-radius:10px;background:var(--volt);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.coach .lab{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--volt)}
.coach-when{margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.coach-v{margin-top:18px;font-size:clamp(15px,1.9vw,19px);line-height:1.55;color:var(--ash);max-width:720px}
.coach-v b{color:var(--bone);font-weight:600}
.coach-f{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.coach-f div{background:var(--steel);border-radius:11px;padding:13px 14px}
.coach-f b{font-family:var(--mono);font-weight:600;font-size:17px;color:var(--bone)}
.coach-f b.v{color:var(--volt)}
/* 10.5px/--dim, NOT the 7.5px/--rule used by .readout span and .deltas span.
   Those live in ~340px phone mocks where the reduced scale is deliberate; this
   card is 800px+ of website content and its body copy runs 15-19px. These four
   labels are the receipt under the coach's verdict — the numbers above them are
   meaningless unlabelled, so they cannot be decorative microtype. */
.coach-f span{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim)}
.coach-n{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
@media(max-width:900px){
  .feeds{grid-template-columns:repeat(2,1fr)}
  .converge{display:none}
  .coach{margin-top:clamp(14px,2vw,18px)}
  .coach-f{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.feeds{grid-template-columns:1fr}}

/* ─── HONEST ───────────────────────────────────────────── */
.honest{background:var(--graphite);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,4vw,48px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center}
@media(max-width:820px){.honest{grid-template-columns:1fr}}

/* ─── PRICING ──────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(14px,2vw,20px);margin-top:clamp(30px,4vw,44px);align-items:start}
.plan{border-radius:20px;padding:clamp(22px,3vw,30px);position:relative}
.plan.year{background:rgba(200,240,60,.06);border:1px solid var(--volt)}
.plan.month{background:transparent;border:1px solid var(--line)}
.plan .sticker{position:absolute;top:0;right:20px;transform:translateY(-50%);
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.18em;
  padding:5px 11px;border-radius:99px;background:var(--coal);border:1px solid var(--volt);color:var(--volt);white-space:nowrap}
.plan .name{font-family:var(--ui);font-weight:600;font-size:clamp(17px,2vw,20px)}
.plan.month .name{color:var(--ash);font-size:clamp(15px,1.7vw,17px)}
.plan .price{font-family:var(--dsp);font-weight:800;font-size:clamp(38px,5vw,56px);line-height:.9;letter-spacing:-.03em;margin-top:12px}
.plan.month .price{color:var(--ash);font-size:clamp(30px,3.6vw,40px)}
.plan .per{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--rule);margin-top:9px}
.plan .free{margin-top:12px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--volt)}
.plan.month .free{color:var(--rule)}
.plan .btn{margin-top:22px;width:100%}
.save{display:inline-block;margin-left:9px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--volt);color:var(--voltInk);vertical-align:2px}
.incl{margin-top:clamp(30px,4vw,44px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.incl div{padding-top:15px;border-top:1px solid var(--line)}
.incl b{display:block;font-family:var(--ui);font-weight:600;font-size:14px;color:var(--bone)}
.incl span{display:block;margin-top:5px;font-size:12.5px;color:var(--ash);line-height:1.5}
@media(max-width:900px){.incl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.plans,.incl{grid-template-columns:1fr}}

/* ─── FAQ ──────────────────────────────────────────────── */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;gap:18px;
  font-family:var(--ui);font-weight:600;font-size:clamp(14.5px,1.6vw,16.5px);color:var(--bone)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;width:11px;height:11px;flex-shrink:0;
  border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);transform:rotate(45deg) translate(-3px,-3px);
  transition:transform 180ms cubic-bezier(.2,.8,.2,1)}
details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
details p{padding:0 0 22px;max-width:720px}

/* ─── FINAL ────────────────────────────────────────────── */
.final{text-align:center;border-top:1px solid var(--line)}
.final h2{margin-top:14px}
.final p{margin:20px auto 0;max-width:470px}
.final .btn{margin-top:30px}
.final .btn-note{justify-content:center}

footer{border-top:1px solid var(--line);padding:34px 0 44px}
.foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.foot .mono{font-size:9px;letter-spacing:.16em;color:var(--rule);text-transform:uppercase}
.foot nav{position:static;background:none;border:none;backdrop-filter:none;margin-left:auto}
.foot-links{display:flex;gap:20px}
.foot-links a{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--rule)}
.foot-links a:hover{color:var(--bone)}

/* ─── REVEAL ───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .flame,.gem-p{animation:none!important}
}

/* ═══ THE JOURNEY ═══════════════════════════════════════
   The spine of the page. Each step is: what you do, what the app does, and
   what Andras did at that exact point in his own eight months. The story is
   not a separate section — it is the evidence under every step, which is the
   only reason to believe the system works. */
.jstep{padding:clamp(48px,7vw,86px) 0;border-top:1px solid var(--line)}
.jgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.jstep:nth-child(even) .jvis{order:-1}
.jnum{display:flex;align-items:center;gap:14px}
.jnum b{font-family:var(--dsp);font-weight:800;font-size:clamp(38px,5vw,58px);line-height:.8;color:var(--volt);letter-spacing:-.03em}
.jnum span{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.jstep h2{margin-top:18px;font-size:clamp(30px,4.4vw,52px)}
.jstep>.wrap>.jgrid>div>p{margin-top:18px;max-width:480px}
.jlist{margin-top:22px;display:flex;flex-direction:column;gap:1px}
.jlist div{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);align-items:baseline}
.jlist i{width:5px;height:5px;border-radius:99px;background:var(--volt);flex-shrink:0;transform:translateY(-2px)}
.jlist span{font-size:13.5px;color:var(--ash);line-height:1.5}
.jlist b{color:var(--bone);font-weight:600}
/* Andras's line, at each step. Bordered in volt so it reads as the receipt for
   the claim above it, not as a pull-quote for decoration. */
.said{margin-top:26px;display:flex;gap:14px;align-items:flex-start;
  background:var(--graphite);border:1px solid var(--line);border-left:2px solid var(--volt);
  border-radius:0 14px 14px 0;padding:16px 18px}
.said .av{width:38px;height:38px;border-radius:10px;flex-shrink:0;border:1px solid var(--lineHi);
  background-image:url(/landing/img/andras-headshot.jpg);background-size:cover;background-position:50% 22%;
  filter:grayscale(1) contrast(1.12) brightness(.92)}
.said p{margin:0;color:var(--bone);font-size:14px;line-height:1.55}
.said .who{margin-top:7px;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:var(--rule);text-transform:uppercase}
.jvis{min-width:0}
@media(max-width:900px){
  .jgrid{grid-template-columns:1fr}
  .jstep:nth-child(even) .jvis{order:0}
}

/* ─── STEP MOCKS ────────────────────────────────────────
   Built in markup rather than screenshotted so they stay in step with the app
   and stay legible at any width. */
.mock{background:var(--graphite);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,2.6vw,26px)}
.mock .lab{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.mock .big{font-family:var(--mono);font-weight:600;letter-spacing:-.03em;font-size:clamp(38px,5vw,52px);color:var(--bone);font-variant-numeric:tabular-nums}
.mock .unit{font-family:var(--mono);font-size:15px;color:var(--rule)}

/* 01 · the target dial */
.dial{position:relative;height:6px;background:var(--steel);border-radius:99px;margin:22px 0 10px}
.dial .fill{position:absolute;inset:0 auto 0 0;width:47%;background:var(--volt);border-radius:99px}
.dial .tick{position:absolute;top:-4px;width:1px;height:14px;background:var(--rule)}
.dial .thumb{position:absolute;top:50%;left:47%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:99px;
  background:var(--volt);border:3px solid var(--graphite);box-shadow:0 0 0 3px rgba(200,240,60,.2)}
.dial-ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--rule)}
.dial-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px}
.dial-foot .r{font-family:var(--dsp);font-weight:800;font-size:17px;color:var(--volt);text-transform:uppercase}

/* 02 · the three photo slots */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.slots div{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden}
.slots .filled{border:1px solid rgba(200,240,60,.4);background-image:url(/landing/img/physique.jpg);
  background-size:cover;background-position:50% 18%;filter:grayscale(1) contrast(1.25) brightness(.62)}
.slots .empty{border:1px dashed var(--lineHi);display:flex;align-items:center;justify-content:center}
.slots .empty span{font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--rule);text-align:center}
.slot-cap{margin-top:9px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--dim);text-align:center}
.readout{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.readout b{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(17px,2.2vw,21px);color:var(--bone)}
.readout span{display:block;margin-top:4px;font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;color:var(--rule)}
.ladder{display:flex;gap:3px;margin-top:16px}
.ladder i{flex:1;height:5px;border-radius:2px;background:var(--steel)}
.ladder i.on{background:var(--volt)}
.ladder-l{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:var(--rule)}
.ladder-l b{color:var(--volt);font-weight:500}

/* 03 · the projection */
.proj{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.proj figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.proj .now{background-image:url(/landing/img/physique.jpg);background-size:cover;background-position:50% 16%;
  filter:grayscale(1) contrast(1.2) brightness(.55)}
/* Week-16 panel. Source andras-stageready 1089x1753: oversized and offset so the
   restroom pictograms sit outside the box (objectPosition is inert here because
   the source is narrower than the 3/4 frame). */
.proj .then{border-color:rgba(200,240,60,.45);overflow:hidden}
.proj .then i{position:absolute;width:135.4%;height:163.8%;left:-35.4%;top:-18.7%;
  background-image:url(/landing/img/andras-stageready.jpg);background-size:cover;
  filter:grayscale(1) contrast(1.3) brightness(.6)}
.proj figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:9px 10px;
  background:linear-gradient(180deg,transparent,rgba(12,12,14,.92));
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--dim)}
.proj figcaption b{display:block;margin-top:3px;font-size:12px;color:var(--bone);font-weight:600}
.proj .then figcaption,.proj .then figcaption b{color:var(--volt)}
.simd{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:7px;font-weight:700;letter-spacing:.18em;
  padding:3px 8px;border-radius:99px;background:var(--volt);color:var(--voltInk)}
.deltas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.deltas div{background:var(--steel);border-radius:10px;padding:11px}
.deltas b{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--bone)}
.deltas b.v{color:var(--volt)}
.deltas span{display:block;margin-top:4px;font-family:var(--mono);font-size:7px;letter-spacing:.14em;color:var(--rule)}
.caveat{margin-top:12px;display:flex;gap:10px;padding:12px 13px;border-radius:11px;
  background:rgba(255,90,61,.06);border:1px solid rgba(255,90,61,.24)}
.caveat p{margin:0;font-size:12px;line-height:1.5}
.caveat b{color:var(--bone)}

/* 04 · the dashboard HUD */
.hud{display:flex;flex-direction:column;gap:9px}
.hud .row{background:var(--steel);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.hud .flame-row{display:flex;align-items:center;gap:13px;
  background:rgba(200,240,60,.06);border-color:rgba(200,240,60,.28)}
.flame{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  animation:flick 2.4s ease-in-out infinite;transform-origin:50% 80%}
@keyframes flick{0%,100%{transform:scale(1) rotate(0)}35%{transform:scale(1.07,.95) rotate(-2deg)}70%{transform:scale(.97,1.04) rotate(1.5deg)}}
.bolts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.bolt{background:var(--steel);border:1px solid var(--line);border-radius:12px;padding:11px 10px}
.bolt.on{background:rgba(200,240,60,.08);border-color:rgba(200,240,60,.4)}
.bolt .k{font-family:var(--mono);font-size:7.5px;font-weight:600;letter-spacing:.16em;color:var(--rule)}
.bolt.on .k{color:var(--volt)}
.bolt .v{margin-top:7px;font-family:var(--mono);font-weight:600;font-size:14px;color:var(--bone)}
.bolt .b{margin-top:8px;height:3px;border-radius:99px;background:var(--coal);overflow:hidden}
.bolt .b i{display:block;height:100%;background:var(--volt);border-radius:99px}
.gems{display:flex;gap:4px;margin-top:11px}
.gems i{flex:1;aspect-ratio:1;max-width:17px;background:var(--rule);
  clip-path:polygon(50% 4%,96% 50%,50% 96%,4% 50%)}
.gems i.on{background:var(--volt)}
.gems i.p{background:var(--volt);animation:gemp 3.8s ease-in-out infinite}
@keyframes gemp{0%,100%{opacity:1}50%{opacity:.78}}
@media(max-width:520px){.bolts{grid-template-columns:repeat(2,1fr)}}

/* ─── THE LOOP ─────────────────────────────────────────── */
.loop{background:var(--graphite);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.loop-ring{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,18px);margin-top:clamp(30px,4vw,46px)}
.loop-ring div{padding-top:16px;border-top:2px solid var(--volt)}
.loop-ring b{display:block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.18em;color:var(--volt)}
.loop-ring strong{display:block;margin-top:9px;font-family:var(--ui);font-weight:600;font-size:15px;color:var(--bone)}
.loop-ring span{display:block;margin-top:6px;font-size:12.5px;color:var(--ash);line-height:1.5}
@media(max-width:820px){.loop-ring{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.loop-ring{grid-template-columns:1fr}}



/* ─── WAITLIST BANNER ──────────────────────────────────────────────────────
   Sits above the sticky nav in normal flow, so it scrolls away and the nav
   takes the top edge as before. Deliberately quiet: the page's five CTAs all
   point at #get, and a second loud button at the top would fight them. Until
   the App Store link resolves this is the only conversion that can complete,
   which is exactly why it is here and exactly why it stays one line. */
.wl{background:var(--graphite);border-bottom:1px solid var(--line)}
.wl-in{display:flex;align-items:center;gap:18px;padding-top:11px;padding-bottom:11px;flex-wrap:wrap}
.wl-say{display:flex;align-items:baseline;gap:12px;flex:1 1 auto;min-width:0}
.wl-eye{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;color:var(--volt);white-space:nowrap}
.wl-copy{font-size:12.5px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-copy span{color:var(--rule)}
.wl-field{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wl-mail{width:230px;height:36px;padding:0 12px;border-radius:9px;background:var(--steel);
  border:1px solid var(--lineHi);color:var(--bone);font-family:var(--ui);font-size:13px;outline:none}
.wl-mail::placeholder{color:var(--rule)}
.wl-btn{height:36px;padding:0 16px;border:0;border-radius:9px;background:var(--volt);color:var(--voltInk);
  font-family:var(--ui);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.wl-msg{flex:1 0 100%;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);display:none}
.wl-msg.on{display:block}
.wl-msg.ok{color:var(--verified)}
.wl-msg.err{color:var(--alarm)}
/* Off-screen rather than display:none — a hidden input some bots still fill. */
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl.done .wl-say,.wl.done .wl-field{display:none}
.wl.done .wl-msg{flex:1 1 auto}
@media(max-width:900px){.wl-copy span{display:none}}
@media(max-width:760px){
  .wl-in{gap:10px}
  .wl-say{flex:1 1 100%}
  .wl-copy{white-space:normal}
  .wl-field{flex:1 1 100%}
  .wl-mail{flex:1 1 auto;width:auto;min-width:0}
}