:root {
  --ink: #132f33;
  --ink-deep: #0b2529;
  --ink-soft: #27494d;
  --paper: #f7faf9;
  --white: #fff;
  --mist: #e8f1f0;
  --mist-deep: #d8e7e5;
  --sky: #c7e3e5;
  --lilac: #dfdcf0;
  --signal: #d3e86f;
  --signal-pale: #edf6bf;
  --signal-ink: #27340c;
  --coral: #f1a48d;
  --text: #183438;
  --muted: #53696c;
  --muted-light: #a9bcbd;
  --line: #132f3324;
  --line-light: #ffffff2b;
  --shadow: 0 24px 70px #0d2b2f1a;
  --shadow-soft: 0 12px 36px #0d2b2f12;
  /* v2: focus tokens. Coral (#f1a48d) failed 3:1 non-text contrast on paper. */
  --focus: #0b2529;
  --focus-inverse: #d3e86f;
  --focus-halo: #ffffff;
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --shell: 1180px;
  --font-display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --font-body: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif
}

* {
  box-sizing: border-box
}

/* Elements using the hidden attribute must stay hidden even when a component
   class sets a display value (buttons, cards and steps all do). */
[hidden] {
  display: none !important
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
  scroll-padding-top: 96px
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65
}

body.menu-open {
  overflow: hidden
}

::selection {
  color: var(--ink-deep);
  background: var(--signal)
}

a {
  color: inherit;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px
}

button,
input,
textarea {
  font: inherit
}

button,
a {
  -webkit-tap-highlight-color: transparent
}

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

h1,
h2,
h3,
p,
blockquote {
  margin-top: 0
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: -.045em;
  font-weight: 500
}

h1 {
  margin-bottom: 28px;
  font-size: clamp(3.55rem, 7.2vw, 7rem);
  line-height: .93
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(2.35rem, 4.5vw, 4.25rem);
  line-height: .98
}

h3 {
  margin-bottom: 12px;
  font-size: 1.45rem;
  line-height: 1.12
}

p {
  margin-bottom: 1.1em
}

.shell {
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto
}

.section {
  padding-block: clamp(88px, 11vw, 152px)
}

.section--mist {
  background: var(--mist)
}

.section--ink {
  color: #d7e3e2;
  background: var(--ink-deep)
}

.section--ink h2,
.section--ink h3 {
  color: var(--white)
}

.section--topographic {
  isolation: isolate;
  position: relative;
  overflow: hidden
}

.section--topographic:before,
.section--topographic:after {
  z-index: -1;
  content: "";
  pointer-events: none;
  border: 1px solid #245f631c;
  border-radius: 50%;
  position: absolute
}

.section--topographic:before {
  aspect-ratio: 1.2;
  width: 48vw;
  top: -34%;
  right: -12%;
  transform: rotate(-14deg);
  box-shadow: 0 0 0 34px #245f630b, 0 0 0 68px #245f6309, 0 0 0 102px #245f6306
}

.section--topographic:after {
  aspect-ratio: 1.35;
  width: 36vw;
  bottom: -50%;
  left: -16%;
  box-shadow: 0 0 0 28px #245f630a, 0 0 0 56px #245f6308
}

.eyebrow,
.mini-label,
.step-kicker,
.source-type {
  color: var(--ink-soft);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.25
}

.eyebrow {
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  display: flex
}

.eyebrow:before {
  content: "";
  background: currentColor;
  width: 30px;
  height: 1px
}

.eyebrow--light {
  color: var(--signal)
}

.quiet-note {
  color: var(--muted);
  font-size: .87rem
}

.button-row,
.summary-actions,
.about-actions,
.link-pair {
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  display: flex
}

.button {
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 22px;
  font-size: .83rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
  display: inline-flex
}

.button:hover {
  transform: translateY(-2px)
}

.button--primary {
  color: var(--white);
  background: var(--ink);
  box-shadow: 0 12px 30px #132f332b
}

.button--primary:hover {
  background: #245f63
}

.button--signal {
  color: var(--signal-ink);
  background: var(--signal);
  box-shadow: 0 12px 28px #d3e86f29
}

.button--signal:hover {
  background: #e0ef94
}

.button--ink {
  color: var(--white);
  background: var(--ink-deep)
}

.button--outline {
  color: var(--ink);
  border-color: var(--line);
  background: 0 0
}

.button--outline:hover {
  border-color: var(--ink-soft);
  background: var(--white)
}

.button--small {
  min-height: 40px;
  padding: 9px 16px;
  font-size: .78rem
}

.text-link,
.text-button {
  color: var(--ink);
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-bottom: 1px solid;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: .83rem;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
  display: inline-flex
}

.text-link:hover,
.text-button:hover {
  color: #245f63
}

.skip-link {
  z-index: 9999;
  color: var(--white);
  background: var(--ink-deep);
  border-radius: 8px;
  padding: 12px 16px;
  transition: transform .15s;
  position: fixed;
  top: 10px;
  left: 10px;
  transform: translateY(-160%)
}

.skip-link:focus {
  transform: translateY(0)
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px
}

/* Focus on dark surfaces uses the signal colour (11.9:1 on --ink-deep). */
.section--ink :focus-visible,
.site-footer :focus-visible,
.site-nav :focus-visible,
.low-route-card :focus-visible,
.map-summary :focus-visible,
.low-capacity-strip :focus-visible {
  outline-color: var(--focus-inverse)
}

.site-header {
  z-index: 1000;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #f7faf9ed;
  border-bottom: 1px solid #132f3317;
  position: sticky;
  top: 0
}

.header-inner {
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  min-height: 78px;
  display: flex
}

.brand-link {
  z-index: 1002;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  position: relative
}

.brand {
  align-items: center;
  gap: 11px;
  display: inline-flex
}

.brand__mark {
  width: 38px;
  height: 38px
}

.brand__name {
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: -.045em;
  font-size: 1.2rem;
  line-height: 1
}

.brand__name span {
  font-style: italic
}

.site-nav,
.site-nav__links {
  align-items: center;
  display: flex
}

.site-nav {
  gap: 28px
}

.site-nav__links {
  gap: 22px
}

.site-nav__links a {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none
}

.site-nav__links a:hover {
  color: var(--ink)
}

