/* ==========================================================================
   GROUNDWORK — sales page
   Thesis: a training almanac, not a lifestyle brand. The data is the hero.
   ========================================================================== */

:root{
  /* Restrained palette: warm tinted neutrals, one accent under 10% of surface */
  --paper:      oklch(0.965 0.008 85);
  --paper-deep: oklch(0.935 0.011 82);
  --card:       oklch(0.995 0.004 85);
  --ink:        oklch(0.245 0.012 60);
  --ink-soft:   oklch(0.415 0.010 60);
  --ink-mute:   oklch(0.545 0.009 60);
  --rule:       oklch(0.245 0.012 60 / 0.12);
  --rule-firm:  oklch(0.245 0.012 60 / 0.22);
  --moss:       oklch(0.455 0.072 132);
  --moss-deep:  oklch(0.365 0.065 132);
  --moss-wash:  oklch(0.455 0.072 132 / 0.08);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ease-out-quint. No bounce anywhere on this page. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shell: 1220px;
  --shell-narrow: 760px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  color:var(--ink);
  font-weight:400;
  margin:0;
}

h1{ font-size:clamp(40px,7vw,76px); line-height:1.02; letter-spacing:-0.02em; }
h2{ font-size:clamp(30px,4.2vw,50px); line-height:1.06; letter-spacing:-0.015em; }
h3{ font-size:clamp(21px,2.4vw,28px); line-height:1.2; font-weight:500; font-family:var(--sans); letter-spacing:-0.01em; }

/* The italic kicker carries the accent. Used once per heading, never twice. */
h1 em, h2 em{ font-style:italic; color:var(--moss); }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--moss-deep); }

strong{ color:var(--ink); font-weight:600; }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; font-weight:600; text-decoration:none;
}
.skip:focus{ left:16px; top:16px; }

:where(a,button,summary,details):focus-visible{
  outline:2px solid var(--moss);
  outline-offset:3px;
  border-radius:2px;
}

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:28px; }
.shell.narrow{ max-width:var(--shell-narrow); }

.label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 18px;
}
.label-invert{ color:oklch(0.965 0.008 85 / 0.6); }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead{
  border-bottom:1px solid var(--rule);
  background:oklch(0.965 0.008 85 / 0.88);
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:20;
}

.masthead-row{
  display:flex; align-items:center; gap:20px;
  height:62px;
}

.wordmark{
  font-family:var(--mono);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.2em;
  color:var(--ink);
}
.wordmark-sm{ font-size:13px; }

.masthead-meta{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-mute);
  letter-spacing:0.04em;
  margin-right:auto;
  padding-left:20px;
  border-left:1px solid var(--rule);
}

.masthead-buy{
  font-size:14px; font-weight:500;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule-firm);
  padding-bottom:2px;
  transition:border-color 240ms var(--ease), color 240ms var(--ease);
  white-space:nowrap;
}
.masthead-buy .mono{ color:var(--moss-deep); font-weight:500; }
.masthead-buy:hover{ border-color:var(--moss); color:var(--moss-deep); }

/* ==========================================================================
   Hero — asymmetric. Argument on the wide side, spec sheet on the narrow.
   ========================================================================== */

.hero{ padding:96px 0 88px; }

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:72px;
  align-items:start;
}

.hero-copy h1{ margin-bottom:28px; }

.lede{
  font-size:clamp(18px,2vw,22px);
  line-height:1.5;
  color:var(--ink);
  max-width:34ch;
  margin-bottom:20px;
}

.hero-sub{ max-width:52ch; }

.hero-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
  margin-top:36px;
}

.btn{
  display:inline-block;
  background:var(--moss);
  color:oklch(0.985 0.006 85);
  font-family:var(--sans);
  font-size:15px; font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  padding:15px 28px;
  border:0; border-radius:2px;
  cursor:pointer;
  transition:background 240ms var(--ease), transform 240ms var(--ease);
}
.btn:hover{ background:var(--moss-deep); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-big{ font-size:17px; padding:19px 40px; }

.btn-quiet{
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule-firm);
  padding-bottom:3px;
  transition:border-color 240ms var(--ease);
}
.btn-quiet:hover{ border-color:var(--ink); }

