/* =====================================================================
   SpotMe  |  landing page v4
   Aurora gradients (gold, amber, emerald, teal) over a dark bento structure.
   Motion: one entrance per section, hover feedback on everything clickable,
   gentle float on the hero widgets. All of it stops under reduced-motion.
   Loaded after style.css and pro-extra.css.
   ===================================================================== */
.nav-links, .nav-actions{ visibility:visible; }
.l-wrap{ max-width:var(--max-w); margin:0 auto; padding:0 var(--pad); }

/* Reveal-on-scroll: only hidden when JS is running, so the page never depends on it */
.js [data-fx]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.js [data-fx].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js [data-fx]{ opacity:1; transform:none; transition:none; } }

/* ---------- Tile: glass, lit edge, spotlight ---------- */
.tile{
  position:relative; overflow:hidden; min-width:0; display:flex; flex-direction:column; gap:12px; padding:20px;
  background:var(--glass), var(--bg-card); border:1px solid rgba(34,34,34,0.08); border-radius:var(--r-lg);
  transition:transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.tile::before{ /* lit top edge */
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(165deg, rgba(34,34,34,0.22), rgba(34,34,34,0.03) 38%, rgba(234,198,55,0.20));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.tile::after{ /* spotlight that follows the cursor */
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-10%), rgba(234,198,55,0.15), transparent 62%);
}
.tile:hover{ transform:perspective(1100px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); border-color:rgba(234,198,55,0.32); box-shadow:var(--glow); }
.tile:hover::after{ opacity:1; }
.tile > *{ position:relative; z-index:1; }
.tile-k{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:0.64rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey); }
.tile-k b{ background:var(--g-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-weight:700; }
.tile h3{ font-size:clamp(1.35rem, 2vw, 1.75rem); line-height:1.15; }
.tile p{ color:var(--chalk-dim); font-size:0.88rem; line-height:1.5; margin:0; }
.tag-live{ display:inline-flex; align-items:center; gap:7px; color:var(--emerald); }
.tag-live::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:livePulse 2s ease-out infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); } 70%,100%{ box-shadow:0 0 0 8px rgba(52,211,153,0); } }
@media (prefers-reduced-motion: reduce){ .tag-live::before{ animation:none; } }
.chip{ display:inline-block; font-family:var(--mono); font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-sm); background:var(--g-gold); color:#17120a; box-shadow:0 0 14px rgba(234,198,55,.35); }

/* ---------- Pass bar ---------- */
.pass-bar{ background:var(--g-gold); color:#17120a; overflow:hidden; height:34px; display:flex; align-items:center; font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.pass-track{ display:flex; white-space:nowrap; animation:passRoll 40s linear infinite; will-change:transform; }
.pass-track span{ padding:0 26px; border-right:1px solid rgba(0,0,0,0.25); }
@keyframes passRoll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .pass-track{ animation:none; } }