.menu-button {
  display: none
}

.site-footer {
  color: #c5d4d4;
  background: var(--ink-deep);
  padding: 78px 0 30px
}

.site-footer .brand__name {
  color: var(--white)
}

.footer-grid {
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  padding-bottom: 58px;
  display: grid
}

.footer-intro p {
  max-width: 420px;
  color: var(--muted-light);
  margin: 22px 0 0
}

.footer-links {
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  display: grid
}

.footer-links div {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  display: flex
}

.footer-heading {
  color: var(--signal);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 750
}

.footer-links a {
  color: #d5e0df;
  font-size: .88rem;
  text-decoration: none
}

.footer-links a:hover {
  color: var(--white);
  text-decoration: underline
}

.footer-bottom {
  border-top: 1px solid var(--line-light);
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  display: flex
}

.footer-bottom p {
  color: #8eaaaa;
  margin: 0;
  font-size: .78rem
}

.hero {
  background: linear-gradient(135deg, var(--paper) 0%, #eff6f5 58%, #e5f0ef 100%);
  align-items: center;
  min-height: min(840px, 100svh - 78px);
  padding-block: 72px 88px;
  display: flex
}

.hero-grid {
  grid-template-columns: 1.07fr .93fr;
  align-items: center;
  gap: clamp(50px, 8vw, 110px);
  display: grid
}

.hero-copy h1 {
  max-width: 820px
}

.hero-lede {
  max-width: 660px;
  color: var(--muted);
  margin-bottom: 32px;
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  line-height: 1.62
}

.hero-copy .quiet-note {
  margin: 22px 0 0
}

.hero-map {
  border-radius: var(--radius-lg);
  background: var(--ink-deep);
  min-height: 530px;
  box-shadow: var(--shadow);
  border: 1px solid #132f331a;
  position: relative;
  overflow: hidden
}

.hero-map:before {
  content: "";
  background: linear-gradient(150deg, #c7e3e521, #0000 55%), radial-gradient(circle at 72% 22%, #d3e86f2b, #0000 26%);
  position: absolute;
  inset: 0
}

.hero-map__rings {
  aspect-ratio: 1;
  border: 1px solid #c7e3e540;
  border-radius: 44% 56% 52% 48%/60% 42% 58% 40%;
  width: 96%;
  position: absolute;
  top: 4%;
  right: -18%;
  transform: rotate(18deg);
  box-shadow: 0 0 0 31px #c7e3e50f, 0 0 0 62px #c7e3e50d, 0 0 0 93px #c7e3e50a, 0 0 0 124px #c7e3e508
}

.map-coordinate {
  color: #dce8e7;
  align-items: center;
  gap: 9px;
  display: flex;
  position: absolute
}

.map-coordinate span {
  border: 3px solid var(--ink-deep);
  background: var(--signal);
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 1px var(--signal);
  border-radius: 50%;
  flex: none;
  position: relative
}

.map-coordinate p {
  letter-spacing: .02em;
  margin: 0;
  font-size: .78rem
}

.map-coordinate strong {
  color: var(--white)
}

.map-coordinate--one {
  top: 22%;
  left: 17%
}

.map-coordinate--two {
  top: 44%;
  right: 12%
}

.map-coordinate--three {
  bottom: 25%;
  left: 30%
}

.map-caption {
  border-top: 1px solid var(--line-light);
  color: #b9cccb;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  display: flex;
  position: absolute;
  bottom: 28px;
  left: 30px;
  right: 30px
}

.map-caption__number {
  color: var(--signal);
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 800
}

.map-caption p {
  margin: 0;
  font-size: .78rem
}

.section-heading {
  margin-bottom: 52px
}

.section-heading--split {
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 80px;
  display: grid
}

.section-heading--split h2,
.section-heading--compact h2 {
  margin-bottom: 0
}

.section-heading--split>p {
  max-width: 520px;
  color: var(--muted);
  margin-bottom: 4px
}

.section-heading--compact {
  max-width: 720px
}

.doorway-section {
  background: var(--white)
}

.doorway-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  display: grid
}

.doorway-card,
.start-route-card {
  border: 1px solid var(--line);
  color: inherit;
  background: var(--paper);
  flex-direction: column;
  text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s, background-color .18s;
  display: flex;
  position: relative
}

.doorway-card {
  border-radius: var(--radius-md);
  min-height: 410px;
  padding: 24px
}

.doorway-card:hover,
.start-route-card:hover {
  z-index: 2;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  border-color: #245f6373;
  transform: translateY(-5px)
}

.card-index {
  color: var(--muted);
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 750
}

.icon-disc {
  width: 48px;
  height: 48px;
  color: var(--ink);
  background: var(--sky);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: inline-flex
}

.doorway-card .icon-disc {
  margin: 58px 0 26px
}

.doorway-card h3 {
  font-size: 1.6rem
}

.doorway-card p,
.start-route-card>p {
  color: var(--muted);
  font-size: .88rem
}

.card-link {
  border-top: 1px solid var(--line);
  color: var(--ink);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
  font-size: .78rem;
  font-weight: 750;
  display: flex
}

.low-capacity-strip {
  border-radius: var(--radius-md);
  color: #d7e3e2;
  background: var(--ink-deep);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 22px 24px;
  display: grid
}

.signal-dot {
  background: var(--signal);
  border-radius: 50%;
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 6px #d3e86f1f
}

.low-capacity-strip p {
  margin: 0;
  font-size: .86rem
}

.low-capacity-strip .mini-label {
  color: var(--signal);
  margin-bottom: 3px
}

.process-layout {
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(70px, 10vw, 150px);
  display: grid
}

.process-intro {
  align-self: start;
  position: sticky;
  top: 130px
}

.process-intro>p:not(.eyebrow) {
  color: #a9bdbc;
  max-width: 500px
}

.process-intro .button {
  margin-top: 16px
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.process-list li {
  border-bottom: 1px solid var(--line-light);
  grid-template-columns: 58px 1fr;
  gap: 20px;
  padding: 30px 0;
  display: grid
}

.process-list li:first-child {
  padding-top: 0
}

.process-list>li>span {
  color: var(--signal);
  letter-spacing: .12em;
  padding-top: 5px;
  font-size: .78rem;
  font-weight: 750
}

.process-list h3 {
  margin-bottom: 6px;
  font-size: 1.75rem
}

.process-list p {
  color: #a9bdbc;
  margin: 0
}

.principles-section {
  background: var(--white)
}

.principles-grid,
.trust-grid,
.editorial-grid,
.tool-aftercare-grid,
.expectation-grid,
.distinction-grid {
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(60px, 10vw, 150px);
  display: grid
}

.principles-heading>p:not(.eyebrow),
.trust-grid>div>p,
.tool-aftercare-grid>div>p,
.editorial-grid>div>p {
  color: var(--muted)
}

.principles-list article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 54px 1fr;
  gap: 16px;
  padding: 26px 0;
  display: grid
}

.principles-list article:first-child {
  padding-top: 0
}

.principles-list article>span {
  color: #2d6b6e;
  letter-spacing: .1em;
  padding-top: 5px;
  font-size: .78rem;
  font-weight: 750
}

.principles-list h3 {
  margin-bottom: 7px;
  font-size: 1.6rem
}

.principles-list p {
  color: var(--muted);
  margin: 0
}

.first-map-section {
  background: var(--white);
  padding-top: 0
}

.first-map-card,
.approach-cta {
  border-radius: var(--radius-lg);
  background: var(--sky);
  grid-template-columns: 1fr .9fr;
  gap: 90px;
  padding: clamp(46px, 7vw, 84px);
  display: grid
}

.first-map-card>div:last-child>p,
.approach-cta>div:last-child>p {
  color: #38585b
}

.tick-list {
  margin: 28px 0 32px;
  padding: 0;
  list-style: none
}

.tick-list li {
  margin: 9px 0;
  padding-left: 27px;
  font-size: .88rem;
  position: relative
}

.tick-list li:before {
  color: var(--ink);
  content: "✓";
  font-weight: 800;
  position: absolute;
  top: .15em;
  left: 0
}

.trust-section {
  background: var(--mist)
}

.trust-grid h2 {
  max-width: 620px
}

.page-hero {
  background: linear-gradient(135deg, var(--paper), var(--mist));
  padding: clamp(96px, 12vw, 160px) 0 clamp(88px, 11vw, 145px)
}

.page-hero__grid {
  grid-template-columns: 1.16fr .84fr;
  align-items: end;
  gap: clamp(60px, 9vw, 130px);
  display: grid
}

.page-hero h1 {
  max-width: 830px;
  margin-bottom: 0;
  font-size: clamp(3.45rem, 6.8vw, 6.4rem)
}

.page-hero__aside {
  padding-bottom: 6px
}

.page-hero__aside>p {
  color: var(--muted);
  font-size: 1.06rem
}

.page-hero__aside .button {
  margin-top: 12px
}

.page-hero--tool {
  background: var(--mist);
  padding-bottom: 64px
}

.tool-hero-grid {
  grid-template-columns: 1fr .7fr;
  align-items: end;
  gap: 80px;
  display: grid
}

.page-hero--tool h1 {
  max-width: 850px;
  margin-bottom: 0;
  font-size: clamp(3.3rem, 6vw, 5.9rem)
}

.privacy-ticket {
  border-radius: var(--radius-md);
  background: #ffffff8c;
  border: 1px solid #132f331c;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 22px;
  display: grid
}

.privacy-ticket .signal-dot {
  margin-top: 5px
}

.privacy-ticket .mini-label {
  margin: 0 0 5px
}

.privacy-ticket p:last-child {
  color: var(--muted);
  margin: 0;
  font-size: .8rem
}

.start-routes {
  background: var(--white)
}

.start-route-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid
}

