/* WhatWay document pages: terms, privacy, accessibility, data, 404.
 *
 * Loaded after styles.css, which owns the tokens and the reset. These pages
 * are a reading surface, not an app surface, so they get a single measured
 * column and no cards: the app's card grid encodes "these are comparable
 * results", which is a claim that means nothing about a paragraph.
 *
 * Every page opens with a one-sentence plain-language summary. Most people
 * reading this are reading English as a second or third language while
 * trying to decide whether this site is safe. The summary is the part that
 * has to land; the detail below it is for the people who want it.
 */

.doc-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--gutter); border-bottom: 1px solid var(--rule);
  background: rgba(255,255,255,0.96); position: sticky; inset-block-start: 0;
  z-index: 40; backdrop-filter: blur(12px);
}
.doc-back {
  font-size: 14.5px; color: var(--spruce); text-decoration: none; font-weight: 600;
}
.doc-back:hover { text-decoration: underline; }

/* About belongs to the product surface, so its shell uses the same calm,
   wrapping navigation as the home page instead of the compact policy-page
   header. The editorial content below still keeps its own reading rhythm. */
.about-page .doc-header {
  position: static; justify-content: flex-start; background: transparent;
  backdrop-filter: none;
}
.about-page .doc-nav { margin-inline-start: auto; gap: 8px; }
.about-page .doc-nav [aria-current="page"] { background: var(--band); }

.doc {
  max-width: 68ch; margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--gutter) clamp(48px, 7vw, 88px);
}
.doc h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.05; }

/* The summary is load-bearing, so it gets the one piece of emphasis on the
   page: a tinted panel with a thick leading edge. Nothing else here is
   boxed, which is what makes this read as "start here" rather than "a card". */
.doc-summary {
  margin: 20px 0 8px; padding: 16px 18px;
  background: var(--tint); border-inline-start: 4px solid var(--spruce);
  border-radius: var(--r-ctl);
  font-size: 17.5px; line-height: 1.55; color: var(--pine);
}
.doc-updated { font-size: 14px; color: var(--ink-muted); margin: 14px 0 0; }

.doc h2 {
  font-size: clamp(20px, 2.6vw, 25px); margin: 36px 0 0;
  padding-top: 20px; border-top: 1px solid var(--rule);
}
.doc h3 { font-size: 17.5px; margin: 24px 0 0; }
.doc p, .doc li { font-size: 16.5px; line-height: 1.65; color: var(--ink-body); }
.doc p { margin: 12px 0 0; }
/* Not buttons. `.doc a` outranks `.btn-primary` on specificity, so a
   primary button on a document page rendered spruce text on a spruce
   fill: a solid green block with an invisible label. */
.doc a:not(.btn) { color: var(--spruce); }
.doc ul, .doc ol { margin: 12px 0 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.doc li::marker { color: var(--ink-muted); }
.doc strong { color: var(--ink); font-weight: 600; }

/* A definition-style row reads better than a two-column table for "what we
   keep / how long", and it survives a 320px screen without scrolling. */
.doc-rows { margin: 16px 0 0; display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); overflow: hidden; }
.doc-row { background: var(--card); padding: 14px 16px; display: grid; gap: 4px; }
.doc-row dt { font-weight: 600; font-size: 16px; color: var(--ink); }
.doc-row dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); }

.doc-note {
  margin-top: 32px; padding: 16px 18px; border: 1px solid var(--edge);
  border-radius: var(--r-ctl); background: var(--card);
  font-size: 15.5px; line-height: 1.6; color: var(--ink-muted);
}

.doc-more { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); }
.doc-more p { font-weight: 600; color: var(--ink); margin: 0 0 10px; font-size: 15.5px; }
.doc-more ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.doc-more a { font-size: 15.5px; }

/* Error pages keep the same route language as the rest of the product: a
   number for support, one plain explanation, then the next safe action. */
