/* ─────────────────────────────────────────
   PROGRESS LINE
───────────────────────────────────────── */
#pb {
  position: fixed; top:0; left:0; right:0; z-index:400;
  height: 4px; background: var(--line2);
}
#pf {
  height: 100%; width: 0%;
  background: var(--red);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:300;
  height: 48px;
  padding: 0 40px;
  display: flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(8,8,8,.96);
  backdrop-filter: blur(16px);
}
.logo {
  font-family: var(--fd);
  font-size: 22px; letter-spacing: .12em;
  display: flex; align-items:center; gap:2px;
  background: none; border: none; padding: 0;
  color: inherit; cursor: pointer;
}
.logo-dot { color: var(--red) }
.nav-r { display:flex; align-items:center; gap:10px }
.lbtn {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  font-family: var(--fm); font-size:11px;
  padding: 0 10px; letter-spacing:.08em;
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .12s;
  -webkit-tap-highlight-color: transparent;
}
.lbtn.on, .lbtn:hover { color: var(--white) }
.nsc {
  font-family: var(--fm); font-size:11px;
  color: var(--dim); letter-spacing:.06em;
}

/* ─────────────────────────────────────────
   CART PILL (floating)
───────────────────────────────────────── */
#cart-pill {
  position: fixed; bottom: 76px; right: 28px; z-index:200;
  display: none; align-items:center; gap: 8px;
  background: var(--red);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--fm); font-size:12px; letter-spacing:.06em;
  box-shadow: 0 8px 32px rgba(232,0,26,.35);
  transition: transform .14s, opacity .14s;
}
#cart-pill.show { display:none }  /* pill hidden — order row used instead */
#cart-pill:hover { transform: translateY(-2px) }
#cart-pill-n { font-weight:700 }