.start-route-card {
  border-radius: var(--radius-md);
  min-height: 430px;
  padding: 26px
}

.start-route-card__top {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
  display: flex
}

.start-route-card h3 {
  font-size: 1.72rem
}

.route-note {
  border-top: 1px solid var(--line);
  margin-top: 5px;
  padding-top: 16px;
  font-size: .78rem !important
}

.low-route-section {
  background: var(--ink-deep)
}

.low-route-card {
  color: #c5d4d4;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 60px;
  display: grid
}

.low-route-card h2 {
  color: var(--white)
}

.low-route-card .eyebrow {
  color: var(--signal)
}

.low-route-card__mark {
  border: 1px solid #c7e3e538;
  border-radius: 47% 53% 60% 40%;
  width: 140px;
  height: 140px;
  position: relative;
  box-shadow: inset 0 0 0 20px #c7e3e50a, inset 0 0 0 40px #c7e3e50a
}

.low-route-card__mark span {
  background: var(--signal);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute
}

.low-route-card__mark span:first-child {
  top: 18px;
  left: 48px
}

.low-route-card__mark span:nth-child(2) {
  top: 72px;
  right: 21px
}

.low-route-card__mark span:nth-child(3) {
  bottom: 22px;
  left: 33px
}

.expectation-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.expectation-list li {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 45px 1fr;
  gap: 15px;
  padding: 22px 0;
  display: grid
}

.expectation-list span {
  color: #2d6b6e;
  letter-spacing: .1em;
  font-size: .78rem;
  font-weight: 800
}

.expectation-list p {
  margin: 0
}

.method-section {
  background: var(--white)
}

.method-path {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(5, 1fr);
  display: grid
}

.method-path article {
  border-right: 1px solid var(--line);
  padding: 30px 24px 34px;
  position: relative
}

.method-path article:last-child {
  border-right: 0
}

.method-number {
  color: var(--muted);
  letter-spacing: .1em;
  font-size: .78rem;
  font-weight: 750;
  position: absolute;
  top: 16px;
  right: 16px
}

.method-path .icon-disc {
  margin: 38px 0 34px
}

.method-path h3 {
  font-size: 1.75rem
}

.method-path p {
  color: var(--muted);
  font-size: .83rem
}

.method-question {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-weight: 700;
  color: var(--ink) !important;
  margin: 28px 0 0 !important
}

.maps-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  display: grid
}

.maps-grid article {
  border-radius: var(--radius-md);
  background: #ffffff9e;
  border: 1px solid #132f331f;
  min-height: 260px;
  padding: 24px
}

