:root {
  --ground: #101114;
  --panel: #17181c;
  --line: #26282e;
  --ink: #e8e6e1;
  --dim: #9a978f;
  --accent: #f59e0b;
  --molten: #ff7a18;

  --font-display: 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-mono);
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.placeholder {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.placeholder__text {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--dim);
  font-size: 0.9rem;
}

.hazardStrip {
  height: 8px;
  background: repeating-linear-gradient(45deg, var(--accent) 0 10px, #0c0d10 10px 20px);
}

/* ============================================================
   SHARED SECTION LAYOUT
   ============================================================ */
.section {
  padding: 88px 24px;
}
.sectionInner {
  max-width: 1180px;
  margin: 0 auto;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow .tick {
  width: 22px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.sectionHead {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: clamp(32px, 5vw, 52px);
  margin: 0;
  color: var(--ink);
}

/* shared CTA button — fixed-px counterpart to the hero's cqw-scaled .btn in
   cut-gate.css (that one only applies inside the hero's container; pages
   without cut-gate.css, like demo.html, use these px values instead). */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 13px 28px;
  border-radius: 3px;
  cursor: pointer;
}
.btn.solid {
  color: #0c0c0c;
  background: var(--accent);
  border: 1px solid #b97708;
}
.btn.ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid #3a3d44;
}

/* scroll-reveal utility, shared by #hook and #stakes (assets/js/site.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 300ms ease, transform 300ms ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   #hook — DAY ONE. NO TRAINING.
   ============================================================ */
.hookSection {
  background: var(--ground);
  border-top: 1px solid var(--line);
}
.hookGrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  margin-top: 40px;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.step:nth-child(1) { transition-delay: 0ms; }
.step:nth-child(2) { transition-delay: 90ms; }
.step:nth-child(3) { transition-delay: 180ms; }
.stepNum {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #0c0c0c;
  background: var(--accent);
  border: 1px solid #b97708;
  padding: 4px 9px;
  flex: none;
  border-radius: 2px;
}
.stepBody h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 0.95;
  margin: 2px 0 8px;
  color: var(--ink);
}
.stepBody p {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
  margin: 0;
  max-width: 42ch;
}
.hookClose {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1;
  margin: 40px 0 0;
  color: var(--ink);
}
.hookClose .molt {
  color: var(--molten);
}

.deviceFrame {
  background: linear-gradient(180deg, #191b20, #141519);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.deviceFrame .deviceHead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #101115;
}
.deviceFrame .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #33363d;
}
.deviceFrame .dot:first-child {
  background: #5a3a10;
}
.deviceFrame .deviceLabel {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--dim);
}
.deviceFrame img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   #stakes — EVERYTHING A TRACKER MUST DO. SHARPER.
   ============================================================ */
.stakesSection {
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.stakesGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 40px;
}
.stakeCell {
  position: relative;
  background: var(--ground);
  padding: 22px 20px 26px;
}
.stakeCell::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease;
}
.stakeCell.is-visible::before {
  transform: scaleX(1);
}
.stakeThumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 14px;
}
.stakeThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.stakeTitle {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 8px;
}
.stakeCell p {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--dim);
  margin: 0;
}

@media (max-width: 860px) {
  .hookGrid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .stakesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .section {
    padding: 56px 18px;
  }
}

/* ============================================================
   WOW PLATE SECTIONS — #advisor, #downtime, #receipts, #reach
   Press-brake reveal: two thin steel plates (styled after the hero
   gate's .plate) sit across the section's vertical center and part
   over 420ms the first time it scrolls into view, synced with the
   content fading/sliding in. Fires once via [data-wow-gate] in site.js.
   ============================================================ */
