/* Built by backend/coming-soon.mjs from css/website.css. Edit that file, not this. */
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; }
.auth-legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.35rem 1rem; font-size:11.5px; }
.auth-legal a{ color:var(--text-faint); text-decoration:underline; text-decoration-color:var(--border-strong); }
.auth-legal a:hover{ color:var(--text-dim); }

/* ============================================================
   Marketing homepage
   ============================================================ */
#marketing-home{
  position: fixed; inset: 0; z-index: 2100;   /* above #toast-host (2000) and every sheet */
  background: var(--bg); color: var(--text);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
#marketing-home.hidden{ display: none; }
#marketing-home img{ max-width: 100%; display: block; }

.mkt-eyebrow{
  display: inline-block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.6rem;
}

.mkt-cta{ white-space: nowrap; }

/* ---- Top bar ---- */
.mkt-topbar{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.mkt-topbar-brand{ display: flex; align-items: center; gap: 0.6rem; }
.mkt-topbar-brand span{
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---- Hero ---- */
.mkt-hero{
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  max-width: 1160px; margin: 0 auto; padding: 3rem 1.25rem 4.5rem; text-align: center;
}
.mkt-hero-copy{ max-width: 620px; }
.mkt-hero-copy h1{ font-size: clamp(32px, 6vw, 56px); line-height: 1.08; margin-bottom: 1.1rem; }
.mkt-sub{ font-size: 16px; line-height: 1.6; color: var(--text-dim); margin: 0 auto; }
.mkt-hero-actions{ display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2.25rem; }
.mkt-hero-actions .btn{ padding: 0.85rem 1.6rem; font-size: 14px; }

@media (min-width: 860px){
  .mkt-hero{ padding-top: 4.5rem; }
}

/* ---- Generic section scaffolding ---- */
.mkt-section{ max-width: 1240px; margin: 0 auto; padding: 3.5rem 1.25rem; }
.mkt-section-head{ text-align: center; max-width: 620px; margin: 0 auto 2.25rem; }
.mkt-section-head h2{ font-size: clamp(24px, 4vw, 34px); margin-bottom: 0.6rem; }
.mkt-section-head p{ color: var(--text-dim); font-size: 15px; line-height: 1.6; }

/* ---- Phone showcase: three cinematic screenshots of the real app ---- */
.mkt-phone-stage{
  position: relative; width: 100%; margin-top: 2.5rem; padding: 2.5rem 0 1rem;
}
.mkt-phone-glow{
  position: absolute; left: 50%; top: 8%; width: min(900px, 90vw); height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent) 42%, transparent 72%);
  filter: blur(30px); pointer-events: none; z-index: 0;
}
.mkt-phone-row{
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  perspective: 1600px;
}
.mkt-phone{ flex: 0 0 auto; transition: transform 0.35s ease; cursor: pointer; }
.mkt-phone-bezel{
  position: relative; width: 160px; border: 7px solid #1c1c1e; border-radius: 30px;
  overflow: hidden; background: #111; aspect-ratio: 1179 / 2556;
  box-shadow: inset 0 0 0 2px #050505, 0 0 0 1.5px #2c2c2e, 0 25px 55px rgba(0,0,0,0.6);
  transition: filter 0.35s ease;
}
.mkt-phone-bezel img{ width: 100%; height: 100%; display: block; object-fit: cover; }
.mkt-phone-notch{
  position: absolute; top: 2%; left: 50%; transform: translateX(-50%); z-index: 4;
  width: 30%; height: 3%; background: #000; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22), inset 0 0 0 1px rgba(255,255,255,0.08);
}