.maps-grid article>span {
  color: #2d6b6e;
  letter-spacing: .1em;
  margin-bottom: 60px;
  font-size: .78rem;
  font-weight: 800;
  display: block
}

.maps-grid h3 {
  font-size: 1.45rem
}

.maps-grid p {
  color: var(--muted);
  margin: 0;
  font-size: .82rem
}

.distinction-section {
  background: var(--white)
}

.distinction-cards {
  gap: 14px;
  display: grid
}

.distinction-cards article {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 28px
}

.distinction-cards .mini-label {
  color: #2d6b6e;
  margin-bottom: 13px
}

.distinction-cards blockquote {
  color: var(--ink);
  font-family: var(--font-display);
  margin-bottom: 12px;
  font-size: 1.32rem;
  font-style: italic;
  line-height: 1.3
}

.distinction-cards article>p:last-child {
  color: var(--muted);
  margin: 0;
  font-size: .82rem
}

.approach-cta-section {
  background: var(--white);
  padding-top: 0
}

.approach-cta {
  background: var(--lilac)
}

.evidence-key-section {
  background: var(--white)
}

.evidence-key-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  display: grid
}

.evidence-key-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  min-height: 300px;
  padding: 22px
}

.evidence-badge {
  color: var(--ink);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 52px;
  padding: 6px 9px;
  font-size: .78rem;
  font-weight: 800;
  display: inline-flex
}

.evidence-badge--established {
  background: var(--sky)
}

.evidence-badge--emerging {
  background: var(--lilac)
}

.evidence-badge--lived {
  background: var(--signal-pale)
}

.evidence-badge--interpretation {
  background: #f8d9d0
}

.evidence-badge--tool {
  color: var(--white);
  background: var(--ink-soft)
}

.evidence-key-grid h3 {
  font-size: 1.3rem
}

.evidence-key-grid p {
  color: var(--muted);
  margin: 0;
  font-size: .82rem
}

.boundary-grid {
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  display: grid
}

.boundary-grid>div>p:not(.eyebrow) {
  color: #a9bdbc
}

.boundary-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.boundary-list li {
  border-bottom: 1px solid var(--line-light);
  color: #c6d4d3;
  padding: 16px 0 16px 28px;
  position: relative
}

.boundary-list li:before {
  color: var(--signal);
  content: "—";
  position: absolute;
  top: 16px;
  left: 0
}

.support-section {
  background: var(--white)
}

.support-card {
  border-radius: var(--radius-lg);
  background: var(--signal-pale);
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  padding: clamp(44px, 7vw, 80px);
  display: grid
}

.support-card>div:last-child>p {
  color: #44542a
}

.support-card>div:last-child a:not(.text-link) {
  font-weight: 800
}

.sources-section {
  background: var(--mist)
}

.source-list {
  border-top: 1px solid var(--line)
}

.source-list>a {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 55px 1fr auto;
  gap: 24px;
  padding: 28px 8px;
  text-decoration: none;
  transition: background-color .18s, padding .18s;
  display: grid
}

.source-list>a:hover {
  background: #ffffff85;
  padding-inline: 18px
}

.source-number,
.source-arrow {
  color: #2d6b6e;
  letter-spacing: .1em;
  font-size: .78rem;
  font-weight: 800
}

.source-type {
  color: #2d6b6e;
  margin-bottom: 6px;
  font-size: .78rem;
  display: block
}

.source-list h3 {
  font-family: var(--font-body);
  letter-spacing: -.015em;
  margin-bottom: 7px;
  font-size: 1rem;
  font-weight: 750
}

.source-list p {
  max-width: 800px;
  color: var(--muted);
  margin: 0;
  font-size: .84rem
}

.origin-section,
.ecosystem-section {
  background: var(--white)
}

.long-copy {
  max-width: 700px
}

.long-copy>p {
  color: var(--muted);
  font-size: 1.03rem
}

.long-copy blockquote {
  color: var(--ink);
  font-family: var(--font-display);
  border-left: 2px solid #2d6b6e;
  margin: 42px 0 0;
  padding: 26px 0 6px 30px;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-style: italic;
  line-height: 1.3
}

.creator-grid {
  grid-template-columns: .7fr 1.3fr;
  align-items: center;
  gap: 100px;
  display: grid
}

.creator-mark {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff8c;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  display: flex
}

.creator-mark img {
  width: 180px
}

.creator-grid>div:last-child {
  max-width: 700px
}

.creator-grid>div:last-child>p:not(.eyebrow) {
  color: var(--muted)
}

.about-actions {
  margin-top: 34px
}

.legal-hero {
  background: var(--mist);
  padding: 100px 0 78px
}

.legal-hero__inner {
  max-width: 900px
}

.legal-hero h1 {
  margin-bottom: 22px;
  font-size: clamp(3.2rem, 6vw, 5.5rem)
}

.legal-hero__inner>p:last-child {
  color: var(--muted);
  margin: 0;
  font-size: .8rem
}

.legal-section {
  background: var(--white)
}

.legal-layout {
  grid-template-columns: .55fr 1.45fr;
  gap: 100px;
  display: grid
}

.legal-layout aside {
  border-radius: var(--radius-md);
  background: var(--signal-pale);
  align-self: start;
  padding: 24px;
  position: sticky;
  top: 120px
}

.legal-layout aside .mini-label {
  margin-bottom: 10px
}

.legal-layout aside p:last-child {
  color: #44542a;
  margin: 0;
  font-size: .86rem
}

.legal-copy {
  max-width: 740px
}

.legal-copy h2 {
  margin-top: 54px;
  margin-bottom: 15px;
  font-size: 2rem
}

.legal-copy h2:first-child {
  margin-top: 0
}

.legal-copy p,
.legal-copy li {
  color: var(--muted)
}

.legal-copy li {
  margin: 8px 0
}

.tool-section {
  background: var(--mist);
  padding: 0 0 clamp(90px, 11vw, 150px)
}

.map-tool {
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  border: 1px solid #132f3321;
  overflow: hidden
}

.map-tool__header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 28px 34px;
  display: flex
}

.map-tool__header .mini-label {
  margin-bottom: 7px
}

.map-tool__header h2 {
  margin: 0;
  font-size: 2.05rem
}