.error-page { min-height: 100vh; display: flex; flex-direction: column; }
.error-header { position: relative; }
.error-shell {
  width: 100%; max-width: 920px; margin: 0 auto; flex: 1;
  padding: clamp(52px, 10vw, 112px) var(--gutter);
  display: grid; align-items: center;
}
.error-panel {
  position: relative; max-width: 680px; padding-inline-start: clamp(22px, 5vw, 48px);
  border-inline-start: 4px solid var(--notice-edge);
}
.error-eyebrow {
  margin: 0 0 14px; color: var(--spruce); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.error-code {
  position: absolute; inset-inline-end: 0; top: -0.25em; margin: 0;
  color: var(--band); font-family: var(--display); font-size: clamp(64px, 15vw, 150px);
  font-weight: 800; line-height: 0.8; letter-spacing: -0.06em; z-index: -1;
}
.error-panel h1 {
  max-width: 15ch; font-size: clamp(36px, 7vw, 66px); line-height: 0.98;
  letter-spacing: -0.035em;
}
.error-panel > p:not(.error-eyebrow, .error-code, .error-help) {
  max-width: 52ch; margin: 18px 0 0; color: var(--ink-body);
  font-size: clamp(17px, 2vw, 20px); line-height: 1.55;
}
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.error-help { margin: 24px 0 0; font-size: 14.5px; }
.error-help a { color: var(--spruce); font-weight: 600; }
.error-footer {
  padding: 20px var(--gutter); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--ink); color: #b6c9bf; font-size: 13.5px;
}
.error-footer a { color: var(--mint); font-weight: 600; }

/* The offline page is a recovery surface, not an error report. Its route
   graphic borrows the visual language of finding a next place to turn while
   remaining inline, tiny, and available without a network request. */
