/* Athlete Runtime — editorial marketing shell.
   Visual language: cream/ink editorial type with one dark feature stage,
   soft-amber accent, Newsreader serif. */

:root {
  --paper: #f2efe7;
  --paper-soft: #f8f6ef;
  --paper-deep: #e9e4d6;
  --ink: #1a1b12;
  --muted: rgba(26, 27, 18, 0.58);
  --line: rgba(26, 27, 18, 0.14);
  --line-strong: rgba(26, 27, 18, 0.3);
  --dark: #15160f;
  --panel: #1d1e15;
  --cream: #f2efe7;
  --dark-line: rgba(242, 240, 233, 0.13);
  --dark-line-soft: rgba(242, 240, 233, 0.07);
  --dark-muted: rgba(242, 240, 233, 0.55);
  --accent: #e2a05e;
  --accent-deep: #8a5524;
  --ok: #77bf8f;
  --danger: #bd4b42;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 28px 80px rgba(21, 22, 15, 0.15);
  --shell: 1320px;
}

* { box-sizing: border-box; }
body.app {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.app ::selection { background: #f0cba4; color: #15160f; }
body.sheet-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img, svg { max-width: 100%; }

.site-shell { width: min(var(--shell), calc(100% - 64px)); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 12px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

h1, h2, h3, h4, p { margin: 0; }
body.app h1, body.app h2, body.app h3 { font-family: "Newsreader", Georgia, serif; font-weight: 500; text-wrap: balance; }
.overline, .panel-kicker, .demo-label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.overline { color: var(--accent-deep); }

.wordmark {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
}
.wordmark .rt { color: var(--accent-deep); }
/* Juicy CTA: gloss gradient over the accent (a fill, not elevation), a soft
   accent-tinted lift shadow, fast press-compress with a slow ease back. */
.cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 52%, rgba(21, 22, 15, 0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -14px rgba(138, 85, 36, 0.55);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), filter 320ms var(--ease), border-color 320ms var(--ease);
}
.cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 16px 28px -14px rgba(138, 85, 36, 0.6);
}
.cta:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px -10px rgba(138, 85, 36, 0.5);
}
.cta.ghost {
  border-color: var(--line-strong);
  background: transparent;
  box-shadow: none;
  color: inherit;
}
.cta.ghost:hover { filter: none; border-color: var(--accent-deep); box-shadow: none; }
.cta.ghost:active { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .cta, .cta:hover, .cta:active { transform: none; }
}
.cta:focus-visible, .wordmark:focus-visible,
.feature-trigger:focus-visible, .demo-action:focus-visible,
.stage-replay:focus-visible, .role-chips button:focus-visible, #demo-log-all:focus-visible,
.faq summary:focus-visible, .site-footer a:focus-visible, .sheet button:focus-visible, .sheet a:focus-visible,
.sheet input:focus-visible, .sheet textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Hero — typographic, per the design canvas */
main > section { border-top: 0; }
.hero {
  display: block;
  position: relative;
  grid-template-columns: none;
  gap: 0;
  padding: clamp(56px, 11vh, 140px) 0 clamp(72px, 13vh, 150px);
  overflow: hidden;
  background: var(--paper);
}
.hero-kicker { margin: 0 0 clamp(20px, 3vh, 32px); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.hero h1 {
  max-width: 14em;
  font-size: clamp(44px, 7.4vw, 102px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero-lede { max-width: 34em; margin-top: clamp(28px, 5vh, 48px); font-family: "Newsreader", Georgia, serif; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: rgba(26, 27, 18, 0.82); }
.hero-lede + .hero-lede { margin-top: 0.95em; font-size: clamp(16px, 1.7vw, 19px); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 36px; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 36px; color: var(--muted); font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(226, 160, 94, 0.18); }

/* Primary features — dark stage */
.feature-section { padding: clamp(56px, 9vh, 110px) 0 clamp(72px, 11vh, 130px); background: var(--dark); color: var(--cream); }
.feature-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--dark-line);
  padding-bottom: 18px;
  margin-bottom: clamp(32px, 5vh, 56px);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.feature-head span:first-child { color: var(--dark-muted); }
.feature-head span:last-child { color: rgba(242, 240, 233, 0.35); letter-spacing: 0.14em; }
.feature-explorer { display: grid; grid-template-columns: minmax(280px, 0.38fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.feature-rail { display: grid; gap: clamp(18px, 3vh, 30px); }
.feature-item { min-width: 0; }
.feature-trigger {
  display: flex;
  gap: 18px;
  align-items: baseline;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.42;
  transition: opacity 0.35s var(--ease);
}
.feature-trigger:hover, .feature-trigger.is-active { opacity: 1; }
.feature-number { min-width: 26px; font-family: "Newsreader", Georgia, serif; font-size: 14px; color: rgba(242, 240, 233, 0.5); transition: color 0.35s; }
.feature-label { display: grid; gap: 6px; }
.feature-label strong { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.15; letter-spacing: -0.01em; }
.feature-label small { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 240, 233, 0.4); transition: color 0.35s; }
.feature-trigger.is-active .feature-number, .feature-trigger.is-active .feature-label small { color: var(--accent); }
.feature-mobile-slot { display: contents; }
.feature-stage-host { min-width: 0; }
.feature-stage-host[hidden] { display: none; }
.feature-stage { min-width: 0; min-height: clamp(460px, 56vh, 620px); position: relative; }
.stage-controls { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.stage-replay {
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid rgba(242, 240, 233, 0.25);
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 240, 233, 0.65);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.stage-replay:hover { color: var(--cream); border-color: rgba(242, 240, 233, 0.6); }
.feature-panel { border: 0; padding: 0; }
.js-ready .feature-panel:not(.is-active) { display: none; }
.no-js .feature-explorer { display: block; }
.no-js .feature-rail { grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin-bottom: 48px; }
.no-js .feature-trigger { opacity: 1; }
.no-js .feature-panel + .feature-panel { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--dark-line); }
.no-js .stage-controls, .no-js .log-action, .no-js .role-chips, .no-js .role-line, .no-js .offline-actions, .no-js .offline-note { display: none; }
.demo-col { max-width: 600px; }
.demo-col--wide { max-width: 640px; }

/* Phased reveals */
.js-ready .feature-panel [data-ph] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js-ready .feature-panel .ph-fade[data-ph] { transform: none; transition: opacity 0.5s var(--ease); }
.js-ready .feature-panel .ph-slide[data-ph] { transform: translateX(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.js-ready .feature-panel .ph-mark[data-ph] { opacity: 1; transform: none; transition: border-color 0.6s var(--ease); }
.js-ready .feature-panel .ph-expand[data-ph] {
  opacity: 0;
  transform: none;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease), opacity 0.55s var(--ease), margin-top 0.55s var(--ease);
}
.feature-panel [data-ph].is-on,
.js-ready .feature-panel [data-ph].is-on { opacity: 1; transform: none; }
.feature-panel .ph-expand[data-ph].is-on,
.js-ready .feature-panel .ph-expand[data-ph].is-on { max-height: 140px; margin-top: 10px; opacity: 1; }
.feature-panel .src-card.is-on { border-color: rgba(119, 191, 143, 0.5); }
.stage-punch {
  margin: 28px 0 0;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.4;
}
.stage-punch > span { color: var(--accent); font-style: normal; }

/* Demo cards (dark stage) */
.demo-card { border: 1px solid var(--dark-line); border-radius: 6px; background: var(--panel); overflow: hidden; }
.demo-card + .demo-card { margin-top: 14px; }
.demo-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--dark-line); }
.demo-card-head--tight { padding: 12px 16px 10px; border-bottom: 0; }
.demo-card-head .serif { font-family: "Newsreader", Georgia, serif; font-size: 18px; }
.demo-tag { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 240, 233, 0.45); }
.demo-tag--accent { color: var(--accent); }
.auto-tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 240, 233, 0.35); }
.onfile { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); }