.capacity-switch {
  color: var(--ink-soft);
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-bottom: 1px solid;
  padding: 8px 0;
  font-size: .78rem;
  font-weight: 750
}

.tool-progress {
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(4, 1fr);
  padding: 0 34px;
  display: grid
}

.tool-progress>span {
  border-top: 3px solid #0000;
  height: 55px;
  position: relative
}

.tool-progress>span.is-active {
  border-top-color: #2d6b6e
}

.tool-progress>span>span {
  width: 24px;
  height: 24px;
  color: var(--muted);
  background: var(--mist);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  position: absolute;
  top: 14px;
  left: 0
}

.tool-progress>span.is-active>span {
  color: var(--white);
  background: var(--ink-soft)
}

.tool-step {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: clamp(34px, 6vw, 72px)
}

.tool-step legend {
  width: 100%;
  max-width: 880px;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: -.045em;
  margin-bottom: 12px;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  line-height: 1;
  display: block
}

.step-kicker {
  color: #2d6b6e;
  font-family: var(--font-body);
  margin-bottom: 18px;
  display: block
}

.step-intro {
  max-width: 720px;
  color: var(--muted);
  margin-bottom: 36px
}

.option-grid {
  gap: 12px;
  display: grid
}

.option-grid--focus {
  grid-template-columns: repeat(2, 1fr)
}

.option-grid--capacity,
.option-grid--impact {
  grid-template-columns: repeat(4, 1fr)
}

.option-grid--experiment {
  grid-template-columns: repeat(2, 1fr)
}

.choice-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  cursor: pointer;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 14px;
  min-height: 118px;
  padding: 20px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
  display: grid;
  position: relative
}

.choice-card:hover {
  background: var(--white);
  border-color: #245f6373
}

.choice-card.is-selected {
  border-color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--ink-soft);
  background: #eef6f5
}

.choice-card input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute
}

.choice-card__control {
  background: var(--white);
  border: 1px solid #7b9294;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  display: block
}

.choice-card.is-selected .choice-card__control {
  border: 5px solid var(--ink-soft)
}

.choice-card strong,
.choice-card small {
  display: block
}

.choice-card strong {
  color: var(--ink);
  margin-bottom: 6px;
  font-size: .88rem
}

.choice-card small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.48
}

.choice-card--small {
  min-height: 120px
}

.field-label {
  color: var(--ink);
  margin-bottom: 9px;
  font-size: .82rem;
  font-weight: 750;
  display: block
}

.field-label span {
  color: var(--muted);
  font-weight: 500
}

.field-label--spaced {
  margin-top: 34px
}

textarea,
input[type=text] {
  border-radius: var(--radius-sm);
  width: 100%;
  color: var(--text);
  background: var(--white);
  border: 1px solid #132f3338
}

textarea {
  resize: vertical;
  min-height: 130px;
  padding: 16px
}

input[type=text] {
  min-height: 52px;
  padding: 12px 15px
}

textarea::placeholder,
input::placeholder {
  color: #839597
}

.field-help {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: .78rem
}

.sub-question {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 34px
}

.chip-grid {
  flex-wrap: wrap;
  gap: 9px;
  display: flex
}

.condition-chip {
  border: 1px solid var(--line);
  min-height: 43px;
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: .78rem;
  font-weight: 650;
  display: inline-flex
}

.condition-chip:hover {
  border-color: #245f6373
}

.condition-chip.is-selected {
  border-color: var(--ink-soft);
  color: var(--ink);
  background: var(--signal-pale)
}

.condition-chip input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute
}

.condition-chip>span {
  font-weight: 850
}

.map-summary {
  border-radius: var(--radius-md);
  color: #d6e2e1;
  background: var(--ink-deep);
  margin-top: 44px;
  overflow: hidden
}

.map-summary__heading {
  border-bottom: 1px solid var(--line-light);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  display: flex
}

.map-summary__heading .mini-label {
  color: var(--signal);
  margin-bottom: 7px
}

.map-summary__heading h3 {
  color: var(--white);
  margin: 0;
  font-size: 1.7rem
}

.map-summary__heading>span {
  border: 1px solid var(--line-light);
  color: #a9bdbc;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: .78rem;
  font-weight: 750
}

.map-summary pre {
  white-space: pre-wrap;
  color: #c5d4d4;
  max-height: 470px;
  font-family: var(--font-body);
  margin: 0;
  padding: 28px;
  font-size: .82rem;
  line-height: 1.72;
  overflow: auto
}

.summary-actions {
  border-top: 1px solid var(--line-light);
  padding: 22px 28px 28px
}

.map-summary .button--outline {
  color: var(--white);
  border-color: var(--line-light)
}

.map-summary .button--outline:hover {
  background: #ffffff14
}

.map-summary .text-button {
  color: #c5d4d4
}

.tool-navigation {
  border-top: 1px solid var(--line);
  background: #f9fbfa;
  justify-content: space-between;
  align-items: center;
  padding: 24px 34px;
  display: flex
}

.map-tool--low {
  min-height: 560px
}

.low-tool-intro {
  max-width: 720px;
  color: var(--muted);
  margin: 0;
  padding: 42px 42px 22px
}

.low-tool-options {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 42px 34px;
  display: grid
}

.low-tool-options button {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  min-height: 92px;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  align-items: center;
  gap: 12px;
  padding: 17px;
  font-size: .82rem;
  font-weight: 750;
  display: flex
}

.low-tool-options button:hover,
.low-tool-options button.is-selected {
  border-color: var(--ink-soft);
  background: var(--signal-pale)
}

.low-tool-options button span {
  width: 24px;
  height: 24px;
  color: var(--white);
  background: var(--ink-soft);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex
}

.low-result {
  border-radius: var(--radius-md);
  background: var(--mist);
  margin: 0 42px 42px;
  padding: 34px
}

.low-result .mini-label {
  color: #2d6b6e
}

.low-result h3 {
  font-size: 2rem
}

.low-result--empty {
  text-align: center;
  background: 0 0;
  border: 1px dashed #132f3338;
  place-items: center;
  min-height: 180px;
  display: grid
}

.low-result--empty p {
  max-width: 340px;
  color: var(--muted);
  margin: 0
}

