/* FitPilot — shared styles for the marketing pages (everything except the legal pages) */

:root{
  --bg:#140809;
  --stage:#3A1418;
  --stage-end:#1A0B0D;
  --ink:#EFE7E1;
  --soft:#C2B5B3;
  --muted:#A8999A;
  --dim:#8C7E7F;
  --line:rgba(239,231,225,0.08);
  --line-strong:rgba(239,231,225,0.16);
}
*{box-sizing:border-box;}
html{color-scheme:dark; -webkit-tap-highlight-color:transparent;}
/* links take the surrounding colour unless styled, so they never fall back to browser blue/purple */
a{color:inherit;}
/* pressing and holding a button or link on a phone shouldn't select its text */
a, button, summary, label{-webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Archivo, system-ui, sans-serif;
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{display:block; max-width:100%; height:auto;}
h1, h2, h3{margin:0; font-weight:500; line-height:1; letter-spacing:-0.04em;}
p{margin:0;}

.wrap{max-width:1200px; margin:0 auto; padding:0 20px;}
.center{text-align:center;}
.muted{color:var(--muted);}
.note{font-size:13px; color:var(--dim);}
.link{color:var(--muted); text-underline-offset:5px;}
.link:hover{color:var(--ink);}
.btn{
  display:inline-block;
  padding:16px 30px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  font-weight:500;
  text-decoration:none;
}
.btn:hover{background:#FFFFFF;}

section{padding:96px 0; border-top:1px solid var(--line);}
.glow{background:linear-gradient(180deg, var(--bg) 0%, var(--stage) 55%, var(--bg) 100%);}
.panel{border-radius:28px; background:linear-gradient(180deg, var(--stage) 0%, var(--stage-end) 100%);}

/* header */
/* stays at the top while scrolling */
.top{position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line); background:rgba(20,8,9,0.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
/* anchor jumps (#faq topics, #features sections) and focused quiz headings land below the header */
[id], [tabindex="-1"]{scroll-margin-top:88px;}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:12px; padding-bottom:12px;}
.top .wrap > nav{display:flex; gap:32px; font-size:14px;}
.top .wrap > nav a{color:var(--muted); text-decoration:none;}
.top .wrap > nav a:hover, .top .wrap > nav a[aria-current="page"]{color:var(--ink);}
.top .btn{padding:12px 22px; font-size:14px;}

/* phone menu: a <details> toggle, so it opens and closes without JavaScript */
.menu{display:none;}
.menu summary{width:44px; height:44px; display:flex; align-items:center; justify-content:center; list-style:none; cursor:pointer;}
.menu summary::-webkit-details-marker{display:none;}
.menu summary svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round;}
.menu nav{position:absolute; top:100%; left:0; right:0; padding:4px 20px 24px; border-bottom:1px solid var(--line); background:var(--bg);}
.menu nav a{display:flex; align-items:center; min-height:60px; border-bottom:1px solid rgba(239,231,225,0.1); color:var(--ink); font-size:24px; letter-spacing:-0.02em; font-stretch:108%; text-decoration:none;}
.menu nav a:last-child{border-bottom:none;}
@media (max-width:860px){
  .top .wrap{gap:4px; padding-right:12px;}
  .top .wrap > nav{display:none;}
  .top .btn{margin-left:auto;}
  .menu{display:block;}
}

/* page openers */
.page-hero{border-top:none;}
.page-hero h1{font-size:clamp(48px, 8.4vw, 128px); line-height:0.9; letter-spacing:-0.055em; font-stretch:116%;}
.page-hero .lede{margin-top:28px; font-size:clamp(17px, 1.5vw, 20px); color:var(--muted);}
.page-hero.center .lede{max-width:560px; margin-left:auto; margin-right:auto;}
/* left-aligned openers: a full-width rule, then the lede in the same right-hand column as .split > .body */
.page-hero:not(.center) .lede{margin-top:56px; padding:32px 0 0 360px; border-top:1px solid var(--line-strong); font-size:20px; line-height:1.55;}
@media (min-width:1040px){ .page-hero:not(.center) .lede{padding-right:calc(100% - 360px - 600px);} }
@media (max-width:1039px){ .page-hero:not(.center) .lede{padding-left:0; max-width:640px; font-size:clamp(17px, 1.5vw + 4px, 20px);} }
.eyebrow{font-size:17px; color:var(--muted);}
.eyebrow + h1, .eyebrow + h2{margin-top:16px;}
.section-title{font-size:clamp(44px, 6.6vw, 96px); line-height:0.95; letter-spacing:-0.05em; font-stretch:112%;}
.subtitle{font-size:clamp(36px, 4.2vw, 60px); max-width:760px; font-stretch:110%;}
.intro{max-width:560px; margin:28px auto 0; font-size:clamp(17px, 1.5vw, 20px); color:var(--muted);}

/* label on the left, content on the right */
.split{display:flex; flex-wrap:wrap; gap:24px 40px;}
.split > .label{flex:0 0 320px; padding-top:12px; font-size:15px;}
.split > .body{flex:1 1 640px; min-width:0;}

/* short headed points under a rule */
.points{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:40px; text-align:left;}
.points > li{padding-top:24px; border-top:1px solid var(--line-strong);}
.points h3{font-size:19px; letter-spacing:-0.01em;}
.points p{margin-top:10px; color:var(--muted);}
.points .num{display:block; margin-bottom:20px; font-size:48px; line-height:1; letter-spacing:-0.04em; font-weight:400; font-stretch:112%; color:var(--dim);}

/* key / value rows */
.rows{margin:0; border-top:1px solid var(--line-strong);}
.rows div{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-strong); font-size:14px;}
.rows dt{color:var(--dim);}
.rows dd{margin:0; text-align:right;}

