/* Kipp landing - Training Day design system. Consolidated from the mockup sources. */
html{scroll-behavior:smooth}
/* Shared Training Day (ink field) hero + card frame. Per-variant animation CSS is inline in each file. */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bone:#F1ECE2;--ink:#131209;--ink2:#1D1B12;--orange:#F0330F;--volt:#C7F13F}
html,body{background:var(--ink);overflow-x:hidden}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--bone);-webkit-font-smoothing:antialiased;min-height:100vh}
.anton{font-family:"Anton",sans-serif;font-weight:400}
a{text-decoration:none;color:inherit}
.ticker{background:var(--volt);color:var(--ink);overflow:hidden;white-space:nowrap}
.ticker .run{display:inline-block;padding:9px 0;animation:scroll 28s linear infinite}
.ticker span{font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 24px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
nav{max-width:1220px;margin:0 auto;padding:20px clamp(20px,5vw,40px);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.markb{width:38px;height:38px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* The lockup IS the app icon now, so the rounded ink ground lives inside the
   svg and the wrapper paints nothing. Keep this in step with the favicon. */
.markb svg{display:block;width:100%;height:100%}
.word{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--bone)}.word b{color:var(--orange)}
.nav-r{display:flex;align-items:center;gap:18px}
.nrate{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#a9a597}.nrate .s{color:var(--orange)}
.dl{background:var(--volt);color:var(--ink);font-weight:800;font-size:14px;padding:11px 20px;border-radius:11px;text-transform:uppercase;letter-spacing:.04em}
.hero{max-width:1220px;margin:0 auto;padding:clamp(28px,4vw,54px) clamp(20px,5vw,40px);display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,64px);align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;border:2px solid var(--orange);border-radius:999px;margin-bottom:26px}
h1{font-size:clamp(46px,6.6vw,92px);line-height:.88;text-transform:uppercase;letter-spacing:.004em;color:var(--bone)}
h1 .v{color:var(--volt)}
h1 .o{color:var(--orange)}
.sub{font-size:clamp(16px,1.5vw,19px);line-height:1.5;font-weight:500;max-width:420px;margin:26px 0 0;color:#b4b0a2}
.cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
.appstore{display:inline-flex;align-items:center;gap:11px;background:var(--bone);color:var(--ink);border-radius:13px;padding:12px 22px;box-shadow:5px 5px 0 var(--orange)}
.appstore small{font-size:11px;opacity:.7;line-height:1;display:block;text-transform:uppercase;letter-spacing:.08em}
.appstore .b{font-size:19px;font-weight:800;line-height:1.15}
.fine{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8f8b7d}
/* right column stage */
.right{position:relative;justify-self:end;width:100%;max-width:440px}
/* ---- card frame ---- */
.card{background:var(--bone);border:3px solid #0F0E08;border-radius:20px;box-shadow:8px 8px 0 var(--orange);overflow:hidden;color:var(--ink);height:400px;display:flex;flex-direction:column}
.ctop{padding:20px 22px 16px}
.clab{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#b5460f}
.clab .st{color:#9a9384;font-weight:700}
.cbig{font-family:"Anton";font-size:clamp(78px,11vw,124px);line-height:.8;color:var(--ink);margin:10px 0 5px}
.cbig small{color:var(--orange);font-size:.32em;vertical-align:super;margin-left:.02em}
.cmeta{font-weight:600;font-size:13px;color:#726d5f}
.cverdict{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--volt);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.07em;padding:6px 11px;border-radius:8px;margin-top:15px}
.cverdict.warm{color:#ff7a4d}
.cbot{background:var(--ink2);padding:16px 22px 20px;border-top:3px solid #0F0E08;flex:1}
.ckick{font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:9px}
.cmain{font-family:"Anton";font-size:clamp(26px,3.6vw,38px);text-transform:uppercase;line-height:.95;color:var(--bone)}
.cnote{font-weight:600;font-size:12.5px;color:#a9a597;margin-top:6px}
/* viz: chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-weight:800;font-size:12px;padding:6px 11px;border-radius:8px;color:var(--ink)}
.chip.p{background:var(--volt)}.chip.c{background:var(--orange);color:#fff}.chip.f{background:#E9E4D6}
/* viz: bars */
.brow{display:flex;align-items:center;gap:10px;margin-top:9px}
.brow .bn{font-size:12px;font-weight:600;color:#a9a597;width:54px}
.brow .bar{flex:1;height:9px;border-radius:5px;background:#2c2a1e;overflow:hidden}
.brow .bar i{display:block;height:100%;border-radius:5px}
.brow b{font-weight:800;font-size:12.5px;color:var(--bone);width:42px;text-align:right}
/* viz: spark */
.spark{width:100%;height:46px;display:block}
/* viz: rise bars */
.rise{display:flex;align-items:flex-end;gap:7px;height:56px}
.rise span{flex:1;background:linear-gradient(180deg,var(--orange),#9c2409);border-radius:4px 4px 0 0}
.rise span:last-child{background:var(--volt)}
/* viz: checks */
.checks{display:flex;flex-wrap:wrap;gap:8px}
.ck{font-weight:700;font-size:12.5px;padding:6px 11px;border-radius:8px;background:#2c2a1e;color:#a9a597}
.ck.ok{color:var(--volt);background:#23331a}
@media(max-width:900px){.hero{grid-template-columns:1fr}.right{justify-self:start}h1{font-size:clamp(44px,13vw,76px)}}

/* Shared phone (Kipp coach app, Training Day styling) + floating feature cards for the signal-hub hero. */
.hub{position:relative;width:100%;max-width:540px;height:600px;margin:0 auto}
/* ---- phone ---- */
.phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:242px;background:#0F0E08;border-radius:38px;padding:8px;
  box-shadow:0 44px 90px rgba(0,0,0,.6);border:2px solid #2a2a22;z-index:3}
.pscreen{background:#F1ECE2;border-radius:30px;overflow:hidden;border:1px solid #0F0E08}
.pbar{height:30px;position:relative}
.pbar b{position:absolute;left:17px;top:9px;font-size:11px;color:#15140E;font-weight:800}
.pbar .notch{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:72px;height:19px;background:#0F0E08;border-radius:11px}
.phead{display:flex;align-items:center;gap:8px;padding:1px 12px 9px;border-bottom:2px solid #0F0E08}
.phead .pav{width:29px;height:29px;border-radius:9px;background:#15140E;display:flex;align-items:center;justify-content:center;flex:none;border:1.5px solid #0F0E08}
.phead .pn{font-size:13px;font-weight:800;color:#15140E;line-height:1;letter-spacing:-.02em}
.phead .ps{font-size:9px;color:#8a8474;font-weight:600}
.phead .pon{margin-left:auto;font-size:8.5px;font-weight:800;color:#5f8a12;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:4px}
.phead .pon i{width:6px;height:6px;border-radius:50%;background:#8FE04B;display:block}
.pbody{padding:10px 11px 6px;display:flex;flex-direction:column;gap:7px}
.pday{text-align:center}
.pday span{font-size:8px;font-weight:800;letter-spacing:.1em;color:#8a8474;background:#FBF9F4;border:1.5px solid #0F0E08;padding:3px 9px;border-radius:99px}
.pbub{align-self:flex-start;max-width:88%;background:#FBF9F4;border:1.5px solid #0F0E08;border-radius:12px;border-top-left-radius:4px;padding:8px 10px;font-size:10.5px;line-height:1.4;color:#15140E;font-weight:500}
.pbub.pyou{align-self:flex-end;background:#15140E;color:#F1ECE2;border-top-left-radius:12px;border-top-right-radius:4px;position:relative;margin-top:4px}
.ptap{position:absolute;top:-11px;right:-6px;background:#FBF9F4;border:1.5px solid #0F0E08;border-radius:99px;font-size:11px;line-height:1;padding:3px 5px;box-shadow:2px 2px 0 var(--orange)}
.prec{background:#15140E;border:1.5px solid #0F0E08;border-radius:12px;padding:10px 13px 9px;position:relative;overflow:hidden}
.prec .pbarL{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--volt)}
.prec .pl{font-size:8px;font-weight:800;letter-spacing:.12em;color:#9fd648;text-transform:uppercase}
.prec .pnum{font-family:"Anton";font-size:34px;color:#FBF9F4;line-height:.82;margin:4px 0 3px}
.prec .pnum small{font-size:.36em;color:#6b6c63}
.prec .pmeta{font-size:9px;color:#a7a598;font-weight:600}
.pcomp{margin:5px 11px 12px;height:35px;background:#FBF9F4;border:1.5px solid #0F0E08;border-radius:11px;display:flex;align-items:center;padding:0 7px 0 12px;gap:7px}
.pcomp .pph{flex:1;font-size:10px;color:#a3a196;font-weight:500}
.pcomp .pmic{width:25px;height:25px;border-radius:8px;background:var(--volt);display:flex;align-items:center;justify-content:center;flex:none;border:1.5px solid #0F0E08}
/* ---- floating feature cards ---- */
.fcard{position:absolute;width:178px;background:var(--bone);border:2.5px solid #0F0E08;border-radius:16px;box-shadow:6px 6px 0 var(--orange);padding:13px 14px;color:var(--ink);z-index:5}
.fcard.fc-meal{width:196px}
.fcard.fc-plan{width:192px}
.fcard .fl{font-weight:800;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#b5460f;margin-bottom:8px}
.fcard .fbig{font-family:"Anton";font-size:42px;line-height:.82;margin:2px 0 3px}
.fcard .fbig small{font-size:.36em;color:var(--orange);vertical-align:super;margin-left:.02em}
.fcard .fm{font-size:10.5px;font-weight:600;color:#726d5f;line-height:1.3}
.fcard .ftag{display:inline-block;margin-top:8px;font-weight:800;font-size:9px;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:6px}
.ftag.good{background:#23331a;color:#6db81f}
.ftag.warm{background:#0F0E08;color:#ff7a4d}
.fchips{display:flex;gap:5px}
.fchip{font-weight:800;font-size:9px;padding:3px 6px;border-radius:5px}
.fchip.p{background:var(--volt);color:#15140E}.fchip.c{background:var(--orange);color:#fff}.fchip.f{background:#E4DECF;color:#15140E}
/* meal card photo */
.fphoto{position:relative;border:2px solid #0F0E08;border-radius:10px;overflow:hidden;margin-bottom:9px}
.fphoto img{display:block;width:100%;height:80px;object-fit:cover}
.fcap{position:absolute;left:6px;bottom:6px;background:#15140E;color:var(--volt);font-weight:800;font-size:8px;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:5px}
/* wrap: when the number + chips can't share a line, the chips drop to their own line INSIDE the card
   (they used to spill past its border, since flex items don't shrink below min-content). */
.mealrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px}
.mealrow .fbig{font-size:34px;margin:0}
/* training-plan day strip */
.daystrip{display:flex;gap:5px;margin:2px 0 10px}
.daystrip .d{flex:1;height:22px;border-radius:6px;border:2px solid #0F0E08;background:#E4DECF;color:#8a8474;font-weight:800;font-size:10px;display:flex;align-items:center;justify-content:center}
.daystrip .d.on{background:var(--volt);color:#15140E}
.planfoot{font-size:11px;font-weight:600;color:#726d5f}
.planfoot b{font-weight:800;color:var(--ink)}
/* positions (5 cards) */
.fc-meal{top:-2%;left:-11%}
.fc-strength{top:5%;right:-10%}
.fc-glucose{top:42%;left:-13%}
.fc-plan{bottom:0%;left:-5%}
.fc-habits{bottom:5%;right:-8%}

/* ---- page: hero glow, motion, sections, CTA animation, mobile ---- */
  /* ===== ticker recolor ===== */
  .ticker{background:#1D1B12;color:var(--bone);border-bottom:2px solid var(--volt)}
  .ticker .v{color:var(--volt)} .ticker .r{color:var(--orange)} .ticker .d{color:#5a5646}
  /* ===== hero glow scope ===== */
  .hero-wrap{position:relative;overflow:hidden;background:var(--ink)}
  .bgfx{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
  .bgfx .blob{position:absolute;border-radius:50%;filter:blur(100px)}
  .blob.v{width:560px;height:560px;background:rgba(199,241,63,.16);right:-4%;top:2%}
  .blob.o{width:480px;height:480px;background:rgba(240,51,15,.15);right:26%;bottom:-16%}
  .blob.d{width:420px;height:420px;background:rgba(123,160,184,.10);left:-10%;top:34%}
  .hero{position:relative;z-index:1}
  /* ===== hero motion ===== */
  .phone{animation:floatP 7.5s ease-in-out infinite}
  @keyframes floatP{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 9px))}}
  .fcard{opacity:0}
  .fc-meal{rotate:-2.5deg;animation:arriveL .8s cubic-bezier(.2,.9,.3,1) .30s both, driftA 8s ease-in-out 1.3s infinite}
  .fc-strength{rotate:2.5deg;animation:arriveR .8s cubic-bezier(.2,.9,.3,1) .55s both, driftB 9s ease-in-out 1.6s infinite}
  .fc-glucose{rotate:-2deg;animation:arriveL .8s cubic-bezier(.2,.9,.3,1) .80s both, driftC 8.5s ease-in-out 1.9s infinite}
  .fc-plan{rotate:2deg;animation:arriveL .8s cubic-bezier(.2,.9,.3,1) 1.05s both, driftE 9.2s ease-in-out 2.1s infinite}
  .fc-habits{rotate:2.5deg;animation:arriveR .8s cubic-bezier(.2,.9,.3,1) 1.30s both, driftD 9.5s ease-in-out 2.4s infinite}
  @keyframes arriveL{from{opacity:0;transform:translate(-48px,28px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes arriveR{from{opacity:0;transform:translate(48px,28px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes driftA{0%,100%{translate:0 0}33%{translate:-6px -13px}66%{translate:5px -5px}}
  @keyframes driftB{0%,100%{translate:0 0}33%{translate:6px -10px}66%{translate:-4px -15px}}
  @keyframes driftC{0%,100%{translate:0 0}33%{translate:5px -8px}66%{translate:-6px -14px}}
  @keyframes driftD{0%,100%{translate:0 0}33%{translate:-5px -12px}66%{translate:6px -6px}}
  @keyframes driftE{0%,100%{translate:0 0}33%{translate:4px -11px}66%{translate:-5px -7px}}
  @media(prefers-reduced-motion:reduce){.phone,.fcard{animation:none}.fcard{opacity:1;translate:0 0}}
  /* ===== sections ===== */
  .band{width:100%}
  .band.bone{background:var(--bone);color:var(--ink)}
  .band.ink{background:var(--ink);color:var(--bone)}
  .band.orange{background:var(--orange);color:#fff}
  .section{max-width:1220px;margin:0 auto;padding:clamp(66px,9vw,124px) clamp(20px,5vw,40px)}
  .eyebrow2{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
  .band.ink .eyebrow2{color:var(--volt)}
  .h2{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(40px,6vw,86px);line-height:.9;text-transform:uppercase;letter-spacing:.004em}
  .h2 .v{color:var(--volt)} .h2 .o{color:var(--orange)}
  .lead{font-size:clamp(16px,1.6vw,20px);line-height:1.55;font-weight:500;max-width:560px;margin-top:22px}
  .band.bone .lead{color:#4c4a42}.band.ink .lead{color:#b4b0a2}
  /* integrations */
  .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(40px,5vw,56px)}
  .logo{aspect-ratio:1.55;background:var(--bone);border:2.5px solid #0F0E08;border-radius:16px;box-shadow:5px 5px 0 var(--orange);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px}
  .logo img{max-width:64px;max-height:34px;object-fit:contain}
  .logo span{font-weight:800;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#54524a}
  /* log by talking */
  .talkgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);align-items:center}
  .says{display:flex;flex-direction:column;gap:16px;margin-top:8px}
  .say{background:#FBF9F4;border:2.5px solid #0F0E08;border-radius:16px;box-shadow:6px 6px 0 var(--ink);padding:16px 18px}
  .say .u{font-size:15px;font-weight:600;color:var(--ink)}
  .say .r{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:11px;border-top:1.5px dashed #cfc7b4}
  .say .r .k{font-weight:800;font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:var(--volt);color:var(--ink);padding:4px 8px;border-radius:6px}
  .say .r .t{font-family:"Anton";font-size:17px;text-transform:uppercase;color:var(--ink)}
  /* two-up */
  .twoup{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(40px,5vw,56px)}
  .bigcard{border:3px solid #0F0E08;border-radius:22px;box-shadow:8px 8px 0 var(--orange);padding:clamp(24px,3vw,36px);background:#17160F}
  .bigcard .k{font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--volt);margin-bottom:12px}
  .bigcard h3{font-family:"Anton";font-size:clamp(24px,3vw,34px);text-transform:uppercase;line-height:.95;color:var(--bone)}
  .bigcard p{font-size:14px;line-height:1.5;color:#a9a597;font-weight:500;margin-top:12px;max-width:400px}
  /* plan-change mini */
  .planrow{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:13px;font-weight:600}
  .planrow.old{color:#7a766a;text-decoration:line-through}
  .planrow.new{color:var(--bone)}
  .planrow .dot{width:16px;height:16px;border-radius:5px;flex:none;display:flex;align-items:center;justify-content:center}
  .planrow.old .dot{background:#2c2a1e}.planrow.new .dot{background:var(--volt)}
  .wchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
  .wchip{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-radius:10px;border:2px solid #0F0E08;background:var(--bone);color:var(--ink);box-shadow:3px 3px 0 var(--orange)}
  /* money band */
  .moneyband{text-align:center;max-width:960px;margin:0 auto;padding:clamp(60px,8vw,110px) clamp(20px,5vw,40px)}
  .moneyband .k{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#3a0d03;margin-bottom:20px}
  .moneyband h2{font-family:"Anton";font-size:clamp(30px,8vw,80px);line-height:.98;text-transform:uppercase;color:#fff}
  .moneyband h2 .ink{color:#15140E}
  .mb-cta{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:34px}
  .moneyband .appstore{box-shadow:5px 5px 0 #15140E}
  .mb-fine{font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.05em;color:#3a0d03}
  /* newsletter band - The Hybrid Signal */
  .signal .section{text-align:center;max-width:820px}
  .signal .h2{font-size:clamp(40px,6.2vw,80px);text-wrap:balance}
  .signal .h2 .o{color:var(--orange)}
  .sig-sub{font-size:clamp(16px,1.7vw,20px);line-height:1.5;font-weight:500;color:#54524a;margin:20px auto 0;max-width:560px;text-wrap:balance}
  .sig-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:32px auto 0;max-width:500px}
  .sig-form input{flex:1;min-width:210px;font-family:inherit;font-size:15px;font-weight:600;padding:14px 16px;border-radius:12px;outline:none;background:#fff;border:2px solid #0F0E08;color:var(--ink)}
  .sig-form input::placeholder{color:#9a9384}
  .sig-form input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
  .sig-form button{font-family:inherit;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;padding:14px 24px;border-radius:12px;border:none;cursor:pointer;white-space:nowrap;background:var(--ink);color:var(--volt)}
  .sig-latest{margin-top:22px;font-weight:700;font-size:14px;color:#726d5f}
  .sig-latest a{color:var(--ink);border-bottom:2px solid var(--orange);font-weight:800}
  @media(max-width:520px){ .sig-form button{width:100%} }
  /* cta */
  .cta-sec{text-align:center;max-width:900px;margin:0 auto;padding:clamp(66px,9vw,120px) clamp(20px,5vw,40px)}
  .cta-sec h2{font-family:"Anton";font-size:clamp(44px,7vw,100px);line-height:.9;text-transform:uppercase;color:var(--bone)}
  .cta-sec h2 .v{color:var(--volt)}
  .cta-sec .row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:34px}
  /* footer */
  .foot{border-top:2px solid #26241a;background:#0C0B06}
  .foot-in{max-width:1220px;margin:0 auto;padding:44px clamp(20px,5vw,40px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
  .foot .brand .word{color:var(--bone)}
  .foot-links{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
  .foot-links a{font-size:14px;font-weight:600;color:#8f8b7d}
  .foot-links a:hover{color:var(--volt)}
  .foot-x{display:inline-flex;align-items:center;color:#8f8b7d;transition:color .15s ease}
  .foot-x svg{display:block}
  .foot-x:hover{color:var(--volt)}
  .foot-copy{font-size:12.5px;color:#6b6759;font-weight:600;width:100%;border-top:1px solid #201e15;padding-top:20px}
  /* smooth CTA button animation */
  .appstore{position:relative;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
  .appstore:hover{transform:translate(-2px,-3px)}
  .appstore:active{transform:translate(1px,2px)}
  .hero .appstore::after,.mb-cta .appstore::after{content:"";position:absolute;inset:-2px;border-radius:17px;z-index:-1;pointer-events:none;animation:ctaPulse 2.8s ease-in-out infinite}
  @keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(199,241,63,0)}50%{box-shadow:0 0 22px 3px rgba(199,241,63,.45)}}
  .nav-r .dl{transition:transform .18s ease,box-shadow .18s ease}
  .nav-r .dl:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(199,241,63,.35)}
  @media(prefers-reduced-motion:reduce){.hero .appstore::after,.mb-cta .appstore::after{animation:none}}
  @media(max-width:760px){
    html,body{overflow-x:hidden;width:100%;max-width:100%}
    .nrate{display:none}
    nav{padding:14px 16px;max-width:100%}
    .nav-r .dl{padding:9px 15px;font-size:13px}
    .brand .word{font-size:22px}
    .hero{display:flex!important;flex-direction:column;gap:6px;padding:22px 14px 30px}
    .hero>div{width:100%;min-width:0;max-width:100%}
    .hero .cta{flex-direction:column;align-items:center;gap:14px}
    .right{width:100%!important;max-width:100%!important;min-width:0;overflow:visible;margin:38px 0 24px}
    /* Hub takes the full hero content width so the phone can be wide enough to read:
       the cards sit at the hub edges, so a wider hub buys phone width without extra overlap. */
    .hub{position:relative;width:100%;max-width:366px;height:486px;margin:0 auto}
    .phone{width:206px;border-radius:30px}
    .fcard{width:138px;padding:9px 10px;border-width:2px;box-shadow:4px 4px 0 var(--orange)}
    .fcard .fl{font-size:8.5px;margin-bottom:5px}
    .fcard .fbig{font-size:28px}
    .fcard.fc-meal{width:156px}
    .fcard.fc-plan{width:158px}
    .planfoot{font-size:10px}
    .fphoto img{height:54px}
    /* Bands are chosen so no card lands on the phone's showpiece (the RECOVERY 82/100 card, 37-53%). */
    .fc-meal{top:-1%;left:0}
    .fc-strength{top:9%;right:0}
    .fc-glucose{top:56%;left:0}
    .fc-plan{bottom:0;left:0}
    .fc-habits{bottom:6%;right:0}
    .daystrip .d{height:17px;font-size:8px}
    .foot-in{padding:22px 16px}
    .foot-in:last-child{padding-top:2px}
    .foot-copy{padding-top:14px}
  }
  /* Below ~360px the hub can't hold a 206px phone without the cards burying it - scale the pair down together. */
  @media(max-width:360px){
    .phone{width:184px}
    .fcard{width:128px}
    .fcard.fc-meal{width:150px}
    .fcard.fc-plan{width:156px}
  }

/* ===========================================================================
   APP-UI KIT - real Kipp cards, drawn in CSS at section scale.
   The hero (hub.js) draws the same objects at phone scale inside a 242px
   frame; these are the same cards one size up, for the two feature sections
   below. Card face / border / hard shadow all match .fcard so a section card
   and a hero card read as one family.
   =========================================================================== */
  .ux{--face:#FBF9F4;--line:#0F0E08;--dim:#726d5f;--dim2:#8a8474;--inkdim:#a9a597}
  .ux-kick{font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#b5460f}
  /* chat bubbles */
  .ux-bub{align-self:flex-start;max-width:90%;background:#FBF9F4;border:2px solid #0F0E08;border-radius:14px;border-top-left-radius:5px;padding:11px 13px;font-size:13.5px;line-height:1.45;font-weight:500;color:var(--ink)}
  .ux-bub.you{align-self:flex-end;background:#15140E;color:var(--bone);border-top-left-radius:14px;border-top-right-radius:5px}
  .ux-bub b{font-weight:800}
  /* big number */
  .ux-num{font-family:"Anton",sans-serif;font-size:52px;line-height:.82;color:var(--ink)}
  .ux-num small{font-size:.32em;color:var(--orange);vertical-align:super;margin-left:.03em}
  .ux-tag{display:inline-block;font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.07em;padding:4px 9px;border-radius:6px}
  .ux-tag.good{background:#23331a;color:#8FE04B}
  .ux-tag.low{background:#3a0d03;color:#ff9878}
  /* marker gauge (bloodwork) */
  .ux-gauge{margin-top:11px}
  .ux-gauge .track{height:11px;border-radius:6px;border:2px solid #0F0E08;background:linear-gradient(90deg,#F0330F 0 26%,#E9C23C 26% 42%,#8FE04B 42% 100%);position:relative}
  .ux-gauge .pin{position:absolute;top:-6px;width:4px;height:19px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px #FBF9F4}
  .ux-gauge .sc{display:flex;justify-content:space-between;font-size:10px;font-weight:800;color:#8a8474;margin-top:6px;letter-spacing:.04em}
  /* logged rows */
  .ux-sets{display:flex;flex-direction:column;gap:6px;margin-top:10px}
  .ux-set{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink)}
  .ux-set .i{width:19px;height:19px;border-radius:6px;background:var(--volt);border:1.5px solid #0F0E08;flex:none}
  .ux-set span{margin-left:auto;font-weight:800;color:#726d5f}
  /* integration logos */
  .ux-src{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .ux-src img{height:32px;width:auto;object-fit:contain;border-radius:7px}
  .ux-src .via{font-size:11.5px;font-weight:700;color:#8a8474;letter-spacing:.03em}

/* ---- .on-ink : ONE inversion, declared on the surface ----------------------
   Every card above is authored for the bone ground, so each carries near-black
   text. Dropped onto a dark panel that text disappears completely
   (rgb(19,18,9) on rgb(21,20,14)). The inversion is declared once, and a dark
   panel opts in by class. Add `on-ink` to any new dark surface hosting them.
   The COACH bubble is deliberately not inverted - a light bubble on ink is how
   the real thread renders and it reads on either ground. The USER bubble is the
   exception: it is ink-on-ink (#15140E on #15140E), so on a dark panel the
   bubble vanishes and only its text survives. It gets lifted off the ground
   rather than flipped, so "dark bubble = you" still holds. */
  .on-ink .ux-bub.you{background:#211F16;border-color:#3a3826}
  .on-ink .ux-kick{color:var(--volt)}          /* matches .band.ink .eyebrow2 */
  .on-ink .ux-num{color:var(--bone)}
  .on-ink .ux-set{color:var(--bone)}
  .on-ink .ux-set span{color:#a9a597}
  .on-ink .ux-gauge .track{border-color:#2c2a1e}
  .on-ink .ux-gauge .pin{background:var(--bone);box-shadow:0 0 0 2px #15140E}
  .on-ink .ux-gauge .sc{color:#7d7a6c}
  .on-ink .ux-src .via{color:#8f8b7d}

/* ===========================================================================
   SIGNALS - the bento. Mixed tile sizes, because the claim is how many
   different KINDS of signal land in one thread, not five of the same kind.
   =========================================================================== */
  .bn{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(38px,4.5vw,58px)}
  .bx{border:3px solid #0F0E08;border-radius:20px;box-shadow:7px 7px 0 var(--orange);overflow:hidden;display:flex;flex-direction:column;background:#15140E}
  /* the arrive-on-scroll state is gated on .js (set before paint) so that with
     no JS the tiles are simply THERE - an unrevealed tile is an invisible tile */
  .js .bx{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
  .js .bx.in{opacity:1;transform:none}
  .bx:nth-child(2){transition-delay:.06s}.bx:nth-child(3){transition-delay:.12s}
  .bx:nth-child(4){transition-delay:.18s}.bx:nth-child(5){transition-delay:.24s}.bx:nth-child(6){transition-delay:.3s}
  .bx-tall{grid-column:span 2;grid-row:span 2}
  .bx-wide{grid-column:span 2}
  .bx-in{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;justify-content:center}
  .bx-tall .bx-in{justify-content:flex-start;gap:9px}
  .bx-ft{border-top:3px solid #0F0E08;background:#FBF9F4;padding:16px 20px 18px}
  .bx-ft h3{font-family:"Anton",sans-serif;font-weight:400;font-size:19px;text-transform:uppercase;color:var(--ink);line-height:1;letter-spacing:.004em}
  .bx-ft p{font-size:13.5px;line-height:1.45;font-weight:500;color:#54524a;margin-top:7px}
  .bx-ft .bx-note{color:#8a8474;font-weight:600}  /* NOT .fine - that is the CTA's loud uppercase treatment */
  .bx-tall .bx-ft h3{font-size:clamp(21px,2.2vw,26px)}
  .bx-tall .bx-ft p{font-size:14.5px}
  .bx-photo{display:block;width:100%;height:132px;object-fit:cover}
  .bx-macro{padding:14px 20px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  @media(max-width:1040px){.bn{grid-template-columns:repeat(2,1fr)}.bx-tall{grid-column:span 2;grid-row:span 1}}
  @media(max-width:680px){.bn{grid-template-columns:1fr}.bx-tall,.bx-wide{grid-column:span 1}}

/* ===========================================================================
   SPORTS - one panel, four disciplines. The photo AND the cards swap together,
   because the product claim is that the coaching BRANCHES by sport: showing
   the branch beats asserting it, and it lets a visitor self-qualify.
   =========================================================================== */
  .sw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}
  .sw-l{font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8f8b7d;margin-right:4px}
  .sw-b{font:inherit;font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
    padding:11px 17px;border-radius:12px;border:2.5px solid #2c2a1e;background:#211F16;color:#a9a597;
    transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,background .16s ease,color .16s ease}
  .sw-b:hover{transform:translate(-1px,-2px);color:var(--bone)}
  .sw-b.on{background:var(--volt);color:var(--ink);border-color:#0F0E08;box-shadow:4px 4px 0 var(--orange)}
  .sw-b:focus-visible{outline:3px solid var(--volt);outline-offset:3px}
  .arena{max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,40px) clamp(66px,9vw,110px)}
  .stage{position:relative;border:3px solid #0F0E08;border-radius:24px;overflow:hidden;min-height:clamp(440px,52vw,600px);display:flex;align-items:flex-end;margin-top:22px}
  .stage img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .stage .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,6,.14) 0%,rgba(11,10,6,.58) 48%,rgba(11,10,6,.94) 100%)}
  .stage .in-wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,48px);align-items:end;padding:clamp(24px,3.4vw,40px)}
  /* swapped panels cross-fade rather than jump, so the eye keeps its place */
  .stage .in-wrap{animation:swIn .34s cubic-bezier(.2,.8,.2,1) both}
  @keyframes swIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  .stage .bk{font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--volt);margin-bottom:14px}
  .stage h3{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(28px,3.8vw,50px);text-transform:uppercase;line-height:.93;color:#fff;letter-spacing:.004em;text-shadow:0 2px 18px rgba(0,0,0,.4)}
  .stage h3 span{color:var(--volt)}
  .stage .sub{font-size:clamp(15px,1.5vw,17px);line-height:1.5;font-weight:500;color:#ddd8ca;margin-top:14px;max-width:430px}
  .stage .over{display:flex;flex-direction:column;gap:11px;justify-self:end;width:100%;max-width:312px}
  .ovc{background:var(--bone);border:2.5px solid #0F0E08;border-radius:16px;box-shadow:7px 7px 0 var(--orange);padding:15px 16px;color:var(--ink)}
  .ovc.ink{background:#15140E;color:var(--bone);box-shadow:7px 7px 0 var(--volt)}
  .ovc .k{font-weight:800;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#b5460f;margin-bottom:8px}
  .ovc.ink .k{color:var(--volt)}
  .ovc .n{font-family:"Anton",sans-serif;font-size:40px;line-height:.84}
  .ovc .n small{font-size:.32em;color:var(--orange);vertical-align:super;margin-left:.03em}
  .ovc .m{font-size:12px;font-weight:600;color:#726d5f;line-height:1.35}
  .ovc.ink .m{color:#a9a597}
  .ovc .m b{color:var(--ink)}
  .ovc.ink .m b{color:var(--bone)}
  .arena-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px}
  .arena-foot .t{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8f8b7d}
  @media(max-width:900px){
    .stage{min-height:0}
    /* stacked, the content would cover the whole photo and the athlete becomes
       texture - reserve a window at the top so the picture is still a picture */
    .stage .in-wrap{grid-template-columns:1fr;padding:150px 20px 24px}
    .stage .over{justify-self:start;max-width:none;margin-top:20px}
    .stage .scrim{background:linear-gradient(180deg,rgba(11,10,6,.2) 0%,rgba(11,10,6,.72) 34%,rgba(11,10,6,.96) 100%)}
  }
  /* On a phone the label pushes the fourth chip onto a line of its own, which
     reads as an overflow rather than a choice. Drop it and tighten the chips. */
  @media(max-width:560px){
    .sw-l{display:none}
    .sw{gap:8px}
    .sw-b{padding:11px 12px;font-size:12px;letter-spacing:.02em}
  }
  @media(prefers-reduced-motion:reduce){
    .js .bx{opacity:1;transform:none;transition:none}
    .stage .in-wrap{animation:none}
  }

/* ---- running week chart (bento) -------------------------------------------
   Bars are the athlete's real daily distances, so the long run is visibly the
   long run rather than a number in a list. A REST DAY DRAWS AN EMPTY SLOT, not
   a zero-height bar - the same rule the Intake widget follows, because a bar of
   nothing and a day that was never logged must not look identical. */
  .wk{display:flex;align-items:flex-end;gap:clamp(14px,2vw,26px);margin-top:2px}
  .wk-n{flex:none}
  .wk-sub{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7d7a6c;margin-top:6px}
  .wk-chart{flex:1;min-width:0}
  .wk-bars{display:flex;align-items:flex-end;gap:5px;height:78px}
  .wk-bars span{flex:1;position:relative;background:#3a3826;border-radius:3px 3px 0 0;min-height:4px}
  .wk-bars span.hi{background:var(--volt)}
  .wk-bars span.off{height:100%;background:none;border:1.5px dashed #3a3826;border-bottom:none;border-radius:3px 3px 0 0}
  .wk-bars b{position:absolute;left:0;right:0;top:-15px;text-align:center;font-size:10px;font-weight:800;color:#7d7a6c;letter-spacing:.02em}
  .wk-bars span.hi b{color:var(--volt)}
  .wk-days{display:flex;gap:5px;margin-top:7px}
  .wk-days i{flex:1;text-align:center;font-style:normal;font-size:10px;font-weight:800;color:#6f6b5e;letter-spacing:.06em}
  .wk-stats{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;padding-top:13px;border-top:1.5px solid #2c2a1e}
  .wk-stats span{font-size:12px;font-weight:600;color:#8f8b7d}
  .wk-stats b{font-weight:800;color:var(--bone)}
  @media(max-width:520px){.wk{gap:14px}.wk-bars{height:62px}.wk-bars b{font-size:9px}}

/* The two feature sections have the full column to themselves, so their intro
   is allowed to run wider than the hero's narrow measure - at 560px it broke to
   three lines with half the row empty beside it. */
  .band.ux .lead{max-width:none;width:min(100%,860px)}

/* Per-sport focal point. The plates are square and the stage is a wide banner,
   so more than half the height is cropped away - centre is wrong for a subject
   that does not sit in the middle of its own frame. */
  .stage img.bg{object-position:center 42%}
  .stage img.bg.f-run{object-position:center 30%}
  .stage img.bg.f-cycle{object-position:center 40%}
  .stage img.bg.f-swim{object-position:center 45%}
  @media(max-width:560px){.arena-foot{gap:10px}}