.script-box {
  border-radius: var(--radius-sm);
  background: var(--white);
  margin: 24px 0;
  padding: 24px
}

.script-box>p {
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 750
}

.script-box blockquote {
  color: var(--ink);
  font-family: var(--font-display);
  margin-bottom: 18px;
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.38
}

.tool-aftercare {
  background: var(--white)
}

.not-found-main {
  background: var(--mist);
  place-items: center;
  min-height: 70vh;
  padding: 80px 0;
  display: grid
}

.not-found-card {
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  grid-template-columns: .65fr 1.35fr;
  align-items: center;
  gap: 80px;
  padding: 60px;
  display: grid
}

.not-found-map {
  border-radius: var(--radius-md);
  min-height: 300px;
  color: var(--signal);
  background: var(--ink-deep);
  font-family: var(--font-display);
  place-items: center;
  font-size: 4rem;
  display: grid
}

.not-found-card h1 {
  font-size: clamp(3rem, 6vw, 5rem)
}

@media (max-width:1080px) {
  .site-nav__links {
    gap: 16px
  }

  .site-nav {
    gap: 18px
  }

  .doorway-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .doorway-card {
    min-height: 350px
  }

  .method-path {
    grid-template-columns: repeat(2, 1fr)
  }

  .method-path article:nth-child(2),
  .method-path article:nth-child(4) {
    border-right: 0
  }

  .method-path article:last-child {
    border-top: 1px solid var(--line)
  }

  .maps-grid,
  .evidence-key-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .low-route-card {
    grid-template-columns: 110px 1fr
  }

  .low-route-card .button {
    grid-column: 2;
    justify-self: start
  }

  .low-route-card__mark {
    width: 105px;
    height: 105px
  }

  .option-grid--capacity,
  .option-grid--impact,
  .low-tool-options {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:860px) {
  .shell {
    width: min(var(--shell), calc(100% - 36px))
  }

  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--paper)
  }

  .menu-button {
    z-index: 1002;
    border: 1px solid var(--line);
    background: var(--white);
    cursor: pointer;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    display: flex;
    position: relative
  }

  .menu-button span {
    background: var(--ink);
    border-radius: 999px;
    width: 18px;
    height: 2px;
    transition: transform .18s, opacity .18s
  }

  .menu-button[aria-expanded=true] span:first-child {
    transform: translateY(7px)rotate(45deg)
  }

  .menu-button[aria-expanded=true] span:nth-child(2) {
    opacity: 0
  }

  .menu-button[aria-expanded=true] span:nth-child(3) {
    transform: translateY(-7px)rotate(-45deg)
  }

  .site-nav {
    z-index: 1001;
    visibility: hidden;
    background: var(--ink-deep);
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    padding: 105px 28px 36px;
    transition: opacity .18s, visibility .18s;
    display: flex;
    position: fixed;
    inset: 0
  }

  .site-nav--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto
  }

  body.menu-open .site-header .brand__name {
    color: var(--white)
  }

  body.menu-open .site-header .brand__mark {
    content: url(../../brand/logo-mark-light.svg)
  }

  .site-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0
  }

  .site-nav__links a {
    border-bottom: 1px solid var(--line-light);
    color: var(--white);
    font-family: var(--font-display);
    letter-spacing: -.04em;
    padding: 15px 0;
    font-size: clamp(1.7rem, 8vw, 2.6rem);
    font-weight: 500
  }

  .nav-capacity {
    align-self: flex-start
  }

  .hero,
  .page-hero {
    min-height: auto
  }

  .hero-grid,
  .page-hero__grid,
  .tool-hero-grid,
  .section-heading--split,
  .process-layout,
  .principles-grid,
  .trust-grid,
  .editorial-grid,
  .tool-aftercare-grid,
  .expectation-grid,
  .distinction-grid,
  .boundary-grid,
  .support-card,
  .first-map-card,
  .approach-cta,
  .creator-grid,
  .legal-layout,
  .not-found-card {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .hero-map {
    min-height: 430px
  }

  .process-intro,
  .legal-layout aside {
    position: static
  }

  .start-route-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .first-map-card,
  .approach-cta,
  .support-card {
    gap: 34px
  }

  .tool-hero-grid {
    align-items: start
  }

  .privacy-ticket {
    max-width: 560px
  }

  .creator-mark {
    min-height: 320px
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 50px
  }

  .option-grid--capacity,
  .option-grid--impact {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:620px) {
  :root {
    --radius-lg: 25px;
    --radius-md: 17px
  }

  body {
    font-size: .98rem
  }

  .shell {
    width: min(var(--shell), calc(100% - 28px))
  }

  .section {
    padding-block: 76px
  }

  h1 {
    font-size: clamp(3.1rem, 17vw, 4.7rem)
  }

  h2 {
    font-size: clamp(2.3rem, 12vw, 3.25rem)
  }

  .brand__name {
    font-size: 1.08rem
  }

  .hero {
    padding-block: 58px 70px
  }

  .hero-grid {
    gap: 50px
  }

  .hero-map {
    min-height: 390px
  }

  .map-coordinate--one {
    left: 10%
  }

  .map-coordinate--two {
    right: 6%
  }

  .map-coordinate--three {
    left: 18%
  }

  .button-row {
    flex-direction: column;
    align-items: flex-start
  }

  .button-row .button {
    width: 100%
  }

  .doorway-grid,
  .start-route-grid,
  .maps-grid,
  .evidence-key-grid,
  .option-grid--focus,
  .option-grid--capacity,
  .option-grid--impact,
  .option-grid--experiment,
  .low-tool-options {
    grid-template-columns: 1fr
  }

  .doorway-card,
  .start-route-card {
    min-height: 340px
  }

  .low-capacity-strip {
    grid-template-columns: auto 1fr
  }

  .low-capacity-strip .button {
    grid-column: 1/-1
  }

  .process-list li {
    grid-template-columns: 42px 1fr
  }

  .page-hero {
    padding-block: 78px
  }

  .page-hero__grid {
    gap: 34px
  }

  .page-hero h1,
  .page-hero--tool h1 {
    font-size: clamp(3rem, 15vw, 4.25rem)
  }

  .low-route-card {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .low-route-card .button {
    grid-column: 1
  }

  .method-path {
    grid-template-columns: 1fr
  }

  .method-path article,
  .method-path article:nth-child(2),
  .method-path article:nth-child(4) {
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }

  .method-path article:last-child {
    border-bottom: 0
  }

  .method-path .icon-disc,
  .maps-grid article>span,
  .evidence-badge,
  .start-route-card__top,
  .doorway-card .icon-disc {
    margin-bottom: 30px
  }

  .maps-grid article,
  .evidence-key-grid article {
    min-height: 230px
  }

  .source-list>a {
    grid-template-columns: 36px 1fr
  }

  .source-arrow {
    display: none
  }

  .footer-links {
    grid-template-columns: 1fr
  }

  .footer-bottom {
    flex-direction: column
  }

  .map-tool__header {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px
  }

  .tool-progress {
    padding: 0 24px
  }

  .tool-step {
    padding: 34px 22px
  }

  .tool-step legend {
    font-size: clamp(2.2rem, 12vw, 3rem)
  }

  .choice-card,
  .choice-card--small {
    min-height: 105px
  }

  .map-summary__heading {
    flex-direction: column;
    align-items: flex-start
  }

  .summary-actions {
    flex-direction: column;
    align-items: stretch
  }

  .summary-actions .button {
    width: 100%
  }

  .summary-actions .text-button {
    align-self: center
  }

  .tool-navigation {
    gap: 12px;
    padding: 20px 22px
  }

  .tool-navigation .button {
    flex: 1
  }

  .low-tool-intro,
  .low-tool-options {
    padding-left: 22px;
    padding-right: 22px
  }

  .low-result {
    margin: 0 22px 22px;
    padding: 24px
  }

  .legal-layout {
    gap: 38px
  }

  .not-found-card {
    padding: 24px
  }

  .not-found-map {
    min-height: 220px
  }
}

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

  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important
  }
}