.mkt-phone-center{ z-index: 3; }
.mkt-phone-center .mkt-phone-bezel{ width: 188px; box-shadow: inset 0 0 0 2px #050505, 0 0 0 1.5px #3a3024, 0 30px 70px rgba(0,0,0,0.65), 0 0 60px color-mix(in srgb, var(--accent) 18%, transparent); }

.mkt-phone-side{ z-index: 2; }
.mkt-phone-left{ transform: rotateY(22deg) translateX(32px) scale(0.9); }
.mkt-phone-right{ transform: rotateY(-22deg) translateX(-32px) scale(0.9); }
.mkt-phone-left .mkt-phone-bezel,
.mkt-phone-right .mkt-phone-bezel{ filter: brightness(0.82); }

.mkt-phone:hover{ transform: translateY(-10px) scale(1.03); }
.mkt-phone-left:hover{ transform: rotateY(8deg) translateX(40px) scale(0.98) translateY(-10px); }
.mkt-phone-right:hover{ transform: rotateY(-8deg) translateX(-40px) scale(0.98) translateY(-10px); }
.mkt-phone-left:hover .mkt-phone-bezel,
.mkt-phone-right:hover .mkt-phone-bezel{ filter: brightness(1); }

@media (min-width: 540px){
  .mkt-phone-bezel{ width: 188px; border-radius: 32px; }
  .mkt-phone-center .mkt-phone-bezel{ width: 220px; }
  .mkt-phone-left{ transform: rotateY(24deg) translateX(58px) scale(0.9); }
  .mkt-phone-right{ transform: rotateY(-24deg) translateX(-58px) scale(0.9); }
  .mkt-phone-left:hover{ transform: rotateY(9deg) translateX(72px) scale(0.98) translateY(-10px); }
  .mkt-phone-right:hover{ transform: rotateY(-9deg) translateX(-72px) scale(0.98) translateY(-10px); }
}
@media (min-width: 860px){
  .mkt-phone-bezel{ width: 220px; border-radius: 36px; border-width: 8px; }
  .mkt-phone-center .mkt-phone-bezel{ width: 258px; }
  .mkt-phone-left{ transform: rotateY(26deg) translateX(80px) scale(0.92); }
  .mkt-phone-right{ transform: rotateY(-26deg) translateX(-80px) scale(0.92); }
  .mkt-phone-left:hover{ transform: rotateY(10deg) translateX(100px) scale(1) translateY(-10px); }
  .mkt-phone-right:hover{ transform: rotateY(-10deg) translateX(-100px) scale(1) translateY(-10px); }
}

/* ---- Image + copy split sections (coaches, AI coach) ---- */
.mkt-split{
  display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center;
}
.mkt-split-art{ width: min(55vw, 260px); }
.mkt-split-copy{ max-width: 560px; }
.mkt-split-copy p{ color: var(--text-dim); font-size: 15.5px; line-height: 1.65; }
@media (min-width: 760px){
  .mkt-split{ flex-direction: row; text-align: left; }
  .mkt-split-reverse{ flex-direction: row-reverse; }
  .mkt-split-art{ flex: 0 0 auto; width: min(20vw, 240px); }
  .mkt-split-copy{ flex: 1 1 auto; }
  .mkt-split:not(.mkt-split-reverse) .mkt-split-copy{ padding-left: 2.5rem; }
  .mkt-split-reverse .mkt-split-copy{ padding-right: 2.5rem; }
}

/* ---- Interactive tabs inside each feature slide (Train / Fuel / Recover) ---- */
.mkt-feature-interactive{ margin-top: 1.5rem; }
.mkt-feature-tabs{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.mkt-feature-tab{
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-dim); background: var(--bg-elev);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.5rem 0.95rem;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mkt-feature-tab:hover{ border-color: var(--accent-dim); color: var(--text); }
.mkt-feature-tab.active{ background: var(--accent); border-color: var(--accent); color:var(--on-accent); }
.mkt-feature-tab-panels{ position: relative; min-height: 76px; }
.mkt-feature-tab-panel{ display: none; color: var(--text-dim); font-size: 15px; line-height: 1.65; animation: fadeIn 0.25s ease; }
.mkt-feature-tab-panel.active{ display: block; }

.mkt-feature-stats{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.mkt-feature-stats span{
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; padding: 0.4rem 0.8rem;
}

/* ---- In-slide phone mockup (Train / Fuel / Recover feature sections) ---- */
.mkt-feature-phone{ display: flex; justify-content: center; }
.mkt-feature-phone .mkt-phone-bezel{
  width: 200px; border: 8px solid #1c1c1e; border-radius: 34px;
  box-shadow: inset 0 0 0 2px #050505, 0 0 0 1.5px #3a3024, 0 30px 70px rgba(0,0,0,0.6), 0 0 50px color-mix(in srgb, var(--accent) 15%, transparent);
}
@media (min-width: 760px){
  .mkt-feature-phone .mkt-phone-bezel{ width: 220px; }
}

/* ---- Sports pills ---- */
.mkt-sport-pills{
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; max-width: 820px; margin: 0 auto;
}
.mkt-sport-pills span{
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 0.55rem 1.1rem; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
}

/* ---- Final CTA band ---- */
.mkt-final-cta{ text-align: center; }
.mkt-final-cta img{ width: 120px; margin: 0 auto 1rem; }
.mkt-final-cta h2{ font-size: clamp(24px, 4vw, 34px); margin-bottom: 1.5rem; }
.mkt-final-cta .btn{ padding: 0.9rem 2rem; font-size: 14px; }

/* ---- Footer ---- */
.mkt-footer{
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 2.5rem 1.25rem 3rem; border-top: 1px solid var(--border);
}
.mkt-footer .auth-legal{ margin-top: 0; padding-top: 0; border-top: none; }
.mkt-copyright{ color: var(--text-faint); font-size: 12px; }

/* ---- Instagram link ---- */
.mkt-social{
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  color: var(--text-dim); font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: 0.04em; transition: color 0.15s;
}
.mkt-social:hover{ color: var(--accent-text); }
.mkt-social svg{ width: 19px; height: 19px; flex-shrink: 0; }

/* Every homepage heading in the display face, like the hero */
#marketing-home h2{ font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.12; }
.mkt-split-copy h2{ font-size: clamp(26px, 3.4vw, 38px); margin: 0.2rem 0 0.75rem; }

/* ---- Computer version: the dashboard in a laptop frame ---- */
.mkt-desktop{ position: relative; }
.mkt-laptop{ position: relative; max-width: 980px; margin: 0 auto; }
.mkt-laptop::before{ content: ""; position: absolute; inset: 10% 5% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); filter: blur(40px); }
.mkt-laptop-screen{ position: relative; z-index: 1; padding: 2.2% 2.2% 2.6%; border-radius: 18px 18px 6px 6px;
  background: #0a0a0c; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 30px 60px rgba(0,0,0,0.55); }
.mkt-laptop-screen img{ width: 100%; height: auto; border-radius: 6px; display: block; }
.mkt-laptop-base{ position: relative; z-index: 1; height: 14px; margin: 0 -6%; border-radius: 0 0 18px 18px;
  background: linear-gradient(#2a2a30, #141418); box-shadow: 0 14px 30px rgba(0,0,0,0.5); }
.mkt-laptop-base::after{ content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%);
  border-radius: 0 0 8px 8px; background: #0d0d10; }

/* ---- Coming soon ---- */
.mkt-soon{ display:inline-block; padding:0.55rem 1.1rem; border-radius:999px; border:1px solid var(--accent);
  color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent);
  font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; text-align:center; }
.mkt-topbar .mkt-soon{ padding:0.4rem 0.85rem; font-size:12px; }
@media (max-width:520px){ .mkt-hero-actions .mkt-soon{ font-size:11.5px; letter-spacing:0.08em; padding:0.6rem 1rem; } }
.mkt-soon-note{ color:var(--text-dim); font-size:15px; margin:0.25rem 0 0; }
.mkt-plan-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0.9rem; max-width:980px; margin:0 auto; }
.mkt-plan{ padding:1.15rem 1.2rem; border-radius:16px; background:var(--bg-elev); border:1px solid var(--border); }
.mkt-plan.featured{ border-color:var(--accent); }
.mkt-plan h3{ margin:0 0 0.35rem; color:var(--text-dim); font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; letter-spacing:0.06em; text-transform:uppercase; }
.mkt-plan p{ margin:0; font-size:14px; line-height:1.5; color:var(--text-dim); }
.mkt-price{ font-family:'Oswald',sans-serif; font-weight:700; font-size:34px; }
.mkt-price span{ font-size:15px; font-weight:500; color:var(--text-faint); margin-left:0.2rem; }
.mkt-price-sub{ font-size:13px; color:var(--text-faint); margin:-0.1rem 0 0.5rem; }
.mkt-plan-note{ max-width:720px; margin:1rem auto 0; font-size:13px; line-height:1.55; color:var(--text-faint); text-align:center; }
.mkt-contact{ text-align:center; margin:1.5rem 0 0; color:var(--text-dim); }
.mkt-contact a{ color:var(--accent); }

/* ---- The homepage's look: big wordmark, light behind the hero, larger and sharper phones ---- */
#marketing-home{ background:
  radial-gradient(1100px 620px at 50% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
  radial-gradient(800px 500px at 85% 30%, color-mix(in srgb, #8a55d6 12%, transparent), transparent 70%),
  var(--bg); }
.mkt-wordmark{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(64px, 14vw, 150px); line-height:0.95; letter-spacing:0.08em;
  margin:0 0 0.9rem; padding-left:0.08em; text-transform:uppercase;
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 45%, color-mix(in srgb, var(--accent) 80%, #ffffff) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 40px color-mix(in srgb, var(--accent) 35%, transparent)); }
.mkt-hero{ padding-top:3.5rem; }
.mkt-hero-copy{ max-width:760px; }
/* Phones: drawn at full resolution (the screenshots are 3x), no blur from dimming or deep tilts */
.mkt-phone, .mkt-phone-bezel, .mkt-phone-bezel img{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.mkt-phone-bezel img{ image-rendering:auto; }
.mkt-phone-bezel::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:linear-gradient(125deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 22%, transparent 40%); }
.mkt-phone-left .mkt-phone-bezel, .mkt-phone-right .mkt-phone-bezel{ filter:none; }
.mkt-phone-glow{ height:520px; filter:blur(40px); }
@media (min-width: 860px){
  .mkt-phone-bezel{ width:250px; border-radius:40px; border-width:9px; }
  .mkt-phone-center .mkt-phone-bezel{ width:300px; border-radius:46px; }
  .mkt-phone-left{ transform:rotateY(14deg) translateX(70px) scale(0.94); }
  .mkt-phone-right{ transform:rotateY(-14deg) translateX(-70px) scale(0.94); }
  .mkt-feature-phone .mkt-phone-bezel{ width:270px; border-radius:42px; }
}
@media (min-width: 1200px){
  .mkt-phone-bezel{ width:270px; }
  .mkt-phone-center .mkt-phone-bezel{ width:330px; border-radius:50px; }
  .mkt-feature-phone .mkt-phone-bezel{ width:290px; }
}
/* A slow float on the hero phones */
@keyframes mktFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
.mkt-phone-row .mkt-phone{ animation:mktFloat 6s ease-in-out infinite; }
.mkt-phone-row .mkt-phone-left{ animation-delay:-2s; }
.mkt-phone-row .mkt-phone-right{ animation-delay:-4s; }
/* Feature sections and the laptop get the same light */
.mkt-split{ position:relative; }
.mkt-feature-phone .mkt-phone-bezel{ box-shadow:inset 0 0 0 2px #050505, 0 0 0 1.5px #2c2c2e, 0 40px 80px rgba(0,0,0,0.6), 0 0 80px color-mix(in srgb, var(--accent) 22%, transparent); }
.mkt-laptop{ max-width:1080px; }