@import url("/shared/base.css");

:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { min-width: 0; background: var(--bg-page); }
button, .button { font: inherit; }

.skip-link { position: fixed; }
.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: var(--nav-h);
  align-items: center;
  gap: var(--s-5);
  padding: 0 clamp(var(--s-5), 4vw, var(--s-10));
  border-bottom: 1px solid var(--card-line);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { width: 146px; height: 42px; max-width: none; object-fit: contain; }
.brand span { padding-left: var(--s-3); border-left: 1px solid var(--card-line); color: var(--muted); font-size: 13px; font-weight: 600; }
.page-kind { color: var(--muted); font-size: 13px; }
.session { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.session[hidden] { display: none; }
.session button {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-pill);
  color: var(--brand-press);
  background: var(--brand-soft);
  cursor: pointer;
  font-weight: 600;
}

main { width: min(var(--container), calc(100% - 48px)); margin: var(--s-6) auto var(--s-20); }
.loading, .error { max-width: 720px; margin: 18vh auto; padding: var(--s-8); border: 1px solid var(--card-line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-card-lg); }
.error[hidden], #content[hidden] { display: none; }
.eyebrow { margin: 0 0 var(--s-2); color: var(--brand-press); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 820px; margin-bottom: var(--s-5); font-weight: 600; font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1.08; letter-spacing: -.03em; }
h2 { margin-bottom: var(--s-3); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.15; letter-spacing: -.025em; }
h3 { margin-bottom: var(--s-2); font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; }