.record-entry { padding: 6px 18px 14px; }
.record-entry + .record-entry, .record-entry--next { border-top: 1px solid var(--dark-line-soft); }
.record-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 12px; }
.stamp { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.record-entry p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: rgba(242, 240, 233, 0.85); }
.record-divider { display: flex; align-items: center; gap: 12px; padding: 14px 18px 4px; }
.record-divider span { flex: 1; height: 1px; background: rgba(242, 240, 233, 0.18); }
.record-divider em { font-style: normal; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-muted); white-space: nowrap; }

.class-card { max-width: 390px; border-radius: 10px; }
.class-card-head { border-bottom: 1px solid var(--dark-line); }
.class-card-head .demo-card-head { border-bottom: 0; padding-bottom: 0; }
.class-card-head > p { margin: 6px 0 0; padding: 0 18px 14px; font-size: 12.5px; color: rgba(242, 240, 233, 0.6); }
.class-card-head .serif { font-size: 17px; }
.log-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--dark-line-soft); font-size: 13.5px; }
.log-right { display: flex; align-items: baseline; gap: 10px; }
.log-right .plan { font-size: 12px; color: rgba(242, 240, 233, 0.5); }
.ck { font-size: 11px; color: var(--ok); }
.log-custom { padding: 11px 18px 13px; }
.log-custom-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.custom-tag { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.ph-expand p { margin: 0; padding: 9px 11px; border: 1px dashed rgba(242, 240, 233, 0.2); border-radius: 6px; font-size: 12.5px; line-height: 1.5; color: rgba(242, 240, 233, 0.75); }
.ok { color: var(--ok); }
.log-action { padding: 0 18px 18px; }
#demo-log-all {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid rgba(242, 240, 233, 0.35);
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s, border-color 0.35s;
}
#demo-log-all.is-hot { background: var(--accent); color: var(--dark); border-color: transparent; }