/* Spec sheet: the almanac tell. Reads like a data plate, not a feature card. */
.hero-spec{
  border-top:2px solid var(--ink);
  padding-top:18px;
}

.spec{ margin:0; }

.spec-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--rule);
}

.spec dt{
  font-size:13px;
  color:var(--ink-mute);
  letter-spacing:0.02em;
}
.spec dd{
  margin:0;
  font-size:13.5px;
  color:var(--ink);
  text-align:right;
}

.spec-price{ border-bottom:0; padding-top:16px; }
.spec-price dt{ color:var(--ink); font-weight:500; }
.spec-price dd{ color:var(--moss-deep); font-size:16px; font-weight:500; }

/* ==========================================================================
   Signature move — the progression demo
   ========================================================================== */

.demo-band{
  background:var(--paper-deep);
  border-block:1px solid var(--rule);
  padding:104px 0;
}

.demo-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:72px;
  align-items:center;
}

.demo-intro h2{ margin-bottom:24px; }
.demo-intro p{ max-width:46ch; }

.demo-card{
  background:var(--card);
  border:1px solid var(--rule-firm);
  border-radius:3px;
  padding:26px 26px 22px;
}

.demo-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--rule);
}

.demo-lift{ font-size:16px; font-weight:600; color:var(--ink); }
.demo-target{ font-size:13px; color:var(--ink-mute); }

.demo-track{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin:18px 0 22px;
}

.demo-tab{
  font-family:var(--sans);
  font-size:12px;
  color:var(--ink-mute);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:2px;
  padding:8px 4px;
  cursor:pointer;
  transition:border-color 240ms var(--ease), color 240ms var(--ease), background 240ms var(--ease);
}
.demo-tab .mono{ font-size:12px; }
.demo-tab:hover{ border-color:var(--rule-firm); color:var(--ink); }
.demo-tab.is-on{
  background:var(--moss-wash);
  border-color:var(--moss);
  color:var(--moss-deep);
  font-weight:500;
}

.demo-load{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:14px;
}

.demo-load-label{
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-mute);
}

.demo-load-value{
  font-size:38px;
  font-weight:500;
  color:var(--ink);
  line-height:1;
  transition:color 300ms var(--ease);
}
.demo-load-value .unit{ font-size:14px; color:var(--ink-mute); margin-left:4px; }
.demo-load-value.bumped{ color:var(--moss); }

.demo-sets{
  list-style:none; margin:0 0 18px; padding:0;
  border-top:1px solid var(--rule);
}
.demo-sets li{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--rule);
}
.demo-set-n{ font-size:12px; color:var(--ink-mute); letter-spacing:0.04em; }
.demo-set-r{ font-size:19px; color:var(--ink); font-weight:500; }
.demo-sets li.hit .demo-set-r{ color:var(--moss); }

.demo-verdict{
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 18px;
  min-height:3.4em;
}

.demo-flag{
  display:inline-block;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-mute);
  border:1px solid var(--rule-firm);
  border-radius:2px;
  padding:3px 7px;
  margin-right:9px;
  vertical-align:1px;
}
.demo-verdict.earned .demo-flag{
  color:oklch(0.985 0.006 85);
  background:var(--moss);
  border-color:var(--moss);
}

.demo-next{
  width:100%;
  font-family:var(--sans);
  font-size:14px; font-weight:500;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--rule-firm);
  border-radius:2px;
  padding:12px;
  cursor:pointer;
  transition:border-color 240ms var(--ease), background 240ms var(--ease);
}
.demo-next:hover{ border-color:var(--moss); background:var(--moss-wash); color:var(--moss-deep); }

/* ==========================================================================
   Sections. Rhythm is deliberately uneven: 88 / 128 / 72.
   ========================================================================== */

.section{ padding:128px 0; }
.section-deep{ background:var(--paper-deep); border-block:1px solid var(--rule); padding:112px 0; }

.section-head{ max-width:56ch; margin-bottom:56px; }
.section-head h2{ margin-bottom:20px; }
.section-sub{ color:var(--ink-soft); max-width:52ch; }

/* Hanging-margin split: heading in the narrow rail, substance in the wide column */
.split{
  display:grid;
  grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);
  gap:64px;
}
.split-narrow h2{ margin-bottom:20px; }
.split-note{ font-size:15px; color:var(--ink-mute); max-width:34ch; margin-top:20px; }

