.strategy-app {
  max-width:1320px;
  margin:auto;
  padding:0 clamp(22px,5vw,72px) 80px
}

.guide-intro {
  padding:76px 0 60px;
  max-width:1000px
}

.guide-intro h1 {
  font-size:clamp(42px,6.5vw,78px);
  font-weight:500;
  line-height:1.13;
  margin:18px 0 26px;
  letter-spacing:-.035em
}

.guide-intro em,.supply-section em {
  color:var(--gold);
  font-weight:400
}

.guide-deck {
  font-size:18px;
  line-height:1.9;
  max-width:820px;
  color:var(--muted)
}

.guide-tags {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:26px 0 30px
}

.guide-tags span {
  border:1px solid #524633;
  border-radius:3px;
  padding:8px 10px;
  color:var(--paper);
  font:10px/1.5 var(--display);
  letter-spacing:.06em
}

.guide-secondary {
  display:inline-block;
  font-size:13px;
  color:var(--gold);
  margin:18px 0 0 24px
}

#release-status { max-width:760px; margin-top:22px }
.demo-guide { margin-bottom:76px; scroll-margin-top:100px }
.demo-guide [id] { scroll-margin-top:100px }
.demo-intro { max-width:860px }
.demo-intro,.demo-research p,.demo-logistics p,.demo-logistics li {
  color:var(--muted); font-size:14px; line-height:1.9
}
.guide-jumps {
  display:flex; flex-wrap:wrap; gap:10px 24px;
  margin:24px 0 32px; font-size:13px; color:var(--gold)
}
.guide-jumps a { padding:8px 0; text-decoration:underline; text-underline-offset:5px }
.lesson-grid.demo-opening { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:32px }
.research-rewards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 36px; margin:24px 0 12px }
.research-rewards div { border-left:2px solid #66543a; padding-left:16px }
.research-rewards dt { font:16px/1.5 var(--display); color:var(--gold); margin-bottom:8px }
.research-rewards dd { margin:0; color:var(--muted); font-size:14px; line-height:1.8 }
.demo-logistics { padding-top:30px; margin-bottom:40px }
.demo-subtitle { font:clamp(24px,3vw,34px)/1.4 var(--display); margin:12px 0 20px; color:var(--paper) }
.logistics-numbers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:26px 0 }
.logistics-numbers p { margin:0; padding:16px 0; border-top:1px solid #66543a }
.logistics-numbers strong { display:block; font:34px/1.4 var(--display); color:var(--gold) }
.logistics-numbers span { display:block; font-size:12px; line-height:1.6; max-width:180px }
.demo-logistics ul { padding-left:22px }
.demo-logistics li { margin:10px 0 }
.demo-proof { margin:20px 0 0 }
.demo-proof img { display:block; width:100%; height:auto; border:1px solid #66543a }
.demo-proof figcaption { font-size:12px; color:var(--muted); line-height:1.8; margin-top:12px; max-width:880px }
.demo-guide .supply-section { margin-bottom:0 }
.compatibility-note { padding:20px 24px; background:#132642; border-left:3px solid var(--gold); font-size:14px; line-height:1.8; color:var(--muted) }
.compatibility-note strong { color:var(--cream) }
.strategy-app :is(summary,a,button,select,[tabindex]):focus-visible { outline:2px solid var(--gold); outline-offset:5px }
#legacy-downloads .practice-links { margin-top:24px }

.recorded-match,.supply-section,.guide-plan,.after-action,.practice {
  scroll-margin-top:100px;
  margin-bottom:76px
}

.section-top {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:24px
}

.strategy-app h2 {
  font-size:clamp(27px,3.3vw,40px);
  line-height:1.3;
  font-weight:500;
  margin:10px 0 20px
}

.verification-mark {
  font:10px/1.5 var(--display);
  color:var(--gold);
  border-bottom:1px solid #66543a;
  white-space:nowrap;
  padding-bottom:6px;
  margin-bottom:22px
}

.film-frame {
  background:#040a11;
  border:1px solid #806738;
  box-shadow:0 16px 64px #0007;
  line-height:0
}

.film-frame video {
  width:100%;
  aspect-ratio:16/9;
  display:block;
  background:#040a11
}

.film-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
  font-size:12px;
  color:var(--paper)
}

.guide-button,.film-controls select,.chapter-button {
  background:#10223a;
  border:1px solid #66543a;
  color:var(--cream);
  border-radius:3px;
  padding:10px 14px;
  font-size:12px;
  cursor:pointer
}

.film-controls label {
  display:flex;
  gap:10px;
  align-items:center
}

.film-controls a {
  text-decoration:underline;
  text-underline-offset:4px
}

.video-status {
  color:var(--gold);
  font-size:13px
}

.video-status:empty {
  display:none
}

.watch-note {
  padding:24px 28px;
  background:#132642;
  border-left:3px solid var(--gold);
  min-height:156px
}

.watch-note p {
  font-size:16px;
  line-height:1.7;
  margin:10px 0
}

.watch-note small {
  display:block;
  color:#b6c4d7;
  font:12px/1.6 system-ui,sans-serif
}

.chapter-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:14px 0 24px
}

.chapter-button {
  text-align:left;
  min-height:78px;
  padding:12px;
  transition:background .15s
}

.chapter-button span {
  display:block;
  font:10px/1.6 var(--display);
  letter-spacing:.08em;
  color:var(--gold);
  margin-bottom:5px
}

.chapter-button strong {
  font-size:12px;
  font-weight:400;
  line-height:1.5
}

.chapter-button:hover,.chapter-button[aria-current="true"] {
  background:var(--blue);
  border-color:var(--gold)
}

.recording-disclosure,.small-note {
  font-size:12px;
  line-height:1.8;
  color:var(--muted)
}

.supply-section {
  border-top:1px solid #514531;
  padding-top:46px
}

.supply-section>div:first-child {
  max-width:840px
}

.supply-section p,.lesson-grid p,.lesson-grid li,.after-action p,.practice p,.transcript p {
  font-size:14px;
  line-height:1.9;
  color:var(--muted)
}

.supply-table-wrap {
  overflow-x:auto;
  margin:28px 0 20px;
  border:1px solid #6e5838;
  background:#e9d7b1;
  color:#262117
}

.supply-table-wrap table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.7;
  text-align:left
}