.wowSection {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
#advisor { background: var(--panel); }
#downtime { background: var(--ground); }
#receipts { background: var(--panel); }
#reach { background: var(--ground); }

.eyebrow.eyebrowMolten {
  color: var(--molten);
}
.eyebrow.eyebrowMolten .tick {
  background: var(--molten);
}

.wowGateContent {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.wowSection.is-open .wowGateContent {
  opacity: 1;
  transform: none;
}

.wowText {
  max-width: 640px;
}
.wowLede {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  color: var(--dim);
  margin: 18px 0 0;
}
.wowVisual {
  margin-top: 36px;
}
.wowCaption {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}

/* the two plates */
.wowPlate {
  position: absolute;
  left: 0;
  right: 0;
  height: 12%;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, .28) 92%),
    radial-gradient(130% 100% at 22% 6%, rgba(255, 255, 255, .055), transparent 58%),
    radial-gradient(90% 80% at 78% 96%, rgba(0, 0, 0, .22), transparent 60%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .030) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .06) 3px 4px),
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(255, 255, 255, .014) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, #2c2f35, #22252a 46%, #1b1d22);
  box-shadow: 0 0 24px rgba(0, 0, 0, .55);
  transition: transform 420ms cubic-bezier(.5, 0, .2, 1), opacity 420ms ease 120ms;
}
.wowPlate::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .6;
  pointer-events: none;
  background:
    linear-gradient(114deg, transparent 40.7%, rgba(255, 255, 255, .05) 40.9%, transparent 41.2%),
    linear-gradient(81deg, transparent 63.6%, rgba(255, 255, 255, .04) 63.8%, transparent 64.1%),
    linear-gradient(99deg, transparent 22.7%, rgba(0, 0, 0, .32) 22.9%, transparent 23.3%),
    linear-gradient(70deg, transparent 78.5%, rgba(0, 0, 0, .25) 78.7%, transparent 79.0%);
}
.wowPlateTop {
  top: 38%;
  border-bottom: 3px solid var(--accent);
}
.wowPlateBot {
  top: 50%;
  border-top: 3px solid var(--accent);
}
.wowSection.is-open .wowPlateTop {
  transform: translateY(-260%);
  opacity: 0;
}
.wowSection.is-open .wowPlateBot {
  transform: translateY(260%);
  opacity: 0;
}

/* WOW1 — #advisor verdict card + proof shot */
.advisorVisual {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.verdictCard {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 24px;
  flex: 1 1 320px;
  min-width: 280px;
}
.verdictHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.verdictAsset {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink);
}
.verdictChip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ff5c5c;
  border: 1px solid #ff5c5c;
  padding: 5px 10px;
  border-radius: 2px;
  transform: scale(1.4);
  opacity: 0;
  transition: transform 120ms ease, opacity 120ms ease;
}
.wowSection.is-open .verdictChip {
  transform: scale(1);
  opacity: 1;
  transition-delay: 420ms;
}
.verdictReasons {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--dim);
  line-height: 1.9;
}
.verdictReasons li {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.wowSection.is-open .verdictReasons li {
  opacity: 1;
  transform: none;
}
.wowSection.is-open .verdictReasons li:nth-child(1) { transition-delay: 500ms; }
.wowSection.is-open .verdictReasons li:nth-child(2) { transition-delay: 620ms; }
.wowSection.is-open .verdictReasons li:nth-child(3) { transition-delay: 740ms; }
.verdictFoot {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--accent);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.proofShot {
  flex: 1 1 320px;
  min-width: 260px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  align-self: center;
}
.proofShot img {
  width: 100%;
  height: auto;
  display: block;
}

/* WOW2 — #downtime calendar vs. work-day comparison */
.downtimeVisual {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 560px;
}
.downtimeRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--ground);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
}
#downtime .downtimeRow {
  background: var(--panel);
}
.downtimeTag {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--dim);
}
.downtimeSum {
  font-size: 16px;
  color: var(--dim);
}
.downtimeStrike {
  color: var(--dim);
  text-decoration: line-through;
}
.workdayRow .downtimeTag,
.workdayRow .downtimeSum {
  color: var(--accent);
}
.downtimeCount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* WOW3 — #receipts framed sale packet */
.receiptsVisual {
  display: flex;
  justify-content: center;
}
.paperFrame {
  position: relative;
  background: #f2ede4;
  padding: 14px;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  max-width: 560px;
}
.paperFrame img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #d8d1c2;
}
.paperStamp {
  position: absolute;
  top: 18px;
  right: -4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: #b3261e;
  border: 2px solid #b3261e;
  padding: 6px 10px;
  border-radius: 2px;
  transform: rotate(6deg);
  background: rgba(242, 237, 228, .85);
}