.prose{ max-width:62ch; }
.prose p{ margin-bottom:1.25em; }

.checks{
  list-style:none; margin:32px 0 0; padding:22px 0 0;
  border-top:1px solid var(--rule);
}
.checks li{
  position:relative;
  padding:9px 0 9px 26px;
  font-size:15.5px;
  color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.checks li::before{
  content:"";
  position:absolute; left:2px; top:17px;
  width:7px; height:7px;
  background:var(--moss);
  border-radius:50%;
}

/* ==========================================================================
   The evidence sheet — a real session, presented as a document
   ========================================================================== */

.sheet{
  background:var(--card);
  border:1px solid var(--rule-firm);
  border-radius:3px;
  overflow:hidden;
}

.sheet-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:20px 26px;
  background:var(--ink);
  color:oklch(0.965 0.008 85);
}
.sheet-title{ font-size:14px; font-weight:500; letter-spacing:0.01em; }
.sheet-week{
  font-size:12px; letter-spacing:0.16em;
  color:oklch(0.965 0.008 85 / 0.62);
}

.table-scroll{ overflow-x:auto; }

table{ width:100%; border-collapse:collapse; }

.prog{ min-width:560px; }

.prog th, .prog td{
  text-align:left;
  padding:14px 12px;
  border-bottom:1px solid var(--rule);
}
.prog thead th{
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500;
  color:var(--ink-mute);
  border-bottom:1px solid var(--rule-firm);
  padding-top:16px; padding-bottom:12px;
}
.prog th:first-child, .prog td:first-child{ padding-left:26px; }
.prog th:last-child, .prog td:last-child{ padding-right:26px; }
.prog tbody tr:last-child td{ border-bottom:0; }
.prog td{ font-size:15px; color:var(--ink); }
.prog .c-n{ width:38px; color:var(--ink-mute); font-size:12px; }
.prog .c-num{ font-size:14px; white-space:nowrap; }
.prog thead .c-num{ text-align:right; }
.prog tbody .c-num{ text-align:right; }
.ea{ color:var(--ink-mute); font-size:11px; margin-left:5px; }

.sheet-note{
  padding:22px 26px 24px;
  border-top:1px solid var(--rule-firm);
  background:var(--paper);
}
.sheet-note p{
  font-size:14.5px;
  line-height:1.6;
  max-width:70ch;
  margin-bottom:0.9em;
}
.sheet-note p:last-child{ margin-bottom:0; }