.offline-shell {
  max-width: 1180px;
  padding-block: clamp(44px, 8vw, 92px);
}
.offline-panel {
  max-width: none; padding: 0; border: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: center; gap: clamp(44px, 8vw, 112px);
}
.offline-copy { max-width: 610px; }
.offline-panel .error-code {
  position: static; width: fit-content; margin: 0 0 24px; padding: 8px 12px;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--card);
  color: var(--spruce); font-family: var(--body); font-size: 12px;
  font-weight: 700; line-height: 1; letter-spacing: 0.08em;
}
.offline-panel h1 {
  max-width: 10ch; font-size: clamp(52px, 7vw, 88px); line-height: 0.91;
  letter-spacing: -0.055em;
}
.offline-panel > .offline-copy > p:not(.error-code, .error-help) {
  max-width: 46ch; margin: 24px 0 0; color: var(--ink-body);
  font-size: clamp(17px, 2vw, 20px); line-height: 1.55;
}
.offline-panel .error-help {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.offline-route {
  position: relative; min-height: clamp(300px, 38vw, 470px); overflow: hidden;
  border: 1px solid var(--edge); border-radius: clamp(28px, 5vw, 58px);
  background:
    radial-gradient(circle at 78% 25%, rgba(126, 203, 164, 0.22), transparent 28%),
    var(--tint);
  display: grid; place-items: center;
}
.offline-route::after {
  content: ""; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%;
  inset-inline-end: -11%; inset-block-end: -14%;
  border: 1px solid rgba(18, 75, 57, 0.12);
  box-shadow: 0 0 0 42px rgba(18, 75, 57, 0.035), 0 0 0 84px rgba(18, 75, 57, 0.025);
}
.offline-route svg { width: min(88%, 430px); overflow: visible; }
.offline-route-path {
  fill: none; stroke: var(--spruce); stroke-width: 11;
  stroke-linecap: round; stroke-linejoin: round;
}
.offline-route-signal {
  fill: var(--mint); stroke: var(--card); stroke-width: 4;
  transform-origin: 46px 72px;
  animation: offline-route-attempt 480ms both cubic-bezier(0.32, 0.72, 0, 1);
}
.offline-route-destination {
  fill: var(--mint); stroke: var(--spruce); stroke-width: 7;
}
@keyframes offline-route-attempt {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  24% { transform: translate(80px, 166px); }
  46% { transform: translate(160px, 46px); }
  68% { transform: translate(240px, 166px); }
  88% { opacity: 1; }
  100% { transform: translate(320px, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .offline-route-signal { display: none; animation: none; }
}
@media (max-width: 760px) {
  .offline-panel { grid-template-columns: 1fr; gap: 38px; }
  .offline-route { min-height: 260px; order: -1; }
  .offline-route svg { width: min(82%, 400px); }
  .offline-panel h1 { max-width: 12ch; font-size: clamp(46px, 15vw, 70px); }
}
@media (max-width: 540px) {
  .error-code {
    position: static; margin: 0 0 12px; color: var(--spruce);
    font-family: var(--body); font-size: 13px; line-height: 1;
    font-weight: 700; letter-spacing: 0.08em;
  }
  .offline-panel .error-code { margin-bottom: 20px; }
  .offline-route { min-height: 210px; border-radius: 30px; }
}

.doc-nav { display: flex; align-items: center; gap: 18px; }
.doc-lang-switch { flex: 0 0 auto; }
.doc-lang-switch .lang-trigger { min-height: 40px; }
.doc-lang-switch .lang-menu { z-index: 60; }
.doc-language {
  max-width: 150px; min-height: 38px; padding: 6px 28px 6px 10px;
  border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--card);
  color: var(--ink); font: inherit;
}
.doc-language:focus-visible { outline: 3px solid var(--fern); outline-offset: 2px; }
.english-detail-notice {
  max-width: 68ch; margin: 18px auto 0; padding: 12px var(--gutter);
  color: var(--ink-muted); font-size: 14px;
}

/* The shell may be Arabic, Persian, Pashto, or Urdu while the long policy
   below remains English. Keep that source copy LTR so punctuation, phone
   numbers, and addresses do not jump around; only translated headings keep
   the active interface direction. */
html[dir="rtl"] .doc,
html[dir="rtl"] .error-shell,
html[dir="rtl"] .project-context,
html[dir="rtl"] .doc-footer { direction: ltr; text-align: left; }
html[dir="rtl"] .about-main { direction: ltr; text-align: left; }
html[dir="rtl"] .doc > h1[data-i18n],
html[dir="rtl"] .error-panel > h1[data-i18n],
html[dir="rtl"] .about-main h1[data-i18n] { direction: rtl; text-align: right; }

/* The verification pipeline really is a sequence, so it is the one place on
   the site that earns numbered markers. */
.doc-steps { counter-reset: step; list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.doc-steps li {
  counter-increment: step; position: relative; padding-inline-start: 42px;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-body);
}
.doc-steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: 1px;
  width: 27px; height: 27px; border-radius: 999px;
  background: var(--tint); color: var(--pine);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}

/* The same project context closes every reading page. Roles stay visible so
   a logo never quietly turns an affiliation or user-testing relationship
   into a sponsorship claim. */
.project-context {
  padding: clamp(30px, 5vw, 52px) var(--gutter);
  border-top: 1px solid var(--rule); background: var(--card);
}
.project-context-heading {
  max-width: 1120px; margin: 0 auto 24px;
  display: flex; justify-content: space-between; align-items: end; gap: 20px;
}
.project-context-eyebrow {
  margin: 0 0 5px; color: var(--spruce); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.project-context h2 { font-size: clamp(23px, 3vw, 32px); }
.project-context-copy {
  max-width: 68ch; margin: 9px 0 0; color: var(--ink-muted); font-size: 14.5px; line-height: 1.55;
}
.project-context-link { flex: 0 0 auto; font-size: 14px; font-weight: 600; }
.project-context-list {
  max-width: 1120px; margin: 0 auto; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--rule);
}
.project-organization {
  min-width: 0; padding: 16px 18px; border-bottom: 1px solid var(--rule);
  display: grid; gap: 7px; align-content: center;
}
.project-organization:nth-child(3n + 2),
.project-organization:nth-child(3n + 3) { border-inline-start: 1px solid var(--rule); }
.project-organization:nth-last-child(-n + 3) { border-bottom: 0; }
.project-organization-visual {
  min-height: 44px; display: flex; align-items: center; justify-content: flex-start;
}
.project-organization img {
  display: block; width: auto; max-width: 190px; max-height: 42px;
  object-fit: contain; filter: grayscale(1); opacity: 0.82;
}
.project-organization.slot-narrow img { max-width: 64px; }
.project-organization-name {
  color: var(--ink); font-family: var(--display); font-size: 15px; font-weight: 650;
  line-height: 1.2; unicode-bidi: isolate;
}
.project-organization.has-logo .project-organization-name { display: none; }
.project-organization-role { color: var(--ink-muted); font-size: 12.5px; line-height: 1.35; }

.doc-footer {
  padding: 26px var(--gutter); background: var(--ink); color: #b6c9bf;
  display: grid; grid-template-columns: auto minmax(240px, 1fr) auto;
  align-items: center; gap: 18px 30px;
}
.doc-footer-brand {
  color: var(--mist); font-family: var(--display); font-size: 19px;
  font-weight: 800; text-decoration: none;
}
.doc-footer-brand:hover { color: var(--mint); }
.doc-footer p { max-width: 62ch; font-size: 12.5px; line-height: 1.55; }
.doc-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.doc-footer-links a { color: var(--mint); font-size: 12.5px; text-decoration: none; }
.doc-footer-links a:hover { color: var(--mist); text-decoration: underline; }

@media (max-width: 820px) {
  .doc-header { align-items: flex-start; flex-wrap: wrap; }
  .doc-nav { width: 100%; justify-content: space-between; gap: 8px 14px; }
  .doc-lang-switch { margin-inline-end: auto; }
  .project-context-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-organization:nth-child(n) { border-inline-start: 0; border-bottom: 1px solid var(--rule); }
  .project-organization:nth-child(even) { border-inline-start: 1px solid var(--rule); }
  .project-organization:nth-last-child(-n + 2) { border-bottom: 0; }
  .doc-footer { grid-template-columns: 1fr; }
  .doc-footer-links { justify-content: flex-start; }
}

@media (max-width: 540px) {
  .doc-header { padding-block: 12px; }
  /* Only the way back fits beside the language picker. The rest of the
     nav is in the footer at the end of every document page. */
  .doc-nav .doc-back:not(:last-of-type) { display: none; }
  .about-page .doc-nav .doc-back:not(:last-of-type) { display: block; }
  .project-context-heading { align-items: flex-start; flex-direction: column; }
  .project-context-list { grid-template-columns: 1fr; }
  .project-organization:nth-child(n) {
    border-inline-start: 0; border-bottom: 1px solid var(--rule); padding-inline: 2px;
  }
  .project-organization:last-child { border-bottom: 0; }
}

/* ---- saved places -----------------------------------------------------
   A reading surface that happens to be editable. Flat, one hairline per
   card, no shadow: this is a list someone scans while standing up. */
.saved-empty { margin: 24px 0 0; display: grid; gap: 10px; justify-items: start; }
.saved-empty-lead { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--ink); }
.saved-empty .btn { margin-top: 8px; }

