/* ===========================================================
   GRINDSET — Strategy Tracker
   Editorial, cinematic, dark. futura-pt throughout.
   =========================================================== */

:root{
  --bg:        #171717;
  --ink:       #FFE9CE;
  --brand:     #9A76E8;
  --accent:    #9A76E8;

  --panel:     #1c1b19;
  --panel-2:   #211f1c;
  --line:      rgba(255,233,206,.10);
  --line-2:    rgba(255,233,206,.18);
  --dim:       rgba(255,233,206,.58);
  --faint:     rgba(255,233,206,.34);
  --ghost:     rgba(255,233,206,.16);

  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:futura-pt, "Futura", "Century Gothic", sans-serif;
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{ background:var(--accent); color:#171717; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }

/* faint film-grain / vignette so flat dark reads cinematic */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(154,118,232,.07), transparent 60%),
    radial-gradient(90% 70% at -5% 110%, rgba(154,118,232,.05), transparent 55%);
}
.wrap{ position:relative; z-index:1; }

/* ---------- shared layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,72px); }
section{ position:relative; }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  color:var(--dim);
}
.eyebrow .num{ color:var(--accent); }
.eyebrow .suit{ width:14px; height:14px; opacity:.9; }
.eyebrow .rule{ flex:1; height:1px; background:var(--line); }

.section-head{ margin-bottom:clamp(36px,5vw,64px); }
.section-head h2{
  font-weight:800; font-style:italic;
  font-size:clamp(30px,4.4vw,52px);
  line-height:.96; letter-spacing:-.02em;
  margin:.3em 0 0; text-wrap:balance;
}
.section-head p{
  max-width:46ch; margin:18px 0 0; color:var(--dim);
  font-size:clamp(15px,1.5vw,18px);
}

/* ===========================================================
   TOP BAR
   =========================================================== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px clamp(20px,5vw,72px);
  background:rgba(23,23,23,.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.topbar .logo{ height:22px; width:auto; }
.topbar .logo svg{ height:22px; width:auto; display:block; }
.topbar-right{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); }
.site-link{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); transition:color .4s var(--ease);
}
.site-link:hover{ color:var(--ink); }

.gauge{ display:flex; align-items:center; gap:12px; }
.gauge-label{ font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.gauge-track{ display:block; width:clamp(90px,14vw,200px); height:6px; background:var(--ghost); border-radius:3px; overflow:hidden; }
.gauge-fill{ display:block; height:100%; width:0%; background:var(--brand); border-radius:3px; box-shadow:0 0 10px rgba(154,118,232,.55); transition:width .7s var(--ease); }
.gauge-pct{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; min-width:3ch; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ padding:clamp(64px,12vw,150px) 0 clamp(48px,8vw,96px); }
.hero .container{ position:relative; }
.hero-eyebrow{ margin-bottom:clamp(28px,5vw,52px); }
.hero h1{
  font-weight:800; font-size:clamp(36px,8vw,90px); line-height:.86;
  letter-spacing:-.03em; margin:0; text-transform:uppercase;
}
.hero h1 .accent{ color:var(--accent); font-style:italic; }
.hero h1 .line{ display:block; }
.hero h1 .line.shift{ margin-left:0; }

.hero-lower{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:32px; margin-top:clamp(40px,6vw,72px);
}
.hero-lead{ max-width:42ch; color:var(--dim); font-size:clamp(16px,1.7vw,20px); }
.hero-lead b{ color:var(--ink); font-weight:700; }

.hero-goal{
  display:flex; align-items:baseline; gap:18px;
  font-weight:800; letter-spacing:-.01em;
  font-size:clamp(15px,1.5vw,18px); text-transform:uppercase;
  white-space:nowrap;
}
.hero-goal .big{ font-size:clamp(26px,3.2vw,38px); color:var(--accent); font-style:italic; }
.hero-goal .sep{ color:var(--ghost); }

/* signature scribble overlay */
.sig{ position:absolute; pointer-events:none; opacity:.92; }
.sig.hero-sig{ right:clamp(8px,4vw,40px); top:clamp(-10px,2vw,30px); width:clamp(96px,12vw,168px); transform:rotate(-9deg); }
.suit-ghost{ position:absolute; pointer-events:none; z-index:0; opacity:.05; }

