/* Shared design tokens for every marketing page. Colours first, then type and space. */
:root{
  --ink:#0b1210;
  --ink2:#141d1a;
  --line:#2a3733;
  --paper:#ece4d0;
  --paper-ink:#241f16;
  --teal:#2a6b62;
  --brass:#c9a466;
  --redact:#a83232;
  --redact-lit:#e2706b;
  --mist:#8ea69f;
  --text:#dbe4e0;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --tap:44px;
  --run:#2a6b62;
  --walk:rgba(36,31,22,.16);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  margin:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    var(--ink);
  color:var(--text);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.7;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
.wrap{max-width:720px;margin:0 auto;padding:8px 22px 90px}

/* ---- header: folder-tab nav ---- */
header.site{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px 4px;
  padding:18px 22px 0;
  border-bottom:1px solid var(--line);
}
header.site a.brand{
  font-family:"IBM Plex Mono",monospace;
  color:var(--brass);text-decoration:none;font-weight:600;letter-spacing:2px;
  font-size:14px;padding-bottom:16px;
}
header.site nav{display:flex;flex-wrap:wrap}
header.site nav a{
  font-family:"IBM Plex Mono",monospace;
  color:var(--mist);text-decoration:none;font-size:12px;letter-spacing:.4px;
  padding:8px 14px 12px;margin-left:2px;
  border:1px solid transparent;border-bottom:none;
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
  transition:color .15s, background .15s;
}
header.site nav a:hover{color:var(--paper);background:var(--ink2)}

/* ---- stamp badge ---- */
.badge{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--redact);
  border:2px solid var(--redact);
  box-shadow:0 0 0 3px var(--ink), 0 0 0 4px var(--redact);
  padding:5px 12px;margin:28px 0 18px;
  transform:rotate(-2deg);
}

h1{
  font-family:"IBM Plex Mono",monospace;
  font-weight:600;
  font-size:clamp(24px,4.2vw,34px);
  line-height:1.3;letter-spacing:-.2px;
  color:var(--paper);
  margin:0 0 18px;
  max-width:15ch;
}
h2{
  font-family:"IBM Plex Mono",monospace;
  font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:var(--brass);
  margin:44px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
h3{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass);
  margin:0 0 12px;
}
p{color:var(--text)}
.lede{
  color:var(--mist);font-style:italic;font-size:19px;line-height:1.65;
  margin:0 0 22px;padding-left:16px;border-left:2px solid var(--brass);
}
a{color:var(--brass)}
a:hover{color:var(--paper)}

/* ---- hero shot ---- */
.hero-shot{margin:26px 0 34px}
.hero-frame{position:relative}
.hero-frame img,.hero-frame video{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);
  filter:saturate(1.05) contrast(1.05);
}
.hero-frame::before{
  content:"";position:absolute;top:0;left:0;width:22px;height:22px;
  border-top:2px solid var(--brass);border-left:2px solid var(--brass);
}
.hero-frame::after{
  content:"";position:absolute;bottom:0;right:0;width:22px;height:22px;
  border-bottom:2px solid var(--brass);border-right:2px solid var(--brass);
}
.hero-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:50px 24px 20px;
  background:linear-gradient(to top, rgba(11,18,16,.92), rgba(11,18,16,.55) 55%, transparent);
  display:flex;flex-direction:column;gap:4px;
}
.hero-kicker{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--brass);
}
.hero-line{
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:clamp(20px,3.6vw,28px);
  color:var(--paper);letter-spacing:.2px;
}
.hero-shot figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.5px;
  color:var(--mist);padding:8px 2px 0;
}

/* ---- intel card ---- */
.panel{
  position:relative;
  background:var(--paper);color:var(--paper-ink);
  border-left:4px solid var(--brass);
  padding:20px 24px;margin:24px 0;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);
}
.panel::after{
  content:"";position:absolute;top:0;right:0;width:20px;height:20px;
  background:linear-gradient(135deg, transparent 50%, var(--ink) 50%);
}
.panel h3{color:var(--redact)}
.panel p{color:var(--paper-ink)}
.panel strong{color:var(--teal)}

/* ---- intel table ---- */
.table-scroll{overflow-x:auto;margin:16px 0}
table.compare{width:100%;min-width:480px;border-collapse:collapse}
table.compare th,table.compare td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:15px;
  vertical-align:top;
}
table.compare th{
  font-family:"IBM Plex Mono",monospace;
  color:var(--brass);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  border-bottom:2px solid var(--brass);
}
table.compare tr:hover td{background:rgba(42,107,98,.12)}

/* ---- faq ---- */
.faq dt{
  font-family:"IBM Plex Mono",monospace;
  color:var(--paper);font-weight:600;font-size:15px;margin-top:20px;
  padding-left:26px;position:relative;
}
.faq dt::before{content:"Q //";position:absolute;left:0;color:var(--redact);font-size:12px;top:3px}
.faq dd{
  margin:6px 0 0 26px;color:var(--mist);position:relative;padding-left:0;
}