.progress-demo { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.src-card { flex: 1 1 230px; }
.src-row { margin: 0; padding: 11px 16px; font-size: 13px; line-height: 1.5; color: rgba(242, 240, 233, 0.85); }
.src-card .src-row + .src-row { border-top: 1px solid var(--dark-line-soft); }
.progress-cards { flex: 1.3 1 270px; display: grid; gap: 14px; }
.progress-cards .demo-card { padding-bottom: 14px; }
.trend { display: block; margin: 4px 16px 0; }
.trend circle { fill: var(--accent); }
.trend-note { margin: 8px 16px 0; font-size: 12px; color: rgba(242, 240, 233, 0.6); }
.trend-note strong { color: var(--cream); font-weight: 500; }
.pr-line { margin: 4px 16px 0; font-size: 19px; }
.dot-sep { color: var(--accent); }

.role-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.role-chips button {
  min-height: 44px;
  padding: 7px 16px;
  border: 1px solid rgba(242, 240, 233, 0.25);
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 240, 233, 0.7);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s;
}
.role-chips button[aria-pressed="true"] { background: var(--cream); color: var(--dark); border-color: transparent; }
.role-line { margin: 0 0 16px; min-height: 18px; font-size: 12.5px; color: var(--dark-muted); }
.role-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  max-height: 96px;
  padding: 12px 18px;
  overflow: hidden;
  border-bottom: 1px solid var(--dark-line-soft);
  transition: opacity 0.5s var(--ease), max-height 0.5s var(--ease), padding-top 0.5s var(--ease), padding-bottom 0.5s var(--ease);
}
.role-row:last-child { border-bottom: 0; }
.role-row.is-out { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
.role-row > span:first-child { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 240, 233, 0.5); white-space: nowrap; }
.role-row > span:last-child { font-size: 13.5px; text-align: right; color: rgba(242, 240, 233, 0.88); }