/* questions and answers */
.qa{border-top:1px solid var(--line-strong);}
.qa details{border-bottom:1px solid var(--line-strong);}
.qa summary{min-height:76px; padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:24px; list-style:none; font-size:18px; font-weight:450; letter-spacing:-0.01em; cursor:pointer;}
.qa summary::-webkit-details-marker{display:none;}
/* a plus that turns into a close cross when open */
.qa summary::after{
  content:"";
  flex:0 0 14px; height:14px;
  background:linear-gradient(var(--muted), var(--muted)) center / 100% 1.5px no-repeat,
             linear-gradient(var(--muted), var(--muted)) center / 1.5px 100% no-repeat;
  transition:transform .25s ease;
}
.qa details[open] summary::after{transform:rotate(45deg);}
.qa details p{max-width:640px; padding:0 56px 28px 0; line-height:1.7; color:var(--muted);}
@media (prefers-reduced-motion:reduce){ .qa summary::after{transition:none;} }

/* plan cards (home and pricing): each card is a radio button, so picking one needs no JavaScript */
.plan{cursor:pointer; transition:border-color .2s ease, background-color .2s ease;}
.plan-top{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.plan input{appearance:none; -webkit-appearance:none; flex-shrink:0; width:18px; height:18px; margin:0; border-radius:50%; border:1px solid rgba(239,231,225,0.32); cursor:pointer;}
.plan input:checked{border-color:var(--ink); background:radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px);}
.plan:hover{border-color:rgba(239,231,225,0.32);}
.plan:has(input:checked){border-color:rgba(239,231,225,0.85); background:rgba(239,231,225,0.04);}
.plan:has(input:focus-visible){outline:2px solid var(--ink); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){ .plan{transition:none;} }

/* final call */
.final h2{font-size:clamp(44px, 10vw, 152px); line-height:0.9; letter-spacing:-0.055em; font-stretch:116%;}
.final .btn{margin-top:48px;}
.final .note{margin-top:18px; color:var(--soft);}

/* final call as a rounded card: heading left, button right */
.final-card{padding:0 0 40px; border-top:none;}
.final-card .panel{padding:clamp(72px, 9vw, 120px) clamp(28px, 5vw, 64px) 72px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:48px;}
.final-card h2{font-size:clamp(40px, 8.4vw, 128px); line-height:0.9; letter-spacing:-0.055em; font-stretch:116%;}
.final-card .cta{padding-bottom:8px; display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
.final-card .note{color:var(--soft);}

/* footer */
footer{padding:80px 0 48px; border-top:1px solid var(--line);}
footer .wrap{display:flex; flex-wrap:wrap; gap:48px 40px;}
.colophon{flex:0 0 320px; max-width:100%; display:flex; flex-direction:column; gap:16px;}
.colophon img{height:15px; width:auto; align-self:flex-start;}
.colophon p{font-size:13px; color:var(--dim);}
.sitemap{flex:1 1 560px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:32px;}
.sitemap nav{display:flex; flex-direction:column; gap:14px; font-size:14px;}
.sitemap nav p{font-size:13px;}
.sitemap a{color:var(--dim); text-decoration:none;}
.sitemap a:hover{color:var(--ink);}

@media (max-width:640px){
  section{padding:72px 0;}
}

/* ===== motion (same as the original design) ===== */
/* page load: slide up and fade in, one after another with the delay classes */
.load-in{animation:load-in 1s cubic-bezier(.2,.7,.2,1) both;}
.delay-1{animation-delay:.08s;}
.delay-2{animation-delay:.18s;}
.delay-3{animation-delay:.28s;}
@keyframes load-in{from{opacity:0; transform:translateY(32px);}}

/* scroll: blocks rise in as they enter the screen, and the big number grows; tied to the scroll position.
   Browsers without scroll-driven animations just show everything as normal. */
@supports (animation-timeline: view()){
  .rise{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 85%;}
  .grow{animation:grow linear both; animation-timeline:view(); animation-range:entry 0% cover 45%;}
}
@keyframes rise{from{opacity:0; transform:translateY(64px);}}
@keyframes grow{from{opacity:.12; transform:scale(.82);} to{opacity:1; transform:scale(1);}}

/* fallback for other browsers (Firefox): /assets/reveal.js adds .reveal-js to <html>, then .in-view as each block scrolls in */
.reveal-js .rise{opacity:0; transform:translateY(64px);}
.reveal-js .grow{opacity:.12; transform:scale(.82);}
/* only the reveal is animated, so nothing visibly fades out first */
.reveal-js .rise.in-view, .reveal-js .grow.in-view{opacity:1; transform:none; transition:opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);}

/* something that just appeared (the quiz result, the "Suggested for you" tag) */
.pop{animation:pop .6s cubic-bezier(.2,.7,.2,1) both;}
@keyframes pop{from{opacity:0; transform:translateY(16px);}}

@media (prefers-reduced-motion:reduce){
  .load-in, .rise, .grow, .pop{animation:none !important;}
}

/* text only screen readers hear (e.g. the final number while 5,700+ counts up) */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}