/* ---- stamped CTA ---- */
.cta{
  position:relative;
  display:block;text-align:center;margin:38px 0;padding:18px 24px;
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--brass);text-decoration:none;
  border:1px solid var(--brass);
}
.cta::before,.cta::after{
  content:"";position:absolute;width:10px;height:10px;border-color:var(--brass);border-style:solid;
}
.cta::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.cta::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.cta:hover{background:var(--brass);color:var(--ink)}

/* ---- week nav ---- */
.weeknav{
  display:flex;justify-content:space-between;gap:12px;margin:40px 0 8px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.5px;
}
.weeknav a{
  color:var(--mist);text-decoration:none;border:1px solid var(--line);
  padding:9px 16px;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
}
.weeknav a:hover{color:var(--paper);border-color:var(--brass)}

footer.site{
  text-align:center;color:var(--line);font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  padding:50px 20px 60px;border-top:1px solid var(--line);margin-top:40px;
}
footer.site a{color:var(--mist)}

a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

@media (max-width:520px){
  header.site nav a{padding:6px 8px 10px;font-size:11px}
  .lede{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* Week pages: the longer guidance block */
.more ul{margin:0 0 18px;padding-left:20px}
.more li{margin:0 0 10px;line-height:1.6}
.more li strong{color:var(--paper)}
.src{margin-top:28px;font-size:13px;opacity:.75}
.allweeks{font-size:14px;line-height:1.9}

/* Plan table: fits a phone without sideways scrolling */
table.compare.plan{min-width:0}
table.compare.plan th,table.compare.plan td{padding:10px 8px;font-size:14px}
table.compare.plan td:first-child{white-space:nowrap}


/* ============ Phase 2: shared nav, headings, buttons, interval bars ============ */

/* header: brand, three links, one button. Links are real 44px targets. */
header.site a.brand{display:inline-flex;align-items:center;min-height:var(--tap);padding-bottom:0}
header.site nav{align-items:flex-end}
header.site nav a{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 16px}
header.site nav a.nav-cta{
  color:var(--ink);background:var(--brass);border:1px solid var(--brass);
  clip-path:none;margin-left:10px;margin-bottom:0;min-height:var(--tap);padding:0 14px;
  font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:11px;
}
header.site nav a.nav-cta:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* section headings are real headings now; h3 stays the small label */
h2{
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(19px,3.4vw,23px);letter-spacing:.2px;text-transform:none;
  line-height:1.3;color:var(--brass);margin:48px 0 14px;
}

/* call to action: one line, 48px tall */
.cta{min-height:48px;display:flex;align-items:center;justify-content:center;padding:14px 20px;letter-spacing:1px}

/* week chips: nine tap targets instead of a line of tiny links */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 26px}
.chips a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap);min-height:var(--tap);padding:0 8px;
  font-family:var(--font-mono);font-size:14px;text-decoration:none;
  color:var(--mist);border:1px solid var(--line);
}
.chips a:hover{color:var(--paper);border-color:var(--brass)}
.chips a[aria-current="page"]{color:var(--ink);background:var(--brass);border-color:var(--brass);font-weight:600}
.chips-label{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mist);margin:30px 0 8px}

.weeknav a{min-height:var(--tap);display:inline-flex;align-items:center}

/* interval bar: run blocks and walk blocks, sized by minutes */
.ibar{display:flex;gap:2px;height:30px;margin:10px 0 4px}
.ibar span{
  min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--font-mono);font-size:11px;font-weight:600;line-height:1;
}
.ibar .r{background:var(--run);color:#fff}
.ibar .w{background:var(--walk);color:var(--paper-ink)}
.ibar.sm{height:10px;margin:8px 0 2px}
.ibar.sm span{font-size:0}
.ibar-row{display:flex;align-items:center;gap:10px;margin:2px 0}
.ibar-row b{flex:none;width:2.6em;font-family:var(--font-mono);font-size:11px;color:var(--paper-ink)}
.ibar-row .ibar{flex:1}
.ibar-key{display:flex;gap:16px;margin:8px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--paper-ink)}
.ibar-key i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.ibar-key .r{background:var(--run)}
.ibar-key .w{background:var(--walk)}
td .ibar.sm{margin-top:10px}

footer.site nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;margin:0 0 14px}
footer.site nav a{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 10px;color:var(--mist)}

@media (max-width:520px){
  header.site nav a{padding:0 9px;font-size:11px}
  header.site nav a.nav-cta{margin-left:6px}
  .cta{font-size:13px;letter-spacing:.6px}
}

/* in the dark table the bars need light colours, the paper panel uses the dark ones */
td .ibar .r{background:var(--brass)}
td .ibar .w{background:rgba(142,166,159,.38)}


/* stacked wordmark logo (cream over brass), used in every header */
.logo-stack{height:36px;width:auto;display:block}
.logo-stack path{fill:none;stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter}
.logo-stack .lg-a{stroke:var(--paper)}
.logo-stack .lg-b{stroke:var(--brass)}
header.site a.brand,.welcome .brand{padding:4px 0}