.month-facts { display: flex; flex-wrap: wrap; gap: 0 24px; padding: 6px 18px 12px; }
.month-facts p { margin: 8px 24px 0 0; font-size: 13px; color: rgba(242, 240, 233, 0.85); }
.month-facts p:last-child { margin-right: 0; }
.fam-cards { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.fam-card { flex: 1 1 240px; padding: 13px 16px; border: 1px dashed rgba(242, 240, 233, 0.28); border-radius: 6px; }
.fam-card > span { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.fam-card p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: rgba(242, 240, 233, 0.8); }

/* Offline demo (interactive, shares state with the console) */
.offline-demo { padding: 20px; border: 1px solid var(--dark-line); border-radius: 6px; background: var(--panel); }
.offline-head, .offline-head > div { display: flex; align-items: center; gap: 12px; }
.offline-head { justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--dark-line); }
.offline-head > div > div { display: grid; }
.offline-head small { color: rgba(242, 240, 233, 0.45); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.signal { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(226, 160, 94, 0.14); }
.offline-demo.is-offline .signal { background: var(--danger); box-shadow: 0 0 0 6px rgba(189, 75, 66, 0.16); }
.queue-count { padding: 6px 9px; border-radius: 999px; background: rgba(242, 240, 233, 0.07); color: rgba(242, 240, 233, 0.6); font-size: 10px; font-weight: 700; }
.queue-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.queue-list li { min-height: 64px; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--dark-line-soft); border-radius: 10px; background: rgba(242, 240, 233, 0.045); }
.queue-time { color: rgba(242, 240, 233, 0.5); font-size: 10px; font-variant-numeric: tabular-nums; }
.queue-list li > div { display: grid; }
.queue-list strong { font-size: 12px; }
.queue-list small { color: rgba(242, 240, 233, 0.5); font-size: 9px; }
.queue-state { color: rgba(242, 240, 233, 0.65); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.queue-state--waiting { color: var(--accent); }
.offline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.demo-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(242, 240, 233, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.demo-action--ghost { border-color: rgba(242, 240, 233, 0.15); color: rgba(242, 240, 233, 0.8); }
.demo-action:disabled { opacity: 0.42; cursor: default; }
.offline-note { margin-top: 14px; color: rgba(242, 240, 233, 0.6); font-size: 11px; }

/* Core proposition */
.manifesto { padding: clamp(88px, 12vw, 180px) 0; background: var(--dark); color: var(--cream); }
.manifesto-grid { display: grid; grid-template-columns: 0.4fr 1fr; gap: 64px; align-items: start; }
.manifesto .overline { color: var(--accent); }
.manifesto h2 { max-width: 1040px; font-size: clamp(48px, 6.6vw, 92px); line-height: 0.98; letter-spacing: -0.04em; }
.manifesto h2 em { color: var(--accent); font-style: normal; }
.manifesto h2 + p { max-width: 680px; margin-top: 36px; color: rgba(242, 240, 233, 0.66); font-size: 18px; }

/* Pilot */
.pilot-section { padding: 120px 0; background: var(--dark); color: var(--cream); }
.pilot-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(60px, 9vw, 150px); }
.pilot-section .overline { color: var(--accent); }
.pilot-copy { position: sticky; top: 110px; align-self: start; }
.pilot-copy h2 { max-width: 9ch; margin-top: 16px; font-size: clamp(50px, 6vw, 82px); line-height: 0.95; letter-spacing: -0.04em; }
.pilot-copy > p:not(.overline) { max-width: 500px; margin-top: 24px; color: rgba(242, 240, 233, 0.66); }
.pilot-copy .cta { margin-top: 30px; }
.pilot-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(242, 240, 233, 0.17); }
.pilot-steps li { min-height: 152px; display: grid; grid-template-columns: 54px 1fr; gap: 20px; align-items: start; padding: 30px 0; border-bottom: 1px solid rgba(242, 240, 233, 0.14); }
.pilot-steps > li > span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.pilot-steps strong { font-family: "Newsreader", Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1; }
.pilot-steps p { max-width: 45ch; margin-top: 10px; color: rgba(242, 240, 233, 0.66); font-size: 13px; }

