/* Shared look for the preview pages. Matches the 3D homepage. */
:root {
  --bg: #F7F6F1;
  --surface: #FFFFFF;
  --tile: #EFEEE8;
  --ink: #131F17;
  --text: #5D6E62;
  --soft: #7E8B82;
  --line: #E3E1D8;
  --green: #4C7A5A;
  --lime: #C4F013;
  --lime-hover: #D2FA3A;
  --font: "Lexend", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px));
  scrollbar-width: thin;
  scrollbar-color: #C4F013 transparent;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 18px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
html.s1e-reload body { opacity: 0; }
html.s1e-reload.s1e-ready body {
  opacity: 1;
  transition: opacity 0.38s ease;
}
/* floating lime pill scrollbar — replaces the default chunky bar */
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #C4F013;
  border-radius: 999px;
  border: 3px solid #F7F6F1;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background-color: #D2FA3A;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner { background: transparent; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-weight: 500; font-size: 18px; color: var(--green); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 8px; font: 500 18px/1 var(--font); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .25s ease, border-color .25s ease; }
.btn-green { background: var(--lime); color: var(--ink); }
.btn-green:hover { background: var(--lime-hover); }
.btn-white { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-white:hover { border-color: #C9C9C3; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-nav {
  position: fixed;
  z-index: 40;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) 14px max(22px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.site-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0; right: 0; top: 0;
  height: 112px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 246, 241, 0.94) 0%, rgba(247, 246, 241, 0.72) 46%, rgba(247, 246, 241, 0) 100%);
}
.site-nav a, .site-nav summary { pointer-events: auto; }
.nav-brand, .nav-end { position: relative; z-index: 1; }
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
.nav-logo { width: 36px; height: 36px; display: block; flex: none; }
.nav-wordmark { position: relative; display: block; line-height: 0; }
.nav-wordmark img { height: 17px; width: auto; display: block; }
.nav-end { display: flex; align-items: center; gap: 2px; }
.nav-links { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
.nav-links a, .nav-panel a {
  font: 500 15px/1 var(--font);
  letter-spacing: -0.011em;
  color: rgba(19, 31, 23, 0.72);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.nav-links a:hover, .nav-panel a:hover { color: var(--ink); background: rgba(19, 31, 23, 0.05); }
.nav-links a[aria-current="page"], .nav-panel a[aria-current="page"] { color: var(--ink); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-left: 8px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font: 500 14.5px/1 var(--font);
  letter-spacing: -0.011em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}
.nav-cta:hover { background: var(--lime-hover); }
.nav-drawer { display: none; position: relative; }
.nav-drawer summary {
  list-style: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  border-radius: 12px;
}
.nav-drawer summary::-webkit-details-marker { display: none; }
.nav-drawer summary:hover { background: rgba(19, 31, 23, 0.05); }
.nav-burger { display: grid; gap: 5px; }
.nav-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-drawer[open] .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-drawer[open] .nav-burger span:nth-child(2) { opacity: 0; }
.nav-drawer[open] .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(260px, calc(100vw - 36px));
  display: grid;
  padding: 8px;
  border-radius: 16px;
  background: rgba(247, 246, 241, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 50px rgba(19, 31, 23, 0.18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav-panel a { display: flex; }
@media (max-width: 980px) { .nav-wordmark { display: none; } }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-drawer { display: block; }
  .nav-cta { margin-left: 0; padding: 0 14px; min-height: 40px; font-size: 13.5px; }
}
@media (max-width: 380px) {
  .nav-logo { width: 32px; height: 32px; }
  .nav-cta { padding: 0 12px; }
}

.sheet { padding-bottom: 40px; }
.sheet-hero { padding: calc(132px + env(safe-area-inset-top, 0px)) 0 28px; }
.sheet-hero h1 { font-size: clamp(46px, 6.4vw, 88px); line-height: 1.02; max-width: 14ch; margin-top: 14px; }
.sheet-hero--copy h1 { font-size: clamp(36px, 4.4vw, 64px); max-width: 16em; line-height: 1.08; }
.lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--text); max-width: 36em; margin-top: 22px; }
.sheet-block { padding-block: 28px 72px; }
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(23, 33, 27, 0.06);
}
.mission { padding: 36px 40px; }
.mission p { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.sheet-block > .eyebrow { margin-bottom: 16px; }
.quad, .trio, .tracks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.trio, .tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quad { margin-bottom: 8px; }
.trio { margin-top: 28px; }
.quad article, .trio article, .tracks article, .compare li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 26px;
  min-width: 0;
  box-shadow: 0 10px 28px rgba(23, 33, 27, 0.04);
}
.quad span, .trio span, .tracks span, .compare span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}
.quad h2, .trio h2, .tracks h2, .compare h2 {
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.quad p, .trio p, .tracks p, .compare p { color: var(--text); font-size: 16px; line-height: 1.45; margin-top: 10px; }
.quote {
  margin-top: 28px;
  padding: 28px 32px;
  border-left: 3px solid var(--lime);
  background: var(--surface);
  border-radius: 0 14px 14px 0;
}
.quote p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; max-width: 40em; }
.quote span { display: block; margin-top: 12px; font-size: 15px; color: var(--soft); font-weight: 400; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.steps div { min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.steps b { display: block; font-size: 18px; margin-top: 4px; }
.steps span { color: var(--soft); font-size: 14px; }
.steps p { color: var(--text); font-size: 16px; margin-top: 8px; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.monogram {
  width: 92px; height: 92px;
  border-radius: 28px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #F7F6F1;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.04em;
}
.person h2 { font-size: clamp(32px, 3vw, 44px); }
.role { color: var(--text); margin-top: 4px; }
.bio { color: var(--text); margin-top: 14px; max-width: 40em; }
.links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.mail {
  display: inline-flex;
  align-items: center;
  min-height: 64px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.mail:hover { border-color: #C9C9C3; }
.note { margin-top: 12px; font-size: 15px; color: var(--soft); }
form.send { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; width: min(860px, 100%); margin-top: 28px; }
.send input { min-height: 58px; min-width: 0; padding: 0 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: 400 17px var(--font); color: var(--ink); }
.send .btn { min-height: 58px; }
.err { font-size: 15px; color: #C2563F; margin-top: 12px; }
.hp, .hp-check { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.send [data-form-status] { grid-column: 1 / -1; margin: 0; }
.form-status--error { color: #C2563F; }
.form-status--ok { color: #4C7A5A; }
.thanks { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; }
.thanks h2 { font-size: 28px; }
.thanks ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 6px; color: var(--text); }

.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.group { padding: 8px 8px 12px; }
.group h2 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; padding: 18px 18px 0; }
.group p.blurb { color: var(--text); font-size: 15px; line-height: 1.45; padding: 8px 18px 4px; }
.hero-actions { margin-top: 22px; }
.group a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  padding: 15px 18px;
  text-decoration: none;
  border-top: 1px solid var(--line);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
}
.group a:hover { color: var(--green); }
.group a span { color: var(--soft); font-weight: 400; font-size: 13px; flex: none; }

.site-footer {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, #1C2B20 58%, #4C7A5A);
  color: #C5D0C8;
  padding: 72px 0 36px;
  font-size: 15px;
  line-height: 1.5;
}
.site-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(1312px, 160vw);
  height: min(1312px, 160vw);
  right: -20%;
  bottom: -40%;
  pointer-events: none;
  background-image: url("/assets/img/footer-shape.svg?v=a303106510");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.site-footer > * {
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .site-footer::before {
    width: 1312px;
    height: 1312px;
    left: 40%;
    top: 30%;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
  }
}
.site-footer a { color: #F7F6F1; text-decoration: none; }
.site-footer a:hover { color: var(--lime); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.site-footer__brand { margin: 0 0 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: #F7F6F1; }
.site-footer__blurb { margin: 0; max-width: 28em; }
.site-footer__blurb a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer__social { margin: 16px 0 0; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 8px; }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer__label { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.site-footer__legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(247, 246, 241, 0.14); }
.site-footer__disclaimer { margin: 0; max-width: 88em; font-size: 12px; line-height: 1.55; color: #8FA196; }
.cookie-banner {
  display: none;
  position: fixed;
  z-index: 60;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100% - 32px));
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(19, 31, 23, 0.16);
}
.cookie-banner.is-visible { display: block; }
.cookie-banner p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--text); }
.cookie-banner a { color: var(--ink); }
.cookie-banner__actions { display: flex; gap: 8px; }
.cookie-banner button {
  font: 500 14px/1 var(--font);
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #F7F6F1;
  cursor: pointer;
}
.cookie-banner button[data-cookie-reject] { background: transparent; color: var(--ink); }

@media (max-width: 980px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .groups { grid-template-columns: 1fr; }
}
.chapters { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.chapter { list-style: none; }
.chapter {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px 28px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(23, 33, 27, 0.04);
}
.chapter span { font-weight: 600; color: var(--green); letter-spacing: 0.06em; padding-top: 6px; }
.chapter h2 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.02em; line-height: 1.12; }
.chapter p { color: var(--text); margin-top: 12px; max-width: none; line-height: 1.5; }
.chapter a, .wrap > p a, .trio p a, .quad p a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.quote a { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 4px; }
.person-panel { margin-top: 8px; padding: 32px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.profile {
  width: min(420px, 100%);
  margin: 12px auto 0;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sheet-hero .profile h1 { font-size: 40px; line-height: 1.1; max-width: none; margin-top: 18px; }
.profile .role { margin-top: 4px; }
.profile .links { justify-content: center; }
.profile .monogram { width: 72px; height: 72px; border-radius: 22px; font-size: 22px; }
.story { max-width: 34em; margin: 8px auto 48px; }
.story .eyebrow { margin-bottom: 4px; }
.story-beat { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.story-beat h2 { font-size: 22px; }
.story-beat p { color: var(--text); margin-top: 8px; font-size: 17px; }
.team-cards { margin-top: 0; }
.team-cards h2 { margin-top: 0; }
.block-title { font-size: clamp(28px, 3vw, 40px); margin-bottom: 18px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start; }
.prose { min-width: 0; max-width: 42em; }
.prose h2 { font-size: clamp(26px, 2.4vw, 34px); margin: 1.5em 0 0.45em; }
.prose h3 { font-size: 20px; margin: 1.25em 0 0.35em; }
.prose p { color: var(--text); margin: 0.85em 0; }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0.8em 0; padding-left: 1.2em; color: var(--text); }
.prose li { margin: 0.4em 0; }
.prose li p { margin: 0.25em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; }
.prose th, .prose td { border-top: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; color: var(--text); }
.prose th { color: var(--ink); font-weight: 600; }
.prose-scroll { overflow-x: auto; }
.article-read .read-open { font-size: 20px; line-height: 1.55; color: var(--ink); }
.article-read .read-block { margin-top: 2rem; padding-top: 1.55rem; border-top: 1px solid var(--line); }
.article-read .read-block > h2 { margin-top: 0; letter-spacing: -0.02em; line-height: 1.15; }
.article-read p.read-label > strong:first-child { display: block; margin-bottom: 2px; }
.article-read ul, .article-read ol { margin: 1.15em 0 1.4em; padding: 0; list-style: none; display: grid; gap: 8px; }
.article-read li { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--tile); }
.article-read ol { counter-reset: read; }
.article-read ol > li { counter-increment: read; position: relative; padding-left: 48px; }
.article-read ol > li::before {
  content: counter(read);
  position: absolute; left: 16px; top: 15px;
  font-weight: 600; font-size: 14px; color: var(--green);
}
.read-close { padding-top: 8px; }
.read-close__inner {
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  padding: 28px 32px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
}
.read-close h2 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 8px; }
.read-close p { color: var(--text); margin: 0; max-width: 36em; }
.read-close .btn { flex: none; }
.insight-callout { background: var(--tile); border-radius: 12px; padding: 18px 20px; margin: 1.2em 0; }
.insight-callout p { margin: 0.4em 0 0; }
.insight-callout__label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); font-weight: 600; margin: 0; }
.insight-callout--verdict { background: var(--surface); border-left: 3px solid var(--lime); border-radius: 0 12px 12px 0; }
.insight-callout__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.2em 0; }
.insight-callout__grid .insight-callout { margin: 0; }
.insight-scope, .insight-steps, .insight-facts-list { list-style: none; padding: 0; margin: 1em 0; }
.insight-scope { display: grid; gap: 10px; }
.insight-scope__item, .insight-steps__item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.insight-facts-list li { padding: 14px 0; border-top: 1px solid var(--line); }
.insight-compare { display: grid; gap: 12px; margin: 1.2em 0; }
.insight-kpi { margin: 1.2em 0; padding: 22px; border-radius: 12px; background: var(--ink); color: #F7F6F1; }
.insight-kpi p, .insight-kpi li { color: #C5D0C8; }
.article-read .insight-kpi li.insight-kpi__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  color: #145C38;
}
.insight-kpi__label { flex: 1 1 auto; color: #145C38; }
.insight-kpi__value {
  flex: 0 1 48%;
  color: #145C38;
  font-weight: 600;
  text-align: right;
}
@media (max-width: 640px) {
  .article-read .insight-kpi li.insight-kpi__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .insight-kpi__value { flex: none; text-align: left; }
}
.article-layout > aside {
  position: sticky;
  top: 108px;
  max-height: calc(100vh - 124px);
  overflow: auto;
  overscroll-behavior: contain;
}
.toc__label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.toc a { display: block; text-decoration: none; font-size: 14px; color: var(--text); padding: 8px 0; border-top: 1px solid var(--line); }
.toc a:hover { color: var(--green); }
.side-cta { margin-top: 22px; padding: 18px; border-radius: 12px; background: var(--tile); }
.side-cta p { font-size: 15px; margin-bottom: 12px; }
.side-cta .btn { width: 100%; }
.related { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.related a { display: block; text-decoration: none; font-weight: 500; padding: 16px 18px; border-top: 1px solid var(--line); }
.related a:first-child { border-top: 0; }
.related a:hover { color: var(--green); }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 500; }
.faq p { color: var(--text); margin-top: 8px; max-width: 42em; }
.tracks a, .prose-links a { color: var(--green); }
.compare { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.dates div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.dates b { display: block; font-size: 22px; letter-spacing: -0.02em; }
.dates span { color: var(--text); font-size: 15px; }

.bridge { padding-block: 12px 36px; }
.bridge-main {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: center;
  padding: 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(23, 33, 27, 0.06);
}
.bridge-copy { padding: 8px 4px 8px 12px; }
.bridge-copy h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin-top: 10px; }
.bridge-say { color: var(--text); font-size: 18px; margin: 14px 0 26px; max-width: 30em; }
.bridge-fee { font-size: 15px; color: var(--soft); margin-top: 12px; }
.bridge-stage {
  --stage-rgb: 247, 246, 241;
  position: relative; margin: 0; aspect-ratio: 64 / 45; border-radius: 14px; overflow: hidden;
  background: rgb(var(--stage-rgb)); transition: background-color .4s ease;
}
.bridge-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.bridge-gl { position: absolute; inset: 0; display: flex; opacity: 0; transition: opacity .5s ease; }
.bridge-stage.gl-on .bridge-gl { opacity: 1; }
.bridge-stage.gl-on .bridge-poster { opacity: 0; }
.bridge-stage.gl-settled .bridge-gl, .bridge-stage.gl-settled .bridge-poster { transition: none; }
.bridge-stage figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 2; pointer-events: none;
  font-size: 12px; letter-spacing: 0.02em; color: var(--soft);
}
.bridge-stage.night figcaption { color: #8FA196; }
.bridge-stage .s1e-layer { font-family: var(--font); }
.bridge-stage .s1e-tag { display: none; }
.bridge-gate {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 28px; align-items: center;
  margin-top: 16px; padding: 24px 28px; border-radius: 14px; background: var(--tile);
}
.bridge-gate__label { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); }
.bridge-gate h2, .bridge-gate h3 { font-size: 22px; margin-top: 6px; }
.bridge-gate__copy p:not(.bridge-gate__label) { color: var(--text); font-size: 15px; margin-top: 8px; max-width: 38em; }
.bridge-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.bridge-form input[type="email"] { min-height: 54px; min-width: 0; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: 400 17px var(--font); color: var(--ink); }
.bridge-form [data-form-status] { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.bridge-form [data-form-status]:empty { display: none; }
.bridge-thanks { display: grid; gap: 12px; justify-items: start; }
.bridge-thanks:focus { outline: none; }
.bridge-form[hidden], .bridge-thanks[hidden] { display: none; }
.bridge-thanks p:not(.bridge-gate__label) { color: var(--text); font-size: 15px; }
.bridge-thanks p a { color: var(--green); }

@media (max-width: 1100px) {
  .quad { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 840px) {
  .trio, .steps, .person, .person-panel, .tracks, .quad { grid-template-columns: 1fr; }
  form.send { grid-template-columns: 1fr; }
  .article-layout, .insight-callout__grid, .dates { grid-template-columns: 1fr; }
  .article-layout > aside { position: static; max-height: none; overflow: visible; }
  .chapter { grid-template-columns: 1fr; gap: 4px; padding: 22px; }
  .bridge-main, .bridge-gate, .read-close__inner { grid-template-columns: 1fr; }
  .read-close__inner { flex-direction: column; align-items: flex-start; }
  .bridge-main { gap: 20px; padding: 20px; }
  .bridge-copy { padding: 4px; }
  .bridge-stage { order: -1; }
}
@media (max-width: 480px) {
  .bridge-form { grid-template-columns: 1fr; }
  .bridge-gate { padding: 20px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .sheet-hero { padding-top: calc(108px + env(safe-area-inset-top, 0px)); }
  .mission, .quote { padding: 24px; }
  .site-footer { padding-top: 56px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.s1e-reload body { opacity: 1; }
  html.s1e-reload.s1e-ready body { transition: none; }
}