/* ---------- Hero ---------- */
.l-hero{ position:relative; overflow:hidden; padding-bottom:8px; }
.l-hero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(34,34,34,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(34,34,34,0.04) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 70% at 50% 20%, #000, transparent); mask-image:radial-gradient(70% 70% at 50% 20%, #000, transparent); }
.hero-wrap{ position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:44px; align-items:center; padding-top:64px; padding-bottom:64px; }
.hero-meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--chalk-dim); margin-bottom:24px; }
.hero-meta span{ white-space:nowrap; }
.hero-meta .pill{ padding:6px 12px; border:1px solid rgba(34,34,34,0.12); border-radius:99px; background:rgba(34,34,34,0.04); }
.hero-h1{ font-size:clamp(2.9rem, 6.6vw, 6rem); line-height:1.04; letter-spacing:-0.035em; margin:0; color:var(--chalk); }
.ln{ display:block; overflow:hidden; padding:0.04em 0.24em 0.16em 0; margin-right:-0.24em; }
.ln > span{ display:inline-block; transform:translateY(108%); animation:lineUp 1s var(--ease) forwards; animation-delay:calc(var(--i) * 0.13s + 0.1s); }
@keyframes lineUp{ to{ transform:none; } }
.hero-h1 em{ font-style:italic; background:var(--g-text); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:gradShift 6s linear infinite; }
.hero-h1 .outline{ color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:2px var(--chalk); }
@supports not (-webkit-text-stroke:1px #000){ .hero-h1 .outline{ -webkit-text-fill-color:var(--chalk); color:var(--chalk); } }
@media (prefers-reduced-motion: reduce){ .ln > span{ transform:none; animation:none; } }
.lede{ max-width:44ch; color:var(--chalk-dim); font-size:1.1rem; line-height:1.55; margin:28px 0 26px; }
.lede b{ color:var(--chalk); font-weight:600; }

/* Inline email capture (email only: the highest-converting pattern) */
.hero-form{ display:flex; gap:8px; max-width:520px; padding:6px; border-radius:16px; background:rgba(34,34,34,0.05); border:1px solid rgba(34,34,34,0.13); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .25s, box-shadow .3s; }
.hero-form:focus-within{ border-color:rgba(234,198,55,0.7); box-shadow:0 0 0 4px rgba(234,198,55,0.14), var(--glow); }
.hero-form input{ flex:1; min-width:0; background:transparent !important; border:none !important; box-shadow:none !important; color:var(--chalk); padding:12px 14px; font-size:1rem; border-radius:10px; outline:none; }
.hero-form input::placeholder{ color:#6b7280; }
.hero-form .btn{ white-space:nowrap; }
.hero-proof{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px; font-size:0.84rem; color:var(--chalk-dim); }
.hero-proof b{ color:var(--chalk); font-weight:600; }
.hero-proof .ok{ display:inline-flex; align-items:center; gap:7px; }
.hero-proof .ok::before{ content:''; width:16px; height:16px; border-radius:50%; background:var(--g-cool) ; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; }
.hero-links{ display:flex; gap:18px; margin-top:18px; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; }
.hero-links a{ color:var(--chalk-dim); border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s; }
.hero-links a:hover{ color:var(--gold-hi); border-color:var(--gold-hi); }

/* Hero widget cluster: gently floating, staggered */
.hero-widgets{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:var(--gap); }
.w-pass{ grid-column:1 / 7; background:radial-gradient(380px circle at 100% 0, rgba(234,198,55,0.13), transparent 60%), radial-gradient(320px circle at 0 100%, rgba(52,211,153,0.10), transparent 60%), var(--glass), var(--bg-card); }
.w-bars{ grid-column:1 / 5; } .w-ring{ grid-column:5 / 7; } .w-thread{ grid-column:1 / 7; }
.w-pass{ animation:floatY 9s ease-in-out infinite; } .w-bars{ animation:floatY 8s ease-in-out -2s infinite; } .w-ring{ animation:floatY 10s ease-in-out -4s infinite; } .w-thread{ animation:floatY 11s ease-in-out -6s infinite; }
@keyframes floatY{ 50%{ transform:translateY(-7px); } }
.hero-widgets .tile:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .hero-widgets .tile{ animation:none; } }
.pass-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pass-big{ font-family:var(--display); font-stretch:100%; font-weight:800; text-transform:none; font-size:clamp(3.6rem, 6vw, 5.4rem); line-height:0.8; letter-spacing:-0.045em; color:var(--chalk); }
.pass-big em{ font-style:italic; background:var(--g-text); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:gradShift 6s linear infinite; }
.kv{ display:grid; border-top:1px solid var(--line); }
.kv div{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:0.82rem; color:var(--chalk-dim); }
.kv b{ font-family:var(--mono); font-weight:500; font-size:0.74rem; color:var(--chalk); letter-spacing:0.02em; }
.eb-bar{ height:8px; background:rgba(34,34,34,0.09); border-radius:99px; overflow:hidden; flex:1; max-width:150px; }
.eb-bar i{ display:block; height:100%; width:0; background:var(--g-gold); border-radius:99px; box-shadow:0 0 12px rgba(234,198,55,.6); transition:width .9s var(--ease); }
.eb-count{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); margin:-4px 0 0; }
.w-pass .btn{ width:100%; }
.sample{ font-family:var(--mono); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:#4f5560; }
.wbars{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); column-gap:8px; height:118px; }
.wbars div{ display:flex; flex-direction:column; justify-content:flex-end; }
.wbars i{ display:block; align-self:stretch; background:rgba(34,34,34,0.1); border-radius:6px 6px 2px 2px; transform-origin:bottom; animation:barGrow 1s var(--ease) both; animation-delay:calc(var(--k) * .07s + .5s); }
.wbars i.on{ background:linear-gradient(180deg,#f8e27a,#eac637 50%,#ff9d2e); box-shadow:0 0 14px -2px rgba(234,198,55,.5); }
.wbars div:nth-child(4) i.on{ background:linear-gradient(180deg,#5eead4,#2dc7d8 60%,#34d399); box-shadow:0 0 14px -2px rgba(45,199,216,.5); }
@keyframes barGrow{ from{ transform:scaleY(0); } }
@media (prefers-reduced-motion: reduce){ .wbars i{ animation:none; } }
.wbars span{ display:block; text-align:center; margin-top:7px; font-family:var(--mono); font-size:0.56rem; color:var(--grey); letter-spacing:0.06em; }
.ringbox{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:8px; }
.ring{ width:104px; height:104px; display:block; overflow:visible; }
.ring .tr{ fill:none; stroke:rgba(34,34,34,0.09); stroke-width:9; }
.ring .ar{ fill:none; stroke:url(#gGold); stroke-width:9; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(234,198,55,.5)); stroke-dashoffset:var(--len,0); animation:ringIn 1.4s var(--ease) both .4s; }
.ring .ar.em{ stroke:url(#gEmerald); filter:drop-shadow(0 0 6px rgba(52,211,153,.5)); }
@keyframes ringIn{ from{ stroke-dashoffset:300; } }
@media (prefers-reduced-motion: reduce){ .ring .ar{ animation:none; } }
.ring text{ font-family:var(--mono); fill:var(--chalk); font-weight:500; }
.ringbox span{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); text-align:center; }

/* ---------- Section frame ---------- */
.l-sec{ padding-top:88px; scroll-margin-top:86px; } /* padding-top only, so .l-wrap keeps its side gutters */
.l-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:30px; }
.l-head .badge-pro{ display:inline-block; }
.l-head h2{ font-size:clamp(2.2rem, 5vw, 4rem); line-height:1.1; letter-spacing:-0.03em; margin-top:14px; }
.l-head p{ max-width:40ch; color:var(--chalk-dim); margin:0; }

/* ---------- Bento grid ---------- */
.bento{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gap); }
.bento > .tile{ grid-column:span 4; }
.c-copy{ grid-column:1 / 6 !important; justify-content:space-between; padding:28px; background:radial-gradient(420px circle at 0 0, rgba(52,211,153,0.14), transparent 60%), var(--glass), var(--bg-card); }
.c-copy h2{ font-size:clamp(2.1rem, 4vw, 3.3rem); line-height:1.1; letter-spacing:-0.03em; }
.c-copy p{ font-size:1rem; max-width:34ch; }
.c-thread{ grid-column:6 / 13 !important; padding:0; gap:0; }
.thread-ui{ font-family:var(--mono); }
.tu-bar{ display:flex; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); }
.tu-row{ display:grid; grid-template-columns:50px 98px minmax(0,1fr) 40px; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:0.72rem; align-items:baseline; transition:background .2s; }
.tu-row:not(.open):hover{ background:rgba(34,34,34,0.03); }
.tu-time{ color:var(--grey); } .tu-user{ color:var(--gold-hi); } .tu-n{ text-align:right; color:var(--chalk-dim); }
.tu-title{ font-family:var(--body); font-size:0.95rem; font-weight:500; color:var(--chalk); line-height:1.35; }
.tu-row.open{ background:rgba(52,211,153,0.06); }
.tu-replies{ padding:6px 18px 16px 160px; background:rgba(52,211,153,0.04); border-bottom:1px solid var(--line); display:grid; gap:10px; }
.tu-reply{ border-left:2px solid rgba(52,211,153,0.5); padding-left:14px; font-size:0.7rem; color:var(--chalk-dim); }
.tu-reply b{ color:var(--emerald); font-weight:500; } .tu-reply em{ font-style:normal; color:var(--grey); margin-left:8px; }
.tu-reply p{ font-family:var(--body); font-size:0.88rem; color:var(--chalk); margin:3px 0 0; }
.tu-input{ display:flex; align-items:center; gap:10px; padding:12px 12px 12px 18px; }
.tu-input span{ flex:1; color:var(--grey); font-size:0.74rem; }
.tu-input span::before{ content:'> '; color:var(--gold-hi); }
.tu-foot{ padding:0 18px 14px; }
@media (max-width:640px){ .tu-row{ grid-template-columns:44px minmax(0,1fr) 30px; } .tu-user{ display:none; } .tu-replies{ padding-left:18px; } }

/* Free features: variable widths, each with its own tint */
.f-1{ grid-column:span 5 !important; } .f-2{ grid-column:span 3 !important; } .f-3{ grid-column:span 4 !important; }
.f-4{ grid-column:span 4 !important; } .f-5{ grid-column:span 3 !important; } .f-6{ grid-column:span 5 !important; }
.free .tile{ min-height:176px; justify-content:space-between; }
.f-1{ background:radial-gradient(360px circle at 100% 100%, rgba(234,198,55,0.13), transparent 60%), var(--glass), var(--bg-card); }
.f-2{ background:radial-gradient(300px circle at 0 100%, rgba(52,211,153,0.13), transparent 60%), var(--glass), var(--bg-card); }
.f-3{ background:radial-gradient(340px circle at 100% 0, rgba(45,199,216,0.12), transparent 60%), var(--glass), var(--bg-card); }
.f-4{ background:radial-gradient(340px circle at 0 0, rgba(255,157,46,0.12), transparent 60%), var(--glass), var(--bg-card); }
.f-5{ background:radial-gradient(300px circle at 100% 100%, rgba(52,211,153,0.12), transparent 60%), var(--glass), var(--bg-card); }
.f-6{ background:radial-gradient(360px circle at 0 100%, rgba(234,198,55,0.13), transparent 60%), var(--glass), var(--bg-card); }

/* ---------- Pro stage ---------- */
.stage{ position:relative; padding:14px; border-radius:26px; background:linear-gradient(180deg, rgba(34,34,34,0.05), rgba(34,34,34,0.015)); border:1px solid rgba(34,34,34,0.08); }
.stage::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from 210deg at 50% 50%, rgba(234,198,55,0.55), rgba(52,211,153,0.35), rgba(45,199,216,0.3), rgba(234,198,55,0.05) 55%, rgba(255,157,46,0.45)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7; }
.stage::after{ content:''; position:absolute; left:10%; right:10%; bottom:-60px; height:120px; background:radial-gradient(50% 100% at 50% 0, rgba(234,198,55,0.25), transparent); filter:blur(30px); pointer-events:none; z-index:-1; }
.pb .p-ring{ grid-column:1 / 5; grid-row:1; }
.pb .p-load{ grid-column:5 / 9; grid-row:1; }
.pb .p-muscle{ grid-column:9 / 13; grid-row:1 / 3; }
.pb .p-volume{ grid-column:1 / 9; grid-row:2; }
.pb .p-pr{ grid-column:1 / 5; grid-row:3; }
.pb .p-levels{ grid-column:5 / 9; grid-row:3; }
.pb .p-nutri{ grid-column:9 / 13; grid-row:3 / 5; }
.pb .p-bubbles{ grid-column:1 / 9; grid-row:4; }
.pb .p-caps{ grid-column:1 / 13; grid-row:5; flex-direction:row; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:radial-gradient(520px circle at 0 50%, rgba(234,198,55,0.16), transparent 60%), radial-gradient(520px circle at 100% 50%, rgba(52,211,153,0.12), transparent 60%), var(--glass), var(--bg-card); }
.p-caps h3{ font-size:clamp(1.8rem,3vw,2.6rem); } .p-caps .vsrow{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
.vsrow div{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk-dim); }
.vsrow b{ display:block; font-size:1.5rem; letter-spacing:-0.03em; color:var(--chalk); font-weight:500; margin-top:4px; }
.vsrow b.pro{ background:var(--g-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.big-num{ font-family:var(--mono); font-size:clamp(2.4rem, 4vw, 3.4rem); font-weight:500; letter-spacing:-0.05em; line-height:1; color:var(--chalk); }
.big-num small{ font-size:0.32em; letter-spacing:0.02em; color:var(--grey); margin-left:6px; font-weight:400; }
.delta{ font-family:var(--mono); font-size:0.7rem; color:var(--emerald); background:rgba(52,211,153,0.12); padding:3px 7px; border-radius:6px; margin-left:8px; vertical-align:middle; }
.p-ring .ringrow{ display:flex; align-items:center; gap:18px; } .p-ring .ring{ width:96px; height:96px; flex:none; }
.gauge{ display:flex; height:10px; border-radius:99px; overflow:hidden; gap:2px; }
.gauge i{ display:block; height:100%; } .gauge .g1{ width:33%; background:linear-gradient(90deg,#2dc7d8,#2dc7d8aa); } .gauge .g2{ width:42%; background:linear-gradient(90deg,#34d399,#eac637); } .gauge .g3{ width:25%; background:linear-gradient(90deg,#ff9d2e,#ff6b5e); }
.gauge-wrap{ position:relative; padding-top:10px; }
.gauge-pin{ position:absolute; top:0; left:65%; width:2px; height:22px; background:var(--chalk); box-shadow:0 0 8px rgba(34,34,34,.7); }
.gauge-pin::before{ content:''; position:absolute; top:-2px; left:-4px; width:10px; height:10px; background:var(--chalk); border-radius:50%; }
.gauge-l{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:0.56rem; color:var(--grey); letter-spacing:0.08em; margin-top:7px; text-transform:uppercase; }
.vol-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.legend{ display:flex; gap:14px; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk-dim); }
.legend i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.l1{ background:linear-gradient(180deg,#f8e27a,#ff9d2e); } .l2{ background:linear-gradient(180deg,#5eead4,#2dc7d8); } .l3{ background:linear-gradient(180deg,#6ee7b7,#34d399); }
.vbars{ display:grid; grid-template-columns:repeat(14, minmax(0,1fr)); gap:8px; height:210px; align-items:end; border-bottom:1px solid var(--line); background:repeating-linear-gradient(180deg, transparent 0 51px, rgba(34,34,34,0.05) 51px 52px); }
.vbars div{ display:flex; flex-direction:column-reverse; gap:2px; height:100%; justify-content:flex-start; }
.vbars i{ display:block; border-radius:4px; transform-origin:bottom; animation:barGrow 1s var(--ease) both; }
.vlabels{ display:grid; grid-template-columns:repeat(14, minmax(0,1fr)); gap:8px; font-family:var(--mono); font-size:0.58rem; color:var(--grey); text-align:center; letter-spacing:0.06em; }
.bub{ display:grid; grid-template-columns:78px repeat(7, minmax(0,1fr)); gap:6px 4px; align-items:center; }
.bub .bl{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk-dim); }
.bub .bh{ font-family:var(--mono); font-size:0.58rem; color:var(--grey); text-align:center; letter-spacing:0.06em; }
.bub .c{ display:flex; align-items:center; justify-content:center; height:30px; }
.bub .c i{ display:block; width:calc(var(--s) * 26px); height:calc(var(--s) * 26px); border-radius:50%; background:radial-gradient(circle at 35% 30%, #6ee7b7, #34d399 70%); opacity:.85; }
.bub .c i.m{ background:radial-gradient(circle at 35% 30%, #99f6e4, #2dc7d8 70%); opacity:1; }
.bub .c i.h{ background:radial-gradient(circle at 35% 30%, #fff1a8, #eac637 55%, #ff9d2e); box-shadow:0 0 14px rgba(234,198,55,.55); opacity:1; }
.bub .c i.z{ background:transparent; border:1px dashed rgba(34,34,34,0.14); width:8px; height:8px; opacity:1; }
.prlist{ display:grid; border-top:1px solid var(--line); }
.prlist div{ display:grid; grid-template-columns:minmax(0,1fr) auto 44px; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--chalk-dim); align-items:center; }
.prlist b{ color:var(--chalk); font-weight:500; } .prlist .warn{ color:var(--coral); }
.prlist .chip{ text-align:center; padding:3px 0; font-size:0.54rem; }
.tiers{ display:grid; gap:11px; }
.tier{ display:grid; grid-template-columns:64px repeat(5, minmax(0,1fr)); gap:4px; align-items:center; font-family:var(--mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--chalk-dim); }
.tier i{ height:8px; background:rgba(34,34,34,0.1); border-radius:3px; display:block; }
.tier i.on{ background:linear-gradient(90deg,#34d399,#eac637); box-shadow:0 0 10px -2px rgba(234,198,55,.5); }
.nutri-ring{ display:flex; align-items:center; gap:16px; } .nutri-ring .ring{ width:104px; height:104px; flex:none; }
.mrows{ display:grid; gap:9px; flex:1; min-width:0; }
.mrow{ display:grid; grid-template-columns:70px minmax(0,1fr) 38px; gap:8px; align-items:center; font-family:var(--mono); font-size:0.62rem; color:var(--chalk-dim); letter-spacing:0.05em; text-transform:uppercase; }
.mrow b{ text-align:right; color:var(--chalk); font-weight:500; }
.mbar{ height:6px; background:rgba(34,34,34,0.09); border-radius:99px; overflow:hidden; } .mbar i{ display:block; height:100%; background:linear-gradient(90deg,#34d399,#eac637); border-radius:99px; } .mbar i.bad{ background:linear-gradient(90deg,#ff6b5e,#ff9d2e); }
.callout{ border:1px solid rgba(34,34,34,0.1); border-left:3px solid var(--gold); border-radius:var(--r-md); padding:11px 13px; font-size:0.8rem; color:var(--chalk-dim); line-height:1.5; background:linear-gradient(90deg, rgba(234,198,55,0.08), transparent); }
.callout b{ color:var(--gold-hi); font-weight:600; }
.p-muscle{ background:radial-gradient(360px circle at 50% 70%, rgba(45,199,216,0.12), transparent 62%), var(--glass), var(--bg-card); }
.p-muscle .phc-figure{ background:transparent; padding:0; flex:1; justify-content:center; }
.p-muscle .phc-bodies{ max-width:100%; } .p-muscle .phc-bodies .body-svg{ max-height:none; }
@media (max-width:1000px){
  .bento > .tile, .pb > .tile{ grid-column:span 6 !important; grid-row:auto !important; }
  .c-copy, .c-thread, .pb .p-muscle, .pb .p-volume, .pb .p-bubbles, .pb .p-nutri, .pb .p-caps{ grid-column:1 / -1 !important; }
  .hero-wrap{ grid-template-columns:1fr; } .stage{ padding:10px; border-radius:22px; }
}
@media (max-width:640px){ .bento > .tile, .pb > .tile{ grid-column:1 / -1 !important; } .vbars, .vlabels{ gap:4px; } .hero-form{ flex-direction:column; } }

/* ---------- Coaches band: a soft champagne panel (was a heavy black-bordered section) ---------- */
.paper{ position:relative; background:radial-gradient(700px circle at 100% 0, rgba(197,160,89,0.20), transparent 60%), #F3F0E8; color:var(--chalk); margin-top:96px; padding:88px 0 96px; scroll-margin-top:60px; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.paper .eyebrow{ background:none; -webkit-text-fill-color:var(--gold-deep); color:var(--gold-deep); } .paper .eyebrow::before{ background:var(--gold); box-shadow:none; }
.paper-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:stretch; }
.paper h2{ background:none; -webkit-text-fill-color:var(--chalk); color:var(--chalk); font-size:clamp(2.2rem, 5vw, 3.8rem); line-height:1.08; letter-spacing:-0.035em; margin:18px 0 26px; }
.paper h2 .outline{ -webkit-text-fill-color:var(--gold-deep); color:var(--gold-deep); -webkit-text-stroke:0; }
.paper p.lead{ max-width:46ch; font-size:1.08rem; color:var(--chalk-dim); margin:0 0 28px; }
.paper .btn-primary{ background:var(--gold); color:#222; border-color:var(--gold); box-shadow:0 2px 6px -1px rgba(197,160,89,0.45); }
.paper .btn-primary:hover{ background:var(--gold-hover); color:#1b1b1b; border-color:var(--gold-hover); }
.paper-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:34px; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); }
.paper-sq{ width:36px; height:36px; background:var(--gold); border:2px solid #fff; border-radius:10px; box-shadow:var(--shadow-sm); animation:spinSq 12s linear infinite; }
@keyframes spinSq{ 50%{ transform:rotate(90deg); } 100%{ transform:rotate(90deg); } }
@media (prefers-reduced-motion: reduce){ .paper-sq{ animation:none; } }
.boxes{ display:grid; gap:16px; }
.pbox{ border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px 24px; display:grid; grid-template-columns:48px minmax(0,1fr); gap:6px 14px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.pbox:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gold-line); }
.pbox .n{ font-family:var(--mono); font-size:0.78rem; font-weight:700; padding-top:5px; color:var(--gold-deep); }
.pbox h3{ background:none; -webkit-text-fill-color:var(--chalk); color:var(--chalk); font-size:clamp(1.2rem, 2vw, 1.5rem); line-height:1.2; }
.pbox p{ grid-column:2; margin:6px 0 0; color:var(--chalk-dim); font-size:0.95rem; line-height:1.6; }
@media (max-width:900px){ .paper-grid{ grid-template-columns:1fr; } }

/* ---------- Final CTA band ---------- */
.cta-band{ padding-top:96px; }
.cta-card{ position:relative; overflow:hidden; border-radius:28px; padding:clamp(32px,6vw,72px); text-align:left;
  background:radial-gradient(700px circle at 0 0, rgba(234,198,55,0.42), transparent 60%), radial-gradient(640px circle at 100% 100%, rgba(52,211,153,0.34), transparent 60%), radial-gradient(520px circle at 70% 0, rgba(45,199,216,0.22), transparent 60%), var(--bg-card); border:1px solid rgba(34,34,34,0.12); }
.cta-card::after{ content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(34,34,34,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,34,34,0.05) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(80% 90% at 80% 20%, #000, transparent); mask-image:radial-gradient(80% 90% at 80% 20%, #000, transparent); }
.cta-card > *{ position:relative; z-index:1; }
.cta-card h2{ font-size:clamp(2.3rem, 5.6vw, 4.4rem); line-height:1.08; letter-spacing:-0.035em; margin:14px 0 22px; }
.cta-card p{ color:var(--chalk-dim); max-width:46ch; margin:0 0 26px; }

/* ---------- Register-interest pop-up ---------- */
.ri-overlay{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(2,4,6,0.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transition:opacity .2s ease-out; }
.ri-overlay[hidden]{ display:none; } .ri-overlay.open{ opacity:1; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .ri-overlay{ background:rgba(2,4,6,0.95); } }
.ri-modal{ position:relative; width:100%; max-width:460px; max-height:92vh; overflow-y:auto; background:radial-gradient(420px circle at 100% 0, rgba(234,198,55,0.14), transparent 60%), var(--glass), var(--bg-card); border:1px solid rgba(234,198,55,0.5); border-radius:var(--r-lg); padding:0; transform:translateY(14px) scale(.98); transition:transform .3s var(--ease); box-shadow:0 40px 100px -20px rgba(0,0,0,.9), 0 0 60px -20px rgba(234,198,55,.35); }
.ri-overlay.open .ri-modal{ transform:none; }
.ri-strip{ background:var(--g-gold); color:#17120a; display:flex; justify-content:space-between; padding:9px 56px 9px 20px; font-family:var(--mono); font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
#ri-form-view, #ri-done-view{ padding:24px 24px 22px; }
.ri-close{ position:absolute; top:0; right:0; width:38px; height:36px; border:none; border-radius:0 var(--r-lg) 0 0; background:transparent; color:#17120a; font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s, color .2s; }
.ri-close:hover{ background:#000; color:var(--gold-hi); }
.ri-modal h2{ margin:10px 0 10px; font-size:2rem; line-height:1.12; }
.ri-sub{ color:var(--chalk-dim); margin:0 0 20px; font-size:0.92rem; } .ri-sub b{ color:var(--gold-hi); font-weight:600; }
.ri-modal .field select{ width:100%; background:var(--bg); border:1px solid var(--line-strong); color:var(--chalk); padding:12px; border-radius:var(--r-md); font-size:1rem; }
.ri-modal .field input{ font-size:1rem; border-radius:var(--r-md); }
.ri-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ri-consent{ display:flex; gap:10px; align-items:flex-start; font-size:0.84rem; color:var(--chalk-dim); margin:4px 0 14px; cursor:pointer; }
.ri-consent input{ margin-top:3px; accent-color:var(--gold); flex-shrink:0; }
.ri-consent a{ color:var(--gold-hi); text-decoration:underline; text-underline-offset:3px; }
.ri-error{ color:var(--coral); font-size:0.88rem; margin:0 0 12px; font-family:var(--mono); }
.ri-submit{ width:100%; } .ri-submit[disabled]{ opacity:0.7; cursor:wait; }
.ri-done{ text-align:left; } .ri-done p{ color:var(--chalk-dim); margin:0 0 22px; }
.ri-tick{ width:56px; height:56px; margin:0 0 16px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:1.8rem; font-weight:700; color:#17120a; background:var(--g-gold); box-shadow:0 0 30px rgba(234,198,55,.5); animation:pop .5s var(--ease); }
@keyframes pop{ from{ transform:scale(.4); opacity:0; } }
body.ri-lock{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ .ri-overlay, .ri-modal, .eb-bar i{ transition:none; } .ri-tick{ animation:none; } }
@media (max-width:640px){ .ri-modal h2{ font-size:2.2rem; } #ri-form-view, #ri-done-view{ padding:20px 18px; } }

.fixlist{ display:grid; gap:0; border:1px solid rgba(34,34,34,0.09); border-radius:var(--r-md); overflow:hidden; background:rgba(34,34,34,0.025); }
.fixlist .fl-h{ padding:9px 12px; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); border-bottom:1px solid var(--line); }
.fixlist div{ display:grid; grid-template-columns:minmax(0,1fr) auto 62px; gap:10px; align-items:baseline; padding:9px 12px; border-bottom:1px solid var(--line); font-size:0.82rem; transition:background .2s; }
.fixlist div:last-child{ border-bottom:none; } .fixlist div:hover{ background:rgba(52,211,153,0.08); }
.fixlist b{ font-weight:500; color:var(--chalk); } .fixlist i{ font-style:normal; font-family:var(--mono); font-size:0.66rem; color:var(--grey); } .fixlist u{ text-decoration:none; font-family:var(--mono); font-size:0.74rem; color:var(--emerald); text-align:right; }


/* ---------- v5: live spot counter ---------- */
.spots{ display:flex; align-items:flex-end; gap:14px; }
.spots-num{ font-family:var(--mono); font-size:clamp(3.4rem, 5.4vw, 4.6rem); font-weight:500; letter-spacing:-0.07em; line-height:0.86; background:var(--g-gold); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-variant-numeric:tabular-nums; padding-right:0.04em; }
.spots-meta{ display:grid; gap:3px; padding-bottom:5px; }
.spots-meta b{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:0.74rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--chalk); }
.spots-meta b::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--emerald); animation:livePulse 2s ease-out infinite; }
.spots-meta span{ font-size:0.78rem; color:var(--chalk-dim); }
.segs{ display:grid; grid-template-columns:repeat(20, minmax(0,1fr)); gap:3px; }
.segs i{ height:16px; border-radius:3px; background:linear-gradient(180deg,#f8e27a,#eac637 55%,#ff9d2e); box-shadow:0 0 10px -2px rgba(234,198,55,0.55); transform-origin:50% 100%; animation:segIn .5s var(--ease) both; animation-delay:calc(var(--k) * 0.045s + .7s); transition:background .4s, box-shadow .4s, opacity .4s; }
.segs i.off{ background:rgba(34,34,34,0.08); box-shadow:none; }
@keyframes segIn{ from{ transform:scaleY(.15); opacity:0; } }
.spots.low .spots-num{ background:linear-gradient(135deg,#ffc15c,#ff6b5e); -webkit-background-clip:text; background-clip:text; }
.spots.low ~ .segs i:not(.off){ background:linear-gradient(180deg,#ffc15c,#ff6b5e); box-shadow:0 0 10px -2px rgba(255,107,94,0.6); }
.spots.low .spots-meta b::before{ background:var(--coral); }
.spots-urgent{ display:none; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--coral); margin:-2px 0 0; }
.spots.low ~ .spots-urgent{ display:block; animation:blinkSoft 1.6s ease-in-out infinite; }
@keyframes blinkSoft{ 50%{ opacity:.45; } }
@media (prefers-reduced-motion: reduce){ .segs i{ animation:none; } .spots-meta b::before, .spots.low ~ .spots-urgent{ animation:none; } }

/* Early-bird card: a light that travels around the edge (needs @property; static glow elsewhere) */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.w-pass::before{ padding:1.5px; background:conic-gradient(from var(--ang), rgba(34,34,34,0.10) 0 52%, #f8e27a 76%, #34d399 88%, rgba(34,34,34,0.10) 100%); animation:spinEdge 5s linear infinite; }
@keyframes spinEdge{ to{ --ang:360deg; } }
@media (prefers-reduced-motion: reduce){ .w-pass::before{ animation:none; } }
.w-pass .btn-primary{ animation:ctaBreath 3s ease-in-out infinite; }
@keyframes ctaBreath{ 0%,100%{ box-shadow:0 10px 28px -8px rgba(234,198,55,0.5), inset 0 1px 0 rgba(34,34,34,0.5), inset 0 -1px 0 rgba(0,0,0,0.22); } 50%{ box-shadow:0 14px 40px -6px rgba(234,198,55,0.8), 0 0 0 6px rgba(234,198,55,0.10), inset 0 1px 0 rgba(34,34,34,0.5), inset 0 -1px 0 rgba(0,0,0,0.22); } }
@media (prefers-reduced-motion: reduce){ .w-pass .btn-primary{ animation:none; } }
.logo-mark{ width:auto; height:34px; filter:drop-shadow(0 0 10px rgba(234,198,55,0.25)); transition:transform .4s var(--ease), filter .3s; }
.logo:hover .logo-mark{ transform:rotate(-6deg) scale(1.08); filter:drop-shadow(0 0 14px rgba(234,198,55,0.6)); }

/* ---------- Missing gym strip (under the map) ---------- */
.missing-gym{ display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-top:18px; padding:18px 22px; border-radius:var(--r-lg); border:1px dashed rgba(234,198,55,0.45); background:linear-gradient(90deg, rgba(234,198,55,0.10), rgba(52,211,153,0.05)), var(--bg-card); transition:border-color .3s, box-shadow .35s; }
.missing-gym:hover{ border-color:rgba(234,198,55,0.7); box-shadow:var(--glow); }
.missing-gym h3{ font-size:1.35rem; margin:0 0 4px; }
.missing-gym p{ margin:0; color:var(--chalk-dim); max-width:52ch; }
@media (max-width:640px){ .missing-gym{ padding:16px; } .missing-gym .btn{ width:100%; justify-content:center; text-align:center; } }

/* ---------- Mobile gutters ---------- */
@media (max-width:640px){
  :root{ --pad:20px; }
  .l-wrap, .wrap{ padding-left:var(--pad); padding-right:var(--pad); }
  .postcode-form{ width:100%; } .postcode-form input{ flex:1; width:auto; min-width:0; }
}

/* ==========================================================================
   Homepage meals teaser (index.html #meals). Recipe card styles live in meals.css.
   ========================================================================== */
.meals-teaser .mt-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.meals-teaser .mt-tab{ padding:9px 14px; border-radius:11px; border:1px solid var(--line-strong); background:rgba(34,34,34,0.03); color:var(--chalk-dim); font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; cursor:pointer; transition:all .2s; }
.meals-teaser .mt-tab:hover{ color:var(--chalk); border-color:rgba(234,198,55,0.4); }
.meals-teaser .mt-tab[aria-selected="true"]{ background:var(--g-gold); color:#17120a; border-color:transparent; box-shadow:0 0 16px -2px rgba(234,198,55,0.55); }
.meals-teaser .mt-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.meals-teaser .m-card{ cursor:default; }
.meals-teaser .mt-foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:20px; }
.meals-teaser .mt-points{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:0; padding:0; list-style:none; }
.meals-teaser .mt-points li{ display:flex; align-items:center; gap:8px; color:var(--chalk-dim); font-size:0.88rem; }
.meals-teaser .mt-points li::before{ content:''; width:7px; height:7px; border-radius:2px; background:var(--g-gold); box-shadow:0 0 10px rgba(234,198,55,0.6); }
.meals-teaser .mt-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:1000px){ .meals-teaser .mt-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .meals-teaser .mt-grid{ gap:10px; } .meals-teaser .mt-actions{ width:100%; } .meals-teaser .mt-actions .btn{ flex:1; justify-content:center; text-align:center; } }
.meals-teaser .mt-fallback{ color:var(--chalk-dim); } .meals-teaser .mt-fallback a{ color:var(--gold-hi); }