/* WOW4 — #reach phone-width work order + chat mocks */
.reachVisual {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.phoneCard {
  width: 100%;
  max-width: 280px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}
#reach .phoneCard {
  background: var(--panel);
}
.phoneHead {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--dim);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #101115;
}
.phoneBody {
  padding: 18px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.phoneLine {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  color: var(--dim);
}
.phoneLine b {
  color: var(--ink);
}
.signOff {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.signLabel {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--dim);
  margin-bottom: 6px;
}
.sigSquiggle {
  width: 100%;
  height: auto;
}
.sigSquiggle path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.chatQuestion {
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 14px;
}
.chatAnswer {
  color: var(--accent);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .wowGateContent {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .wowPlate {
    display: none;
  }
  .verdictChip {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .verdictReasons li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   #yours — YOUR LOGO. YOUR COLORS. ONLY THE FEATURES YOU USE.
   ============================================================ */
#yours {
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.yoursLede {
  max-width: 640px;
}
.themeRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.themeCard {
  border: 1px solid var(--tc-line, var(--line));
  border-radius: 6px;
  overflow: hidden;
  background: var(--tc-bg, var(--ground));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.themeHead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--tc-head, #101115);
}
.themeHead .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-dim, #33363d);
}
.themeHead .dot:first-child {
  background: var(--tc-accent, var(--accent));
}
.themeTitle {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--tc-dim, var(--dim));
}
.themeTitle i {
  font-style: normal;
  color: #3fbf6f;
}
.themeAccentBar {
  height: 4px;
  background: var(--tc-accent, var(--accent));
}
.themeGraphite {
  --tc-bg: #22252a;
  --tc-head: #191b1f;
  --tc-line: #33363d;
  --tc-dim: #9a978f;
  --tc-accent: #f59e0b;
}
.themeNavy {
  --tc-bg: #17213a;
  --tc-head: #101a2e;
  --tc-line: #2a3a5c;
  --tc-dim: #8a97b8;
  --tc-accent: #ff6a1f;
}
.themeForest {
  --tc-bg: #182a20;
  --tc-head: #101f18;
  --tc-line: #2c4535;
  --tc-dim: #93ab9b;
  --tc-accent: #d7e34d;
}

.toggleRow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
}
.toggleChip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 9px 14px;
  transition: color 300ms ease, border-color 300ms ease;
}
.toggleDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  transition: background 300ms ease;
}
.toggleChip[data-flip].is-off {
  color: var(--dim);
  border-color: var(--line);
}
.toggleChip[data-flip].is-off .toggleDot {
  background: #3a3c42;
}

/* ============================================================
   #proof — quiet confidence strip
   ============================================================ */
.proofSection {
  background: var(--ground);
  border-top: 1px solid var(--line);
}
.proofGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proofCell {
  background: var(--panel);
  padding: 22px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--dim);
}
.proofCell strong {
  display: block;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.hazardStripThin {
  height: 4px;
}
.siteFooter {
  background: var(--ground);
  padding: 32px 24px;
}
.footerInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--dim);
}
.footerBrand {
  text-transform: uppercase;
  color: var(--ink);
}
.footerDivider {
  color: var(--accent);
  margin: 0 0.3em;
}
.footerLinks {
  display: flex;
  gap: 20px;
}
.footerLinks a {
  color: var(--dim);
  text-decoration: none;
}
.footerLinks a:hover,
.footerLinks a:focus-visible {
  color: var(--accent);
}

@media (max-width: 860px) {
  .themeRow {
    grid-template-columns: repeat(2, 1fr);
  }
  .proofGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .themeRow {
    grid-template-columns: 1fr;
  }
  .proofGrid {
    grid-template-columns: 1fr;
  }
  .footerInner {
    flex-direction: column;
    align-items: flex-start;
  }
}