.supply-table-wrap caption {
  padding:18px 20px;
  font:12px var(--display);
  color:#514029;
  text-align:left;
  background:#dfc599
}

.supply-table-wrap th,.supply-table-wrap td {
  padding:16px 20px;
  border-bottom:1px solid #ad977344;
  vertical-align:top
}

.supply-table-wrap thead {
  background:#d9c095
}

.supply-table-wrap th {
  font-weight:600
}

.supply-table-wrap tbody th {
  min-width:160px
}

.supply-table-wrap td:nth-child(2) {
  white-space:nowrap
}

.supply-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:7px
}

.supplied {
  background:#24614c
}

.strained {
  background:#946900
}

.isolated {
  background:#9f352c
}

.supply-footnotes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px
}

.supply-footnotes strong {
  color:var(--cream)
}

.lesson-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px
}

.lesson-grid article {
  border-top:1px solid #77603f;
  padding-top:20px
}

.lesson-number {
  font:36px var(--display);
  color:#77603f
}

.lesson-grid h3,.after-action h3 {
  font:20px/1.5 var(--display);
  color:var(--paper)
}

.lesson-grid ul {
  padding-left:18px
}

.lesson-grid li {
  margin:8px 0
}

.after-action,.practice {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  border-top:1px solid #514531;
  padding-top:40px
}

.after-action h3:first-child {
  margin-top:0
}

.practice-links {
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
  font-size:13px;
  color:var(--gold)
}

.practice details {
  grid-column:1/-1
}

.strategy-app details {
  border-top:1px solid #514531;
  padding:22px 0
}

.strategy-app summary {
  cursor:pointer;
  font:16px/1.5 var(--display);
  color:var(--paper)
}

.strategy-app code {
  overflow-wrap:anywhere;
  font-size:12px;
  color:var(--cream)
}

.transcript article {
  padding:14px 0;
  max-width:900px
}

.transcript h3 {
  font:18px var(--display);
  color:var(--gold)
}

.transcript .timestamp {
  font:12px system-ui,sans-serif;
  color:var(--muted)
}

.strategy-app a:hover {
  color:var(--gold)
}

@media(max-width:900px) {
  .section-top {
    display:block
  }
  .verification-mark {
    display:inline-block;
    margin:0
  }
  .chapter-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .lesson-grid {
    grid-template-columns:1fr
  }
  .lesson-grid article {
    padding-top:12px
  }
  .guide-secondary {
    margin-left:0;
    display:block
  }
  .site-header nav {
    gap:12px
  }
  .site-header nav a {
    font-size:9px
  }
  .wordmark {
    font-size:14px
  }
}

@media(max-width:600px) {
  .lesson-grid.demo-opening,.research-rewards { grid-template-columns:1fr }
  .logistics-numbers { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .demo-guide { margin-bottom:44px }
  .compatibility-note { padding:16px 18px }
  .guide-intro {
    padding:36px 0 32px
  }
  .guide-deck {
    font-size:15px
  }
  .strategy-app {
    padding-inline:18px
  }
  .guide-tags span {
    font-size:9px
  }
  .supply-footnotes,.after-action,.practice {
    grid-template-columns:1fr;
    gap:10px
  }
  .recorded-match,.supply-section,.guide-plan,.after-action,.practice {
    margin-bottom:44px
  }
  .watch-note {
    padding:18px;
    min-height:190px
  }
  .watch-note p {
    font-size:14px
  }
  .supply-table-wrap th,.supply-table-wrap td {
    padding:12px 10px
  }
  .supply-table-wrap table {
    font-size:12px;
    min-width:490px
  }
  .film-controls {
    font-size:11px;
    gap:10px
  }
  .site-header {
    padding:0 18px;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    height:auto;
    min-height:72px;
    padding-block:12px
  }
  .site-header nav {
    justify-content:center;
    width:100%
  }
  .practice details {
    grid-column:auto
  }
  footer {
    gap:16px;
    flex-wrap:wrap
  }
  .chapter-button {
    min-height:84px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .chapter-button {
    transition:none
  }
}

.practice #save-path {
  overflow-wrap:anywhere
}

.film-frame {
  scroll-margin-top:88px
}