@media print {

  .site-header,
  .site-footer,
  .page-hero,
  .map-tool__header,
  .tool-progress,
  .tool-step>:not(.map-summary),
  .tool-navigation,
  .tool-aftercare,
  .summary-actions {
    display: none !important
  }

  body,
  .tool-section {
    background: #fff
  }

  .tool-section {
    padding: 0
  }

  .map-tool {
    box-shadow: none;
    border: 0
  }

  .tool-step {
    padding: 0
  }

  .map-summary {
    color: #111;
    background: #fff
  }

  .map-summary__heading {
    border-color: #bbb
  }

  .map-summary__heading h3,
  .map-summary pre {
    color: #111
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}
/* ==========================================================================
   VERSION TWO ADDITIONS
   Added for the v2 review: evidence labelling, stopping points, keyboard
   affordances, and non-colour state indicators.
   ========================================================================== */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute
}

h4 {
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: -.015em;
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 750
}

/* Current page marker in the header (not colour-only: adds a rule) */
.site-nav__links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .35em
}

/* --- Evidence labelling -------------------------------------------------- */

.claim-note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-soft);
  border-radius: var(--radius-sm);
  background: var(--white);
  margin: 28px 0;
  padding: 20px 22px
}

.claim-note > p:last-child {
  margin-bottom: 0
}

.claim-note p {
  color: var(--muted);
  font-size: .88rem
}

.claim-note .evidence-badge {
  margin-bottom: 12px
}

.claim-note--onmist {
  background: var(--white)
}

.evidence-badge--inline {
  margin-bottom: 10px
}

/* Badge shapes carry a drawn marker so the five claim types are not
   distinguished by colour alone. Empty content keeps them silent for
   screen readers, which already read the badge text. */
.evidence-badge:before {
  content: "";
  background: currentColor;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 8px
}

.evidence-badge--emerging:before {
  background: none;
  border: 2px solid currentColor;
  transform: rotate(45deg)
}

.evidence-badge--lived:before { border-radius: 50% }

.evidence-badge--interpretation:before {
  border: 2px solid currentColor;
  border-right-color: #0000;
  border-radius: 50%;
  background: none
}

.evidence-badge--tool:before {
  background: none;
  border: 2px solid currentColor;
  box-shadow: inset 0 0 0 1px currentColor
}

.evidence-key-grid .evidence-limit {
  border-top: 1px solid var(--line);
  color: var(--muted);
  margin: 16px 0 0;
  padding-top: 14px;
  font-size: .82rem
}

.evidence-key-grid article > p {
  margin-bottom: 0
}

/* --- Review / changelog -------------------------------------------------- */

.review-meta {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  margin-bottom: 34px;
  padding: 18px 22px
}

.review-meta p {
  color: var(--muted);
  margin: 0;
  font-size: .86rem
}

.review-meta p + p {
  margin-top: 6px
}

.changelog-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.changelog-list li {
  border-top: 1px solid var(--line);
  padding: 16px 0;
  font-size: .9rem
}

.changelog-list li:first-child {
  border-top: 0
}

.changelog-list strong {
  display: block;
  margin-bottom: 4px
}

.changelog-list span {
  color: var(--muted);
  font-size: .82rem
}

/* Source list additions */
.source-list .source-meta {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: .82rem
}

.source-list .source-limit {
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  margin: 12px 0 0;
  padding-top: 10px;
  font-size: .82rem
}

/* --- Stopping points and permission panels -------------------------------- */

.stop-panel {
  border: 1px dashed var(--ink-soft);
  border-radius: var(--radius-md);
  background: var(--mist);
  margin: 30px 0 0;
  padding: 22px 24px
}

.stop-panel h3 {
  font-family: var(--font-body);
  letter-spacing: -.015em;
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 750
}

.stop-panel p {
  color: var(--ink-soft);
  margin-bottom: 0;
  font-size: .88rem
}

.stop-panel .link-pair {
  margin-top: 14px
}

/* --- Tool: v2 controls ---------------------------------------------------- */

/* The radio/checkbox inside a card is visually hidden, so the card itself has
   to show the keyboard focus ring. */
.choice-card:focus-within,
.condition-chip:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px
}

/* Selected chips get a drawn tick as well as a colour change, so the state is
   not signalled by colour alone. The checkbox already carries the state for
   screen readers, so the marker is empty content. */
.condition-chip.is-selected {
  box-shadow: inset 0 0 0 1px var(--ink-soft)
}