.hero { overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--r-2xl); background: linear-gradient(120deg, var(--bg-page) 0%, var(--pastel-ivory) 100%); box-shadow: var(--shadow-card-lg); }
.hero-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: var(--s-10); padding: clamp(var(--s-8), 5vw, var(--s-16)); }
.hero .lede { max-width: 760px; margin-bottom: var(--s-6); color: var(--ink-2); font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.6; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid var(--brand-line); border-radius: var(--r-pill); color: var(--brand-press); background: rgba(255,255,255,.8); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.overview-link { color: var(--brand-press); font-weight: 800; text-decoration: none; }
.overview-link:hover { text-decoration: underline; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid var(--card-line); border-radius: var(--r-pill); color: var(--ink); background: var(--card); box-shadow: var(--shadow-card); text-decoration: none; font-weight: 600; }
.button:hover { color: var(--ink); border-color: var(--brand-line); background: var(--bg-page-soft); }
.button.primary { color: #fff; border-color: var(--brand-press); background: var(--brand-press); box-shadow: 0 10px 26px rgba(42,33,70,.12), inset 0 1px 0 rgba(255,255,255,.2); }
.button.primary:hover { color: #fff; border-color: var(--brand-hover); background: var(--brand-hover); }
.hero-note { align-self: end; padding: var(--s-6); border: 1px solid var(--card-line); border-radius: var(--r-xl); background: rgba(255,255,255,.88); box-shadow: var(--shadow-card); }
.hero-note strong { display: block; margin-bottom: var(--s-2); font-size: 15px; font-weight: 600; }
.hero-note p { margin: 0; color: var(--ink-2); font-size: 13px; }
.hero-main-marketing { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); align-items: start; gap: var(--s-7); padding: clamp(var(--s-6), 3vw, var(--s-8)); }
.hero-main-marketing h1 { max-width: 820px; font-size: clamp(2.25rem, 3.5vw, 3rem); }
.hero-main-marketing .lede { margin-bottom: var(--s-3); }
.hero-detail { max-width: 760px; margin-bottom: var(--s-4); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.audience-line { max-width: 760px; margin: 0 0 var(--s-5); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.5; }
.cta-support { max-width: 680px; margin: var(--s-3) 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.hero-problem { padding: var(--s-5); border: 1px solid var(--brand-line); border-radius: var(--r-xl); background: rgba(255,255,255,.9); box-shadow: var(--shadow-card-lg); }
.hero-problem h2 { margin-bottom: var(--s-3); font-size: clamp(1.5rem, 2.5vw, 2rem); }
.hero-problem > p:not(.eyebrow) { margin-bottom: var(--s-3); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.hero-problem > strong { display: block; margin-bottom: var(--s-3); font-size: 13px; font-weight: 650; }
.hero-problem .list { gap: var(--s-2); }
.hero-problem .list li { font-size: 13px; line-height: 1.35; }
.evaluator-note { margin: 0; padding: var(--s-4) clamp(var(--s-6), 4vw, var(--s-12)); border-top: 1px solid var(--card-line); background: var(--brand-soft); color: var(--ink-2); font-size: 14px; }
.evaluator-note strong { color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--card-line); background: rgba(255,255,255,.78); }
.fact { min-width: 0; padding: var(--s-6); border-right: 1px solid var(--card-line); }
.fact:last-child { border-right: 0; }
.fact small { display: block; margin-bottom: var(--s-1); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.fact strong { display: block; font-weight: 600; line-height: 1.35; }
.hero-path { margin: 0; padding: var(--s-4) var(--s-6); border-top: 1px solid var(--card-line); color: var(--ink-2); background: var(--brand-soft); font-size: 13px; text-align: center; }
.hero-path strong { color: var(--ink); }

.scenario-preview { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr); gap: clamp(var(--s-6), 4vw, var(--s-10)); align-items: center; margin-top: var(--s-6); padding: clamp(var(--s-7), 4vw, var(--s-10)); overflow: hidden; border: 1px solid var(--brand-line); border-radius: var(--r-xl); background: radial-gradient(circle at 100% 0, rgba(139,92,246,.12), transparent 38%), var(--card); box-shadow: var(--shadow-card-lg); }
.scenario-preview-copy h2 { max-width: 480px; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.scenario-preview-copy > p:not(.eyebrow, .scenario-preview-access) { max-width: 500px; margin-bottom: var(--s-5); color: var(--ink-2); line-height: 1.6; }
.scenario-preview-access { margin: var(--s-3) 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.scenario-preview-frame { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--brand-line); border-radius: var(--r-xl); background: var(--card); box-shadow: 0 24px 60px rgba(42,33,70,.14); }
.scenario-preview-bar { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); color: var(--brand-press); border-bottom: 1px solid var(--card-line); background: var(--control-well); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.scenario-preview-bar span:last-child { color: var(--muted); }
.scenario-preview-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }

.proof-section { scroll-margin-top: 144px; margin-top: var(--s-6); padding: clamp(var(--s-8), 4vw, var(--s-12)); border: 1px solid var(--brand-line); border-radius: var(--r-xl); background: linear-gradient(135deg, #f8f7ff, #fff 56%); box-shadow: var(--shadow-card-lg); }
.proof-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: var(--s-8); align-items: end; margin-bottom: var(--s-8); }
.proof-heading p:last-child { margin: 0; color: var(--ink-2); }
.proof-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: var(--s-5); align-items: stretch; }
.learner-proof { padding: clamp(var(--s-6), 3vw, var(--s-8)); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xl); color: #fff; background: radial-gradient(circle at 90% -10%, rgba(139,92,246,.42), transparent 40%), linear-gradient(145deg, #2a2146, #111217 65%, #3a2365); box-shadow: var(--shadow-card-lg); }
.learner-proof h3 { max-width: 680px; margin: var(--s-5) 0; color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.learner-proof-bar { display: flex; justify-content: space-between; gap: var(--s-4); color: rgba(255,255,255,.72); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.learner-proof-bar strong { color: #fff; }
.proof-ai, .proof-unknowns, .proof-prompt, .proof-update { margin-top: var(--s-4); padding: var(--s-5); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); background: rgba(255,255,255,.07); }
.learner-proof small { display: block; margin-bottom: var(--s-2); color: #c7c3ff; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.learner-proof p { margin: 0; color: rgba(255,255,255,.84); }
.learner-proof .list { gap: var(--s-2); }
.learner-proof .list li { color: rgba(255,255,255,.82); }
.learner-proof .list li::before { background: #a69fff; }
.proof-prompt { border-color: rgba(201,184,244,.6); background: rgba(139,92,246,.2); }
.proof-prompt strong { display: block; font-size: 1.125rem; line-height: 1.45; }
.proof-update strong { display: block; margin-top: var(--s-3); color: #fff; }
.proof-support { display: grid; gap: var(--s-4); }
.proof-support > article, .proof-lower > article { padding: var(--s-6); border: 1px solid var(--card-line); border-radius: var(--r-lg); background: rgba(255,255,255,.92); box-shadow: var(--shadow-card); }
.contrast-card > div { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-page-soft); }
.contrast-card > div.stepsim-contrast { border: 1px solid var(--brand-line); background: var(--brand-soft); }
.contrast-card small { display: block; margin-bottom: var(--s-1); color: var(--muted); font-weight: 650; text-transform: uppercase; }
.contrast-card p { margin: 0; color: var(--ink-2); }
.arc-card ol { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; counter-reset: arc; }
.arc-card li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-2); align-items: center; color: var(--ink-2); counter-increment: arc; }
.arc-card li::before { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--brand-press); background: var(--brand-soft); content: counter(arc); font-size: 10px; font-weight: 700; }
.proof-lower { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.proof-lower article > p:not(.eyebrow) { color: var(--ink-2); }
.learns-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.learns-map span { padding: var(--s-4); border: 1px solid var(--brand-line); border-radius: var(--r-md); color: var(--ink-2); background: var(--brand-soft); font-size: 13px; }
.learns-map strong { display: block; margin-bottom: var(--s-1); color: var(--brand-press); }
.proof-lower article > small { display: block; color: var(--muted); line-height: 1.5; }

.overview-nav { position: sticky; z-index: 8; top: var(--nav-h); display: flex; gap: var(--s-1); margin: var(--s-6) 0; padding: var(--s-2); overflow-x: auto; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: rgba(255,255,255,.94); box-shadow: var(--shadow-card); backdrop-filter: blur(12px); scrollbar-width: none; }
.overview-nav::-webkit-scrollbar { display: none; }
.overview-nav a { flex: 0 0 auto; padding: 8px 12px; border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 500; }
.overview-nav a:hover { color: var(--brand-press); background: var(--brand-soft); }

.section { scroll-margin-top: 144px; margin-top: var(--s-6); padding: clamp(var(--s-8), 4vw, var(--s-12)); border: 1px solid var(--card-line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-card); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: var(--s-8); align-items: end; margin-bottom: var(--s-8); }
.section-head p { margin: 0; color: var(--ink-2); }
.callout { margin: var(--s-6) 0 0; padding: var(--s-5) var(--s-6); border: 1px solid var(--brand-line); border-radius: var(--r-xl); color: var(--ink-2); background: var(--control-well); box-shadow: inset 4px 0 0 var(--brand), var(--shadow-card); }
.callout strong { display: block; margin-bottom: var(--s-2); color: var(--brand-press); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.grid { display: grid; gap: var(--s-4); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: var(--s-6); border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); box-shadow: var(--shadow-card); }
.card p { margin-bottom: 0; color: var(--ink-2); }
.number-card { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-4); }
.number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-press); font-size: 13px; font-weight: 600; }
.list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.list li { position: relative; padding-left: 22px; color: var(--ink-2); }
.list li::before { position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); content: ""; }
.evidence-panel { padding: var(--s-6); border: 1px solid var(--ok-line); border-radius: var(--r-lg); background: var(--ok-bg); }
.evidence-panel .list li::before { background: var(--ok); }
.limit-panel { padding: var(--s-6); border: 1px solid var(--warn-line); border-radius: var(--r-lg); background: var(--warn-bg); }
.limit-panel .list li::before { background: var(--warn); }
.journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); counter-reset: journey; }
.journey .card { position: relative; padding-top: 58px; background: var(--card); }
.journey .card::before { position: absolute; top: var(--s-4); left: var(--s-5); display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--brand-press); background: var(--brand-soft); content: counter(journey); counter-increment: journey; font-size: 12px; font-weight: 600; }
.journey .card small { color: var(--muted); font-weight: 600; }
.adapt-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.adapt-columns > div { padding: var(--s-7); border-radius: var(--r-lg); }
.adaptable { border: 1px solid var(--brand-line); background: var(--brand-soft); }
.governed { border: 1px solid var(--ok-line); background: var(--ok-bg); }
.run-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.run-plan .card small { display: block; margin-bottom: var(--s-1); color: var(--brand-press); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.final-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; margin-top: var(--s-6); padding: clamp(var(--s-8), 4vw, var(--s-12)); border-radius: var(--r-xl); color: var(--on-dark); background: var(--bg-dark); box-shadow: var(--shadow-card-lg); }
.final-cta h2 { margin-bottom: var(--s-2); color: var(--on-dark); }
.final-cta p { max-width: 720px; margin: 0; color: var(--on-dark-muted); }
.final-cta .button { color: var(--bg-dark); border-color: #fff; background: #fff; }
.final-cta .button:hover { color: var(--bg-dark); background: var(--bg-page-soft); }
.fine-print { margin: var(--s-5) var(--s-1) 0; color: var(--muted); font-size: 12px; }
.overview-footer { display: flex; justify-content: center; gap: var(--s-5); padding: var(--s-5) 0 var(--s-2); font-size: 13px; font-weight: 700; }
.overview-footer a { color: var(--muted); }
.facilitate-outcome.grid.one { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .hero-main, .hero-main-marketing, .scenario-preview, .section-head, .proof-heading, .proof-layout { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--card-line); }
  .grid.three, .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-plan { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { gap: var(--s-3); padding: 0 var(--s-4); }
  .brand img { width: 118px; height: 36px; }
  .brand span, .page-kind { display: none; }
  main { width: min(100% - 24px, var(--container)); margin-top: var(--s-4); }
}

@media (max-width: 620px) {
  #session-label { display: none; }
  .hero { border-radius: var(--r-xl); }
  .hero-main, .scenario-preview, .section { padding: var(--s-6) var(--s-5); }
  .facts, .grid.two, .grid.three, .journey, .adapt-columns, .final-cta, .proof-lower, .learns-map { grid-template-columns: 1fr; }
  .proof-section { padding: var(--s-6) var(--s-5); }
  .learner-proof { padding: var(--s-5); }
  .fact { border-right: 0; border-bottom: 1px solid var(--card-line); }
  .fact:last-child { border-bottom: 0; }
  .overview-nav { margin-inline: -2px; }
  .final-cta { align-items: start; }
  .final-cta .button { width: 100%; }
}