/* ===========================================================
   WEEKLY ENGINE
   =========================================================== */
.engine{ padding:clamp(48px,8vw,96px) 0; }

.week-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  margin-bottom:28px;
}
.week-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px; border:1px solid var(--line-2); border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.06em;
}
.week-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(154,118,232,.18); }
.week-dates{ color:var(--dim); font-weight:500; }
.btn-reset{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent; color:var(--ink);
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:all .4s var(--ease);
}
.btn-reset:hover{ border-color:var(--accent); color:var(--accent); }
.btn-reset svg{ width:13px; height:13px; }

/* scoreboard */
.scoreboard{
  display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-bottom:30px;
}
@media (max-width:860px){ .scoreboard{ grid-template-columns:1fr; } }

.score-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px,3vw,34px);
}
.score-card.hero-stat{ display:flex; flex-direction:column; justify-content:space-between; }
.score-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.score-kicker{ font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.score-num{ font-weight:800; font-style:italic; font-variant-numeric:tabular-nums; line-height:1; }
.score-num .done{ font-size:clamp(42px,5.5vw,64px); }
.score-num .of{ font-size:clamp(20px,2.4vw,28px); color:var(--faint); }
.score-num.lit .done{ color:var(--accent); }

.pips{ display:flex; gap:8px; margin-top:22px; }
.pip{ flex:1; height:10px; border-radius:3px; background:var(--ghost); transition:background .45s var(--ease), box-shadow .45s var(--ease); }
.pip.on{ background:var(--accent); box-shadow:0 0 14px rgba(154,118,232,.45); }

/* secondary scoreboard column */
.score-mini-col{ display:grid; grid-template-rows:1fr 1fr; gap:18px; }
.score-mini{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.score-mini .lbl{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.score-mini .lbl small{ display:block; font-weight:500; letter-spacing:0; text-transform:none; color:var(--faint); font-size:12px; margin-top:4px; }
.score-mini .val{ font-weight:800; font-style:italic; font-variant-numeric:tabular-nums; font-size:clamp(26px,3vw,36px); white-space:nowrap; }
.score-mini .val.lit{ color:var(--brand); }

/* stories stepper */
.stepper{ display:flex; align-items:center; gap:14px; }
.stepper button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2);
  background:transparent; color:var(--ink); font-family:inherit; font-size:20px; font-weight:700;
  cursor:pointer; line-height:1; display:grid; place-items:center; transition:all .35s var(--ease);
}
.stepper button:hover{ border-color:var(--brand); color:var(--brand); }
.stepper .count{ font-weight:800; font-style:italic; font-variant-numeric:tabular-nums; font-size:26px; min-width:2ch; text-align:center; }
.stepper .count small{ font-size:15px; color:var(--faint); font-style:normal; }

/* day plan */
.days{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:1080px){ .days{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .days{ grid-template-columns:1fr; } }

.day-col{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:20px 18px 22px; display:flex; flex-direction:column; gap:4px;
  transition:border-color .4s var(--ease);
}
.day-col:hover{ border-color:var(--line-2); }
.day-head{ display:flex; align-items:baseline; justify-content:space-between; }
.day-name{ font-weight:800; font-style:italic; font-size:24px; letter-spacing:-.01em; }
.day-hours{ font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--faint); }
.day-theme{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-top:2px; }
.day-note{ font-size:12.5px; color:var(--faint); margin:6px 0 14px; line-height:1.45; }
.day-tasks{ display:flex; flex-direction:column; gap:2px; margin-top:auto; }

/* engagement strip */
.engage-strip{
  margin-top:18px; padding:16px 22px; border:1px dashed var(--line-2); border-radius:14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  font-size:13px; color:var(--dim);
}
.engage-strip b{ color:var(--ink); font-weight:700; letter-spacing:.04em; }
.engage-strip .tag{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }

/* ===========================================================
   CHECK ITEM (shared)
   =========================================================== */
.check{
  display:flex; align-items:flex-start; gap:11px;
  padding:9px 8px; margin:0 -8px; border-radius:9px;
  cursor:pointer; user-select:none;
  transition:background .3s var(--ease);
}
.check:hover{ background:rgba(255,233,206,.04); }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.box{
  flex:none; width:19px; height:19px; margin-top:1px; border-radius:5px;
  border:1.5px solid var(--line-2); position:relative;
  transition:all .35s var(--ease);
}
.box::after{
  content:""; position:absolute; left:5.5px; top:2px; width:5px; height:10px;
  border:solid #171717; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}
.check input:checked + .box{ background:var(--ink); border-color:var(--ink); }
.check input:checked + .box::after{ transform:rotate(45deg) scale(1); }
.check .ctext{ font-size:14px; line-height:1.42; color:var(--ink); transition:color .3s var(--ease); text-wrap:pretty; }
.check input:checked ~ .ctext{ color:var(--faint); text-decoration:line-through; text-decoration-color:var(--ghost); }

/* accent-flavoured checkbox (milestone triggers) */
.check.accent input:checked + .box{ background:var(--accent); border-color:var(--accent); }
.check.brand input:checked + .box{ background:var(--brand); border-color:var(--brand); }
.check.brand .box::after, .check.accent .box::after{ border-color:#171717; }

/* book chips (reading) */
.reading-block{ margin:4px 0 8px; }
.reading-label{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; }
.reading-label .suit{ width:13px; height:13px; }
.books{ display:flex; flex-wrap:wrap; gap:9px; }
.book{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px 8px 11px; border:1px solid var(--line-2); border-radius:999px;
  cursor:pointer; user-select:none; transition:all .35s var(--ease);
}
.book:hover{ border-color:var(--ink); }
.book input{ position:absolute; opacity:0; width:0; height:0; }
.book .mini{ width:14px; height:14px; border-radius:4px; border:1.5px solid var(--line-2); position:relative; transition:all .3s var(--ease); }
.book .mini::after{ content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #171717; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .25s var(--ease); }
.book input:checked + .mini{ background:var(--ink); border-color:var(--ink); }
.book input:checked + .mini::after{ transform:rotate(45deg) scale(1); }
.book .bt{ font-size:13.5px; font-weight:600; transition:color .3s var(--ease); }
.book input:checked ~ .bt{ color:var(--faint); text-decoration:line-through; text-decoration-color:var(--ghost); }

/* ===========================================================
   CAMPAIGN / TIMELINE
   =========================================================== */
.campaign{ padding:clamp(48px,8vw,96px) 0; }
.timeline{ position:relative; }
.timeline::before{
  content:""; position:absolute; left:clamp(22px,4vw,52px); top:8px; bottom:80px; width:2px;
  background:linear-gradient(var(--line-2), var(--line) 60%, transparent);
}
@media (max-width:760px){ .timeline::before{ left:18px; } }

.stage{ position:relative; padding-left:clamp(64px,9vw,120px); margin-bottom:clamp(48px,7vw,90px); }
@media (max-width:760px){ .stage{ padding-left:52px; } }
.stage:last-child{ margin-bottom:0; }
.stage-node{
  position:absolute; left:clamp(11px,4vw,41px); top:4px; width:24px; height:24px; border-radius:50%;
  background:var(--bg); border:2px solid var(--line-2); display:grid; place-items:center;
  transition:all .5s var(--ease);
}
@media (max-width:760px){ .stage-node{ left:7px; } }
.stage-node .suit{ width:12px; height:12px; }
.stage.complete .stage-node{ border-color:var(--brand); background:var(--brand); }

.stage-label{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 18px; }
.stage-num{ font-weight:800; font-style:italic; font-size:clamp(15px,1.6vw,18px); color:var(--accent); letter-spacing:.04em; }
.stage-months{ font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.stage-name{
  font-weight:800; font-size:clamp(26px,3.6vw,42px); line-height:1; letter-spacing:-.02em;
  margin:6px 0 0; width:100%;
}
.stage-intro{ max-width:48ch; color:var(--dim); font-size:clamp(14px,1.4vw,16px); margin:12px 0 24px; }

.stage-body{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px,3vw,34px);
}
.stage-tasks{ display:flex; flex-direction:column; gap:2px; }

.trigger{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.trigger-row{ display:flex; align-items:flex-start; gap:14px; }
.trigger-when{
  flex:none; max-width:240px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); line-height:1.4; padding-top:2px;
}
.trigger-when .lead{ display:block; font-size:10.5px; letter-spacing:.24em; color:var(--faint); margin-bottom:3px; }
.trigger-arrow{ color:var(--ghost); flex:none; padding-top:1px; }
@media (max-width:620px){
  .trigger-row{ flex-direction:column; gap:8px; }
  .trigger-when{ max-width:none; }
  .trigger-arrow{ display:none; }
}

/* ===========================================================
   MONETIZATION GATES
   =========================================================== */
.gates-sec{ padding:clamp(48px,8vw,96px) 0; }
.gates{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .gates{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gates{ grid-template-columns:1fr; } }
.gate{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px 24px 24px; position:relative; overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.gate:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.gate-metric{ font-weight:800; font-style:italic; font-size:clamp(30px,3.6vw,42px); line-height:.92; letter-spacing:-.02em; }
.gate-when{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:14px 0 18px; }
.gate-what{ font-size:18px; font-weight:700; line-height:1.25; }
.gate-sub{ font-size:13px; color:var(--dim); margin-top:8px; line-height:1.4; }
.gate-check{ margin-top:18px; }

/* ===========================================================
   STUDY LOOP + FRAMEWORK
   =========================================================== */
.study-sec{ padding:clamp(48px,8vw,96px) 0; }
.study-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,34px); align-items:start; }
@media (max-width:900px){ .study-grid{ grid-template-columns:1fr; } }

.panel-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,3.4vw,38px);
}
.panel-card .ph{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:6px; }
.panel-card .ph h3{ font-weight:800; font-style:italic; font-size:clamp(22px,2.6vw,30px); margin:0; letter-spacing:-.01em; }
.panel-card .ph .hours{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.panel-card .pintro{ color:var(--dim); font-size:14px; margin:0 0 18px; max-width:42ch; }
.study-tasks{ display:flex; flex-direction:column; gap:2px; }

/* framework steps */
.steps{ display:flex; flex-direction:column; }
.step{ display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--line); }
.step:first-child{ border-top:0; padding-top:0; }
.step-n{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-weight:800; font-style:italic; font-size:15px; color:var(--accent); }
.step-t{ font-weight:700; font-size:16px; }
.step-d{ font-size:13.5px; color:var(--dim); margin-top:3px; line-height:1.45; text-wrap:pretty; }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{ padding:clamp(64px,10vw,130px) 0 64px; border-top:1px solid var(--line); margin-top:clamp(40px,6vw,80px); position:relative; }
.footer .container{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:36px; }
.footer-logo svg{ height:30px; width:auto; }
.footer-tag{ color:var(--dim); font-size:14px; max-width:34ch; margin-top:18px; }
.footer-right{ text-align:right; }
.footer-site{
  font-weight:800; font-style:italic; font-size:clamp(20px,2.4vw,28px); letter-spacing:-.01em;
  transition:color .4s var(--ease);
}
.footer-site:hover{ color:var(--accent); }
.footer-meta{ font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:8px; }
.sig.foot-sig{ position:absolute; left:clamp(20px,8vw,120px); bottom:30px; width:130px; transform:rotate(-7deg); opacity:.9; }
@media (max-width:760px){ .sig.foot-sig{ display:none; } }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}