/* Pricing */
.pricing-section { padding: 120px 0; background: var(--paper-deep); }
.pricing-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(50px, 8vw, 120px); align-items: start; }
.pricing-section h2 { max-width: 9ch; margin-top: 16px; font-size: clamp(50px, 6vw, 82px); line-height: 0.95; letter-spacing: -0.04em; }
.section-lede { max-width: 430px; margin-top: 24px; color: var(--muted); }
.price-card { max-width: none; margin: 0; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-soft); }
.price-name { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.price-card ul { margin: 30px 0; }
.price-card li { min-height: 52px; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--line); color: var(--ink); }
.price-card li::before { top: 14px; color: var(--accent-deep); }
.price-note { margin-top: 24px; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* FAQ */
.faq-section { padding: 112px 0; background: var(--paper-soft); }
.faq-grid { display: grid; grid-template-columns: 0.55fr 1fr; gap: clamp(48px, 8vw, 120px); }
.faq-section h2 { margin-top: 16px; font-size: clamp(46px, 5vw, 68px); line-height: 0.95; }
.faq { max-width: none; margin: 0; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { min-height: 74px; display: flex; align-items: center; padding: 18px 50px 18px 0; font-family: "Newsreader", Georgia, serif; font-size: 25px; font-weight: 500; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--accent-deep); font-family: "Inter", sans-serif; font-size: 22px; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 60ch; padding: 0 42px 24px 0; color: var(--muted); font-size: 14px; }

/* Closing */
.closing-section { padding: 96px 0 72px; background: var(--paper-soft); }
.closing-card { padding: clamp(44px, 7vw, 90px); border-radius: 10px; background: var(--accent); text-align: center; }
.closing-card .overline { color: var(--ink); }
.closing-card h2 { max-width: 850px; margin: 14px auto 0; font-size: clamp(50px, 7vw, 94px); line-height: 0.92; letter-spacing: -0.045em; }
.closing-card > p:not(.overline) { max-width: 550px; margin: 24px auto 0; }
.closing-card .cta { margin-top: 28px; border-color: var(--dark); background: var(--dark); color: var(--cream); }
.closing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.closing-actions .cta { margin-top: 0; }
.closing-card .cta.ghost { background: transparent; color: var(--ink); }

/* Footer */
.site-footer { margin: 0; padding: 72px 0 30px; border-top: 0; background: var(--dark); color: var(--cream); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 48px; align-items: start; }
.wordmark--footer { color: var(--cream); }
.wordmark--footer .rt { color: var(--accent); }
.footer-grid > div:first-child p { max-width: 330px; margin-top: 16px; color: var(--dark-muted); font-size: 13px; }
.footer-contact { margin: 0; }
.footer-contact > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 7px 0; font-size: 12px; }
.footer-contact dt { color: rgba(242, 240, 233, 0.5); }
.footer-contact dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.footer-legal { display: grid; gap: 10px; }
.footer-legal a, .footer-contact a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(242, 240, 233, 0.82);
  font-size: 12px;
}
.footer-fine { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--dark-line); color: rgba(242, 240, 233, 0.45); font-size: 10px; }

