/* MuscleUp — public landing page + legal pages.
 * Same design DNA as app/css/app.css (navy / card / turquoise gradient /
 * coral accent, Space Grotesk display + Manrope body, Lucide stroke icons).
 * Font files are referenced from ../app/fonts/ — no duplication.
 * Dark only, like the app. Mobile-first; desktop enhancements at 720/1024px.
 */

/* ---------- fonts (copied from app.css) ---------- */
@font-face{
  font-family:'Space Grotesk';
  src:url('../../app/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight:500 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face{
  font-family:'Manrope';
  src:url('../../app/fonts/manrope-latin.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  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;
}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#0B1220;
  --bg2:#0d1628;
  --card:#111a2e;
  --card2:#182444;
  --line:#1b2942;
  --line2:#26375c;
  --accent:#2DD4BF;
  --accent2:#06B6D4;
  --coral:#fb7185;
  --coral-deep:#F43F5E;
  --text:#e8eefc;
  --sub:#8fa3c8;
  --dim:#7d8fb5;
  --on-accent:#04211d;
  --grad:linear-gradient(135deg, var(--accent), var(--accent2));
  --r:22px;
  --r-md:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-body:'Manrope','Space Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --nav-h:64px;
  --gutter:20px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(45,212,191,.32); color:#fff}
img,video{display:block; max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.08}
h1,h2{font-family:var(--font-display)}
h3{font-size:1.125rem; font-weight:800; letter-spacing:-.01em; line-height:1.3}
p{margin:0}
.num{font-family:var(--font-display); font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px}

.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 var(--gutter)}
.wrap.narrow{max-width:780px}

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* icons: Lucide geometry, stroke-styled here */
.i{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:800 15px/1 var(--font-body); letter-spacing:.005em;
  color:var(--on-accent); background:var(--grad);
  padding:14px 20px; border-radius:999px; border:0;
  box-shadow:0 10px 30px -8px rgba(6,182,212,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:0 16px 40px -10px rgba(6,182,212,.7), inset 0 1px 0 rgba(255,255,255,.4)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .i{width:18px; height:18px; stroke-width:2.4; transition:transform .25s var(--ease)}
.btn:hover .i{transform:translateX(3px)}
.btn-sm{padding:10px 16px; font-size:14px}
.btn-lg{padding:18px 26px; font-size:16.5px}
.btn-block{display:flex; width:100%}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:rgba(11,18,32,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{border-bottom-color:var(--line); background:rgba(11,18,32,.88)}
.nav-in{height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text)}
.brand:hover{text-decoration:none}
.brand img{border-radius:10px}
.wordmark{
  font:700 17px/1 var(--font-display); letter-spacing:.14em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.nav-links{display:none; gap:28px}
.nav-links a{color:var(--sub); font-weight:600; font-size:14.5px; transition:color .2s}
.nav-links a:hover{color:var(--text); text-decoration:none}

/* ---------- hero ---------- */
.hero{position:relative; padding:40px 0 72px; overflow:hidden}
.hero-glow{
  position:absolute; inset:-20% -10% auto; height:900px; pointer-events:none; z-index:0;
  background:
    radial-gradient(520px 380px at 78% 30%, rgba(244,63,94,.16), transparent 65%),
    radial-gradient(620px 460px at 88% 10%, rgba(45,212,191,.14), transparent 60%),
    radial-gradient(560px 420px at 0% 40%, rgba(6,182,212,.10), transparent 60%);
}
.hero-in{position:relative; z-index:1; display:grid; gap:48px; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 12px; border-radius:999px;
  background:rgba(45,212,191,.08); border:1px solid rgba(45,212,191,.22);
  color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.02em;
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(45,212,191,.18)}
.hero h1{
  margin-top:22px;
  font-size:clamp(3rem, 12.5vw, 6.2rem); line-height:.95; letter-spacing:-.035em;
}
.lead{margin-top:20px; font-size:1.075rem; color:var(--sub); max-width:34em}
.hero .lead{font-size:1.125rem}
.cta-block{margin-top:30px; display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.micro{font-size:13.5px; color:var(--dim); font-weight:600; padding-left:4px}
.hero-points{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px}
.hero-points li{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--sub)}
.hero-points .i{width:17px; height:17px; color:var(--accent); stroke-width:2.6}

/* phone mockup — a faithful copy of the app's workout player.
 * Geometry: the phone screen is a fixed 9:19.5 box; the clip is 480x714
 * (portrait, ~2:3). Filling the whole 9:19.5 screen with object-fit:cover
 * would crop ~34% of the width and cut the subject's head/feet off (he's
 * horizontal). So the video spans the full screen WIDTH at its native
 * aspect, pinned to the top (278px wide -> ~413px tall of a ~603px
 * screen), and its dark floor fades into the app background under the
 * player controls — edge to edge, nothing cropped, no letterbox.
 * Sizes inside use --u = 1 design-px at a 278px-wide screen, scaled with
 * container query units so the UI stays proportional at any phone width. */
.hero-visual{position:relative; display:flex; justify-content:center; padding:10px 0 20px}
.hero-visual::before{ /* the red-muscle glow behind the device */
  content:""; position:absolute; left:50%; top:46%; width:120%; max-width:560px; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(244,63,94,.36), rgba(244,63,94,.10) 55%, transparent 75%);
  filter:blur(10px); animation:breathe 4.8s ease-in-out infinite; pointer-events:none;
}
.phone{
  position:relative; flex:none; align-self:center;
  width:min(80vw, 300px); aspect-ratio:9/19.5;
  border-radius:50px;
  background:linear-gradient(160deg, #2c3858 0%, #0e1526 38%, #1c2640 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09) inset,
    0 0 0 2px #05080f,
    0 40px 90px -20px rgba(0,0,0,.85),
    0 0 70px -12px rgba(244,63,94,.38);
}
.phone-screen{
  position:absolute; inset:11px; border-radius:40px; overflow:hidden;
  background:var(--bg); container-type:inline-size;
  --u:1px;
}
@supports (width:1cqw){ .phone-screen{--u:calc(100cqw / 278)} }
.phone-island{
  position:absolute; top:21px; left:50%; transform:translateX(-50%); z-index:3;
  width:31%; height:26px; border-radius:20px; background:#03060c;
}
.phone-video{
  position:absolute; top:0; left:0; width:100%; height:auto; aspect-ratio:480/714;
  object-fit:cover; object-position:50% 50%; background:#070b14;
}
/* app chrome ("ap-" mirrors "player-" in app.css; px values x var(--u)) */
.ap{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:0 calc(var(--u) * 16) calc(var(--u) * 18);
  font-family:var(--font-body); color:var(--text);
  background:linear-gradient(180deg,
    rgba(11,18,32,.92) 0%, rgba(11,18,32,0) 24%,
    rgba(11,18,32,0) 50%, rgba(11,18,32,.86) 60%, var(--bg) 66%);
}
.ap-status{display:flex; justify-content:space-between; align-items:center; height:calc(var(--u) * 44);
  padding:0 calc(var(--u) * 12); font-size:calc(var(--u) * 13); font-weight:700}
.ap-sig{display:flex; align-items:flex-end; gap:calc(var(--u) * 2)}
.ap-sig i{display:block; width:calc(var(--u) * 3); background:var(--text); border-radius:1px}
.ap-sig i:nth-child(1){height:calc(var(--u) * 5)}
.ap-sig i:nth-child(2){height:calc(var(--u) * 7)}
.ap-sig i:nth-child(3){height:calc(var(--u) * 9)}
.ap-sig b{display:block; width:calc(var(--u) * 20); height:calc(var(--u) * 10); margin-left:calc(var(--u) * 5);
  border:1.5px solid rgba(232,238,252,.9); border-radius:calc(var(--u) * 3);
  background:linear-gradient(90deg, var(--text) 72%, transparent 72%) padding-box; background-clip:content-box; padding:1px}
/* .player-topbar / .player-quit-btn / .player-topbar-label */
.ap-topbar{display:flex; align-items:center; gap:calc(var(--u) * 12); margin-top:calc(var(--u) * 6)}
.ap-quit{display:flex; flex:none; width:calc(var(--u) * 40); height:calc(var(--u) * 40); align-items:center; justify-content:center; border-radius:50%;
  border:1px solid var(--line); background:rgba(17,26,46,.6); color:var(--text)}
.ap-quit svg{width:calc(var(--u) * 18); height:calc(var(--u) * 18); fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.ap-topbar-label{flex:1; text-align:center; color:var(--sub); font-size:calc(var(--u) * 14); font-weight:700; white-space:nowrap}
/* .player-phase-label + muscle tag */
.ap-chips{display:flex; justify-content:center; align-items:center; gap:calc(var(--u) * 8); margin-top:calc(var(--u) * 14)}
.ap-phase{color:var(--sub); font-size:calc(var(--u) * 13); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:calc(var(--u) * 5) calc(var(--u) * 10); border-radius:99px; background:rgba(11,18,32,.55); border:1px solid var(--line)}
.ap-muscle{display:inline-flex; align-items:center; gap:calc(var(--u) * 6); font-size:calc(var(--u) * 12); font-weight:700; color:#fecdd3;
  padding:calc(var(--u) * 5) calc(var(--u) * 10); border-radius:99px; background:rgba(244,63,94,.16); border:1px solid rgba(244,63,94,.35)}
.ap-dot{width:calc(var(--u) * 7); height:calc(var(--u) * 7); border-radius:50%; background:var(--coral-deep); animation:pulse 1.8s infinite}
/* .player-body (reps phase) */
.ap-body{margin-top:auto; display:flex; flex-direction:column; align-items:center; text-align:center}
.ap-name{font-family:var(--font-display); font-size:calc(var(--u) * 26); font-weight:800; letter-spacing:-.02em; line-height:1.15}
.ap-level{color:var(--accent); font-size:calc(var(--u) * 14); font-weight:700; margin-top:calc(var(--u) * 4)}
.ap-stepper{display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 22); margin-top:calc(var(--u) * 14)}
.ap-step-btn{display:flex; align-items:center; justify-content:center; width:calc(var(--u) * 46); height:calc(var(--u) * 46);
  border-radius:50%; font-size:calc(var(--u) * 22); font-weight:700; background:var(--card2); border:1px solid var(--line2); color:var(--text)}
.ap-step-val{min-width:calc(var(--u) * 58); font-size:calc(var(--u) * 40); font-weight:800; line-height:1}
.ap-caption{color:var(--sub); font-size:calc(var(--u) * 13); font-weight:500; margin-top:calc(var(--u) * 8)}
.ap-dots{display:flex; gap:calc(var(--u) * 8); justify-content:center; margin-top:calc(var(--u) * 12)}
.ap-dots i{width:calc(var(--u) * 9); height:calc(var(--u) * 9); border-radius:50%; background:var(--line2)}
.ap-dots i.on{background:var(--grad); box-shadow:0 0 8px rgba(45,212,191,.6)}
/* .btn (primary) */
.ap-btn{display:flex; align-items:center; justify-content:center; width:100%; min-height:calc(var(--u) * 50); margin-top:calc(var(--u) * 16);
  background:var(--grad); color:var(--on-accent); font-weight:700; font-size:calc(var(--u) * 16); letter-spacing:.01em;
  border-radius:calc(var(--u) * 16); box-shadow:0 8px 28px -6px rgba(45,212,191,.45), 0 0 0 1px rgba(255,255,255,.06) inset}

.pulse{width:7px; height:7px; border-radius:50%; background:var(--coral-deep); box-shadow:0 0 0 0 rgba(244,63,94,.6); animation:pulse 1.8s infinite}

/* notification-style marketing cards — outside the phone, desktop only */
.notif{
  position:absolute; z-index:2; display:none; align-items:center; gap:11px; width:232px;
  padding:11px 14px 11px 11px; border-radius:18px;
  background:rgba(24,36,68,.78); border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 20px 44px -16px rgba(0,0,0,.8);
  animation:float 6s ease-in-out infinite;
}
.notif img{border-radius:9px; flex:none}
.notif-ic{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--grad); color:var(--on-accent)}
.notif-ic .i{width:18px; height:18px; stroke-width:2.3}
.notif b{display:block; font-size:13px; font-weight:800; line-height:1.25}
.notif span{display:block; font-size:12px; color:var(--sub); font-weight:600; line-height:1.3}

/* ---------- sections ---------- */
.section{padding:84px 0; position:relative}
.section-head{max-width:720px; margin-bottom:44px}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto}
.kicker{
  font:700 12.5px/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section h2,.strip h2,.final h2{font-size:clamp(2rem, 7.4vw, 3.4rem); line-height:1.04; letter-spacing:-.03em}
.br-d{display:none}

.ic-badge{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg, rgba(45,212,191,.16), rgba(6,182,212,.08));
  border:1px solid rgba(45,212,191,.25); color:var(--accent);
}
.ic-badge .i{width:22px; height:22px}
.ic-coral{background:linear-gradient(135deg, rgba(244,63,94,.16), rgba(251,113,133,.06)); border-color:rgba(244,63,94,.3); color:var(--coral)}

/* steps */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:none}
.step{
  position:relative; padding:28px 24px 26px; border-radius:var(--r);
  background:linear-gradient(180deg, var(--card), rgba(17,26,46,.6));
  border:1px solid var(--line); overflow:hidden;
}
.step-n{position:absolute; right:20px; top:14px; font-size:56px; font-weight:700; line-height:1; color:rgba(143,163,200,.09); letter-spacing:-.04em}
.step h3{margin-top:18px; font-size:1.25rem}
.step p{margin-top:8px; color:var(--sub); font-size:15px}
.step em{font-style:normal; color:var(--text); font-weight:700}

/* feature grid */
.grid{display:grid; gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-4px); border-color:var(--line2); box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.feat{display:flex; flex-direction:column}
.feat-media{position:relative; height:200px; overflow:hidden; background:#0a1020; border-bottom:1px solid var(--line)}
.feat-body{padding:22px 22px 26px}
.feat-body h3{margin-top:16px}
.feat-body p{margin-top:8px; color:var(--sub); font-size:15px}

.media-video video{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.media-video::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(17,26,46,.9))}
.media-tag{
  position:absolute; left:14px; bottom:14px; z-index:1;
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px;
  font-size:12px; font-weight:700; color:#fecdd3; background:rgba(244,63,94,.16); border:1px solid rgba(244,63,94,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

.media-eq{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.media-eq img{width:100%; height:100%; object-fit:cover; filter:saturate(.95) brightness(.92); transition:transform .6s var(--ease), filter .4s}
.card:hover .media-eq img{filter:saturate(1.05) brightness(1)}
.card:hover .media-eq img:nth-child(2){transform:scale(1.06)}

.media-chat{display:flex; flex-direction:column; justify-content:center; gap:10px; padding:20px;
  background:radial-gradient(300px 160px at 80% 0%, rgba(45,212,191,.10), transparent 70%), #0a1020}
.bubble{max-width:85%; padding:10px 14px; font-size:13.5px; line-height:1.4; border-radius:16px}
.bubble-me{align-self:flex-end; background:var(--card2); border:1px solid var(--line2); border-bottom-right-radius:5px}
.bubble-coach{align-self:flex-start; background:linear-gradient(135deg, rgba(45,212,191,.2), rgba(6,182,212,.12)); border:1px solid rgba(45,212,191,.3); border-bottom-left-radius:5px}

.media-food{display:flex; flex-direction:column; justify-content:center; gap:12px; padding:22px;
  background:radial-gradient(320px 180px at 20% 0%, rgba(244,63,94,.12), transparent 70%), #0a1020}
.food-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:var(--card2); border:1px solid var(--line2); font-size:14px; font-weight:700}
.tag-coral{font-size:11.5px; font-weight:800; color:var(--coral); padding:4px 9px; border-radius:999px; background:rgba(244,63,94,.12); border:1px solid rgba(244,63,94,.3)}
.food-pen{display:flex; align-items:center; gap:10px; padding:0 4px; font-size:13.5px; color:var(--sub); font-weight:600}
.food-pen .i{color:var(--coral); width:18px; height:18px}

.media-body{display:grid; grid-template-columns:1fr 1fr; background:radial-gradient(260px 200px at 50% 60%, rgba(45,212,191,.10), transparent 70%), #0a1020}
.media-body img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.lock-seal{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:rgba(11,18,32,.78); border:1px solid rgba(45,212,191,.45); color:var(--accent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 0 0 8px rgba(45,212,191,.08), 0 0 40px rgba(45,212,191,.35);
}
.lock-seal .i{width:26px; height:26px; stroke-width:2.1}
.feat-privacy{border-color:rgba(45,212,191,.28); background:linear-gradient(180deg, rgba(45,212,191,.05), var(--card) 40%)}

.media-prog{display:flex; align-items:flex-end; padding:26px 26px 0;
  background:radial-gradient(300px 180px at 90% 0%, rgba(6,182,212,.14), transparent 70%), #0a1020}
.bars{display:flex; align-items:flex-end; gap:10px; width:100%; height:100%}
.bars span{flex:1; height:var(--h); border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, rgba(45,212,191,.9), rgba(6,182,212,.25));
  transform-origin:bottom; transform:scaleY(1); transition:transform 1s var(--ease)}
.js .reveal:not(.in) .bars span{transform:scaleY(.08)}
.bars span:last-child{background:var(--grad); box-shadow:0 0 24px rgba(45,212,191,.45)}

/* train anywhere strip */
.strip{position:relative; padding:120px 0; overflow:hidden; isolation:isolate}
.strip-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%; z-index:-2}
.strip-scrim{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.72) 55%, rgba(11,18,32,.45) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%)}
.strip-in{max-width:1180px}
.strip .lead{max-width:30em}

/* pricing */
.price-card{
  position:relative; max-width:480px; margin:0 auto; border-radius:28px; padding:1.5px;
  background:linear-gradient(140deg, var(--accent), var(--accent2) 45%, rgba(244,63,94,.7));
  box-shadow:0 40px 100px -30px rgba(6,182,212,.45);
}
.price-card::before{content:""; position:absolute; inset:-40px; z-index:-1; border-radius:60px;
  background:radial-gradient(closest-side, rgba(45,212,191,.16), transparent); pointer-events:none}
.price-in{border-radius:27px; padding:34px 26px 26px; background:linear-gradient(180deg, #121d35, var(--card) 60%)}
.price-label{font:700 13px/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--sub)}
.price-row{display:flex; align-items:baseline; gap:12px; margin-top:16px}
.price-big{font-size:5rem; font-weight:700; line-height:.9; letter-spacing:-.05em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.price-per{font-size:1.1rem; font-weight:800}
.price-then{margin-top:12px; color:var(--sub); font-size:14.5px; font-weight:600}
.price-then b{color:var(--text)}
.incl{list-style:none; padding:0; margin:26px 0; display:grid; gap:12px; border-top:1px solid var(--line); padding-top:24px}
.incl li{display:flex; gap:12px; align-items:flex-start; font-size:15px}
.incl .i{width:20px; height:20px; margin-top:2px; padding:3px; border-radius:50%; background:rgba(45,212,191,.14); color:var(--accent); stroke-width:3}
.fine{margin-top:16px; font-size:12.5px; line-height:1.55; color:var(--dim)}

/* faq */
.faq{display:grid; gap:10px}
.qa{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); transition:border-color .25s}
.qa.open{border-color:var(--line2)}
.q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; background:none; border:0; color:var(--text); cursor:pointer; text-align:left;
  font:700 16px/1.35 var(--font-body);
}
.q .chev{color:var(--sub); transition:transform .3s var(--ease), color .3s}
.qa.open .chev{transform:rotate(180deg); color:var(--accent)}
.a{display:grid; grid-template-rows:1fr; transition:grid-template-rows .35s var(--ease)}
.a > p{overflow:hidden; padding:0 22px 20px; color:var(--sub); font-size:15px; transition:padding .35s var(--ease)}
/* collapsed only when JS runs — without JS every answer stays readable */
.js .qa:not(.open) .a{grid-template-rows:0fr}
.js .qa:not(.open) .a > p{padding-bottom:0}

/* final cta */
.final{padding:40px 0 100px}
.final-in{
  text-align:center; padding:56px 24px; border-radius:32px; position:relative; overflow:hidden;
  background:
    radial-gradient(420px 260px at 50% 0%, rgba(45,212,191,.16), transparent 70%),
    radial-gradient(420px 260px at 50% 110%, rgba(244,63,94,.12), transparent 70%),
    var(--card);
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.final-mark{border-radius:18px; box-shadow:0 0 50px rgba(45,212,191,.35)}

/* footer */
.footer{border-top:1px solid var(--line); padding:36px 0 44px; background:var(--bg2)}
.foot-in{display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.foot-links{display:flex; flex-wrap:wrap; gap:10px 24px}
.foot-links a{color:var(--sub); font-weight:600; font-size:14.5px}
.foot-links a:hover{color:var(--text)}
.foot-note{color:var(--dim); font-size:13.5px}

/* ---------- reveal on scroll ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .reveal.in{opacity:1; transform:none}

/* ---------- motion ---------- */
@keyframes breathe{0%,100%{opacity:.8; transform:translate(-50%,-50%) scale(.96)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.04)}}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.6)} 70%{box-shadow:0 0 0 8px rgba(244,63,94,0)} 100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .js .reveal{opacity:1; transform:none}
  .js .reveal:not(.in) .bars span{transform:none}
}

/* ---------- ≥720px ---------- */
@media (min-width:720px){
  :root{--gutter:32px; --nav-h:72px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .feat-wide{grid-column:span 2; flex-direction:row}
  .feat-wide .feat-media{height:auto; min-height:300px; flex:1.2; border-bottom:0; border-right:1px solid var(--line)}
  .feat-wide .feat-body{flex:1; align-self:center; padding:36px}
  .feat-wide .media-video::after{background:linear-gradient(90deg, transparent 60%, rgba(17,26,46,.8))}
  .foot-in{flex-direction:row; align-items:center; justify-content:space-between}
  .price-in{padding:42px 38px 32px}
}

/* notification cards only where there's room beside the phone */
@media (min-width:1180px){
  .notif{display:flex}
  .nf-1{top:17%; right:calc(50% + 155px - 26px)}
  .nf-2{bottom:24%; left:calc(50% + 155px - 26px); animation-delay:-3s}
}

/* ---------- ≥1024px ---------- */
@media (min-width:1024px){
  .nav-links{display:flex}
  .hero{padding:72px 0 110px}
  .hero-in{grid-template-columns:1.08fr .92fr; gap:40px}
  .phone{width:310px}
  .br-d{display:inline}
  .grid{grid-template-columns:repeat(3,1fr)}
  .feat-wide{grid-column:span 2}
  .section{padding:120px 0}
  .strip{padding:170px 0}
  .final-in{padding:80px 40px}
}

/* =================================================================
 * Legal pages (terms.html / privacy.html) — simpler shell
 * ================================================================= */
.draft-ribbon{
  position:sticky; top:var(--nav-h); z-index:40;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px var(--gutter); text-align:center;
  background:repeating-linear-gradient(135deg, rgba(251,191,36,.16) 0 14px, rgba(251,191,36,.10) 14px 28px), #1a1a12;
  border-bottom:1px solid rgba(251,191,36,.4);
  color:#fde68a; font-size:13.5px; font-weight:800; letter-spacing:.02em;
}
.draft-ribbon .i{width:18px; height:18px}
.legal{padding:56px 0 96px}
.legal h1{font-size:clamp(2.2rem, 8vw, 3.4rem); letter-spacing:-.03em}
.legal .updated{margin-top:12px; color:var(--dim); font-size:14px; font-weight:600}
.legal .summary{margin-top:28px; padding:20px 22px; border-radius:var(--r-md); background:var(--card); border:1px solid var(--line2); color:var(--sub)}
.legal .summary strong{color:var(--text)}
.legal h2{font-size:1.4rem; letter-spacing:-.01em; margin:44px 0 12px; line-height:1.25}
.legal h3{margin:22px 0 8px; font-size:1.05rem}
.legal p,.legal li{color:#c3cfe6; font-size:15.5px; line-height:1.72}
.legal p + p{margin-top:12px}
.legal ul{padding-left:22px; margin:10px 0}
.legal li{margin:6px 0}
.legal strong{color:var(--text)}
.legal .callout{margin:18px 0; padding:16px 18px; border-left:3px solid var(--accent); background:rgba(45,212,191,.06); border-radius:0 12px 12px 0}
.back-link{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14.5px}
.back-link .i{width:17px; height:17px}

/* =================================================================
 * Checkout + account pages (signup.html / account.html)
 * ================================================================= */
.nav-plain{color:var(--sub); font-weight:700; font-size:14.5px}
.nav-plain:hover{color:var(--text); text-decoration:none}
.flow{padding:48px 0 96px; min-height:calc(100vh - var(--nav-h) - 140px)}
.flow .wrap.narrow{max-width:520px}
.flow-card{
  position:relative; padding:30px 24px 26px; border-radius:var(--r);
  background:linear-gradient(180deg, #121d35, var(--card) 60%);
  border:1px solid var(--line2);
  box-shadow:0 40px 100px -40px rgba(6,182,212,.35);
}
.flow-center{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.flow-step{font:700 12.5px/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.flow-title{margin-top:12px; font-family:var(--font-display); font-size:clamp(1.7rem, 6vw, 2.2rem); letter-spacing:-.02em; line-height:1.1}
.flow-center .flow-title{margin-top:0}
.flow-sub{margin-top:10px; color:var(--sub); font-size:15px}
.flow-sub b{color:var(--text)}
.flow-alt{margin-top:18px; text-align:center; color:var(--sub); font-size:14.5px}
.linkish{background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--accent); cursor:pointer}
.linkish:hover{text-decoration:underline}
.auth-form{margin-top:22px; display:grid; gap:14px}
.field{display:grid; gap:6px}
.field span{font-size:13.5px; font-weight:700; color:var(--sub)}
.field input{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--line2);
  background:#0a1222; color:var(--text); font:600 16px/1.2 var(--font-body);
}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,212,191,.2)}
.form-error{margin-top:12px; padding:12px 14px; border-radius:12px; font-size:14px; font-weight:600;
  color:#fecdd3; background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.35)}
.form-error[hidden]{display:none}
.notice{margin-top:16px; padding:12px 14px; border-radius:12px; font-size:14px; font-weight:600;
  color:var(--text); background:rgba(45,212,191,.08); border:1px solid rgba(45,212,191,.3)}
.btn[disabled]{opacity:.6; cursor:progress; transform:none}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line2); box-shadow:none}
.btn-ghost:hover{box-shadow:none; border-color:var(--sub)}
.btn-danger{background:var(--coral-deep); color:#fff; box-shadow:0 10px 30px -10px rgba(244,63,94,.6)}
.order{margin-top:22px; padding:18px 18px 6px; border-radius:var(--r-md); background:var(--card2); border:1px solid var(--line2)}
.order-title{font-weight:800; font-size:15px; margin-bottom:8px}
.order-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-top:1px solid var(--line); color:var(--sub); font-size:15px; font-weight:600}
.order-row b{color:var(--text); font-size:16px}
.order-total{color:var(--text); font-weight:800}
.order-total b{font-size:22px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.disclosure{
  margin-top:16px; padding:14px 16px; border-radius:12px; font-size:14px; line-height:1.55; font-weight:600;
  color:#e8eefc; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.4);
}
.disclosure b{color:#fde68a}
.pp-slot{margin-top:20px; min-height:56px; display:flex; flex-direction:column; justify-content:center; align-items:stretch}
.pp-slot .spinner{align-self:center}
.signed-in{margin-top:18px; font-size:13.5px; color:var(--dim); text-align:center}
.signed-in b{color:var(--sub)}
.flow-card .signed-in:first-of-type{margin-top:10px; text-align:left}
.spinner{width:34px; height:34px; border-radius:50%; border:3px solid var(--line2); border-top-color:var(--accent); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
.success-check{display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--grad); color:var(--on-accent);
  box-shadow:0 18px 50px -12px rgba(6,182,212,.7)}
.success-check .i{width:36px; height:36px; stroke-width:3}
.flow-center .btn{margin-top:8px}
.flow-card > .btn{margin-top:18px}
.plan-box{margin-top:20px; padding:18px; border-radius:var(--r-md); background:var(--card2); border:1px solid var(--line2)}
.plan-box .flow-sub{margin-top:8px}
.status-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px}
.plan-box .status-row{margin-top:0}
.plan-name{font-weight:800}
.status-pill{display:inline-block; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:.02em;
  background:rgba(143,163,200,.12); border:1px solid var(--line2); color:var(--sub)}
.status-active{background:rgba(45,212,191,.12); border-color:rgba(45,212,191,.4); color:var(--accent)}
.status-cancelled{background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.4); color:#fde68a}
#cancel-zone:not(:empty){margin-top:16px}
.confirm-box{padding:18px; border-radius:var(--r-md); border:1px solid rgba(244,63,94,.4); background:rgba(244,63,94,.06)}
.confirm-title{font-weight:800; font-size:16px}
.confirm-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.confirm-actions .btn{flex:1 1 140px}
@media (min-width:720px){ .flow-card{padding:38px 36px 32px} .flow{padding-top:72px} }