/* ─────────────────────────────────────────
   SCREENS
───────────────────────────────────────── */
.scr {
  display: none;
  min-height: 100vh;
  padding: 72px 0 88px;
  animation: appear .25s ease both;
}
.scr.on { display:block }
@keyframes appear {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes shake {
  0%,100% { transform:translateX(0) }
  25%     { transform:translateX(-3px) }
  75%     { transform:translateX(3px) }
}
.shake { animation:shake 0.3s ease; }

.wrap  { max-width: 720px; margin:0 auto; padding:0 40px }
.wrap-w{ max-width: 1100px; margin:0 auto; padding:0 40px }

/* ─────────────────────────────────────────
   STEP HEADER
───────────────────────────────────────── */
.sh {
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.step-tag {
  font-family: var(--fm);
  font-size: 11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--red);
  margin-bottom: 12px;
  display: flex; align-items:center; gap:8px;
}
.step-tag::before {
  content:''; display:block; width:24px; height:2px;
  background:var(--red); flex-shrink:0;
}
.step-h {
  font-family: var(--fd);
  font-size: clamp(48px, 8vw, 80px);
  letter-spacing: .03em; line-height: .92;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.step-h em { color: var(--red); font-style:normal }
.step-sub {
  font-family: var(--ft), var(--fb);
  font-size: 15px; color: var(--sub);
  font-weight: 400; line-height: 1.7;
  max-width: 480px;
}

/* ─────────────────────────────────────────
   GRIDS
───────────────────────────────────────── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }
.g4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px }

/* Goal cards — 3 column full width */
.g3.goals { grid-template-columns:1fr 1fr 1fr; gap:8px }

/* ─────────────────────────────────────────
   BOTTOM NAV
───────────────────────────────────────── */
.bn {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
  border-top:1px solid var(--line);
  background:rgba(8,8,8,.97);
  backdrop-filter:blur(16px);
}
.btn-back {
  background:none; border:none; cursor:pointer;
  font-family:var(--fm); font-size:11px; color:var(--dim);
  letter-spacing:.1em; text-transform:uppercase;
  transition:color .12s; padding:0;
}
.btn-back:hover { color:var(--white) }
.step-n { font-family:var(--fm); font-size:11px; color:var(--dim) }
.btn-next {
  background:none; border:none; cursor:pointer;
  font-family:var(--fd); font-size:20px; color:var(--white);
  letter-spacing:.08em; text-transform:uppercase;
  transition:color .12s; padding:0;
  display:flex; align-items:center; gap:6px;
  -webkit-tap-highlight-color: transparent;
}
.btn-next:hover { color:var(--red) }
.btn-next.primary {
  background:var(--red); color:#fff;
  padding:13px 36px; border-radius:8px;
  font-size:19px;
  transition: background .14s;
  min-height:46px;
}
.btn-next.primary:hover { background:#c8001a; }

/* ─────────────────────────────────────────
   INTRO SCREEN
───────────────────────────────────────── */
#s1.scr { display:none; min-height:100vh; padding:0 }
#s1.scr.on { display:flex; align-items:center; justify-content:center }
.intro {
  text-align:center; padding:72px 40px 40px;
  max-width:1200px; width:100%;
  animation:appear .5s ease both;
}
.intro-logo {
  margin-bottom: 4px;
  line-height: 1;
}
.intro-logo-main {
  font-family: var(--fd);
  font-size: clamp(16px, 2.5vw, 26px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--white); font-weight: 400;
  margin-bottom: 0;
}
.intro-logo-amp {
  color: var(--red);
}
.intro-logo-sub {
  font-family: var(--fd);
  font-size: clamp(86px, 16.8vw, 168px);
  letter-spacing: .06em; line-height: .78;
  text-transform: uppercase;
}
.intro-logo-sub em { color: var(--red); font-style: normal }
.intro-by-inline {
  font-family:var(--fm); font-size:10px;
  color:var(--red); letter-spacing:.22em; text-transform:uppercase;
  vertical-align:middle; margin-left:4px;
}
.intro-by {
  font-family:var(--fm); font-size:10px;
  color:var(--red); letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:28px;
}
.intro-desc {
  font-size:14px; color:var(--sub);
  font-weight:300; line-height:1.8;
  max-width:700px; margin:48px auto 32px;
}
.lang-row { display:flex; gap:8px; justify-content:center; margin-bottom:32px }
.lang-card {
  background:none; border:1px solid var(--line2);
  color:var(--muted); cursor:pointer;
  font-family:var(--fd); font-size:18px; letter-spacing:.1em;
  padding:10px 32px; border-radius:3px;
  transition:all .12s;
}
.lang-card:hover { border-color:var(--dim); color:var(--white) }
.lang-card.on { background:var(--red); border-color:var(--red); color:#fff }
.intro-start {
  background:var(--red); border:none; color:#fff; cursor:pointer;
  font-family:var(--fd); font-size:20px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 56px; border-radius:3px;
  transition:background .14s;
  margin-bottom:48px;
}
.intro-start:hover { background:#c8001a }
.intro-defs {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:4px;
  overflow:hidden;
  max-width:640px; margin:0 auto;
  text-align:left;
}
.def-cell {
  background:var(--bg);
  padding:20px;
}
.def-lbl {
  font-family:var(--fm); font-size:10px; color:var(--red);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:6px;
}
.def-info {
  display:inline-block; margin-left:5px;
  font-size:13px; color:var(--muted);
  text-decoration:none; opacity:0.5;
  vertical-align:middle; line-height:1;
  letter-spacing:0; text-transform:none;
  transition:opacity .15s, color .15s;
}
.def-info:hover { opacity:1; color:var(--red); }
.def-txt { font-size:12px; color:var(--muted); line-height:1.6; font-weight:300 }
.intro-sport {
  margin-top: 32px;
  margin-bottom: 36px;
  width: 100%;
}
.intro-sport-lbl {
  font-family: var(--fm); font-size: 11px; color: var(--sub);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 0;
}