/* Gymco landing page (gymcoapp.com/). From docs/superpowers/designs/landing/landing.css; site additions at the end.
   Tokens from the spec: page #0A0B09 · band #111315 · card #15171A · raised #1F2226 ·
   lines #2A2E33 / #3A3F45 · text #F5F7F0 / #C9CEC4 / #8D948A · lime #C6F432 · lime ink #D9FF5C ·
   good #7CF0B0 · protein #4CC9F0 · carbs #FF9F43 · fat #C084FC */
.lp{
  --page:#0a0b09; --band:#111315; --card:#15171a; --raised:#1f2226; --line:#2a2e33; --line-2:#3a3f45;
  --t1:#f5f7f0; --t2:#c9cec4; --t3:#8d948a; --lime:#c6f432; --lime-ink:#d9ff5c; --good:#7cf0b0;
  --p:#4cc9f0; --c:#ff9f43; --f:#c084fc;
  --glow:linear-gradient(120deg,#e4ff6a 0%,#b6f02a 45%,#5ee4a0 100%);
  background:var(--page); color:var(--t1);
  font-family:"Urbanist",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.55; overflow:hidden; position:relative;
}
.lp *{box-sizing:border-box}
.lp a{color:inherit;text-decoration:none}
.lp em,.lp .acc{font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400; color:var(--lime); letter-spacing:-.005em}
.lp .wrap{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}
.lp .num{font-variant-numeric:tabular-nums}

/* buttons */
.lp .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px;
  border-radius:999px; font-weight:700; font-size:16px; white-space:nowrap; border:0; cursor:pointer; font-family:inherit}
.lp .btn-glow{background:var(--glow); color:#0a0b09; box-shadow:0 14px 34px -14px rgba(182,240,42,.85), inset 0 1px 0 rgba(255,255,255,.5)}
.lp .btn-glow:hover{filter:brightness(1.05)}
.lp .btn-line{background:rgba(255,255,255,.04); color:var(--t1); box-shadow:inset 0 0 0 1px var(--line-2)}
.lp .btn-line:hover{box-shadow:inset 0 0 0 1px var(--t3)}
.lp .btn-sm{min-height:40px; padding:0 18px; font-size:14px}
.lp .btn .ar{width:30px; height:30px; margin-right:-12px; border-radius:999px; background:#0a0b09; color:var(--lime); display:flex; align-items:center; justify-content:center}
.lp :focus-visible{outline:2px solid var(--lime); outline-offset:3px}

/* header */
.lp .hdr{position:sticky; top:0; z-index:20; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  background:rgba(10,11,9,.72); border-bottom:1px solid rgba(255,255,255,.05)}
.lp .hdr .wrap{display:flex; align-items:center; gap:24px; height:68px}
.lp .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.02em}
.lp .logo img{width:30px; height:30px}
.lp .nav{display:none; gap:28px; font-size:15px; color:var(--t2); margin-left:12px}
.lp .nav a:hover{color:var(--t1)}
.lp .lang{display:none; gap:2px; padding:3px; border-radius:999px; background:var(--card); font-size:13px; font-weight:600; margin-left:auto}
.lp .lang span{padding:5px 11px; border-radius:999px; color:var(--t3)}
.lp .lang span.on{background:var(--raised); color:var(--t1)}
.lp .hdr .btn{margin-left:auto}

/* hero */
.lp .hero{position:relative; padding:56px 0 40px; isolation:isolate}
.lp .hero-bg{position:absolute; inset:0; z-index:-2; overflow:hidden}
.lp .hero-bg img{position:absolute; right:-10%; top:0; height:100%; width:auto; max-width:none; opacity:.55;
  -webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 75%); mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 75%)}