/* Modal sheets and lead capture */
.overlay { position: fixed; z-index: 90; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; }
.overlay.open { display: flex; }
.overlay .scrim { position: absolute; inset: 0; background: rgba(9, 10, 6, 0.7); backdrop-filter: blur(8px); }
.sheet { position: relative; z-index: 1; width: min(560px, 100%); max-height: min(760px, calc(100svh - 48px)); overflow-y: auto; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper-soft); box-shadow: var(--shadow); }
.sheet-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.sheet-head h3 { font-size: 38px; line-height: 1; }
.sheet-head .sub { margin-top: 5px; color: var(--muted); font-size: 12px; }
.sheet-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.sheet-sec { margin-top: 24px; }
.sec-label { color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.sheet-actions { display: grid; gap: 10px; margin-top: 24px; }
.sheet-actions .cta { width: 100%; border: 1px solid var(--accent); }
.sheet-actions .ghost { border-color: var(--line-strong); background: transparent; }
.lead-form input, .lead-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; background: #fffdf8; color: var(--ink); }
.lead-form { margin-top: 18px; }
.lead-form .lf-lab { display: block; margin: 13px 0 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.lead-form input, .lead-form textarea { min-height: 48px; padding: 11px 12px; }
.lead-form textarea { min-height: 96px; resize: vertical; }
.lead-form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lf-alt, .lf-ok p { margin-top: 14px; color: var(--muted); font-size: 12px; }
.lf-alt a, .lf-ok a, .lf-err a { color: var(--accent-deep); }
.lf-err { margin-top: 14px; padding: 11px; border: 1px solid rgba(189, 75, 66, 0.4); border-radius: 8px; background: rgba(189, 75, 66, 0.08); color: #71332e; font-size: 12px; }
.lf-ok { padding: 30px 0 10px; text-align: center; }
.lf-ok .big { font-family: "Newsreader", Georgia, serif; font-size: 36px; }

/* Responsive */
@media (max-width: 1120px) {
  .hero h1 { font-size: clamp(44px, 8.4vw, 84px); }
  .feature-explorer { display: block; }
  .feature-rail { grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin-bottom: 40px; }
  .pilot-copy { position: static; }
}

@media (max-width: 820px) {
  .site-shell { width: min(100% - 40px, var(--shell)); }
  .hero { padding: 72px 0 88px; }
  .manifesto-grid, .pilot-grid, .pricing-grid, .faq-grid, .footer-grid { grid-template-columns: 1fr; }
  .manifesto-grid { gap: 30px; }
  .pilot-grid, .pricing-grid, .faq-grid { gap: 54px; }
  .footer-grid { gap: 34px; }
  .footer-legal { display: flex; flex-wrap: wrap; gap: 12px 22px; }
}

@media (max-width: 700px) {
  .site-shell { width: min(100% - 32px, var(--shell)); }
  .wordmark { font-size: 12px; letter-spacing: 0.12em; }
  .hero { padding-top: 58px; }
  .hero h1 { font-size: clamp(40px, 12.5vw, 64px); }
  .hero-lede { margin-top: 24px; font-size: 17px; }
  .feature-section { padding: 64px 0 80px; }
  .feature-rail { display: block; }
  .feature-item + .feature-item { margin-top: 22px; }
  .feature-trigger { gap: 14px; }
  .feature-label strong { font-size: 22px; }
  .feature-mobile-slot { display: block; }
  .feature-item.is-active .feature-mobile-slot { margin-top: 18px; }
  .feature-stage { min-height: 0; }
  .demo-col, .demo-col--wide { max-width: none; }
  .class-card { max-width: none; }
  .record-divider em { white-space: normal; text-align: center; }
  .manifesto { padding: 86px 0; }
  .manifesto h2 { font-size: clamp(43px, 13vw, 62px); }
  .manifesto h2 + p { font-size: 15px; }
  .pilot-section, .pricing-section, .faq-section { padding: 86px 0; }
  .pilot-steps li { min-height: 130px; }
  .faq summary { min-height: 68px; font-size: 22px; }
  .closing-section { padding: 48px 0 64px; }
  .sheet { align-self: end; width: 100%; max-height: calc(100svh - 16px); padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .overlay { align-items: flex-end; padding: 16px 0 0; }
}

@media (max-width: 390px) {
  .site-shell { width: min(100% - 24px, var(--shell)); }
  .wordmark { font-size: 10px; letter-spacing: 0.1em; }
  .hero h1 { font-size: clamp(36px, 12.8vw, 52px); }
  .hero-actions .cta { width: 100%; }
  .log-row, .log-custom-row { flex-wrap: wrap; }
  .role-row { flex-wrap: wrap; }
  .role-row > span:last-child { text-align: left; }
  .queue-list li { grid-template-columns: 40px minmax(0, 1fr); }
  .queue-state { grid-column: 2; }
  .offline-actions .demo-action { width: 100%; }
  .footer-contact > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}