.saved-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 24px 0 0; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.saved-tools-count { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.saved-clear {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--ink-muted);
  background: transparent; border: 0; padding: 8px 0; min-height: 44px;
  text-decoration: underline; text-underline-offset: 2px;
}
.saved-clear:hover { color: #9f2f2d; }

.saved-confirm {
  margin: 16px 0 0; padding: 16px 18px;
  border: 1px solid #e7c9c8; border-radius: var(--r-ctl); background: #fdebec;
}
.saved-confirm p { color: #7d2422; font-size: 15.5px; line-height: 1.55; margin: 0; }
.saved-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn-danger { background: #9f2f2d; color: #fff; }
.btn-danger:hover { background: #812523; }

.saved-list { display: grid; gap: 14px; margin-top: 20px; }
.saved-card {
  border: 1px solid var(--edge); border-radius: var(--r-card);
  background: var(--card); padding: 18px; display: grid; gap: 8px;
}
.saved-name { font-size: 18px; margin: 0; }
.saved-address { font-size: 15px; color: var(--ink-muted); margin: 0; }
.saved-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.saved-note-label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.saved-note {
  font: inherit; font-size: 15.5px; line-height: 1.5; color: var(--ink);
  background: var(--mist); border: 1.5px solid var(--control);
  border-radius: var(--r-ctl); padding: 10px 12px; width: 100%; resize: vertical;
}
.saved-note:focus-visible { border-color: var(--spruce); }
.saved-remove {
  justify-self: start; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--ink-muted); background: transparent; border: 0;
  padding: 6px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 2px;
}
.saved-remove:hover { color: #9f2f2d; }

/* A short list of things to do rather than things to read. Buttons on a
   document page need the list semantics stripped, not the list itself:
   a screen reader should still say how many choices there are. */
.doc-actions {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.doc-actions li { margin: 0; }
.doc-actions .btn { font-size: 15.5px; }

/* ---- about ------------------------------------------------------------
   The About page is a route, not a policy document. Its one expressive move
   is the connected path from source to answer; everything else stays calm,
   direct, and source-conscious. */
.about-main {
  width: min(1180px, calc(100% - (2 * var(--gutter))));
  margin: 0 auto;
  padding: clamp(42px, 7vw, 88px) 0 clamp(64px, 8vw, 104px);
}
.about-main h1,
.about-main h2,
.about-main h3 { text-wrap: balance; }
.about-main p,
.about-main li { color: var(--ink-body); }
.about-main a:focus-visible { outline: 3px solid var(--fern); outline-offset: 4px; }

.about-hero {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
  gap: clamp(38px, 7vw, 96px); align-items: end;
  padding-bottom: clamp(54px, 8vw, 96px);
}
.about-hero h1 {
  margin: 0 0 22px; color: var(--spruce); font-size: 16px; font-weight: 650;
}
.about-statement {
  max-width: 13ch; margin: 0; color: var(--ink); font-family: var(--display);
  font-size: clamp(46px, 7.2vw, 88px); font-weight: 650; line-height: .94;
  letter-spacing: -.052em;
}
.about-intro {
  max-width: 61ch; margin: 28px 0 0; font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.6;
}
.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.about-text-link { color: var(--spruce); font-weight: 650; text-underline-offset: 4px; }
.about-updated { margin-top: 22px; color: var(--ink-muted); font-size: 13.5px; }

.about-proof {
  position: relative; padding: 28px; border: 1px solid var(--edge);
  border-radius: var(--r-card); background: var(--card); overflow: hidden;
}
.about-proof-status {
  display: flex; align-items: center; gap: 8px; margin: 0; color: var(--spruce);
  font-size: 14px; font-weight: 650;
}
.about-proof-status span,
.truth-column h3 span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--fern); flex: 0 0 auto;
}
.about-proof-mark { display: block; width: min(100%, 230px); margin: 28px 0 22px; overflow: visible; }
.about-proof-mark path {
  fill: none; stroke: var(--spruce); stroke-width: 3; stroke-linecap: round;
}
.about-proof-mark circle { fill: var(--mist); stroke: var(--spruce); stroke-width: 3; }
.about-proof-mark .proof-destination { fill: var(--mint); }
.about-proof h2 { max-width: 16ch; margin: 0; font-size: 25px; line-height: 1.08; }
.about-proof > p:not(.about-proof-status) { max-width: 37ch; margin: 16px 0 0; line-height: 1.55; }
.about-proof > .about-text-link { display: inline-block; margin-top: 20px; }

.about-purpose,
.about-people {
  display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 8vw, 110px); padding: clamp(52px, 7vw, 88px) 0;
  border-top: 1px solid var(--rule);
}
.about-purpose h2,
.about-people h2,
.about-section-head h2,
.about-close h2 {
  margin: 0; color: var(--ink); font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.02; letter-spacing: -.035em;
}
.about-purpose-copy { display: grid; gap: 18px; }
.about-purpose-copy p,
.about-people-copy p { max-width: 62ch; margin: 0; font-size: 17px; line-height: 1.68; }

.about-route,
.about-truth,
.about-limits { padding: clamp(52px, 7vw, 88px) 0; border-top: 1px solid var(--rule); }
.about-section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
  gap: 30px; align-items: end;
}
.about-section-head > p { max-width: 37ch; margin: 0; font-size: 16px; line-height: 1.55; }

.route-line {
  position: relative; list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.route-line::before {
  content: ""; position: absolute; inset-inline: 12.5%; top: 30px;
  border-top: 2px solid var(--control); transform-origin: left center;
}
.route-line li { position: relative; padding-inline-end: clamp(18px, 3vw, 36px); }
.route-icon {
  position: relative; z-index: 1; width: 62px; height: 62px; display: grid;
  place-items: center; margin-bottom: 20px; border: 2px solid var(--spruce);
  border-radius: 50%; color: var(--spruce); background: var(--mist);
}
.route-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.route-line strong { display: block; color: var(--ink); font-size: 17px; }
.route-line p { max-width: 26ch; margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; }
.about-boundary {
  display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr);
  gap: 24px; margin-top: 40px; padding: 22px 24px; border-inline-start: 4px solid var(--notice-edge);
  background: var(--card);
}
.about-boundary strong { color: var(--ink); }
.about-boundary p { max-width: 70ch; margin: 0; font-size: 15px; line-height: 1.6; }

.truth-grid {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 38px;
  border-block: 1px solid var(--rule);
}
.truth-column { padding: 28px clamp(22px, 4vw, 46px) 30px 0; }
.truth-column + .truth-column { padding-inline: clamp(22px, 4vw, 46px) 0; border-inline-start: 1px solid var(--rule); }
.truth-column h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; }
.truth-building h3 span { background: var(--notice-edge); }
.truth-column ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.truth-column li { position: relative; padding-inline-start: 22px; line-height: 1.5; }
.truth-column li::before { content: ""; position: absolute; inset-inline-start: 0; top: .65em; width: 9px; border-top: 2px solid var(--control); }