.lp .aura{position:absolute; z-index:-1; border-radius:999px; filter:blur(80px); pointer-events:none}
.lp .aura.a1{width:520px; height:520px; right:-120px; top:-80px; background:rgba(198,244,50,.18)}
.lp .aura.a2{width:420px; height:420px; left:-180px; top:260px; background:rgba(94,228,160,.10)}
.lp .hero-grid{display:grid; gap:48px; align-items:center}
.lp .pill-note{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--line); font-size:13px; color:var(--t2); font-weight:600}
.lp .pill-note b{padding:3px 10px; border-radius:999px; background:var(--lime); color:#0a0b09; font-size:12px}
.lp h1{margin:22px 0 18px; font-size:44px; line-height:1.0; font-weight:800; letter-spacing:-.04em}
.lp h1 em{font-size:1.1em}
.lp .lede{margin:0 0 30px; font-size:19px; color:var(--t2); max-width:30ch}
.lp .cta-row{display:flex; flex-wrap:wrap; gap:12px}
.lp .meta{margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:var(--t3)}
.lp .meta span{display:inline-flex; align-items:center; gap:7px}
.lp .meta i{width:6px; height:6px; border-radius:999px; background:var(--lime); box-shadow:0 0 10px var(--lime)}

/* phone frame */
.lp .stage{position:relative; display:flex; justify-content:center; padding:20px 0 30px}
.lp .phone{position:relative; width:300px; height:620px; border-radius:52px; padding:10px; background:#050605;
  box-shadow:0 0 0 1.5px #2a2e33, 0 0 0 7px #0d0f0c, 0 0 0 8.5px #2a2e33, 0 60px 120px -40px rgba(198,244,50,.45), 0 40px 80px -30px #000}
.lp .phone .scr{position:relative; height:100%; border-radius:42px; overflow:hidden; background:#0a0b09; padding:46px 16px 16px;
  background-image:radial-gradient(90% 40% at 85% -5%, rgba(198,244,50,.18), transparent 70%)}
.lp .phone .isl{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:96px; height:28px; border-radius:999px; background:#000; z-index:3}
.lp .phone.tilt{transform:perspective(1400px) rotateY(-14deg) rotateX(4deg)}
.lp .ui-h{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.lp .ui-h b{font-size:22px; letter-spacing:-.03em}
.lp .ui-h small{display:block; font-size:11px; color:var(--t3)}
.lp .ui-card{background:var(--card); border-radius:22px; padding:14px; margin-bottom:10px}
.lp .ui-ring{display:flex; align-items:center; gap:14px}
.lp .mbar{height:5px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:4px}
.lp .mbar i{display:block; height:100%; border-radius:999px}
.lp .ui-lab{display:flex; justify-content:space-between; font-size:11px; color:var(--t3)}
.lp .ui-lab b{color:var(--t1); font-weight:700}
.lp .wo{background:linear-gradient(165deg,#1c2410 0%,#15171a 65%); box-shadow:inset 0 0 0 1px rgba(198,244,50,.16)}
.lp .tag-l{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px; background:var(--lime); color:#0a0b09; font-size:10.5px; font-weight:800}
.lp .chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px}
.lp .chips span{height:22px; padding:0 9px; border-radius:999px; background:rgba(255,255,255,.07); color:var(--t2); font-size:10.5px; font-weight:600; display:inline-flex; align-items:center}
.lp .mini-btn{margin-top:10px; height:38px; border-radius:999px; background:var(--glow); color:#0a0b09; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center}

/* holograms floating around the phone */
.lp .holo{position:absolute; z-index:4; padding:12px 14px; border-radius:18px; font-size:13px;
  background:linear-gradient(140deg,rgba(198,244,50,.16),rgba(94,228,160,.06) 60%,rgba(255,255,255,.02));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(198,244,50,.32), 0 0 30px -6px rgba(198,244,50,.45), 0 20px 40px -20px #000;
  animation:float 6s ease-in-out infinite}
.lp .holo small{display:block; color:var(--t3); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.lp .holo b{font-size:20px; letter-spacing:-.02em}
.lp .holo.h1{left:-6px; top:90px}
.lp .holo.h2{right:-10px; top:250px; animation-delay:-2s}
.lp .holo.h3{left:6px; bottom:70px; animation-delay:-4s}
.lp .scan{position:absolute; left:50%; top:30px; width:360px; height:560px; transform:translateX(-50%); z-index:-1; border-radius:60px;
  background:repeating-linear-gradient(0deg, rgba(198,244,50,.07) 0 1px, transparent 1px 7px);
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent); mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.lp .orbit{position:absolute; left:50%; top:50%; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:999px; z-index:-1;
  border:1px dashed rgba(198,244,50,.18); animation:spin 60s linear infinite}
.lp .orbit::after{content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:999px; background:var(--lime); box-shadow:0 0 16px var(--lime)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* proof strip */
.lp .proof{border-block:1px solid rgba(255,255,255,.06); background:var(--band)}
.lp .proof .wrap{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; padding:0}
.lp .proof div.f{padding:26px 20px; display:flex; flex-direction:column; gap:2px}
.lp .proof b{font-size:40px; line-height:1; letter-spacing:-.04em; font-weight:800}
.lp .proof b em{font-size:1.05em}
.lp .proof span{font-size:14px; color:var(--t3)}

/* sections */
.lp .sec{padding:96px 0; position:relative}
.lp .sec.band{background:var(--band)}
.lp .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lime-ink)}
.lp .eyebrow::before{content:""; width:18px; height:1.5px; background:var(--lime)}
.lp h2{margin:14px 0 14px; font-size:36px; line-height:1.05; letter-spacing:-.035em; font-weight:800}
.lp h2 em{font-size:1.12em}
.lp .sub{margin:0; color:var(--t2); max-width:52ch; font-size:18px}
.lp .head{margin-bottom:44px}
.lp .grid2{display:grid; gap:20px}
.lp .card{background:var(--card); border-radius:24px; padding:24px; position:relative; overflow:hidden}
.lp .card h3{margin:0 0 6px; font-size:20px; letter-spacing:-.02em}
.lp .card p{margin:0; color:var(--t2); font-size:15px}
.lp .muted{color:var(--t3); font-size:14px}

/* food */
.lp .modes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.lp .mode{background:var(--card); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:12px; min-height:132px; transition:background .2s}
.lp .mode:hover{background:var(--raised)}
.lp .mode .ic{width:44px; height:44px; border-radius:14px; background:rgba(198,244,50,.1); color:var(--lime); display:flex; align-items:center; justify-content:center}
.lp .mode b{font-size:17px}
.lp .mode span{font-size:13.5px; color:var(--t3); line-height:1.4}
.lp .mode.hot{box-shadow:inset 0 0 0 1.5px var(--lime)}
.lp .parse{background:var(--card); border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:12px}
.lp .typed{padding:16px 18px; border-radius:18px; background:#0a0b09; box-shadow:inset 0 0 0 1px var(--line-2); font-size:16px; color:var(--t1); position:relative}
.lp .typed .caret{display:inline-block; width:2px; height:19px; background:var(--lime); vertical-align:-3px; margin-left:2px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lp .prow{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:var(--raised); animation:rowin .6s cubic-bezier(.22,1,.36,1) backwards}
.lp .prow:nth-child(3){animation-delay:.25s}.lp .prow:nth-child(4){animation-delay:.5s}
@keyframes rowin{from{opacity:0; transform:translateY(8px)}}
.lp .prow .g{margin-left:auto; text-align:right; font-size:13px; color:var(--t3)}
.lp .prow .g b{display:block; color:var(--t1); font-size:15px}
.lp .dot{width:8px; height:8px; border-radius:999px; flex:0 0 auto}
.lp .ai{height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:800; background:rgba(192,132,252,.16); color:var(--f); display:inline-flex; align-items:center}
.lp .imgcard{border-radius:24px; overflow:hidden; position:relative; background:var(--card); min-height:280px}
.lp .imgcard img{width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0}
.lp .imgcard .cap{position:absolute; left:16px; right:16px; bottom:16px; padding:12px 14px; border-radius:16px; font-size:14px;
  background:rgba(10,11,9,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* train */
.lp .tpl{display:grid; gap:12px}
.lp .tcard{background:var(--card); border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:14px}
.lp .tcard .top{display:flex; align-items:center; justify-content:space-between}
.lp .tcard .days{font-size:13px; font-weight:700; color:#0a0b09; background:var(--lime); padding:4px 10px; border-radius:999px}
.lp .tcard ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--t2)}
.lp .tcard li{display:flex; justify-content:space-between; padding-bottom:8px; border-bottom:1px solid var(--line)}
.lp .tcard li:last-child{border:0; padding:0}
.lp .week{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:22px 0 14px}
.lp .wd{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; color:var(--t3); font-weight:600}
.lp .wd .c{width:100%; max-width:54px; aspect-ratio:1; border-radius:16px; background:var(--raised); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--t2)}
.lp .wd .c.done{background:var(--lime); color:#0a0b09}
.lp .wd .c.miss{background:transparent; box-shadow:inset 0 0 0 1.5px dashed; border:1.5px dashed #ff6b6b; color:#ff9a9a}
.lp .wd .c.moved{background:transparent; border:1.5px solid var(--lime); color:var(--lime); box-shadow:0 0 18px -4px var(--lime)}
.lp .wd .c.rest{background:transparent; border:1px solid var(--line-2); color:var(--t3)}
.lp .setrow{display:grid; grid-template-columns:30px 1fr 1fr 1fr 34px; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; font-size:14px}
.lp .setrow.hd{color:var(--t3); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding-block:0}
.lp .setrow.ok{background:rgba(198,244,50,.07)}
.lp .tick{width:28px; height:28px; border-radius:999px; background:var(--lime); color:#0a0b09; display:flex; align-items:center; justify-content:center}
.lp .tick.off{background:var(--raised); color:var(--t3)}
.lp .rest{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:#f5f7f0; color:#0a0b09; margin-top:8px}
.lp .rest b{font-size:22px; letter-spacing:-.02em}
.lp .rest .bar{flex:1; height:5px; border-radius:999px; background:rgba(10,11,9,.14); overflow:hidden}
.lp .rest .bar i{display:block; width:62%; height:100%; background:#0a0b09; border-radius:999px}
.lp .flagrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.lp .flag{height:32px; padding:0 13px; border-radius:999px; background:var(--raised); color:var(--t2); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px}

/* coaching */
.lp .chart{background:var(--card); border-radius:24px; padding:22px}
.lp .rules{display:grid; gap:12px}
.lp .rule{display:flex; gap:16px; align-items:flex-start; background:var(--card); border-radius:20px; padding:18px 20px}
.lp .rule .n{font-size:30px; font-weight:800; letter-spacing:-.04em; color:var(--lime); line-height:1; min-width:82px}
.lp .rule b{display:block; font-size:16px}
.lp .rule span{font-size:14px; color:var(--t3)}
.lp .checkin{background:linear-gradient(160deg,rgba(198,244,50,.12),rgba(21,23,26,1) 55%); box-shadow:inset 0 0 0 1px rgba(198,244,50,.2)}

/* streak */
.lp .medals{position:relative; display:flex; justify-content:center; align-items:center; gap:18px; padding:30px 0; perspective:900px}
.lp .medal{filter:drop-shadow(0 24px 30px rgba(0,0,0,.6)); animation:turn 8s ease-in-out infinite}
.lp .medal:nth-child(2){animation-delay:-2.6s; transform:translateY(-18px)}
.lp .medal:nth-child(3){animation-delay:-5.2s}
@keyframes turn{0%,100%{transform:rotateY(-18deg) translateY(0)}50%{transform:rotateY(18deg) translateY(-12px)}}
.lp .streak-lines{display:grid; gap:12px}

/* privacy */
.lp .priv{display:grid; gap:16px}
.lp .plist{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.lp .plist li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--t2)}
.lp .plist .ck{width:24px; height:24px; flex:0 0 auto; border-radius:999px; background:rgba(124,240,176,.14); color:var(--good); display:flex; align-items:center; justify-content:center; margin-top:1px}
.lp .plist .x{background:rgba(255,107,107,.12); color:#ff8f8f}
.lp .never{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.lp .never span{height:40px; padding:0 18px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  background:rgba(255,107,107,.08); color:#ffb3b3; box-shadow:inset 0 0 0 1px rgba(255,107,107,.25)}
.lp .never span s{text-decoration-thickness:2px}

/* plans */
.lp .banner{display:flex; gap:12px; align-items:center; padding:14px 18px; border-radius:18px; background:rgba(198,244,50,.08); box-shadow:inset 0 0 0 1px rgba(198,244,50,.3); color:var(--t1); font-size:15px; margin-bottom:22px}
.lp .banner i{width:10px; height:10px; border-radius:999px; background:var(--lime); box-shadow:0 0 14px var(--lime); flex:0 0 auto}
.lp .toggle{display:inline-flex; padding:4px; border-radius:999px; background:var(--card); gap:2px; margin-bottom:22px}
.lp .toggle button{height:38px; padding:0 18px; border-radius:999px; border:0; background:none; color:var(--t3); font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.lp .toggle button.on{background:var(--raised); color:var(--t1)}
.lp .toggle .save{color:var(--lime-ink); font-size:12px; margin-left:4px}
.lp .plans{display:grid; gap:16px}
.lp .plan{position:relative; border-radius:28px; padding:2px; background:var(--line)}
.lp .plan.pro{background:linear-gradient(135deg,#e4ff6a,#5ee4a0); box-shadow:0 30px 70px -30px rgba(182,240,42,.7)}
.lp .plan.life{background:linear-gradient(135deg,#4cc9f0,#8b7cf6); box-shadow:0 30px 70px -36px rgba(139,124,246,.6)}
.lp .plan .in{border-radius:26px; background:var(--card); padding:26px; height:100%; display:flex; flex-direction:column; gap:16px}
.lp .plan .nm{display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:18px}
.lp .plan .pr{font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1}
.lp .plan .pr small{font-size:15px; color:var(--t3); font-weight:600; letter-spacing:0}
.lp .plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--t2); flex:1}
.lp .plan li{display:flex; gap:10px}
.lp .plan li::before{content:"✓"; color:var(--good); font-weight:800}
.lp .plan .badge{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--glow); color:#0a0b09}
.lp .plan .btn{width:100%}

/* faq */
.lp .faq{display:flex; flex-direction:column; gap:10px; width:100%}
.lp details{background:var(--card); border-radius:20px; padding:0 22px}
.lp details[open]{background:var(--raised)}
.lp summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-weight:700; font-size:17px}
.lp summary::-webkit-details-marker{display:none}
.lp summary::after{content:"+"; font-size:24px; color:var(--lime); font-weight:400; transition:transform .2s}
.lp details[open] summary::after{transform:rotate(45deg)}
.lp details p{margin:0; padding:0 0 20px; color:var(--t2); font-size:15.5px}

/* final */
.lp .final{position:relative; text-align:center; padding:120px 0; overflow:hidden; isolation:isolate}
.lp .final .aura{left:50%; top:50%; width:700px; height:400px; margin:-200px 0 0 -350px; background:rgba(198,244,50,.18)}
.lp .final h2{font-size:52px}
.lp .stores{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:30px 0 26px}
.lp .store{display:flex; align-items:center; gap:12px; height:60px; padding:0 22px; border-radius:18px; background:#f5f7f0; color:#0a0b09}
.lp .store small{display:block; font-size:11px; font-weight:600; opacity:.7}
.lp .store b{display:block; font-size:17px; line-height:1.1}
.lp .email{display:flex; gap:8px; max-width:460px; margin:0 auto; padding:6px; border-radius:999px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line-2)}
.lp .email input{flex:1; min-width:0; background:none; border:0; outline:0; color:var(--t1); font:inherit; font-size:16px; padding:0 16px}
.lp .email input::placeholder{color:var(--t3)}
.lp .consent{margin-top:12px; font-size:13px; color:var(--t3)}
.lp .consent a{color:var(--lime-ink); text-decoration:underline}

/* footer */
.lp .ftr{background:var(--band); padding:56px 0 28px; border-top:1px solid rgba(255,255,255,.05)}
.lp .ftr-grid{display:grid; gap:28px}
.lp .ftr h4{margin:0 0 12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3)}
.lp .ftr ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:15px; color:var(--t2)}
.lp .wordmark{display:flex; align-items:baseline; justify-content:center; font-size:22vw; line-height:.8; font-weight:800; letter-spacing:-.06em; margin-top:40px; padding-bottom:.14em; color:#030403; user-select:none}
/* the G of the wordmark is the Gymco mark, in the same black */
.lp .wordmark .wg{width:.74em; height:.74em; flex:0 0 auto; margin-right:.02em; background:#030403; align-self:center; transform:translateY(.04em);
  -webkit-mask:url(/img/landing/logo-mark.png) center/contain no-repeat; mask:url(/img/landing/logo-mark.png) center/contain no-repeat}
.lp .legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:var(--t3); margin-top:20px}

/* desktop */
@media (min-width:900px){
  .lp .wrap{padding:0 40px}
  .lp .nav,.lp .lang{display:flex}
  .lp .hdr .btn{margin-left:0}
  .lp .hero{padding:90px 0 70px}
  .lp .hero-grid{grid-template-columns:1.05fr .95fr}
  .lp h1{font-size:76px}
  .lp .lede{font-size:21px}
  .lp .phone{width:330px; height:680px}
  .lp .proof .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lp .proof div.f{padding:34px 40px}
  .lp .sec{padding:130px 0}
  .lp h2{font-size:52px}
  .lp .grid2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
  .lp .modes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp .tpl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp .priv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp .ftr-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .lp .wordmark{font-size:260px}
  .lp .final h2{font-size:84px}
  .lp .split{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch}
}
@media (max-width:899px){ .lp .split{display:flex; flex-direction:column; gap:20px} .lp .phone.tilt{transform:none} }
@media (prefers-reduced-motion:reduce){ .lp *{animation:none !important} }
/* the Gymco G, filled with the glow */
.lp .vl{display:inline-block; flex:0 0 auto; width:30px; height:30px; background:var(--glow);
  -webkit-mask:url(/img/landing/logo-mark.png) center/contain no-repeat; mask:url(/img/landing/logo-mark.png) center/contain no-repeat}
.lp .vl.big{width:56px; height:56px}
/* image slots: a lit, gridded stage until a photo is dropped in */
.lp .imgcard{background:
  radial-gradient(60% 70% at 70% 30%, rgba(198,244,50,.16), transparent 70%),
  repeating-linear-gradient(0deg, rgba(198,244,50,.05) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(90deg, rgba(198,244,50,.05) 0 1px, transparent 1px 22px), #111315}
@media (max-width:899px){
  .lp .hero-bg img{opacity:.22; right:-55%}
  .lp .orbit{width:380px; height:380px; margin:-190px 0 0 -190px}
}
/* templates: which days you train, at a glance */
.lp .dots{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.lp .dots span{aspect-ratio:1; border-radius:12px; background:var(--raised); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--t3)}
.lp .dots span.on{background:var(--lime); color:#0a0b09}
.lp .dots b{font-weight:800}
.lp .tl{margin:0; font-size:15px; color:var(--t2); line-height:1.5}
.lp .tl b{display:block; color:var(--t1); margin-top:4px}
.lp .legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin:16px 0 0; font-size:14px; color:var(--t3)}
.lp .legend span{display:inline-flex; align-items:center; gap:8px}
.lp .legend i{width:14px; height:14px; border-radius:5px; background:var(--raised)}
.lp .legend i.on{background:var(--lime)}
/* the sliding week, plan vs what happens */
.lp .slide{display:flex; flex-direction:column; gap:8px; margin:22px 0 16px; overflow-x:auto}
.lp .slide .srow{display:grid; grid-template-columns:96px repeat(7,minmax(44px,1fr)); gap:6px; align-items:center; min-width:430px}
.lp .slide .lbl{font-size:12px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.06em}
.lp .slide .c{height:40px; border-radius:12px; background:var(--raised); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--t2)}
.lp .slide .c.r{background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--t3); font-weight:600}
.lp .slide .c.x{box-shadow:inset 0 0 0 1.5px var(--lime); color:var(--lime)}
.lp .slide .c.d{background:rgba(198,244,50,.16); color:var(--lime-ink)}
.lp .slide .c.m{background:transparent; border:1.5px dashed #ff8f8f; color:#ff9a9a}
.lp .slide .c.v{background:var(--lime); color:#0a0b09; box-shadow:0 0 18px -4px var(--lime)}
.lp .slide .days span{font-size:12px; color:var(--t3); text-align:center}
.lp .steps{margin:0 0 18px; padding:0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:8px; font-size:15px; color:var(--t2)}
.lp .steps li{counter-increment:s; display:flex; gap:10px; align-items:baseline}
.lp .steps li::before{content:counter(s); flex:0 0 auto; width:22px; height:22px; border-radius:999px; background:var(--lime); color:#0a0b09; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; transform:translateY(-1px)}
.lp .steps b{color:var(--t1)}

.lp .never .nl{background:none; box-shadow:none; color:var(--t1); padding-left:0; font-size:16px}

/* hero phone: the real Today screen */
.lp .phone .scr.shot{padding:0; background:#0a0b09}
.lp .phone .scr.shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:top}
.lp .phone .scr.shot + .isl, .lp .phone:has(.scr.shot) .isl{display:none}
/* train, simplified: one number, one name, one line */
.lp .tcard{gap:8px}
.lp .tcard .big{font-size:60px; font-weight:800; line-height:1; letter-spacing:-.05em; color:var(--lime); display:flex; align-items:baseline; gap:10px}
.lp .tcard .big small{font-size:15px; font-weight:600; letter-spacing:0; color:var(--t3)}
.lp .tcard h3{margin:10px 0 0}
.lp .strip{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:22px 0 18px}
.lp .strip div{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; color:var(--t3)}
.lp .strip b{width:100%; height:46px; border-radius:12px; background:var(--raised); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--t2)}
.lp .strip .done b{background:rgba(198,244,50,.14); color:var(--lime-ink)}
.lp .strip .miss b{background:transparent; border:1.5px dashed #ff8f8f; color:#ff9a9a; font-size:15px}
.lp .strip .moved b{background:var(--lime); color:#0a0b09; box-shadow:0 0 18px -4px var(--lime)}
.lp .strip .moved{color:var(--t1); font-weight:700}
.lp .strip .off b{background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--t3); font-weight:600}

/* train: hero-style split, copy left, bento of app cards right */
.lp .tsec{background:#000}
.lp .tgrid{display:grid; gap:48px; align-items:center}
.lp .tcopy h2{font-size:clamp(44px,5.4vw,76px); line-height:1.02; letter-spacing:-.04em; margin:22px 0 18px}
.lp .tcopy .sub{max-width:30ch; font-size:19px; color:var(--t3); margin:0 0 32px}
.lp .tbadge{width:64px; height:64px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#0d0f0c; box-shadow:inset 0 0 0 1px var(--line), 0 0 40px -10px rgba(198,244,50,.5)}
.lp .tbadge .vl{width:34px; height:34px}
.lp .bento{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.lp .bx{position:relative; background:linear-gradient(180deg,#121411,#0b0c0a); border-radius:26px; padding:22px; box-shadow:inset 0 0 0 1px #1d2024; display:flex; flex-direction:column; gap:14px; overflow:hidden; min-width:0}
.lp .bx.wide{grid-column:1/-1; padding-bottom:10px; background:radial-gradient(60% 80% at 45% -20%, rgba(198,244,50,.16), transparent 70%), linear-gradient(180deg,#121411,#0b0c0a)}
.lp .bx-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.lp .bl{font-size:13px; color:var(--t3); font-weight:600}
.lp .bbig{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.1; margin-top:4px; display:flex; align-items:center; gap:10px}
.lp .dot{width:12px; height:12px; border-radius:999px; background:var(--lime); box-shadow:0 0 12px var(--lime); flex:0 0 auto}
.lp .rng{display:flex; gap:6px}
.lp .rng span{height:30px; padding:0 10px; border-radius:10px; display:flex; align-items:center; font-size:11px; font-weight:700; color:var(--t3); background:#16181b}
.lp .rng span.on{background:var(--raised); color:var(--t1)}
.lp .tchart{width:100%; height:190px; display:block}
.lp .tip{position:absolute; right:22%; top:92px; display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:12px; background:rgba(20,22,25,.9); box-shadow:inset 0 0 0 1px var(--line); font-size:12px; z-index:2}
.lp .tip .vl{width:16px; height:16px}
.lp .tip small{color:var(--good); font-weight:700}
.lp .actbar{display:grid; grid-template-columns:repeat(3,1fr); height:44px; border-radius:14px; background:var(--glow); color:#0a0b09; font-size:13px; font-weight:800; align-items:center; text-align:center; box-shadow:0 14px 30px -16px rgba(182,240,42,.8)}
.lp .actbar span+span{border-left:1px solid rgba(10,11,9,.15)}
.lp .lift{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding-top:14px; border-top:1px solid #1d2024; font-size:15px}
.lp .lift small{display:block; font-size:12px; color:var(--t3); margin-top:2px}
.lp .lift .r{text-align:right}
.lp .lift .up{color:var(--good)}
.lp .stat{display:flex; flex-direction:column; gap:8px}
.lp .snum{font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1; display:flex; align-items:center; gap:10px}
.lp .stat .chip{align-self:flex-start; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:rgba(198,244,50,.12); color:var(--lime-ink)}
.lp .stat small{font-size:13px; color:var(--t3)}
.lp .ticks{display:grid; grid-template-columns:repeat(32,1fr); gap:3px; height:30px; margin:6px 0}
.lp .ticks i{border-radius:2px; background:#1f2226}
.lp .ticks i.on{background:var(--lime)}
@media (min-width:900px){ .lp .tgrid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px} }
@media (max-width:899px){ .lp .bento{grid-template-columns:1fr} .lp .tip{right:16px; top:84px} .lp .rng span{padding:0 7px} }
.lp .lift b{white-space:nowrap}
@media (max-width:899px){ .lp .bx-top .rng{display:none} .lp .bbig{font-size:26px; white-space:nowrap} .lp .tip{top:96px} }

/* hero: centred copy, horizon arc, product frame below */
.lp .hero2{position:relative; padding:72px 0 0; isolation:isolate; overflow:hidden;
  background:radial-gradient(50% 40% at 18% 0%, rgba(255,255,255,.06), transparent 70%), #0a0b09}
.lp .h2c{text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2}
.lp .hero2 .tag{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--t2); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.lp .hero2 .tag i{width:7px; height:7px; border-radius:999px; background:var(--lime); box-shadow:0 0 10px var(--lime)}
.lp .hero2 h1{font-size:clamp(46px,7vw,96px); line-height:1; letter-spacing:-.045em; font-weight:800; margin:22px 0 20px}
.lp .hero2 .lede{max-width:46ch; margin:0 auto 32px; font-size:18px; color:var(--t3)}
.lp .hero2 .cta-row{justify-content:center}
.lp .btn-dark{background:#151714; color:var(--t1); box-shadow:inset 0 0 0 1px #2a2e33, 0 10px 30px -12px #000}
.lp .arc{position:absolute; left:50%; top:470px; width:1500px; height:1500px; margin-left:-750px; border-radius:999px; z-index:0; pointer-events:none;
  border-top:2px solid rgba(198,244,50,.75); box-shadow:0 -30px 90px -20px rgba(198,244,50,.55), inset 0 30px 80px -30px rgba(198,244,50,.25);
  -webkit-mask:linear-gradient(90deg,transparent 18%,#000 40%,#000 60%,transparent 82%); mask:linear-gradient(90deg,transparent 18%,#000 40%,#000 60%,transparent 82%)}
.lp .dash{position:relative; z-index:2; margin:72px auto 0; max-width:1120px; border-radius:30px 30px 0 0; padding:16px 18px 0; height:500px; overflow:hidden;
  background:linear-gradient(180deg,#1a1d18,#0e100d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 -20px 80px -30px rgba(198,244,50,.35);
  -webkit-mask:linear-gradient(180deg,#000 72%,transparent); mask:linear-gradient(180deg,#000 72%,transparent)}
.lp .d-top{display:flex; align-items:center; gap:16px}
.lp .d-logo{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 8px; border-radius:999px; background:#131512; font-weight:800; font-size:14px}
.lp .d-logo .vl{width:24px; height:24px}
.lp .d-tabs{margin:0 auto; display:flex; gap:2px; padding:4px; border-radius:999px; background:#131512}
.lp .d-tabs span{height:32px; padding:0 16px; border-radius:999px; display:flex; align-items:center; font-size:13px; color:var(--t3); font-weight:600}
.lp .d-tabs span.on{background:#22262a; color:var(--t1)}
.lp .d-me{display:flex; align-items:center; gap:8px}
.lp .d-me b{width:28px; height:28px; border-radius:999px; background:var(--glow); color:#0a0b09; font-size:12px; display:flex; align-items:center; justify-content:center}
.lp .d-me .av{width:36px; height:36px; border-radius:999px; background:#22262a; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px}
.lp .d-hi{padding:26px 6px 18px}
.lp .d-hi h3{margin:0; font-size:30px; letter-spacing:-.03em}
.lp .d-hi p{margin:4px 0 0; font-size:14px; color:var(--t3)}
.lp .d-grid{display:grid; grid-template-columns:1.1fr 1fr 1.1fr; gap:14px}
.lp .d-card{background:rgba(255,255,255,.03); border-radius:22px; padding:18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.lp .d-row{display:flex; justify-content:space-between; align-items:center}
.lp .d-l{font-size:13px; color:var(--t3); font-weight:600}
.lp .d-pill{font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; background:#22262a; color:var(--t2)}
.lp .d-ring{display:flex; gap:14px; align-items:center; margin:14px 0}
.lp .d-mac{flex:1; display:flex; flex-direction:column; gap:9px; font-size:12px}
.lp .d-mac div{display:grid; grid-template-columns:1fr auto; gap:4px}
.lp .d-mac span{color:var(--t3)} .lp .d-mac b{font-size:12px}
.lp .d-mac i{grid-column:1/-1; height:5px; border-radius:9px; background:#22262a; overflow:hidden} .lp .d-mac u{display:block; height:100%; border-radius:9px}
.lp .d-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.lp .d-btns span{height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--t2); background:#1a1d1a}
.lp .d-btns .g{background:#d8dbd2; color:#0a0b09}
.lp .d-tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.lp .d-tile{border-radius:20px; padding:16px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); display:flex; flex-direction:column; gap:4px}
.lp .d-tile b{font-size:26px; letter-spacing:-.03em; margin-top:10px}
.lp .d-tile small{font-size:11px; color:var(--t3)} .lp .d-tile small.up{color:var(--good)}
.lp .d-tile.hot{background:var(--glow); color:#0a0b09; box-shadow:0 18px 40px -18px rgba(182,240,42,.8)}
.lp .d-tile.hot .d-l, .lp .d-tile.hot small{color:rgba(10,11,9,.65)}
.lp .d-key{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--t3)}
.lp .d-key i{width:8px; height:8px; border-radius:2px; background:var(--lime); margin-left:6px} .lp .d-key i.o{background:repeating-linear-gradient(135deg,#ff9f43 0 2px,#7a4a1c 2px 4px)}
.lp .wbars{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; height:190px; margin-top:16px}
.lp .wb{display:flex; flex-direction:column; align-items:center; gap:8px}
.lp .wb .t{flex:1; width:100%; display:flex; align-items:flex-end; border-radius:10px; background:#161816}
.lp .wb .t i{display:block; width:100%; border-radius:10px; background:linear-gradient(180deg,#c6f432,#7fae12)}
.lp .wb .t i.over{background:repeating-linear-gradient(135deg,#ff9f43 0 3px,#a8621f 3px 6px)}
.lp .wb small{font-size:11px; color:var(--t3)}
.lp .d-phone{display:none}
@media (min-width:900px){ .lp .hero2{padding-top:110px} .lp .arc{top:552px} }
@media (max-width:899px){
  .lp .dash{height:auto; padding:0; background:none; box-shadow:none; border-radius:0; margin-top:44px; -webkit-mask:none; mask:none}
  .lp .dash > :not(.d-phone){display:none}
  .lp .d-phone{display:block; width:290px; margin:0 auto; border-radius:46px; padding:9px; background:#050605; box-shadow:0 0 0 1.5px #2a2e33, 0 40px 80px -30px rgba(198,244,50,.45);
    -webkit-mask:linear-gradient(180deg,#000 70%,transparent); mask:linear-gradient(180deg,#000 70%,transparent); height:480px; overflow:hidden}
  .lp .d-phone img{display:block; width:100%; border-radius:38px}
  .lp .arc{top:466px; width:900px; height:900px; margin-left:-450px}
}

/* hero frame, rescaled to a phone: same glass edges, top corners and fade */
.lp .dash.dash-m{max-width:400px; height:640px; padding:12px 12px 0; border-radius:40px 40px 0 0}
.lp .dash.dash-m img{display:block; width:100%; border-radius:30px 30px 0 0}
@media (max-width:899px){
  .lp .dash.dash-m{max-width:330px; height:520px; padding:10px 10px 0; border-radius:36px 36px 0 0; margin-top:44px;
    background:linear-gradient(180deg,#1a1d18,#0e100d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 -20px 80px -30px rgba(198,244,50,.35);
    -webkit-mask:linear-gradient(180deg,#000 72%,transparent); mask:linear-gradient(180deg,#000 72%,transparent)}
  .lp .dash.dash-m > img{display:block !important; border-radius:27px 27px 0 0}
}
/* coaching: fill the chart card's empty bottom */
.lp .chart{display:flex; flex-direction:column}
.lp .tw-stats{margin-top:auto; padding-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.lp .tw-stats div{padding:14px 16px; border-radius:16px; background:var(--raised)}
.lp .tw-stats b{display:block; font-size:22px; letter-spacing:-.03em}
.lp .tw-stats small{font-size:12px; color:var(--t3)}

/* hero: five screens fanned out, Today in front, the rest smaller behind */
.lp .fan{--w:400px; --h:640px; --d1:300px; --d2:540px; position:relative; z-index:2; height:calc(var(--h) + 20px); margin:72px auto 0;
  -webkit-mask:linear-gradient(180deg,#000 70%,transparent); mask:linear-gradient(180deg,#000 70%,transparent)}
.lp .fan .fr{position:absolute; top:0; left:50%; width:var(--w); height:var(--h); padding:12px 12px 0; overflow:hidden; border-radius:40px 40px 0 0; transform-origin:50% 0;
  background:linear-gradient(180deg,#1a1d18,#0e100d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 -20px 80px -30px rgba(198,244,50,.35), 0 30px 60px -20px #000}
.lp .fan .fr img{display:block; width:100%; height:auto; border-radius:30px 30px 0 0}
.lp .fan .f-c{transform:translateX(-50%); z-index:5}
.lp .fan .f-l1{transform:translateX(calc(-50% - var(--d1))) translateY(36px) scale(.84); z-index:4; filter:brightness(.62)}
.lp .fan .f-r1{transform:translateX(calc(-50% + var(--d1))) translateY(36px) scale(.84); z-index:4; filter:brightness(.62)}
.lp .fan .f-l2{transform:translateX(calc(-50% - var(--d2))) translateY(72px) scale(.7); z-index:3; filter:brightness(.4)}
.lp .fan .f-r2{transform:translateX(calc(-50% + var(--d2))) translateY(72px) scale(.7); z-index:3; filter:brightness(.4)}
@media (max-width:899px){ .lp .fan{--w:250px; --h:440px; --d1:118px; --d2:200px; margin-top:44px}
  .lp .fan .fr{padding:8px 8px 0; border-radius:30px 30px 0 0} .lp .fan .fr img{border-radius:23px 23px 0 0} }
/* the fade mask clips to the box, so the fan box spans past the content column */
.lp .fan{width:1400px; margin-left:calc(50% - 700px); margin-right:0}
@media (max-width:899px){ .lp .fan{width:640px; margin-left:calc(50% - 320px)} }
/* side screens run to the bottom of the fade instead of stopping short with a hard edge */
.lp .fan .f-l1, .lp .fan .f-r1{height:calc((var(--h) + 20px - 36px) / .84)}
.lp .fan .f-l2, .lp .fan .f-r2{height:calc((var(--h) + 20px - 72px) / .7)}
.lp .fan .f-c{height:calc(var(--h) + 20px)}
.lp .fan{-webkit-mask:linear-gradient(180deg,#000 62%,transparent 98%); mask:linear-gradient(180deg,#000 62%,transparent 98%)}
/* no hard edges: arc keeps only its line and outer glow, side screens drop the lime top glow */
.lp .arc{box-shadow:0 -30px 90px -20px rgba(198,244,50,.5)}
.lp .fan .f-l1, .lp .fan .f-r1, .lp .fan .f-l2, .lp .fan .f-r2{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px #000}
/* hero starts the same black as the header, so there is no seam under it */
.lp .hero2{background:radial-gradient(50% 40% at 18% 18%, rgba(255,255,255,.045), transparent 70%), #0a0b09}
.lp .hero2{background:#0a0b09}
.lp .hdr{background:rgba(10,11,9,.6); border-bottom-color:transparent}

/* ───────── theme switch ───────── */
.lp .theme{width:40px; height:40px; flex:0 0 auto; border:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--card); color:var(--t1); box-shadow:inset 0 0 0 1px var(--line); margin-left:auto}
.lp .theme:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.lp .theme .ic-moon{display:none}
.lp.light .theme .ic-sun{display:none} .lp.light .theme .ic-moon{display:block}
@media (min-width:900px){ .lp .theme{margin-left:auto} .lp .theme + .lang{margin-left:8px} }
.lp, .lp *{transition:background-color .25s ease, color .25s ease, border-color .25s ease}

/* ───────── light mode ───────── */
.lp.light{
  --page:#ffffff; --band:#f5f6f1; --card:#ffffff; --raised:#eef0e8; --line:#e2e5dc; --line-2:#cbd0c3;
  --t1:#10120e; --t2:#3b4038; --t3:#6a7066; --lime:#6f9a00; --lime-ink:#4f6f00; --good:#16935a;
  background:var(--page); color:var(--t1)}
.lp.light em, .lp.light .acc{color:#5f8600}
.lp.light .btn-glow{color:#0a0b09}
.lp.light .btn .ar{background:#0a0b09; color:#c6f432}
.lp.light .btn-line{background:#fff}
.lp.light .btn-dark{background:#fff; color:var(--t1); box-shadow:inset 0 0 0 1px var(--line-2), 0 10px 30px -16px rgba(0,0,0,.25)}
.lp.light .hdr{background:rgba(255,255,255,.78)}
/* hero */
.lp.light .hero2{background:var(--page)}
.lp.light .hero2 .tag{background:#fff; box-shadow:inset 0 0 0 1px var(--line)}
.lp.light .hero2 .tag i, .lp.light .dot{background:#9bd400; box-shadow:0 0 10px rgba(155,212,0,.7)}
.lp.light .arc{border-top-color:rgba(130,180,0,.8); box-shadow:0 -30px 90px -20px rgba(155,212,0,.45)}
.lp.light .fan .fr{background:linear-gradient(180deg,#ffffff,#eef0e8); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 30px 60px -24px rgba(40,50,20,.35)}
.lp.light .fan .f-l1, .lp.light .fan .f-r1{filter:brightness(.92)} .lp.light .fan .f-l2, .lp.light .fan .f-r2{filter:brightness(.82)}
/* surfaces that were hard-coded dark */
.lp.light .tsec{background:var(--band)}
.lp.light .bx{background:#fff; box-shadow:inset 0 0 0 1px var(--line)}
.lp.light .bx.wide{background:radial-gradient(60% 80% at 45% -20%, rgba(198,244,50,.28), transparent 70%), #fff}
.lp.light .rng span{background:var(--raised)} .lp.light .rng span.on{background:#10120e; color:#fff}
.lp.light .tip{background:rgba(255,255,255,.95); box-shadow:inset 0 0 0 1px var(--line), 0 8px 20px -10px rgba(0,0,0,.2)}
.lp.light .tbadge{background:#fff; box-shadow:inset 0 0 0 1px var(--line), 0 0 40px -10px rgba(155,212,0,.6)}
.lp.light .ticks i{background:var(--raised)} .lp.light .ticks i.on{background:#9bd400}
.lp.light .stat .chip{background:rgba(155,212,0,.18); color:#3f5a00}
.lp.light .lift{border-top-color:var(--line)}
.lp.light .tchart line{stroke:var(--line)} .lp.light .tchart rect[fill="#22262a"]{fill:#e3e6dc}
.lp.light .tchart path[stroke="#c6f432"], .lp.light .tchart circle{stroke:#7fb000; fill:#7fb000} .lp.light .tchart path[stroke="#c6f432"]{fill:none}
.lp.light svg line[stroke="#2a2e33"]{stroke:var(--line)}
.lp.light .typed{background:#fff}
.lp.light .wo{background:linear-gradient(165deg,#f1f8dc 0%,#fff 65%); box-shadow:inset 0 0 0 1px rgba(130,180,0,.3)}
.lp.light .chips span{background:var(--raised)}
.lp.light .checkin{background:linear-gradient(160deg,rgba(198,244,50,.28),#fff 55%); box-shadow:inset 0 0 0 1px rgba(130,180,0,.35)}
.lp.light .strip .done b{background:rgba(155,212,0,.2); color:#3f5a00}
.lp.light .strip .moved b{background:#c6f432; color:#0a0b09}
.lp.light .never span{background:rgba(220,60,60,.06); color:#b42323; box-shadow:inset 0 0 0 1px rgba(220,60,60,.25)}
.lp.light .never .nl{background:none; box-shadow:none; color:var(--t1)}
.lp.light .plist .x{background:rgba(220,60,60,.1); color:#c22}
.lp.light .plist .ck{background:rgba(22,147,90,.12)}
.lp.light .plan .in{background:#fff}
.lp.light .plan{background:var(--line)}
.lp.light .banner{background:rgba(198,244,50,.18); box-shadow:inset 0 0 0 1px rgba(130,180,0,.35)}
.lp.light .toggle button.on{background:#10120e; color:#fff}
.lp.light .toggle .save{color:#4f6f00}
.lp.light details[open]{background:#fff; box-shadow:inset 0 0 0 1px var(--line)}
.lp.light summary::after{color:#5f8600}
.lp.light .ftr{background:var(--band); border-top:0}
.lp.light .wordmark, .lp.light .wordmark .wg{color:#e1e4d9; background-color:transparent}
.lp.light .wordmark .wg{background:#e1e4d9}
.lp.light .rest{background:#10120e; color:#fff}
.lp.light .rest .bar{background:rgba(255,255,255,.18)} .lp.light .rest .bar i{background:#c6f432}
.lp.light .setrow.ok{background:rgba(198,244,50,.18)}
.lp.light .imgcard{background:linear-gradient(180deg,#fff,#eef0e8); box-shadow:inset 0 0 0 1px var(--line)}
.lp.light .tw-stats div{background:var(--raised)}
.lp.light .proof{background:var(--card)}
.lp.light .final .aura{background:rgba(198,244,50,.35)}
.lp.light .proof{border-block-color:var(--line)}
.lp.light .store{background:#10120e; color:#fff}
.lp .medalstage{background:#0a0b09}
.lp.light .medalstage{background:radial-gradient(60% 60% at 50% 45%, rgba(198,244,50,.25), transparent 70%), #fff; box-shadow:inset 0 0 0 1px var(--line)}
.lp.light .btn-glow .ar{color:#c6f432}

/* store badges: white set on the dark page, black set on the light page */
.lp .badge{display:inline-flex; border-radius:16px; transition:transform .15s ease}
.lp .badge:hover{transform:translateY(-2px)}
.lp .badge img{display:block; height:60px; width:auto}
.lp .badge .b-on-light{display:none}
.lp.light .badge .b-on-dark{display:none} .lp.light .badge .b-on-light{display:block; height:56px; margin:2px}
@media (max-width:899px){ .lp .badge img{height:52px} .lp.light .badge .b-on-light{height:48px} }

/* ───────── motion ───────── */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
/* on load: hero copy rises in, one line after another */
@keyframes upIn{from{opacity:0; transform:translateY(22px); filter:blur(6px)} to{opacity:1; transform:none; filter:none}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.lp .hdr{animation:fadeIn .8s var(--ease-out) both}
.lp .hero2 .tag{animation:upIn .9s var(--ease-out) .10s both}
.lp .hero2 h1{animation:upIn 1.1s var(--ease-out) .22s both}
.lp .hero2 .lede{animation:upIn 1s var(--ease-out) .38s both}
.lp .hero2 .cta-row{animation:upIn 1s var(--ease-out) .5s both}

/* hero screens: Today lands first, then the others slide out from behind it, pair by pair */
@keyframes scrC{from{opacity:0; transform:translateX(-50%) translateY(90px) scale(.96)} to{opacity:1; transform:translateX(-50%)}}
@keyframes scrL1{from{opacity:0; transform:translateX(-50%) translateY(60px) scale(.8)} to{opacity:1; transform:translateX(calc(-50% - var(--d1))) translateY(36px) scale(.84)}}
@keyframes scrR1{from{opacity:0; transform:translateX(-50%) translateY(60px) scale(.8)} to{opacity:1; transform:translateX(calc(-50% + var(--d1))) translateY(36px) scale(.84)}}
@keyframes scrL2{from{opacity:0; transform:translateX(calc(-50% - var(--d1))) translateY(80px) scale(.66)} to{opacity:1; transform:translateX(calc(-50% - var(--d2))) translateY(72px) scale(.7)}}
@keyframes scrR2{from{opacity:0; transform:translateX(calc(-50% + var(--d1))) translateY(80px) scale(.66)} to{opacity:1; transform:translateX(calc(-50% + var(--d2))) translateY(72px) scale(.7)}}
.lp .fan .f-c {animation:scrC 1.4s var(--ease-out) .7s both}
.lp .fan .f-l1{animation:scrL1 1.6s var(--ease-out) 1.7s both}
.lp .fan .f-r1{animation:scrR1 1.6s var(--ease-out) 1.95s both}
.lp .fan .f-l2{animation:scrL2 1.7s var(--ease-out) 2.6s both}
.lp .fan .f-r2{animation:scrR2 1.7s var(--ease-out) 2.85s both}
/* once settled, the front screen breathes very slightly */
@keyframes breathe{0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-6px)}}
.lp .fan .f-c{animation:scrC 1.4s var(--ease-out) .7s both, breathe 6s ease-in-out 3.6s infinite}

/* micro-interactions */
.lp .btn{transition:transform .2s var(--ease-out), box-shadow .25s ease, filter .2s ease, background-color .25s ease, color .25s ease}
.lp .btn:hover{transform:translateY(-2px)}
.lp .btn:active{transform:translateY(0) scale(.97)}
.lp .btn .ar{transition:transform .3s var(--ease-out)}
.lp .btn:hover .ar{transform:translateX(3px)}
.lp .btn-glow:hover{box-shadow:0 20px 44px -14px rgba(182,240,42,.95), inset 0 1px 0 rgba(255,255,255,.5)}
.lp .badge:active{transform:scale(.97)}
.lp .theme{transition:transform .35s var(--ease-out), box-shadow .2s ease, background-color .25s ease}
.lp .theme:hover{transform:rotate(-14deg)}
.lp .theme:active{transform:rotate(-14deg) scale(.9)}
.lp .theme svg{animation:fadeIn .35s ease both}
.lp .card, .lp .bx, .lp .rule, .lp .tw-stats div, .lp .plan, .lp details, .lp .d-tile{transition:transform .35s var(--ease-out), box-shadow .3s ease, background-color .25s ease}
.lp .bx:hover, .lp .rule:hover, .lp .plan:hover, .lp .card:hover{transform:translateY(-4px)}
.lp details summary::after{transition:transform .3s var(--ease-out)}
.lp .nav a{position:relative; transition:color .2s ease}
.lp .nav a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out)}
.lp .nav a:hover::after{transform:scaleX(1)}
.lp .strip .moved b, .lp .dot{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(198,244,50,.0), 0 0 12px rgba(198,244,50,.6)} 50%{box-shadow:0 0 0 6px rgba(198,244,50,.12), 0 0 18px rgba(198,244,50,.8)}}

/* sections reveal as they scroll into view (where the browser supports scroll-driven animation) */
@supports (animation-timeline: view()){
  @keyframes reveal{from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none}}
  .lp .sec .head, .lp .tcopy, .lp .bento > *, .lp .split > *, .lp .tpl > *, .lp .plans > *, .lp .faq > *, .lp .final > *, .lp .proof .wrap > *{
    animation:reveal linear backwards; animation-timeline:view(); animation-range:entry 0% entry 40%}
}
@media (prefers-reduced-motion:reduce){ .lp *, .lp .fan .fr{animation:none !important; transition:none !important} }
/* let the screens fade out completely before the hero ends, then blend into the stats band */
.lp .fan{-webkit-mask:linear-gradient(180deg,#000 48%,transparent 90%); mask:linear-gradient(180deg,#000 48%,transparent 90%)}
.lp .hero2{padding-bottom:0}
.lp .hero2::after{content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:3; pointer-events:none; background:linear-gradient(180deg,transparent,var(--band))}
/* the fade mask clipped the screens' glow at the top of the box — give it 90px of headroom */
.lp .fan{height:calc(var(--h) + 110px); margin-top:-18px; -webkit-mask:linear-gradient(180deg,#000 55%,transparent 91%); mask:linear-gradient(180deg,#000 55%,transparent 91%)}
.lp .fan .fr{top:90px}
@media (max-width:899px){ .lp .fan{margin-top:-46px} }

/* ───────── site additions (not in the design file) ───────── */
html{color-scheme:dark; -webkit-text-size-adjust:100%}
html[data-theme="light"]{color-scheme:light}
body{margin:0; background:#0a0b09}
html[data-theme="light"] body{background:#ffffff}
/* the design clipped with overflow:hidden, which stops the header from sticking; clip keeps it sticky */
.lp{overflow:hidden; overflow:clip}
.lp [hidden]{display:none !important}
.lp .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
html{scroll-padding-top:76px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
/* the first paint waits (briefly) for Arabic or Spanish copy instead of flashing English */
html.lp-pending .lp{visibility:hidden; animation:lpShow 0s linear 1.2s forwards}
@keyframes lpShow{to{visibility:visible}}

/* language switch: buttons styled like the design's spans */
.lp .lang button{padding:5px 11px; border-radius:999px; color:var(--t3); background:none; border:0; font:inherit; cursor:pointer}
.lp .lang button:hover{color:var(--t1)}
.lp .lang button.on{background:var(--raised); color:var(--t1)}
.lp .flang{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px}
.lp .flang button{background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer}
.lp .flang button:hover{color:var(--t1)}
.lp .flang button.on{color:var(--lime-ink)}
.lp .flang i{font-style:normal; color:var(--t3)}
.lp .ftr a:hover{color:var(--t1)}
.lp :lang(ar){font-family:"Urbanist","IBM Plex Sans Arabic",system-ui,sans-serif}

/* hero title: two balanced lines in place of the design's fixed <br> (the copy can change) */
.lp .hero2 h1{text-wrap:balance; max-width:9.2em}

/* "Gymco never" pills: the ✕ comes from CSS so the copy is just the words */
.lp .never span[data-k]:not(.nl)::before{content:"✕"}

/* the email sign-up result */
.lp .notify-msg{margin:14px auto 0; max-width:460px; font-size:15px; font-weight:600; color:var(--t2)}
.lp .notify-msg:empty{display:none}
.lp .notify-msg.ok{display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius:999px; color:var(--t1);
  background:rgba(198,244,50,.1); box-shadow:inset 0 0 0 1px rgba(198,244,50,.35)}
.lp .notify-msg.ok::before{content:"✓"; width:24px; height:24px; flex:0 0 auto; border-radius:999px; background:var(--lime); color:#0a0b09; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.lp .notify-msg.bad{color:#ff9a9a}
.lp.light .notify-msg.bad{color:#b42323}
.lp .email button[disabled]{opacity:.6; cursor:progress}
.lp .email input[aria-invalid="true"]{color:#ff9a9a}

/* ───────── Arabic: right-to-left, IBM Plex Sans Arabic ───────── */
html[lang="ar"] .lp{font-family:"Urbanist","IBM Plex Sans Arabic",system-ui,sans-serif}
html[lang="ar"] .lp, html[lang="ar"] .lp *{letter-spacing:0 !important}
html[lang="ar"] .lp em{font-family:"IBM Plex Sans Arabic","Urbanist",sans-serif; font-style:normal; font-weight:700}
html[lang="ar"] .lp h1 em, html[lang="ar"] .lp h2 em{font-size:1em}
html[lang="ar"] .lp h1, html[lang="ar"] .lp h2{line-height:1.25; font-weight:700}
html[lang="ar"] .lp .hero2 h1{font-size:clamp(40px,6vw,80px)}
html[lang="ar"] .lp .tcopy h2{font-size:clamp(40px,4.6vw,68px)}
html[lang="ar"] .lp .final h2{line-height:1.2}
html[lang="ar"] .lp .eyebrow{text-transform:none; font-size:14px}
[dir="rtl"] .lp .btn .ar{margin-right:0; margin-left:-12px}
[dir="rtl"] .lp .btn .ar svg{transform:scaleX(-1)}
[dir="rtl"] .lp .btn:hover .ar{transform:translateX(-3px)}
[dir="rtl"] .lp .nav{margin-left:0; margin-right:12px}
[dir="rtl"] .lp .nav a::after{transform-origin:right}
[dir="rtl"] .lp .hdr .btn{margin-left:0; margin-right:auto}
[dir="rtl"] .lp .theme{margin-left:0; margin-right:auto}
[dir="rtl"] .lp .lang{margin-left:0}
@media (min-width:900px){
  [dir="rtl"] .lp .theme + .lang{margin-left:0; margin-right:8px}
  [dir="rtl"] .lp .hdr .btn{margin-right:0}
}
[dir="rtl"] .lp .prow .g{margin-left:0; margin-right:auto; text-align:left}
[dir="rtl"] .lp .lift .r{text-align:left}
[dir="rtl"] .lp .typed .caret{margin-left:0; margin-right:2px}
/* charts read right to left, like the app's week strip */
[dir="rtl"] .lp .tchart, [dir="rtl"] .lp .lift svg, [dir="rtl"] .lp .chart svg{transform:scaleX(-1)}
[dir="rtl"] .lp .tip{right:auto; left:22%}
@media (max-width:899px){ [dir="rtl"] .lp .tip{right:auto; left:16px} }
[dir="rtl"] .lp .flip{display:inline-block; transform:scaleX(-1)}
/* the fan box is wider than its column; keep it centred when the column runs right to left */
[dir="rtl"] .lp .fan{margin-left:0; margin-right:calc(50% - 700px)}
@media (max-width:899px){ [dir="rtl"] .lp .fan{margin-right:calc(50% - 320px)} }
/* phone: the medal stage holds only absolutely placed medals, so it needs the full column width; medals fit a 350px card */
@media (max-width:899px){ .lp .medalstage{align-self:stretch} }
@media (max-width:480px){
  .lp .medals{gap:12px}
  .lp .medal{width:96px; height:96px}
  .lp .medal:nth-child(2){width:124px; height:124px}
  .lp .tw-stats{gap:8px}
  .lp .tw-stats div{padding:12px 10px}
  .lp .tw-stats b{font-size:18px; white-space:nowrap}
}
html[lang="es"] .lp .hero2 h1{max-width:11em}

/* Sending a sign-up: a spinner ahead of "Sending…". */
.lp .btn.is-busy{cursor:progress}
.lp .btn.is-busy::before{content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:lp-spin .7s linear infinite; flex:none}
@keyframes lp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lp .btn.is-busy::before{animation-duration:1.6s}}

/* Light: a white page, a big lime glow lighting the hero from its top corner,
   and cards drawn with a border now that they sit on white. */
.lp.light{background:
  radial-gradient(1100px 820px at 0 0, rgba(198,244,50,.42), rgba(198,244,50,.14) 45%, transparent 72%),
  radial-gradient(800px 640px at 100% 60px, rgba(94,228,160,.16), transparent 70%),
  var(--page) no-repeat}
html[dir="rtl"] .lp.light{background:
  radial-gradient(1100px 820px at 100% 0, rgba(198,244,50,.42), rgba(198,244,50,.14) 45%, transparent 72%),
  radial-gradient(800px 640px at 0 60px, rgba(94,228,160,.16), transparent 70%),
  var(--page) no-repeat}
/* the glow runs up behind the header; the header fills in once the page scrolls */
.lp.light .hero2{background:transparent}
.lp.light .hdr{background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; transition:background-color .25s ease, border-color .25s ease}
.lp.light .hdr.scrolled{-webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%)}
.lp.light .hdr.scrolled{background:rgba(255,255,255,.8); border-bottom-color:var(--line)}
.lp.light .logo .vl{background:#10120e}
.lp.light .prow{background:#f7f8f4}
.lp.light .card, .lp.light .mode, .lp.light .parse, .lp.light .rule, .lp.light details, .lp.light .bx,
.lp.light .imgcard, .lp.light .medalstage, .lp.light .tw-stats div, .lp.light .typed{box-shadow:inset 0 0 0 1px var(--line)}
.lp.light .mode.hot{box-shadow:inset 0 0 0 1.5px var(--lime)}
.lp.light details[open]{box-shadow:inset 0 0 0 1px var(--line-2)}
.lp.light .mode:hover{background:#fafbf7}

/* The app's enamel badges: their own size, not the card-filling picture rule; a softer shadow on the light page. */
.lp .medalstage img.medal{position:static; width:140px; height:140px; object-fit:contain; flex:none}
.lp .medalstage img.medal:nth-child(2){width:176px; height:176px}
@media (max-width:480px){
  .lp .medalstage img.medal{width:96px; height:96px}
  .lp .medalstage img.medal:nth-child(2){width:124px; height:124px}
}
.lp.light .medal{filter:drop-shadow(0 18px 22px rgba(40,50,20,.22))}

/* The menu marks the section on screen. */
.lp .nav a{position:relative; transition:color .2s ease}
.lp .nav a.on{color:var(--t1); font-weight:600}
.lp .nav a.on::after{content:""; position:absolute; inset-inline:0; bottom:-6px; height:2px; border-radius:2px; background:var(--lime)}
/* On the grey bands the white cards stand out alone; borders only on white. */
.lp.light .tsec .bx, .lp.light .band .card, .lp.light .band .rule, .lp.light .band .bx, .lp.light .band .medalstage,
.lp.light .tsec .card, .lp.light .band details, .lp.light .band .tw-stats div{box-shadow:none}
/* Plans on the light page: Free and Lifetime sit plain, Pro carries a green frame. */
.lp.light .plan, .lp.light .plan.life{background:transparent; box-shadow:none}
.lp.light .plan.pro{background:linear-gradient(135deg,#b8ec1e,#6fbf1a); box-shadow:0 30px 70px -34px rgba(130,200,20,.55)}

/* ═════════ 2026 refresh: the app's new look, light only ═════════
   Matches the Gymco app redesign: warm grey ground with a lime haze, frosted white cards,
   white inner tiles, black pill buttons, neon lime for "selected" and the brand mark,
   Stack Sans Headline / Stack Sans Text, two-tone headlines (black, then grey).
   Everything below is scoped to .lp.light; the page always runs light (landing.js). */
.lp .theme{display:none !important}
html body, html[data-theme="light"] body{background:#e4e2de}
.lp.light{
  --page:#e4e2de; --band:transparent; --card:rgba(255,255,255,.58); --raised:#ffffff; --line:rgba(17,17,17,.07); --line-2:rgba(17,17,17,.14);
  --t1:#0b0b0b; --t2:#3a3a3a; --t3:#6b6967; --lime:#d4ff1a; --lime-deep:#b8e000; --lime-ink:#0b0b0b; --good:#178a43;
  --p:#9b87f5; --c:#f2a65a; --f:#f2c94c; --glow:#d4ff1a;
  --hd:"Stack Sans Headline","Stack Sans Text",system-ui,sans-serif;
  font-family:"Stack Sans Text","Stack Sans Headline",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--t1);
  background:
    radial-gradient(900px 700px at 100% 0, rgba(222,236,140,.55), rgba(222,236,140,0) 70%),
    radial-gradient(900px 800px at 0 38%, rgba(184,212,224,.45), rgba(184,212,224,0) 70%),
    radial-gradient(900px 800px at 100% 72%, rgba(222,236,140,.32), rgba(222,236,140,0) 70%),
    radial-gradient(900px 800px at 0 100%, rgba(184,212,224,.4), rgba(184,212,224,0) 70%),
    #e4e2de no-repeat}
html[dir="rtl"] .lp.light{background:
    radial-gradient(900px 700px at 0 0, rgba(222,236,140,.55), rgba(222,236,140,0) 70%),
    radial-gradient(900px 800px at 100% 38%, rgba(184,212,224,.45), rgba(184,212,224,0) 70%),
    radial-gradient(900px 800px at 0 72%, rgba(222,236,140,.32), rgba(222,236,140,0) 70%),
    radial-gradient(900px 800px at 100% 100%, rgba(184,212,224,.4), rgba(184,212,224,0) 70%),
    #e4e2de no-repeat}
html[lang="ar"] .lp.light, .lp.light :lang(ar){font-family:"Stack Sans Text","IBM Plex Sans Arabic",system-ui,sans-serif}

/* type: headline face, tight, second half in grey (the app's "Train Hard", "Log food any way you like") */
.lp.light h1, .lp.light h2, .lp.light h3, .lp.light .bbig, .lp.light .snum, .lp.light .proof b, .lp.light .plan .pr,
.lp.light .rule .n, .lp.light summary, .lp.light .logo{font-family:var(--hd)}
.lp.light h1, .lp.light h2{font-weight:700; letter-spacing:-.035em}
.lp.light em, .lp.light .acc{font-family:inherit; font-style:normal; font-weight:inherit; color:#7a7875; letter-spacing:inherit}
.lp.light h1 em, .lp.light h2 em, .lp.light .proof b em{font-size:1em}
.lp.light .hero2 h1{font-weight:700; letter-spacing:-.045em}
html[lang="ar"] .lp.light em{font-family:"IBM Plex Sans Arabic",sans-serif; color:#6f6d6a}
.lp.light .sub, .lp.light .hero2 .lede{color:var(--t3)}
.lp.light .eyebrow{color:var(--t3); font-weight:600; letter-spacing:.1em}
.lp.light .eyebrow::before{width:8px; height:8px; border-radius:99px; background:var(--lime); box-shadow:0 0 0 1.5px #0b0b0b}

/* brand mark + wordmark */
.lp.light .vl{background:#0b0b0b; -webkit-mask:url(/img/landing/mark.svg) center/contain no-repeat; mask:url(/img/landing/mark.svg) center/contain no-repeat}
.lp.light .logo img{display:block; width:auto; height:26px}
.lp.light .ftr .logo img{height:30px}

/* buttons: black pills, uppercase like START ALL; the arrow sits in a lime disc */
.lp.light .btn{font-family:var(--hd); text-transform:uppercase; letter-spacing:.03em; font-size:14px; font-weight:700}
.lp.light .btn-glow{background:#0b0b0b; color:#fff; box-shadow:0 14px 30px -16px rgba(0,0,0,.55)}
.lp.light .btn-glow:hover{filter:none; background:#222}
.lp.light .btn .ar, .lp.light .btn-glow .ar{background:var(--lime); color:#0b0b0b}
.lp.light .btn-dark, .lp.light .btn-line{background:rgba(255,255,255,.75); color:#0b0b0b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 10px 26px -18px rgba(0,0,0,.35)}
.lp.light .btn-line:hover, .lp.light .btn-dark:hover{background:#fff}
.lp.light :focus-visible{outline-color:#0b0b0b}

/* header: clear over the haze, frosted grey once scrolled; language switch as a white pill group */
.lp.light .hdr.scrolled{background:rgba(228,226,222,.78); border-bottom-color:rgba(17,17,17,.06)}
.lp.light .nav{color:var(--t2)}
.lp.light .nav a.on::after{background:#0b0b0b}
.lp.light .lang{background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.lp.light .lang button.on{background:#0b0b0b; color:#fff}
@media (min-width:900px){ .lp.light .lang{margin-left:auto} }
.lp.light .flang button.on{color:#0b0b0b; text-decoration:underline; text-underline-offset:3px}

/* hero: no arc, five real screens of the new app in white phone frames */
.lp.light .arc{display:none}
.lp.light .hero2 .tag{background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.lp.light .fan .fr{background:#fff; padding:10px 10px 0; border-radius:46px 46px 0 0; box-shadow:0 0 0 1px rgba(17,17,17,.05), 0 40px 80px -30px rgba(40,40,30,.35)}
.lp.light .fan .fr img{border-radius:36px 36px 0 0; height:auto}
.lp.light .fan .f-l1, .lp.light .fan .f-r1{filter:none; opacity:.96}
.lp.light .fan .f-l2, .lp.light .fan .f-r2{filter:none; opacity:.9}
.lp.light .fan .f-l1, .lp.light .fan .f-r1, .lp.light .fan .f-l2, .lp.light .fan .f-r2{box-shadow:0 0 0 1px rgba(17,17,17,.05), 0 30px 60px -30px rgba(40,40,30,.3)}
@media (max-width:899px){ .lp.light .fan .fr{padding:7px 7px 0; border-radius:32px 32px 0 0} .lp.light .fan .fr img{border-radius:26px 26px 0 0} }

/* proof strip: four numbers on frosted tiles */
.lp.light .proof{background:transparent; border-block:0}
.lp.light .proof .wrap{gap:10px; padding:0 20px}
.lp.light .proof div.f{background:rgba(255,255,255,.55); border-radius:22px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.lp.light .proof b{font-weight:700}
.lp.light .proof span{color:var(--t3)}

/* surfaces: frosted cards on the grey, white tiles inside them */
.lp.light .card, .lp.light .mode, .lp.light .parse, .lp.light .rule, .lp.light details, .lp.light .bx, .lp.light .bx.wide,
.lp.light .chart, .lp.light .imgcard, .lp.light .medalstage, .lp.light .plan .in{
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75); border-radius:24px}
.lp.light .band .card, .lp.light .band .rule, .lp.light .tsec .bx, .lp.light .band details{box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.lp.light .sec.band, .lp.light .tsec, .lp.light .ftr{background:transparent}
.lp.light .prow, .lp.light .typed, .lp.light .tw-stats div, .lp.light .tip, .lp.light details[open]{background:#fff; box-shadow:none}
.lp.light details[open]{box-shadow:0 10px 30px -22px rgba(0,0,0,.3)}
.lp.light summary::after{color:#0b0b0b}
.lp.light .muted{color:var(--t3)}

/* food: icon tiles are white squares; the "hot" mode is the lime selected row */
.lp.light .mode .ic{background:#fff; color:#0b0b0b; border-radius:14px}
.lp.light .mode.hot{background:var(--lime); box-shadow:none}
.lp.light .mode.hot .ic{background:#0b0b0b; color:var(--lime)}
.lp.light .mode.hot span{color:#2b2b2b}
.lp.light .mode:hover{background:rgba(255,255,255,.8)}
.lp.light .mode.hot:hover{background:var(--lime)}
.lp.light .typed .caret{background:#0b0b0b}
.lp.light .parse{position:relative; overflow:visible}
.lp.light .parse .plate{position:absolute; width:190px; height:auto; top:-92px; right:-34px; z-index:3; filter:drop-shadow(0 24px 30px rgba(40,40,20,.25)); pointer-events:none}
html[dir="rtl"] .lp.light .parse .plate{right:auto; left:-34px}
.lp.light .parse > .muted:first-child{max-width:calc(100% - 150px)}
@media (max-width:899px){ .lp.light .parse .plate{width:104px; top:-44px; right:-6px} }
@media (max-width:899px){ html[dir="rtl"] .lp.light .parse .plate{right:auto; left:-6px} }
.lp.light .ai{background:#0b0b0b; color:var(--lime)}

/* train bento */
.lp.light .tbadge{background:var(--lime); box-shadow:0 18px 40px -18px rgba(150,190,0,.8)}
.lp.light .tbadge .vl{background:#0b0b0b}
.lp.light .rng span{background:#fff; color:var(--t3)} .lp.light .rng span.on{background:#0b0b0b; color:#fff}
.lp.light .dot{background:var(--lime); box-shadow:0 0 0 2px #0b0b0b}
.lp.light .tchart line{stroke:rgba(17,17,17,.08)}
.lp.light .tchart path[stroke="#c6f432"]{stroke:#0b0b0b; fill:none}
.lp.light .tchart circle{fill:var(--lime); stroke:#0b0b0b; stroke-width:2}
.lp.light .tchart rect[fill="#22262a"]{fill:rgba(17,17,17,.08)}
.lp.light .actbar{background:var(--lime); color:#0b0b0b; box-shadow:none}
.lp.light .actbar span+span{border-left-color:rgba(0,0,0,.12)}
.lp.light .lift{border-top:1px dashed rgba(17,17,17,.14)}
.lp.light .lift svg path[stroke="#c6f432"]{stroke:#0b0b0b}
.lp.light .lift .up, .lp.light .tip small{color:var(--good)}
.lp.light .stat .chip{background:var(--lime); color:#0b0b0b}
.lp.light .ticks i{background:rgba(17,17,17,.08)} .lp.light .ticks i.on{background:#0b0b0b}

/* coaching: trend in black, the weekly check-in as the dark "Iron" coach card */
.lp.light .chart svg path[stroke="#c6f432"]{stroke:#0b0b0b}
.lp.light .chart svg circle[fill="#c6f432"]{fill:var(--lime); stroke:#0b0b0b; stroke-width:2}
.lp.light .chart svg circle[stroke="#c6f432"]{stroke:#0b0b0b}
.lp.light .chart svg stop{stop-color:#d4ff1a}
.lp.light .chart svg line[stroke="#2a2e33"]{stroke:rgba(17,17,17,.08)}
.lp.light .chart svg g[fill="#8d948a"]{fill:#a9a6a2}
.lp.light .checkin{color:#fff; background:
  radial-gradient(70% 90% at 100% 100%, rgba(124,58,237,.75), transparent 70%),
  radial-gradient(60% 80% at 20% 110%, rgba(220,38,38,.55), transparent 70%),
  linear-gradient(160deg,#141012,#1d1416); box-shadow:none}
.lp.light .checkin p, .lp.light .checkin .muted, .lp.light .checkin .eyebrow{color:rgba(255,255,255,.78)}
.lp.light .checkin .eyebrow::before{box-shadow:none}
.lp.light .checkin .flip{color:var(--lime) !important}
.lp.light .checkin .num[style*="line-through"]{color:rgba(255,255,255,.55) !important}
.lp.light .rule .n{color:#0b0b0b}
.lp.light .rule span{color:var(--t3)}

/* streak: Iron, the coach, stands in for the medals */
.lp.light .medalstage{display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  background:radial-gradient(55% 45% at 50% 62%, rgba(212,255,26,.55), rgba(212,255,26,0) 70%), rgba(255,255,255,.5)}
.lp.light .medalstage .iron{position:relative; width:auto; height:88%; max-height:400px; margin-bottom:-4px; filter:drop-shadow(0 30px 30px rgba(80,10,10,.25))}
.lp.light .medalstage .coach{position:absolute; left:20px; top:20px; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:16px; background:#fff; font-size:13px; line-height:1.25; box-shadow:0 12px 30px -18px rgba(0,0,0,.35)}
html[dir="rtl"] .lp.light .medalstage .coach{left:auto; right:20px}
.lp.light .medalstage .coach b{display:block; font-family:var(--hd); color:#d92d20; font-size:14px}
.lp.light .medalstage .coach i{width:34px; height:34px; border-radius:10px; background:#0b0b0b; display:flex; align-items:center; justify-content:center; font-style:normal; color:var(--lime); font-weight:700}

/* privacy */
.lp.light .plist .ck{background:var(--lime); color:#0b0b0b}
.lp.light .plist .ck[data-k="ai.tag"]{background:#0b0b0b !important; color:var(--lime) !important}
.lp.light .never span{background:rgba(255,255,255,.6); color:#b42318; box-shadow:inset 0 0 0 1px rgba(180,35,24,.22)}
.lp.light .never .nl{background:none; box-shadow:none; color:var(--t1)}

/* plans: Pro framed in lime */
.lp.light .banner{background:rgba(212,255,26,.35); box-shadow:inset 0 0 0 1px rgba(150,190,0,.35)}
.lp.light .banner i{background:#0b0b0b; box-shadow:none}
.lp.light .toggle{background:rgba(255,255,255,.55)}
.lp.light .toggle button.on{background:#0b0b0b; color:#fff}
.lp.light .toggle .save{color:#3d5200}
.lp.light .toggle button.on .save{color:var(--lime)}
.lp.light .plan, .lp.light .plan.life{background:transparent; box-shadow:none; padding:0}
.lp.light .plan .in{border-radius:28px}
.lp.light .plan.pro{padding:2px; background:var(--lime); box-shadow:0 30px 60px -34px rgba(150,190,0,.9)}
.lp.light .plan.pro .in{background:rgba(255,255,255,.88)}
.lp.light .plan .badge{background:var(--lime); color:#0b0b0b}
.lp.light .plan li::before{color:#0b0b0b}

/* final call: the 3D trend card above the title */
.lp.light .final .aura{background:rgba(212,255,26,.45)}
.lp.light .final .hero3d{display:block; width:220px; height:auto; margin:0 auto -10px; filter:drop-shadow(0 30px 34px rgba(40,40,20,.22))}
.lp.light .email{background:#fff; box-shadow:0 18px 40px -28px rgba(0,0,0,.4)}
.lp.light .consent a{color:#0b0b0b}
.lp.light .notify-msg.ok{background:rgba(212,255,26,.35); box-shadow:none}
.lp.light .notify-msg.ok::before{background:#0b0b0b; color:var(--lime)}

/* footer */
.lp.light .ftr{border-top:1px solid rgba(17,17,17,.06)}
.lp.light .ftr h4{color:var(--t3)}
.lp.light .wordmark, .lp.light .wordmark .wg{color:rgba(255,255,255,.55)}
.lp.light .wordmark .wg{background:rgba(255,255,255,.55)}
.lp.light .medalstage .coach i{background:#f4f2ee; overflow:hidden}
.lp.light .medalstage .coach i img{width:24px; height:auto; display:block}
/* inline colours the markup carries from the dark design */
.lp.light [style*="color:#7cf0b0"]{color:#178a43 !important}
.lp.light [style*="color:#8d948a"]{color:var(--t3) !important}
.lp.light .tchart rect[fill="#c6f432"]{fill:var(--lime-deep)}
.lp.light .tchart line[stroke="#1d2024"]{stroke:rgba(17,17,17,.08)}
.lp.light .tchart path[stroke="#5b6168"]{stroke:#b3b0ab}
/* header: always a frosted grey bar, above everything that scrolls under it */
.lp.light .hdr, .lp.light .hdr.scrolled{z-index:60; background:rgba(228,226,222,.84); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid rgba(17,17,17,.07)}
.lp.light .parse .plate{z-index:1}

/* Write demo, on a 9 s loop: the sentence types itself, the three foods drop in one by one,
   the add button pulses once, then it all clears and starts over. The plate floats. */
.lp.light .typed > span[data-k]{display:inline-block; max-width:0; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  animation:lpType 9s infinite}
@keyframes lpType{0%{max-width:0; animation-timing-function:steps(42,end)} 30%{max-width:42ch} 92%{max-width:42ch; animation-timing-function:ease-in} 97%,100%{max-width:0}}
.lp.light .parse .prow{animation:lpRow 9s cubic-bezier(.22,1,.36,1) infinite}
.lp.light .parse .prow:nth-child(4){animation-delay:0s}
.lp.light .parse .prow:nth-child(5){animation-delay:.45s}
.lp.light .parse .prow:nth-child(6){animation-delay:.9s}
@keyframes lpRow{0%,32%{opacity:0; transform:translateY(12px) scale(.98)} 37%,91%{opacity:1; transform:none} 96%,100%{opacity:0; transform:translateY(-6px)}}
.lp.light .parse > .btn{animation:lpCta 9s ease-in-out infinite}
@keyframes lpCta{0%,50%,60%,100%{transform:none; box-shadow:0 14px 30px -16px rgba(0,0,0,.55)} 54%{transform:scale(1.03); box-shadow:0 0 0 5px rgba(212,255,26,.9), 0 18px 34px -16px rgba(0,0,0,.55)}}
.lp.light .parse .plate{animation:lpFloat 6s ease-in-out infinite}
@keyframes lpFloat{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(5deg)}}
@media (max-width:899px){ .lp.light .typed > span[data-k]{white-space:normal; max-width:none; animation:none} }
@media (prefers-reduced-motion:reduce){ .lp.light .typed > span[data-k]{max-width:none; white-space:normal} .lp.light .parse .prow{opacity:1} }
/* Iron's note: the app's dark coach card, big enough to read */
.lp.light .medalstage .coach{display:block; left:24px; top:24px; width:260px; padding:16px 18px; border-radius:20px; color:#fff; line-height:1.3;
  background:radial-gradient(80% 90% at 100% 100%, rgba(124,58,237,.8), transparent 70%), radial-gradient(60% 80% at 10% 120%, rgba(220,38,38,.6), transparent 70%), #151113;
  box-shadow:0 20px 40px -20px rgba(30,10,20,.6); z-index:2}
html[dir="rtl"] .lp.light .medalstage .coach{left:auto; right:24px}
.lp.light .medalstage .coach .ch{display:flex; align-items:center; gap:10px}
.lp.light .medalstage .coach i{width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.1)}
.lp.light .medalstage .coach i img{width:26px}
.lp.light .medalstage .coach b{display:block; color:#ff5a4e; font-size:16px; line-height:1.1}
.lp.light .medalstage .coach small{display:block; font-size:13px; color:rgba(255,255,255,.72)}
.lp.light .medalstage .coach p{margin:12px 0 0; font-family:var(--hd); font-size:18px; font-weight:600; letter-spacing:-.01em; color:#fff}
@media (max-width:480px){ .lp.light .medalstage .coach{left:14px; top:14px; width:220px; padding:12px 14px} .lp.light .medalstage .coach p{font-size:16px} }
.lp.light .medalstage .coach i{display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.lp.light .medalstage .coach i img{position:static; inset:auto; width:26px; height:auto; object-fit:contain}

/* Arabic: Thmanyah Sans for body and headlines (Regular 400, Medium 500, Bold 700, Black 900) */
@font-face{font-family:"Thmanyah Sans"; src:url(/fonts/thmanyah-sans-400.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Thmanyah Sans"; src:url(/fonts/thmanyah-sans-500.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"Thmanyah Sans"; src:url(/fonts/thmanyah-sans-700.woff2) format("woff2"); font-weight:600 700; font-style:normal; font-display:swap}
@font-face{font-family:"Thmanyah Sans"; src:url(/fonts/thmanyah-sans-900.woff2) format("woff2"); font-weight:800 900; font-style:normal; font-display:swap}
html[lang="ar"] .lp.light{--hd:"Thmanyah Sans","Stack Sans Headline",sans-serif; font-family:"Thmanyah Sans","Stack Sans Text",sans-serif}
html[lang="ar"] .lp.light em, html[lang="ar"] .lp.light .acc{font-family:inherit; font-weight:inherit}
html[lang="ar"] .lp.light h1, html[lang="ar"] .lp.light h2{font-weight:700; line-height:1.3}
.lp.light :lang(ar){font-family:"Thmanyah Sans","Stack Sans Text",sans-serif}
/* Arabic headlines: Thmanyah Serif Display */
@font-face{font-family:"Thmanyah Serif Display"; src:url(/fonts/thmanyah-serif-500.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"Thmanyah Serif Display"; src:url(/fonts/thmanyah-serif-700.woff2) format("woff2"); font-weight:600 700; font-style:normal; font-display:swap}
@font-face{font-family:"Thmanyah Serif Display"; src:url(/fonts/thmanyah-serif-900.woff2) format("woff2"); font-weight:800 900; font-style:normal; font-display:swap}
html[lang="ar"] .lp.light h1, html[lang="ar"] .lp.light h2, html[lang="ar"] .lp.light h3{font-family:"Thmanyah Serif Display","Thmanyah Sans",serif; letter-spacing:0 !important}
html[lang="ar"] .lp.light h1, html[lang="ar"] .lp.light h2{font-weight:700; line-height:1.35}

/* tighter rhythm between sections */
.lp.light .sec{padding:48px 0}
.lp.light .head{margin-bottom:32px}
.lp.light .final{padding:72px 0}
.lp.light .proof{margin-top:8px}
@media (min-width:900px){
  .lp.light .sec{padding:64px 0}
  .lp.light .final{padding:88px 0}
}
/* Iron stands on the card floor, feet fully in view */
.lp.light .medalstage .iron{height:auto; max-height:78%; width:auto; max-width:70%; margin:0 0 28px; object-fit:contain}
/* Arabic: the taller headline column must not grow Iron past the design's 356 px */
html[lang="ar"] .lp.light .medalstage .iron{max-height:356px}
/* The hero's line under the title stays on one line on wide screens, in every language */
@media (min-width:1000px){ .lp .hero2 .lede{max-width:none; white-space:nowrap} }

/* The blog slider (#blog): newest posts, swipe or arrows; hidden until there is a post */
.lp .blogs .blog-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.lp .blogs .blog-nav{display:flex; align-items:center; gap:10px}
.lp .blogs .blog-arrow{width:44px; height:44px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--t1); font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s ease, opacity .15s ease}
.lp .blogs .blog-arrow:hover:not(:disabled){background:var(--raised)}
.lp .blogs .blog-arrow:disabled{opacity:.35; cursor:default}
html[dir="rtl"] .lp .blogs .blog-arrow span{display:inline-block; transform:scaleX(-1)}
.lp .blogs .blog-all{margin-inline-start:6px; font-weight:600; color:var(--t1); text-decoration:none; border-bottom:1.5px solid var(--lime); padding-bottom:2px}
.lp .blogs .blog-track{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 3); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:0; margin-top:36px; padding-bottom:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.lp .blogs .blog-track::-webkit-scrollbar{display:none}
.lp .blogs .blog-track:focus-visible{outline:2px solid var(--lime); outline-offset:6px; border-radius:20px}
.lp .blogs .blog-card{scroll-snap-align:start; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease}
.lp .blogs .blog-card:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(10,11,9,.08)}
.lp .blogs .blog-card img{display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; background:var(--raised)}
.lp .blogs .blog-card .in{display:flex; flex-direction:column; gap:6px; padding:18px 20px 22px}
.lp .blogs .blog-card .date{font-size:13px; color:var(--t3)}
.lp .blogs .blog-card b{font-size:19px; line-height:1.3; color:var(--t1)}
.lp .blogs .blog-card .ex{font-size:15px; line-height:1.5; color:var(--t2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
@media (max-width:900px){.lp .blogs .blog-track{grid-auto-columns:calc((100% - 20px) / 2)}}
@media (max-width:600px){.lp .blogs .blog-track{grid-auto-columns:84%} .lp .blogs .blog-arrow{display:none}}
@media (prefers-reduced-motion:reduce){.lp .blogs .blog-card{transition:none} .lp .blogs .blog-card:hover{transform:none}}