/* Layout: athletic poster bands — black / paper / lime, giant condensed type, a live 60-day grid as the hero's proof. Single deliberate look. */
:root{
  --ink:#0E0F0C; --ink-2:#1B1D18; --paper:#F7F5EF; --paper-2:#ECE9E0;
  --lime:#CDF76B; --cyan:#76FDFC; --yolk:#F6C34A; --pink:#FF4FA3; --violet:#7B5CF5;
  --mute:#8A8C84; --mute-ink:#5C5E57;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --body:"Sora","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --wrap:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.55;margin:0;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(14,15,12,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #24261f}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.mark{font-family:var(--body);font-size:22px;letter-spacing:-.02em;text-decoration:none;display:inline-flex;align-items:baseline;white-space:nowrap}
.mark b{font-weight:700}.mark span{font-weight:300}
.mark i{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--lime);margin-left:2px;transform:translateY(1px)}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#c9cbc2}
.nav ul a:hover{color:var(--lime)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:15px;text-decoration:none;border-radius:999px;padding:14px 22px;transition:transform .2s ease,background .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-sm{padding:10px 16px;font-size:13px}
.btn svg{width:18px;height:18px;flex:none}
@media (max-width:760px){.nav ul{display:none}}

/* hero */
.hero{position:relative;padding-block:56px 72px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(64px,10.5vw,148px)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .line:nth-child(2) > span{animation-delay:.08s}
.hero h1 .line:nth-child(3) > span{animation-delay:.16s}
.hl{background:var(--lime);color:var(--ink);padding:0 .08em}
.hero .lede{font-size:clamp(17px,1.6vw,20px);color:#d8dad1;max-width:34ch;margin-top:28px}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:32px}
.hero .note{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}

/* phone with live 60-day map */
.phone{justify-self:center;width:min(340px,100%);aspect-ratio:9/18.5;border-radius:46px;background:var(--paper);padding:14px;box-shadow:0 0 0 2px #2c2e27,0 40px 80px -30px rgba(205,247,107,.35);position:relative;transform:rotate(3deg)}
.screen{height:100%;border-radius:34px;background:var(--paper);color:var(--ink);padding:26px 20px 20px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.screen .top{display:flex;justify-content:space-between;align-items:center}
.screen .mark{font-size:17px;color:var(--ink)}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:4px 9px}
.habit{background:var(--lime);border-radius:22px;padding:16px}
.habit .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em}
.habit .t{font-family:var(--body);font-weight:700;font-size:24px;letter-spacing:-.02em;margin-top:2px}
.count{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.count b{font-family:var(--display);font-weight:400;font-size:64px;line-height:.9;font-variant-numeric:tabular-nums}
.count span{font-family:var(--display);font-size:28px;color:rgba(14,15,12,.45)}
.medals{display:flex;gap:6px;margin-top:8px}
.medal{font-family:var(--mono);font-size:9px;letter-spacing:.12em;padding:4px 8px;border-radius:999px;background:rgba(14,15,12,.08);color:rgba(14,15,12,.5);transition:background .3s,color .3s}
.medal.on{background:var(--ink);color:var(--lime)}
.grid60{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.grid60 i{aspect-ratio:1;border-radius:4px;border:1.5px solid #d9d6cb;background:transparent;transition:background .25s,border-color .25s,transform .25s}
.grid60 i.done{background:var(--ink);border-color:var(--ink)}
.grid60 i.medal-day{background:var(--violet);border-color:var(--violet)}
.grid60 i.today{border-color:var(--ink);transform:scale(1.12);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.screen .done-btn{margin-top:auto;background:var(--ink);color:var(--paper);border-radius:14px;padding:12px;text-align:center;font-weight:700;font-size:14px}

/* ticker */
.ticker{background:var(--lime);color:var(--ink);overflow:hidden;border-block:2px solid var(--ink);transform:rotate(-1.2deg);margin-block:8px}
.ticker .track{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker span{font-family:var(--display);font-size:clamp(28px,4vw,46px);text-transform:uppercase;padding:10px 0;white-space:nowrap}
.ticker span::after{content:"✦";font-size:.6em;margin:0 .7em;vertical-align:.2em}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
section{padding-block:clamp(72px,10vw,128px)}
.paper{background:var(--paper);color:var(--ink)}
.paper .eyebrow{color:var(--mute-ink)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:56px}
.sec-head h2{font-size:clamp(52px,7.5vw,104px)}
.sec-head p{font-size:18px;max-width:42ch;justify-self:end}
.paper .sec-head p{color:#3d3f38}
@media (max-width:860px){
  .hero .wrap,.sec-head{grid-template-columns:1fr}
  .sec-head p{justify-self:start}
  .phone{transform:none;margin-top:12px}
}

/* method */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.step{padding:28px 28px 8px 0;display:flex;flex-direction:column;gap:14px;min-width:0}
.step + .step{padding-left:28px;border-left:2px solid var(--ink)}
.step .k{font-family:var(--display);font-size:88px;line-height:.8;color:var(--ink)}
.step:nth-child(1) .k{-webkit-text-stroke:2px var(--ink);color:var(--cyan)}
.step:nth-child(2) .k{-webkit-text-stroke:2px var(--ink);color:var(--yolk)}
.step:nth-child(3) .k{-webkit-text-stroke:2px var(--ink);color:var(--pink)}
.step h3{font-size:34px}
.step p{color:#3d3f38;max-width:34ch}
@media (max-width:860px){
  .steps{grid-template-columns:1fr}
  .step,.step + .step{padding:28px 0;border-left:0;border-bottom:2px solid var(--ink)}
}

/* slots */
.slots-band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:88px}
.slots{display:grid;gap:14px;max-width:380px;width:100%}
.slot{height:62px;border-radius:16px;display:flex;align-items:center;padding:0 20px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.slot:nth-child(1){background:var(--lime)}.slot:nth-child(2){background:var(--cyan)}.slot:nth-child(3){background:var(--yolk)}
.slot.earn{position:relative;border:2.5px dashed #c9c4b4;background:var(--paper-2);color:var(--mute-ink);justify-content:center;overflow:hidden}
.slot.earn::before{content:"";position:absolute;inset:0;background:var(--pink);transform-origin:left;transform:scaleX(0);animation:earn 6s cubic-bezier(.6,0,.2,1) infinite}
.slot.earn span{position:relative}
@keyframes earn{0%,15%{transform:scaleX(0)}60%,88%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.slots-copy h3{font-size:clamp(40px,5vw,64px)}
.slots-copy p{margin-top:18px;font-size:18px;color:#3d3f38;max-width:40ch}
@media (max-width:860px){.slots-band{grid-template-columns:1fr}}

/* medals */
.medal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mcard{border-radius:28px;padding:28px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink);position:relative;overflow:hidden;transition:transform .3s ease}
.mcard:hover{transform:translateY(-6px) rotate(-1deg)}
.mcard .day{font-family:var(--display);font-size:clamp(110px,13vw,180px);line-height:.8}
.mcard .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.mcard p{font-size:15px;max-width:26ch}
.b{background:#E7A774}.s{background:#D9DCE3}.g{background:var(--yolk)}
@media (max-width:860px){.medal-row{grid-template-columns:1fr}.mcard{min-height:220px}}

/* timer */
.timer .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lamp{position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:center;border-radius:40px;background:linear-gradient(180deg,#221d4a,#0d0b22);overflow:hidden;box-shadow:inset 0 0 0 2px #2d2860}
.goo{position:absolute;inset:0;filter:blur(14px)}
.goo i{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9C8CFF,#6E6BF2 60%,#4B3FD6)}
.goo i:nth-child(1){width:42%;height:42%;left:30%;bottom:-6%;animation:float1 11s ease-in-out infinite}
.goo i:nth-child(2){width:26%;height:26%;left:18%;bottom:8%;animation:float2 14s ease-in-out infinite}
.goo i:nth-child(3){width:30%;height:30%;left:52%;bottom:0;animation:float3 9s ease-in-out infinite}
.goo i:nth-child(4){width:18%;height:18%;left:40%;bottom:-4%;animation:float2 12s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translate(4%,-120%) scale(.85)}}
@keyframes float2{50%{transform:translate(30%,-210%) scale(1.15)}}
@keyframes float3{50%{transform:translate(-40%,-160%) scale(.9)}}
.readout{position:absolute;left:24px;right:24px;bottom:22px;display:flex;justify-content:space-between;align-items:end;color:var(--paper)}
.readout b{font-family:var(--display);font-weight:400;font-size:56px;line-height:.9;font-variant-numeric:tabular-nums}
.readout span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#bdbbe8}
.lamp .lbl{position:absolute;top:22px;left:24px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#bdbbe8}
.timer h2{font-size:clamp(56px,7.5vw,104px)}
.timer p.lede{margin-top:22px;font-size:18px;color:#cfd1c8;max-width:38ch}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.facts span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid #3a3c34;border-radius:999px;padding:8px 14px;color:#d8dad1}
@media (max-width:860px){.timer .wrap{grid-template-columns:1fr}}

/* planner */
.planner-stage{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.sheets{position:relative;height:520px;max-width:520px;width:100%;justify-self:center}
.sheet{position:absolute;width:62%;aspect-ratio:8.5/11;background:#fff;color:var(--ink);border-radius:6px;box-shadow:0 30px 60px -28px rgba(14,15,12,.45),0 0 0 1px #e2dfd5;padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sheet .h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7px;letter-spacing:.14em;border-bottom:1px solid var(--ink);padding-bottom:6px}
.sheet .t{font-family:var(--display);font-size:24px;line-height:.95;text-transform:uppercase}
.sheet.s1{left:2%;top:8%;transform:rotate(-8deg)}
.sheet.s2{left:20%;top:3%;transform:rotate(2deg)}
.sheet.s3{left:36%;top:12%;transform:rotate(9deg)}
.sheets:hover .s1{transform:rotate(-14deg) translate(-8%,2%)}
.sheets:hover .s3{transform:rotate(15deg) translate(10%,4%)}
.wall{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:4px}
.wall i{aspect-ratio:1;border:1px solid #d5d2c7;border-radius:2px}
.wall i.x{background:var(--ink);border-color:var(--ink)}
.big0{font-family:var(--display);font-size:64px;line-height:.85}
.lines i{display:block;height:1px;background:#d5d2c7;margin-top:13px}
.band{height:18px;border-radius:3px;background:var(--lime);font-family:var(--mono);font-size:7px;letter-spacing:.14em;display:flex;align-items:center;padding:0 6px}
.planner-copy h2{font-size:clamp(56px,7.5vw,104px)}
.planner-copy p{margin-top:20px;font-size:18px;color:#3d3f38;max-width:40ch}
.spec{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 32px;margin-top:30px}
.spec b{font-family:var(--display);font-weight:400;font-size:52px;line-height:.9;display:block}
.spec span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-ink)}
.adhd{display:inline-flex;margin-top:28px;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border-radius:999px;padding:10px 16px 10px 10px;font-weight:600;font-size:14px}
.adhd i{font-style:normal;background:var(--violet);border-radius:999px;padding:4px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
@media (max-width:860px){.planner-stage{grid-template-columns:1fr}.sheets{height:420px}}

/* private */
.private .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.private h2{font-size:clamp(52px,7vw,96px)}
.plist{display:grid;gap:0;border-top:1.5px solid #34362f}
.plist div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:20px 0;border-bottom:1.5px solid #34362f}
.plist .eyebrow{color:var(--lime);padding-top:3px}
.plist p{color:#d8dad1}
@media (max-width:860px){.private .wrap{grid-template-columns:1fr}.plist div{grid-template-columns:1fr;gap:6px}}

/* plans */
.plans{display:grid;grid-template-columns:1fr 1.25fr;gap:20px}
.plan{border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:20px;min-width:0}
.plan.free{border:2px solid var(--ink)}
.plan.full{background:var(--ink);color:var(--paper)}
.plan h3{font-size:48px}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.plan li{display:flex;gap:12px;align-items:baseline;font-size:16px}
.plan li::before{content:"";width:10px;height:10px;border-radius:3px;flex:none;background:var(--ink);transform:translateY(1px)}
.plan.full li::before{background:var(--lime)}
.plan .sub{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-ink)}
.plan.full .sub{color:var(--mute)}
.terms3{display:flex;flex-wrap:wrap;gap:8px}
.terms3 span{border:1.5px solid #3a3c34;border-radius:999px;padding:7px 12px;font-size:13px;color:#d8dad1}
.terms3 span.hot{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:700}
.fine{font-size:13px;color:var(--mute)}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* final */
.final{background:var(--lime);color:var(--ink);text-align:left}
.final h2{font-size:clamp(72px,14vw,200px)}
.final .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px;margin-top:36px}
.final p{font-size:19px;max-width:36ch}

footer{padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid #24261f}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
footer nav{display:flex;gap:24px}
footer nav a,footer small{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#a7a99f;text-decoration:none}
footer nav a:hover{color:var(--lime)}

/* scroll reveal — visible at rest, motion only plays when it enters view */
.rv.go{animation:up .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes up{from{transform:translateY(28px);opacity:.15}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .slot.earn::before{transform:scaleX(1)}
}

/* legal pages */
.legal{background:var(--paper);color:var(--ink);padding-block:56px 96px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(56px,9vw,104px);margin-top:14px}
.legal .eyebrow{color:var(--mute-ink)}
.legal .doc{margin-top:40px;font-size:17px;line-height:1.7;color:#2b2d27}
.legal .doc h2{font-family:var(--display);font-size:34px;text-transform:uppercase;margin:48px 0 12px;line-height:1}
.legal .doc h3{font-family:var(--body);font-weight:700;font-size:19px;text-transform:none;margin:28px 0 8px;line-height:1.3}
.legal .doc p{margin:0 0 16px;max-width:68ch}
.legal .doc ul,.legal .doc ol{margin:0 0 16px;padding-left:22px;max-width:66ch}
.legal .doc li{margin-bottom:6px}
.legal .doc a{color:var(--ink);text-decoration-color:var(--violet);text-underline-offset:3px}
.legal .doc strong{font-weight:700}
.legal .doc hr{border:0;border-top:2px solid var(--ink);margin:40px 0}