.about-people-copy { display: grid; align-content: start; gap: 18px; }
.people-list { margin: 0; border-top: 1px solid var(--rule); }
.people-list div { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.people-list dt { color: var(--ink); font-family: var(--display); font-size: 19px; font-weight: 650; }
.people-list dd { margin: 5px 0 0; color: var(--ink-muted); font-size: 14.5px; }

.limit-list { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.limit-list li {
  display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr);
  gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); line-height: 1.55;
}
.limit-list strong { color: var(--ink); }

.about-close {
  margin-top: clamp(18px, 3vw, 34px); padding: clamp(34px, 5vw, 58px);
  display: flex; justify-content: space-between; align-items: end; gap: 32px;
  border-radius: var(--r-card); background: var(--pine); color: var(--mist);
}
.about-close h2 { max-width: 13ch; color: inherit; }
.about-close p { max-width: 42ch; margin: 14px 0 0; color: #c8d8d0; line-height: 1.55; }
.about-close .about-actions { flex: 0 0 auto; margin: 0; }
.about-close .btn-primary { background: var(--mist); color: var(--pine); }
.about-close .btn-primary:hover { background: #fff; }
.about-close .about-text-link { color: var(--mint); }
.about-page .project-context { margin-top: 0; }

/* Motion appears only after JavaScript has installed the observer. No-JS
   visitors get the complete page, never invisible content. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .about-hero-copy > *,
  .motion-ready .about-proof {
    opacity: 0; transform: translateY(10px); filter: blur(4px);
  }
  .motion-ready.about-mounted .about-hero-copy > *,
  .motion-ready.about-mounted .about-proof {
    opacity: 1; transform: translateY(0); filter: blur(0);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease), filter 420ms var(--ease);
  }
  .motion-ready.about-mounted .about-hero-copy > :nth-child(2) { transition-delay: 50ms; }
  .motion-ready.about-mounted .about-hero-copy > :nth-child(3) { transition-delay: 90ms; }
  .motion-ready.about-mounted .about-hero-copy > :nth-child(4) { transition-delay: 130ms; }
  .motion-ready.about-mounted .about-hero-copy > :nth-child(5) { transition-delay: 160ms; }
  .motion-ready.about-mounted .about-proof { transition-delay: 100ms; }

  .motion-ready .about-reveal { opacity: 0; transform: translateY(12px); filter: blur(3px); }
  .motion-ready .about-reveal.is-visible {
    opacity: 1; transform: translateY(0); filter: blur(0);
    transition: opacity 460ms var(--ease), transform 460ms var(--ease), filter 460ms var(--ease);
  }
  .motion-ready .route-line::before { transform: scaleX(0); }
  .motion-ready .about-route.is-visible .route-line::before {
    transform: scaleX(1); transition: transform 700ms var(--ease) 140ms;
  }
  .motion-ready .route-line li { opacity: 0; transform: translateY(8px); }
  .motion-ready .about-route.is-visible .route-line li {
    opacity: 1; transform: translateY(0);
    transition: opacity 330ms var(--ease), transform 330ms var(--ease);
  }
  .motion-ready .about-route.is-visible .route-line li:nth-child(1) { transition-delay: 110ms; }
  .motion-ready .about-route.is-visible .route-line li:nth-child(2) { transition-delay: 190ms; }
  .motion-ready .about-route.is-visible .route-line li:nth-child(3) { transition-delay: 270ms; }
  .motion-ready .about-route.is-visible .route-line li:nth-child(4) { transition-delay: 350ms; }
  .motion-ready .proof-route { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion-ready.about-mounted .proof-route {
    stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--ease) 240ms;
  }
  .about-actions .btn:active { transform: scale(.98); transition-duration: 90ms; }
}

@media (max-width: 820px) {
  .about-hero { grid-template-columns: 1fr; align-items: start; }
  .about-proof { max-width: 560px; }
  .about-purpose,
  .about-people,
  .about-section-head { grid-template-columns: 1fr; gap: 24px; }
  .route-line { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .route-line::before { display: none; }
  .truth-grid { grid-template-columns: 1fr; }
  .truth-column,
  .truth-column + .truth-column { padding: 24px 0; border-inline-start: 0; }
  .truth-column + .truth-column { border-top: 1px solid var(--rule); }
  .about-close { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 540px) {
  .about-main { padding-top: 34px; }
  .about-statement { font-size: clamp(43px, 14vw, 62px); }
  .about-proof { padding: 22px; }
  .route-line { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .route-line li { min-height: 112px; padding: 0 0 24px 76px; }
  .route-line li:not(:last-child)::after {
    content: ""; position: absolute; left: 30px; top: 60px; bottom: 0;
    border-left: 2px solid var(--control);
  }
  .route-icon { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: 0; }
  .about-boundary,
  .limit-list li { grid-template-columns: 1fr; gap: 8px; }
  .about-close { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
}

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