/* Block structure table */
.blocks th, .blocks td{
  text-align:left;
  padding:16px 14px 16px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.blocks thead th{
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500; color:var(--ink-mute);
  border-bottom:1px solid var(--rule-firm);
  padding-top:0;
}
.blocks td{ font-size:15px; }
.blocks .b-name{
  font-family:var(--sans);
  font-size:15.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; padding-right:24px;
}
.blocks .c-num{ text-align:right; white-space:nowrap; font-size:14px; color:var(--ink); }
.blocks thead .c-num{ text-align:right; }
.blocks .b-final th, .blocks .b-final td{ border-bottom:0; }
.blocks .b-final .b-name{ color:var(--moss-deep); }

.days{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  margin-top:34px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.day{
  background:var(--paper);
  padding:16px 18px;
  display:flex; align-items:baseline; gap:12px;
}
.day-n{ font-size:12px; color:var(--moss-deep); font-weight:500; }
.day-t{ font-size:14.5px; color:var(--ink); }

/* ==========================================================================
   Contents — numbered list, not a card grid
   ========================================================================== */

.contents{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--rule-firm);
}
.contents li{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:24px;
  padding:28px 0;
  border-bottom:1px solid var(--rule);
}
.c-idx{
  font-size:13px;
  color:var(--moss-deep);
  letter-spacing:0.1em;
  padding-top:4px;
}
.contents h3{ margin-bottom:8px; }
.contents p{ max-width:62ch; font-size:15.5px; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq{ border-top:1px solid var(--rule-firm); }

.faq details{ border-bottom:1px solid var(--rule); }

.faq summary{
  list-style:none;
  cursor:pointer;
  padding:22px 40px 22px 0;
  position:relative;
  font-size:17px;
  font-weight:500;
  color:var(--ink);
  transition:color 240ms var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--moss-deep); }

.faq summary::after{
  content:"";
  position:absolute; right:6px; top:31px;
  width:11px; height:1px;
  background:var(--ink-mute);
}
.faq summary::before{
  content:"";
  position:absolute; right:11px; top:26px;
  width:1px; height:11px;
  background:var(--ink-mute);
  transition:transform 240ms var(--ease), opacity 240ms var(--ease);
}
.faq details[open] summary::before{ transform:scaleY(0); opacity:0; }

.faq details p{
  padding:0 0 24px;
  max-width:66ch;
  font-size:15.5px;
}

/* ==========================================================================
   Buy — the one dark band. Contrast device, not a theme switch.
   ========================================================================== */

.buy{
  background:var(--ink);
  color:oklch(0.965 0.008 85 / 0.78);
  padding:120px 0;
}

.buy-inner{ max-width:var(--shell-narrow); }

.buy h2{
  color:oklch(0.975 0.006 85);
  margin-bottom:40px;
  max-width:18ch;
}
.buy h2 em{ color:oklch(0.78 0.09 132); }

.price{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding:26px 0;
  border-top:1px solid oklch(0.965 0.008 85 / 0.16);
  border-bottom:1px solid oklch(0.965 0.008 85 / 0.16);
  margin-bottom:36px;
}
.price-fig{
  font-size:52px;
  font-weight:500;
  color:oklch(0.975 0.006 85);
  line-height:1;
}
.price-note{ font-size:15px; color:oklch(0.965 0.008 85 / 0.62); }

.buy .btn{
  background:oklch(0.62 0.10 132);
  color:oklch(0.18 0.02 132);
}
.buy .btn:hover{ background:oklch(0.70 0.11 132); }

.buy-points{
  list-style:none; margin:38px 0 0; padding:0;
  display:grid; gap:11px;
}
.buy-points li{
  font-size:15px;
  color:oklch(0.965 0.008 85 / 0.7);
}
.buy-points .mono{
  color:oklch(0.78 0.09 132);
  font-weight:500;
  margin-right:9px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{ padding:52px 0 64px; border-top:1px solid var(--rule); }
.foot-row{ display:grid; gap:18px; }
.foot-note{ font-size:13.5px; color:var(--ink-mute); max-width:64ch; margin:0; }
.foot-spec{ font-size:13px; color:var(--ink-mute); max-width:64ch; margin:0; }
.foot-spec a{ color:var(--ink); }

/* ==========================================================================
   Reveal on scroll — short and restrained. Evidence pages should not bounce.
   ========================================================================== */

.rv{ opacity:0; transform:translateY(12px); }
.rv.in{
  opacity:1; transform:none;
  transition:opacity 420ms var(--ease), transform 420ms var(--ease);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:52px; }
  .hero-spec{ max-width:460px; }
  .demo-grid{ grid-template-columns:1fr; gap:44px; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split-note{ max-width:52ch; }
}

@media (max-width:720px){
  body{ font-size:16.5px; }
  .shell{ padding-inline:20px; }
  .hero{ padding:64px 0 56px; }
  .section{ padding:80px 0; }
  .section-deep{ padding:72px 0; }
  .demo-band{ padding:72px 0; }
  .buy{ padding:88px 0; }
  .section-head{ margin-bottom:40px; }

  .masthead-meta{ display:none; }

  .prog th:first-child, .prog td:first-child{ padding-left:18px; }
  .prog th:last-child, .prog td:last-child{ padding-right:18px; }
  .sheet-head{ padding:16px 18px; flex-direction:column; gap:6px; }
  .sheet-note{ padding:18px; }

  .contents li{ grid-template-columns:1fr; gap:10px; padding:24px 0; }
  .c-idx{ padding-top:0; }

  .days{ grid-template-columns:1fr; }
  .price-fig{ font-size:44px; }
  .hero-actions{ gap:16px; }
  .btn{ width:100%; text-align:center; }
  .btn-quiet{ align-self:flex-start; }
}

@media (max-width:400px){
  .demo-card{ padding:20px 18px 18px; }
  .demo-track{ grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    transition-duration:0.001ms !important;
  }
  .rv{ opacity:1; transform:none; }
}