.condition-chip.is-selected > span:before {
  content: "";
  border: solid var(--ink-soft);
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 9px;
  margin-right: 8px;
  display: inline-block;
  transform: translateY(-1px) rotate(45deg)
}

.low-tool-options button {
  position: relative
}

.low-tool-options button.is-selected {
  box-shadow: inset 0 0 0 1px var(--ink-soft)
}

.low-tool-options button.is-selected:after {
  content: "";
  border: solid var(--ink-soft);
  border-width: 0 2px 2px 0;
  width: 6px;
  height: 11px;
  position: absolute;
  top: 12px;
  right: 16px;
  transform: rotate(45deg)
}

.tool-status {
  color: var(--ink-soft);
  margin: 0 0 18px;
  font-size: .86rem
}

.explanation-pair {
  gap: 18px;
  display: grid
}

.explanation-pair .field-label {
  margin-bottom: 0
}

.reading-hint {
  border-left: 3px solid var(--sky);
  color: var(--muted);
  margin: 0 0 20px;
  padding: 4px 0 4px 16px;
  font-size: .86rem
}

.tool-step .stop-panel {
  margin-top: 34px
}

.step-counter {
  color: var(--muted);
  margin: 0 0 6px;
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase
}

.summary-caveat {
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin: 22px 0 0;
  padding-top: 18px;
  font-size: .84rem
}

.tool-error {
  color: #8a2f18;
  background: #fdeee8;
  border: 1px solid #e4b7a6;
  border-radius: var(--radius-sm);
  margin: 0 0 20px;
  padding: 12px 16px;
  font-size: .88rem;
  font-weight: 600
}

.tool-error:before {
  content: "! ";
  font-weight: 800
}

/* --- Small helpers -------------------------------------------------------- */

.prose-list {
  margin: 0 0 1.1em;
  padding-left: 1.2em
}

.prose-list li {
  margin-bottom: .5em
}

.legal-copy h3 {
  font-family: var(--font-body);
  letter-spacing: -.015em;
  margin: 26px 0 8px;
  font-size: 1.02rem;
  font-weight: 750
}

.legal-copy .prose-list li {
  color: var(--ink-soft);
  font-size: .95rem
}

.footer-note {
  color: #cfdcdb;
  max-width: 60ch;
  margin: 18px 0 0;
  font-size: .82rem
}

/* Keep body copy within a comfortable measure. */
.long-copy > p,
.legal-copy p {
  max-width: 68ch
}

@media (max-width: 900px) {
  .claim-note { padding: 18px }
  .stop-panel { padding: 18px }
}

/* Forced-colors / Windows high contrast */
@media (forced-colors: active) {
  .choice-card.is-selected,
  .condition-chip.is-selected {
    outline: 2px solid CanvasText
  }
  :focus-visible {
    outline: 3px solid Highlight
  }
}

/* --- v2 markup adjustments ------------------------------------------------ */

.tool-progress {
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  list-style: none
}

.tool-progress > li {
  border-top: 3px solid #0000;
  height: 55px;
  position: relative
}

.tool-progress > li.is-active {
  border-top-color: #2d6b6e
}

.tool-progress > li > span:first-child {
  width: 24px;
  height: 24px;
  color: var(--muted);
  background: var(--mist);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  position: absolute;
  top: 14px;
  left: 0
}

.tool-progress > li.is-active > span:first-child {
  color: var(--white);
  background: var(--ink-soft)
}

.tool-progress > li[aria-current="step"] > span:first-child {
  box-shadow: 0 0 0 4px var(--signal-pale)
}

.choice-card__body {
  display: block
}

.choice-card__body strong {
  color: var(--ink);
  margin-bottom: 6px;
  font-size: .88rem;
  display: block
}

.step-title {
  display: block
}

.low-result-card h3 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  margin-bottom: 14px
}

.low-result-card .prose-list li {
  color: var(--ink-soft);
  font-size: .88rem
}

.low-result-card .field-label {
  margin-top: 20px
}

.low-script {
  border-left: 3px solid var(--ink-soft);
  color: var(--ink);
  background: var(--white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 6px;
  padding: 14px 18px;
  font-style: italic
}

.low-result--none {
  background: var(--signal-pale)
}

.low-result--none p {
  color: var(--ink);
  font-size: .9rem;
  margin-bottom: 0
}

.reading-suggestions {
  flex-wrap: wrap;
  gap: 10px
}

.reading-suggestions .button {
  text-align: left
}

/* Source register: article wrapper around the original link row */
.source-item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 26px
}

.source-item > a {
  border-bottom: 0;
  grid-template-columns: 55px 1fr auto;
  gap: 24px;
  padding: 26px 8px 10px;
  text-decoration: none;
  align-items: start;
  display: grid
}

.source-item > a:hover h3 {
  text-decoration: underline
}

.source-item > p {
  max-width: 800px;
  color: var(--muted);
  margin: 0 0 8px;
  padding-left: 87px;
  font-size: .84rem
}

.source-item > p strong {
  color: var(--ink)
}

@media (max-width: 900px) {
  .source-item > a { grid-template-columns: 36px 1fr }
  .source-item > p { padding-left: 0 }
  .tool-progress { grid-template-columns: repeat(5, 1fr); padding: 0 20px }
}

/* Print: the summary should come out readable on white paper. */
@media print {
  .tool-status,
  .reading-suggestions,
  .stop-panel,
  .noscript,
  .low-tool-options { display: none }
  .map-summary,
  .map-summary pre,
  .map-summary__heading h3 { color: #111 !important; background: #fff !important }
  .map-summary pre { max-height: none }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all }
}

.claim-badge {
  margin: 0 0 10px
}

.long-copy .claim-badge + p {
  margin-top: 0
}

.map-summary .summary-caveat {
  color: #b9c9c8;
  border-top-color: var(--line-light)
}

.tool-step .map-summary {
  margin-top: 0
}

.long-copy h3 {
  margin-top: 40px;
  font-size: 1.55rem
}

.long-copy h3:first-child {
  margin-top: 0
}

.claim-badge .evidence-badge,
.claim-note .evidence-badge {
  margin-bottom: 0
}

.long-copy h3 + .claim-badge {
  margin-top: -4px
}