@font-face {
  font-family: "Anton";
  src: url("/fonts/anton.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plexmono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #efece6;
  --paper-2: #e4e0d8;
  --ink: #0d0d0c;
  --grey: #8b8880;
  --rule: #c9c5bc;
  --minium: #e0a80b;  /* accent swung from rust to golden yellow to complement the moss green */
  --settle-time: 1150ms;
  --settle-curve: cubic-bezier(.16, .84, .44, 1);
  --drift-time: 2400ms;
  --drift-curve: cubic-bezier(.22, .61, .36, 1);
  --page-margin: min(6vw, 96px);
  --grid-gap: 20px;
  --nav-height: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

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

button,
input {
  border-radius: 0;
  font: inherit;
}

a {
  color: inherit;
  text-underline-offset: .22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--minium);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  min-height: 44px;
  padding: 11px 16px;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.skip-link:focus {
  transform: none;
}

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  height: var(--nav-height);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color var(--settle-time) var(--settle-curve), border-color var(--settle-time) var(--settle-curve);
}

.site-header.is-scrolled {
  border-color: var(--rule);
  background: var(--paper);
}

.site-nav {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--page-margin);
  gap: 24px;
}

.wordmark,
.nav-links,
.nav-offer,
.eyebrow,
.offer-ledger,
.offer-rail,
.specimen-label,
.specimen-tabs,
.status-row,
.commissioning-list,
.boundary-row dt,
.policy-kicker,
.policy-meta,
.policy-nav,
.subscribe-ledger,
.blocked-state,
.footer-nav {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
}

.wordmark {
  width: max-content;
  min-height: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 12px;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 36px);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav-links a,
.nav-offer {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-offer {
  justify-self: end;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  width: min(calc(100% - (2 * var(--page-margin))), 1600px);
  margin-inline: auto;
}

.hero-sheet {
  position: relative;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  background: var(--paper-2);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: 50% 50%;
  background: var(--paper-2);
}

.hero-grid {
  position: relative;
  z-index: 1;
  min-height: 100%;
  align-items: end;
  padding-top: calc(var(--nav-height) + 20px);
  padding-bottom: clamp(28px, 5vw, 76px);
}

.hero-copy {
  grid-column: 1 / span 6;
  align-self: end;
  padding: clamp(24px, 3vw, 48px);
  border: 1px solid var(--ink);
  background: var(--paper);
}

.hero-offer {
  grid-column: 8 / -1;
  align-self: end;
  min-width: 0;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--ink);
  background: var(--paper);
}

.hero-offer-line {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(11px, .9vw, 14px);
  line-height: 1.45;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.display,
.hero-title {
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.018em;
  text-transform: uppercase;
}

.hero-title {
  max-width: 6ch;
  font-size: clamp(72px, 7vw, 120px);
}

.hero-title span,
.display span {
  display: block;
}

.hero-product {
  max-width: 48ch;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.35;
  font-weight: 700;
}

.hero-mechanism,
.hero-campaign-line {
  max-width: 58ch;
  margin: 8px 0 0;
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.4;
}

.secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.offer-ledger,
.subscribe-ledger {
  border-top: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
}

.offer-row,
.subscribe-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
  gap: 12px;
  align-items: start;
  min-height: 30px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}

.offer-row span:last-child,
.subscribe-row span:last-child {
  text-align: right;
}

.transaction-cta {
  display: inline-flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.transaction-cta:hover {
  background: var(--minium);
  border-color: var(--minium);
}

.transaction-cta[aria-disabled="true"],
.transaction-cta:disabled {
  cursor: not-allowed;
  border-color: var(--rule);
  background: var(--paper-2);
  color: var(--ink);
}

.trial-disclosure {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--paper-2);
}

.offer-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 64px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  text-transform: uppercase;
}

.offer-rail span {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-right: 1px solid var(--rule);
  font-size: 10px;
  line-height: 1.3;
}

.offer-rail span:last-child {
  border-right: 0;
}

.section {
  padding-block: clamp(96px, 13vw, 220px);
  border-bottom: 1px solid var(--rule);
}

.section-copy {
  grid-column: 1 / span 6;
}

.section-media {
  grid-column: 7 / -1;
  align-self: start;
}

.display {
  max-width: 9ch;
  font-size: clamp(64px, 7vw, 120px);
}

.section-body {
  max-width: 52ch;
  margin: 28px 0 0;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.38;
}

.relic-list {
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.relic-list li {
  position: relative;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(28px, 3.2vw, 54px);
  line-height: 1;
  text-transform: uppercase;
}

.relic-list li::after {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--minium);
  content: "";
}

.native-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.mechanism-section {
  padding-bottom: 0;
}

.mechanism-intro {
  grid-column: 1 / -1;
  margin-bottom: clamp(56px, 8vw, 120px);
}

.mechanism-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.mechanism-bay {
  min-width: 0;
  padding: 0 20px 30px;
  border-right: 1px solid var(--rule);
}

.mechanism-bay:first-child {
  padding-left: 0;
}

.mechanism-bay:last-child {
  padding-right: 0;
  border-right: 0;
}

.mechanism-bay img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.mechanism-bay h3 {
  margin: 22px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mechanism-bay p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.45;
}

.mechanism-close {
  grid-column: 1 / -1;
  margin: 34px 0 0;
  padding-bottom: clamp(96px, 13vw, 180px);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.specimen-section {
  background: var(--ink);
  color: var(--paper);
}

.specimen-shell {
  grid-column: 1 / -1;
}

.specimen-label {
  margin: 0;
  color: var(--paper);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.specimen-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 30px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.specimen-tab {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--paper);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.specimen-tab:last-child {
  border-right: 0;
}

.specimen-tab[aria-selected="true"] {
  border-bottom: 3px solid var(--minium);
  color: var(--paper);
}

.specimen-panel {
  min-height: 380px;
  padding: clamp(28px, 4vw, 64px) 0;
}

.js .specimen-panel[hidden] {
  display: none;
}

.specimen-panel h3 {
  margin: 0 0 22px;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(42px, 5vw, 80px);
  font-weight: 400;
  line-height: .9;
  text-transform: uppercase;
}

.proof-sheet {
  max-width: 900px;
  border-top: 1px solid var(--rule);
}

.status-row {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(0, 2fr);
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--paper-2);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}

.status-row strong {
  color: var(--paper);
  font-weight: 400;
}

.specimen-copy {
  max-width: 60ch;
  margin: 22px 0 0;
  color: var(--paper-2);
}

.specimen-track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.specimen-track-line {
  position: relative;
  height: 1px;
  background: var(--grey);
}

.specimen-track-line::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 18%;
  height: 3px;
  background: var(--minium);
  content: "";
  transition: width var(--settle-time) var(--settle-curve);
}

.specimen-shell[data-step="process"] .specimen-track-line::before { width: 36%; }
.specimen-shell[data-step="ask"] .specimen-track-line::before { width: 54%; }
.specimen-shell[data-step="answer"] .specimen-track-line::before { width: 76%; }
.specimen-shell[data-step="correct"] .specimen-track-line::before { width: 100%; }

.space-image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.space-placard {
  padding-block: clamp(80px, 10vw, 160px);
}

.space-placard .section-copy {
  grid-column: 1 / span 8;
}

.commissioning-copy {
  grid-column: 1 / span 5;
}

.commissioning-list {
  grid-column: 7 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: phase;
  border-top: 1px solid var(--rule);
  text-transform: uppercase;
}

.commissioning-list li {
  counter-increment: phase;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}

.commissioning-list li::before {
  content: counter(phase, decimal-leading-zero);
  color: var(--minium);
}

.light-transition {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--paper-2);
}

.light-transition img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.boundary-grid {
  align-items: start;
}

.boundary-heading {
  grid-column: 1 / span 5;
}

.boundary-list {
  grid-column: 7 / -1;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.boundary-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.boundary-row dt {
  color: var(--grey);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.boundary-row dd {
  margin: 8px 0 0;
  color: var(--paper);
  font-size: 16px;
  line-height: 1.5;
}

.boundary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 28px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.boundary-links a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.pricing-main {
  grid-column: 1 / span 5;
}

.pricing-offer {
  grid-column: 7 / -1;
}

.price-display {
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(72px, 8vw, 136px);
  font-weight: 400;
  line-height: .82;
  text-transform: uppercase;
}

.seller-line,
.pricing-detail {
  max-width: 58ch;
  margin: 22px 0 0;
}

.included-list {
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.included-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.pricing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.pricing-links a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.faq-shell {
  grid-column: 3 / span 8;
}

.faq-shell details {
  border-top: 1px solid var(--rule);
}

.faq-shell details:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq-shell summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.faq-shell summary::after {
  flex: 0 0 auto;
  content: "+";
  color: var(--minium);
}

.faq-shell details[open] summary::after {
  content: "−";
}

.faq-shell details p {
  max-width: 68ch;
  margin: 0;
  padding: 0 0 28px;
}

.final-conversion {
  min-height: 72svh;
  display: flex;
  align-items: center;
}

.final-copy {
  grid-column: 1 / span 6;
}

.final-offer {
  grid-column: 8 / -1;
}

.final-plate {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.site-footer {
  padding: 56px var(--page-margin) calc(56px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr auto;
  gap: 28px;
  align-items: start;
}

.footer-wordmark {
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: 46px;
  line-height: .84;
  text-transform: uppercase;
}

.footer-seller {
  max-width: 54ch;
  margin: 0;
}

.footer-nav {
  display: grid;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
}

.footer-nav a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-mark {
  margin-top: 36px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
}

/* Policy and source-only account/subscribe states. */
.policy-page,
.subscribe-page {
  background: var(--paper);
}

.plain-header {
  position: static;
  height: 72px;
  border-bottom: 1px solid var(--rule);
}

.plain-header .site-nav {
  grid-template-columns: 1fr auto;
}

.policy-layout {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 760px);
  gap: clamp(48px, 8vw, 140px);
  width: min(calc(100% - (2 * var(--page-margin))), 1200px);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) 0;
}

.policy-rail {
  align-self: start;
  position: sticky;
  top: 28px;
}

.policy-kicker,
.policy-meta {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.policy-nav {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  font-size: 10px;
  text-transform: uppercase;
}

.policy-content h1,
.subscribe-content h1 {
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(56px, 8vw, 100px);
  font-weight: 400;
  line-height: .88;
  text-transform: uppercase;
}

.policy-content h2 {
  margin: 64px 0 18px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}

.policy-content h3 {
  margin: 34px 0 12px;
  font-size: 20px;
}

.policy-content p,
.policy-content li {
  max-width: 70ch;
}

.policy-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.policy-content th,
.policy-content td {
  padding: 12px 8px;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.subscribe-layout {
  width: min(calc(100% - 40px), 760px);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) 0;
}

.subscribe-content .seller-line {
  margin-bottom: 34px;
}

.subscribe-ledger {
  margin-top: 42px;
}

.consent-form {
  margin-top: 36px;
}

.consent-control {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 56px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}

.consent-control:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.consent-control input {
  width: 44px;
  height: 44px;
  margin: 0;
  accent-color: var(--minium);
}

.consent-control label {
  font-size: 16px;
  line-height: 1.45;
}

.consent-control label a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.blocked-state {
  margin-top: 30px;
  padding: 16px 0;
  border-top: 3px solid var(--minium);
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
}

.form-actions .transaction-cta {
  margin: 0;
}

.text-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.ready-state {
  margin-top: 30px;
  padding: 16px 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}

.working-page .policy-lede {
  max-width: 60ch;
  font-size: 18px;
}

.working-page main a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

.working-section {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.working-section h2 {
  margin: 0 0 24px;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}

.working-section h3,
.working-form h3 {
  margin: 0 0 18px;
  font-size: 20px;
}

.working-form {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.working-form label,
.working-form legend {
  font-weight: 700;
}

.working-form input:not([type="checkbox"]),
.working-form textarea,
.working-form select {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
}

.working-form textarea {
  min-height: 128px;
  resize: vertical;
}

.working-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin: 12px 0;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.working-form legend {
  padding: 0 0 12px;
}

.working-check {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 52px;
}

.working-check input {
  width: 44px;
  height: 44px;
  margin: 0;
  accent-color: var(--minium);
}

.ack-ledger {
  display: grid;
  border-top: 1px solid var(--rule);
}

.ack-ledger .working-check {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.working-instruction {
  margin-top: 36px;
  padding: 20px 0;
  border-top: 3px solid var(--minium);
  border-bottom: 1px solid var(--rule);
}

.account-layout {
  width: min(calc(100% - 40px), 980px);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) 0;
}

.account-ledger {
  margin-top: 42px;
  border-top: 1px solid var(--rule);
}

.account-ledger > div {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.account-ledger span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.account-ledger strong {
  font-weight: 400;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.account-actions .text-action,
.destructive-form .text-action {
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ink);
}

.destructive-form {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 3px solid var(--minium);
}

.answer-sheet {
  margin-top: 32px;
  padding: 20px 0;
  border-top: 3px solid var(--minium);
  border-bottom: 1px solid var(--rule);
}

.answer-sheet li {
  margin: 12px 0;
}

.export-list {
  margin: 24px 0;
  border-top: 1px solid var(--rule);
}

.export-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--rule);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

@media (max-width: 560px) {
  .working-form fieldset { grid-template-columns: 1fr; }
  .account-ledger > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Policy markup contract shared by every public policy route. */
.policy-header {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 var(--page-margin);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.policy-header .brandmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-decoration: none;
}

.policy-header nav {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
}

.policy-header nav a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-decoration: none;
}

.policy-shell {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 760px);
  column-gap: clamp(48px, 8vw, 140px);
  width: min(calc(100% - (2 * var(--page-margin))), 1200px);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) 0;
}

.policy-title {
  grid-column: 1 / -1;
  margin-bottom: clamp(56px, 8vw, 110px);
}

.policy-title h1 {
  max-width: 10ch;
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(64px, 10vw, 150px);
  font-weight: 400;
  line-height: .84;
  text-transform: uppercase;
}

.policy-version {
  margin: 28px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.policy-lede {
  max-width: 62ch;
  margin: 20px 0 0;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.45;
}

.policy-index {
  position: sticky;
  top: 28px;
  align-self: start;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.policy-index a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.policy-copy {
  min-width: 0;
}

.policy-copy a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.policy-copy section {
  scroll-margin-top: 20px;
  margin-bottom: 60px;
}

.policy-copy h2 {
  margin: 0 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}

.policy-copy h3 {
  margin: 34px 0 12px;
  font-size: 20px;
}

.policy-copy p,
.policy-copy li,
.policy-copy blockquote {
  max-width: 70ch;
}

.policy-copy blockquote,
.policy-callout {
  margin: 28px 0;
  padding: 18px 0 18px 20px;
  border-left: 3px solid var(--minium);
  background: transparent;
}

.policy-copy table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.policy-copy th,
.policy-copy td {
  padding: 12px 8px;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.data-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.retention-ledger,
.support-ledger {
  margin: 28px 0;
  border-top: 1px solid var(--rule);
}

.retention-ledger > div,
.support-ledger > div {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.retention-ledger strong,
.support-ledger strong,
.technical {
  font-family: "IBM Plex Mono", monospace;
  font-size: .85em;
  font-weight: 400;
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.policy-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  padding: 36px var(--page-margin) calc(36px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.policy-footer a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 1199px) {
  :root {
    --page-margin: 32px;
    --grid-gap: 16px;
  }

  .layout-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .hero-copy { grid-column: 1 / span 4; }
  .hero-offer { grid-column: 5 / -1; }
  .hero-title { font-size: clamp(62px, 8.5vw, 96px); }
  .section-copy { grid-column: 1 / span 4; }
  .section-media { grid-column: 5 / -1; }
  .mechanism-intro,
  .mechanism-grid,
  .mechanism-close,
  .specimen-shell { grid-column: 1 / -1; }
  .space-placard .section-copy { grid-column: 1 / span 6; }
  .commissioning-copy { grid-column: 1 / span 4; }
  .commissioning-list { grid-column: 5 / -1; }
  .boundary-heading { grid-column: 1 / span 4; }
  .boundary-list { grid-column: 5 / -1; }
  .pricing-main { grid-column: 1 / span 4; }
  .pricing-offer { grid-column: 5 / -1; }
  .faq-shell { grid-column: 2 / span 6; }
  .final-copy { grid-column: 1 / span 4; }
  .final-offer { grid-column: 5 / -1; }
}

@media (max-width: 767px) {
  :root {
    --page-margin: 20px;
    --grid-gap: 12px;
    --nav-height: calc(56px + env(safe-area-inset-top));
  }

  .site-nav {
    grid-template-columns: 1fr auto;
    padding: env(safe-area-inset-top) var(--page-margin) 0;
  }

  .nav-links { display: none; }

  .layout-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-sheet {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    background: var(--paper);
  }

  .hero-backdrop {
    position: relative;
    width: 100%;
    height: 42svh;
    min-height: 260px;
    max-height: 420px;
    object-position: 68% 50%;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 24px var(--page-margin) 32px;
    gap: 22px;
    background: var(--paper);
  }

  .hero-copy,
  .hero-offer {
    width: 100%;
  }

  .hero-copy {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .hero-offer {
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
  }

  .hero-title {
    max-width: 8ch;
    font-size: clamp(46px, 14vw, 74px);
  }

  .hero-product,
  .hero-mechanism,
  .hero-campaign-line {
    font-size: 15px;
  }

  .hero-campaign-line,
  .secondary-link {
    display: none;
  }

  .hero-offer-line {
    font-size: 11px;
  }

  .offer-rail {
    grid-template-columns: 1fr;
    min-height: 84px;
  }

  .offer-rail span {
    min-height: 44px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .offer-rail span:last-child { border-bottom: 0; }

  .section {
    padding-block: 96px;
  }

  .section-copy,
  .section-media,
  .mechanism-intro,
  .mechanism-grid,
  .mechanism-close,
  .specimen-shell,
  .space-placard .section-copy,
  .commissioning-copy,
  .commissioning-list,
  .boundary-heading,
  .boundary-list,
  .pricing-main,
  .pricing-offer,
  .faq-shell,
  .final-copy,
  .final-offer {
    grid-column: 1 / -1;
  }

  .section-media,
  .commissioning-list,
  .boundary-list,
  .pricing-offer,
  .final-offer {
    margin-top: 52px;
  }

  .display {
    font-size: clamp(56px, 17vw, 82px);
  }

  .mechanism-grid {
    grid-template-columns: 1fr;
  }

  .mechanism-bay,
  .mechanism-bay:first-child,
  .mechanism-bay:last-child {
    padding: 0 0 34px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .mechanism-bay:last-child { border-bottom: 0; }

  .specimen-tabs {
    grid-template-columns: repeat(6, 1fr);
  }

  .specimen-tab:nth-child(-n+3) { grid-column: span 2; }
  .specimen-tab:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--rule); }
  .specimen-tab:nth-child(3) { border-right: 0; }
  .specimen-panel { min-height: 0; }

  .status-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .space-placard { padding-block: 96px; }

  .commissioning-list { margin-top: 48px; }

  .boundary-list { margin-top: 48px; }

  .pricing-offer { margin-top: 64px; }

  .faq-shell { width: 100%; }

  .final-conversion {
    min-height: 0;
    padding-block: 96px;
  }

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

  .policy-layout {
    grid-template-columns: 1fr;
    width: min(calc(100% - 40px), 760px);
    gap: 38px;
  }

  .policy-rail { position: static; }
  .policy-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .policy-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .form-actions {
    grid-template-columns: 1fr;
  }

  .policy-header {
    height: auto;
    min-height: 64px;
    padding: 8px var(--page-margin);
  }

  .policy-header nav {
    gap: 10px;
  }

  .policy-shell {
    grid-template-columns: 1fr;
    width: calc(100% - (2 * var(--page-margin)));
    padding: 56px 0;
  }

  .policy-title {
    grid-column: 1;
    margin-bottom: 44px;
  }

  .policy-title h1 {
    font-size: clamp(56px, 19vw, 92px);
  }

  .policy-index {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 56px;
  }

  .policy-copy {
    grid-column: 1;
  }

  .retention-ledger > div,
  .support-ledger > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .policy-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 390px) {
  :root { --page-margin: 16px; }
  .policy-layout,
  .subscribe-layout { width: calc(100% - 32px); }
}

/* Frozen compact portrait composition. */
@media (max-width: 479px) and (max-height: 640px) {
  :root {
    --nav-height: 36px;
    --page-margin: 16px;
  }

  .site-header {
    position: absolute;
    height: 36px;
    border-bottom-color: transparent;
    background: var(--paper);
  }

  .site-nav {
    height: 36px;
    padding: 0 16px;
  }

  .wordmark {
    min-height: 36px;
    font-size: 10px;
  }

  .nav-offer { display: none; }

  .hero-grid {
    justify-content: start;
    height: auto;
    margin: 0;
    padding: 14px 16px 18px;
    gap: 10px;
  }

  .hero-backdrop {
    height: 34svh;
    min-height: 180px;
    max-height: 220px;
  }

  .hero-copy {
    display: grid;
    gap: 6px;
  }

  .eyebrow {
    margin: 0;
    font-size: 9px;
    line-height: 12px;
  }

  .hero-title {
    max-width: 100%;
    font-size: 38px;
    line-height: .88;
  }

  .hero-product,
  .hero-mechanism {
    max-width: none;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
  }

  .hero-offer {
    display: grid;
    gap: 7px;
    padding-top: 10px;
  }

  .hero-offer-line {
    font-size: 10px;
    line-height: 13px;
  }

  .offer-ledger {
    font-size: 11px;
    line-height: 13px;
  }

  .offer-row {
    min-height: 0;
    padding: 3px 0;
    gap: 8px;
  }

  .transaction-cta {
    min-height: 48px;
    height: 48px;
    margin-top: 0;
    font-size: 11px;
  }

  .trial-disclosure {
    margin: 0;
    font-size: 11px;
    line-height: 14px;
  }
}

/* 400% text/reflow: preserve every commercial fact in document flow. */
@media (max-width: 479px) and (max-height: 480px) {
  .hero-sheet {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .hero-grid {
    height: auto;
    min-height: 100svh;
  }
}

/* Frozen short-landscape composition. */
@media (min-width: 480px) and (max-height: 480px) {
  :root {
    --nav-height: 32px;
    --page-margin: 16px;
  }

  .site-header {
    position: absolute;
    height: 32px;
    border-bottom-color: transparent;
    background: var(--paper);
  }

  .site-nav {
    height: 32px;
    padding: 0 16px;
  }

  .wordmark {
    min-height: 32px;
    font-size: 10px;
  }

  .nav-links,
  .nav-offer { display: none; }

  .hero-sheet {
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .hero-backdrop {
    position: absolute;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-position: 50% 50%;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: start;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 40px 16px 10px;
    gap: 16px;
  }

  .hero-copy,
  .hero-offer {
    grid-column: auto;
    width: auto;
  }

  .hero-copy {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--ink);
    background: var(--paper);
  }

  .eyebrow {
    margin: 0;
    font-size: 9px;
    line-height: 11px;
  }

  .hero-title {
    max-width: none;
    font-size: 28px;
    line-height: .88;
  }

  .hero-product,
  .hero-mechanism {
    margin: 0;
    font-size: 12px;
    line-height: 14px;
  }

  .hero-campaign-line,
  .secondary-link { display: none; }

  .hero-offer {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--ink);
    background: var(--paper);
  }

  .hero-offer-line {
    font-size: 9px;
    line-height: 11px;
  }

  .offer-ledger {
    font-size: 10px;
    line-height: 12px;
  }

  .offer-row {
    min-height: 0;
    padding: 2px 0;
    gap: 6px;
  }

  .transaction-cta {
    min-height: 44px;
    height: 44px;
    margin-top: 0;
    font-size: 10px;
  }

  .trial-disclosure {
    margin: 0;
    font-size: 12px;
    line-height: 14px;
  }
}

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

  .site-header,
  .specimen-track-line::before {
    transition: none;
  }

  .policy-index {
    position: static;
  }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .transaction-cta { border: 2px solid ButtonText; }
  .relic-list li::after,
  .specimen-track-line::before { background: Highlight; }
}

@media print {
  .site-header,
  .skip-link,
  .policy-rail,
  .policy-header,
  .policy-index,
  .policy-footer,
  .site-footer {
    display: none !important;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-size: 11pt;
  }

  .policy-layout {
    display: block;
    width: auto;
    padding: 0;
  }

  .policy-shell {
    display: block;
    width: auto;
    padding: 0;
  }

  .policy-content h2,
  .policy-content h3,
  .policy-copy h2,
  .policy-copy h3 {
    break-after: avoid;
  }

  a { color: var(--ink); }
}

/* Narrative homepage: architectural rooms, not product cards. */
.hero-backdrop {
  object-position: right top;
  transform: none;
}

.hero-copy {
  padding: clamp(28px, 4vw, 64px) clamp(24px, 3vw, 48px);
  border-width: 0 1px 0 0;
}

.hero-title {
  max-width: 5ch;
  font-size: clamp(84px, 9.5vw, 156px);
}

.hero-product {
  max-width: 34ch;
}

.hero-mechanism,
.hero-campaign-line {
  max-width: 40ch;
}

.mechanism-section {
  padding-bottom: clamp(96px, 13vw, 220px);
}

.mechanism-grid {
  margin-top: clamp(48px, 7vw, 110px);
}

.mechanism-bay {
  min-height: clamp(260px, 26vw, 420px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 24px;
}

.mechanism-number,
.proof-kicker,
.proof-answer span {
  margin: 0;
  color: var(--minium);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mechanism-bay h3 {
  margin-top: auto;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(34px, 3.4vw, 58px);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.mechanism-bay p:last-child {
  max-width: 27ch;
  font-size: 17px;
}

.specimen-section {
  min-height: 92svh;
  display: flex;
  align-items: center;
}

.proof-letter {
  max-width: 860px;
  margin-top: clamp(42px, 7vw, 96px);
  padding: clamp(28px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--paper);
  font-size: clamp(22px, 2.1vw, 36px);
  line-height: 1.32;
}

.proof-letter p { max-width: 34ch; }

.proof-answer {
  margin: clamp(44px, 6vw, 84px) 0 0;
  color: var(--paper-2);
}

.proof-answer span { display: block; margin-bottom: 12px; }

.boundary-section,
#pricing {
  min-height: 82svh;
  display: flex;
  align-items: center;
}

.offer-detail {
  margin-top: 20px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.offer-detail summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.offer-detail p { margin: 0; padding: 0 0 20px; }

@media (max-width: 760px) {
  .hero-backdrop { object-position: 63% 50%; transform: scale(1.18); }
  .hero-copy { border-width: 0; }
  .mechanism-bay { min-height: 220px; }
  .proof-letter { font-size: 22px; }
  .boundary-section, #pricing, .specimen-section { min-height: 0; }
}

/* The page moves like rooms, never like interface chrome. */
.hero-arrival {
  position: absolute;
  z-index: 2;
  top: calc(var(--nav-height) + 18px);
  left: var(--page-margin);
  margin: 0;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  opacity: 0;
}

.js .hero-arrival { animation: arrival-mark 1150ms steps(1, end) forwards; }
.js .hero-title span { transform: translateY(112%); animation: title-uncover 1150ms cubic-bezier(.16,.84,.44,1) forwards; }

@keyframes arrival-mark { 0%, 46% { opacity: 1; } 100% { opacity: 0; } }
@keyframes title-uncover { to { transform: translateY(0); } }
@keyframes room-settles { from { filter: brightness(1.12) contrast(.88); transform: scale(1.15); } to { filter: brightness(1) contrast(1); transform: scale(1.12); } }

.argument-room { min-height: 160svh; }
.argument-final {
  margin: 48px 0 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(36px, 4vw, 70px);
  line-height: .92;
  opacity: .18;
  text-transform: uppercase;
  transition: opacity var(--settle-time) var(--settle-curve);
}
.argument-room.is-concluded .argument-final { opacity: 1; }
.relic-list li { opacity: .15; transition: opacity var(--settle-time) var(--settle-curve); }
.relic-list li.is-current { opacity: 1; }

.demo-beat { display: block; min-height: 290px; }
.demo-beat.is-active { display: block; }
.demo-question, .demo-answer {
  margin-top: 54px;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(48px, 7vw, 112px);
  line-height: .86;
  text-transform: uppercase;
}
.demo-answer { color: var(--paper); }
.demo-evidence {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--paper-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.8;
}

/* Pricing room rendered on paper (ink planes reduced to one — the
   specimen/proof room — so black-fill area stays well under the
   empty-plane target). Pricing uses the default paper controls. */

@media (min-width: 761px) {
  .argument-room .section-copy { position: sticky; top: calc(var(--nav-height) + 48px); align-self: start; }
  .argument-room .section-media { position: sticky; top: calc(var(--nav-height) + 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-arrival, .hero-title span, .hero-backdrop { animation: none !important; transform: none !important; filter: none !important; }
  .hero-arrival { display: none; }
  .relic-list li, .argument-final { transition: none; opacity: 1; }
}

/* ============================================================
   LOOSENING LAYER — 2026-08-08
   Purpose: break the metronome cadence and add quiet life,
   strictly inside the brand contract. CSS only. No new colour,
   no radius, no gradient/shadow/blur, no bounce/spring, no JS.
   Every effect below degrades to fully-visible, readable content
   when animation-timeline / view transitions are unsupported OR
   when the reader prefers reduced motion.
   ============================================================ */

/* ---- 1. Cross-document continuity (View Transitions API) ----
   Same-origin navigations (home <-> policy pages, all sharing this
   sheet) morph instead of hard-cutting. The wordmark is the single
   persistent anchor carried across the cut, so the mark feels fixed
   while the room behind it changes. Unsupported browsers fall back
   to an ordinary navigation. */
@view-transition { navigation: auto; }

.wordmark { view-transition-name: ktc-wordmark; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(ktc-wordmark),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--settle-time);
    animation-timing-function: var(--settle-curve);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---- 2. Settle-on-arrival reveals (native scroll-driven) ----
   Each block settles into place as it enters the viewport, driven by
   scroll position (animation-timeline: view()), not a timer. This is
   the brand's own "settle" concept applied section by section so the
   page no longer reveals every section with an identical beat. The
   pre-state (faded / offset) is applied ONLY where scroll-driven
   animation is supported and reduced motion is not requested; at rest
   in every capture the content sits fully revealed. */
@keyframes ktc-settle-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Reserve settle for the FIRST ARRIVAL of a room's mass only — the
   room's display headline, once — not every paragraph, row, and bay.
   The blanket reveal was the metronome; the quiet rooms now stay still
   and the few moving things carry weight. Body copy and lists are
   present immediately (better for reading, legal facts, and silence). */
/* Scroll-timeline reveals removed: view() timelines re-fire on every
   re-entry, which violates "a reveal occurs once." Headlines are
   present at rest; the single hero title-uncover (on load) is the one
   arrival moment. */

/* ---- 3. Editorial density — vary the plane, break the 6/6 grid ----
   Desktop only (min-width guard) so the mobile four-column cascade
   defined above is untouched. The aim is more empty plane on the
   quiet rooms and heavier display type on the argument, so no two
   consecutive sections carry the same weight. */
@media (min-width: 1000px) {
  /* The boundary room becomes near-empty plane: one large statement
     hanging in air, the list dropped well below it. */
  .boundary-heading { grid-column: 1 / span 7; }
  #boundary-title { max-width: 12ch; font-size: clamp(72px, 8.2vw, 148px); }
  .boundary-list { grid-column: 8 / -1; margin-top: clamp(18px, 3vw, 40px); }
  .boundary-section { padding-block: clamp(140px, 17vw, 260px); }

  /* Argument headline bleeds wider than its body column for tension. */
  .argument-room .display { max-width: 11ch; font-size: clamp(76px, 8.6vw, 150px); }
  .argument-room .section-body { max-width: 44ch; }

  /* The price hangs off the optical left edge — a print move, small
     enough to never cause overflow. */
  .price-display { margin-left: -.05em; font-size: clamp(88px, 9.6vw, 168px); }

  /* Let the FAQ sit narrower and further right so it reads as an
     appendix, not another full-width slab. */
  .faq-shell { grid-column: 4 / span 7; }
}

/* ---- 4. Minium discipline — state, not decoration ----
   Previously every relic carried a red-lead strike (a decorative
   wash the contract forbids). Now the strike is grey by default and
   turns to minium only on the relic currently in focus, so red-lead
   marks exactly one committed/removed thing at a time. */
.relic-list li::after { background: var(--rule); }
.relic-list li.is-current::after { background: var(--minium); }

@media (prefers-reduced-motion: reduce) {
  .argument-room .eyebrow,
  .argument-room .section-body,
  .mechanism-intro,
  .mechanism-bay,
  .specimen-shell .eyebrow,
  .specimen-shell .display,
  .proof-letter,
  .boundary-heading,
  .boundary-row,
  .pricing-main,
  .pricing-offer,
  .faq-shell > .eyebrow,
  .faq-shell .display,
  .faq-shell details {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .relic-list li::after { background: CanvasText; }
  .relic-list li.is-current::after { background: Highlight; }
}

/* ============================================================
   ENCOUNTER LAYER — 2026-08-08
   Turns the page from a tasteful landing page toward an
   installation: the hero stops being two floating cards, one
   statement becomes a wall-scale object, and two rooms hold a
   single sentence in near-empty space. CSS only; brand-legal
   (paper/ink/one rust accent, square corners, no gloss/gradient/
   shadow); AA contrast preserved (type always sits on a paper or
   ink plane, never raw over a photo); reduced-motion safe.
   ============================================================ */

/* ---- Hero: un-box. The copy and the offer were two 1px-outlined
   panels floated on the photo — the "floating card mosaic" the brand
   book forbids. Remove the borders and the twin-card read: the copy
   becomes a full-height paper plane fused to the left edge (a wall,
   not a card), and the offer becomes a single hard-ruled ledger at
   the bottom edge. AA contrast is kept because type still sits on a
   solid paper field — we remove the FRAME, not the plane. ---- */
@media (min-width: 761px) {
  .hero-copy {
    grid-column: 1 / span 7;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 0;
    padding: clamp(28px, 4vw, 64px) clamp(28px, 3.5vw, 56px) clamp(28px, 4vw, 60px) var(--page-margin);
    margin-left: calc(-1 * var(--page-margin));
    background: var(--paper);
  }

  .hero-offer {
    grid-column: 8 / -1;
    align-self: end;
    border: 0;
    border-top: 2px solid var(--ink);
    padding: clamp(18px, 2vw, 26px) 0 0;
    background: transparent;
  }

  /* the offer needs a readable plane for its disclosure; give it a
     paper field that reads as a shelf on the wall, not a boxed card */
  .hero-offer .hero-offer-line,
  .hero-offer .trial-disclosure { background: var(--paper); }
  .hero-offer .trial-disclosure { padding: 10px 0 0; }
}

/* ---- The type-monolith. One statement is allowed to exceed the grid
   and run off the right edge — mass that implies a world larger than
   the frame. Applied to the boundary room's "NOTHING MORE." because
   that room is being emptied anyway. Off-frame only where there is
   room to bleed (wide desktop); never clips required copy. ---- */
@media (min-width: 1200px) {
  #boundary-title {
    grid-column: 1 / -1;
    max-width: none;
    margin-right: calc(-1 * var(--page-margin));
    font-size: clamp(120px, 15vw, 300px);
    line-height: .82;
    letter-spacing: -.02em;
  }
  .boundary-section { overflow: hidden; } /* let the type run off, not the page */
  .boundary-grid { row-gap: clamp(60px, 9vw, 150px); }
}

/* ---- Silence rooms. A statement gets a near-empty viewport and
   nothing else — emptiness as confidence. These are new <section
   class="silence-room"> blocks in the markup; they carry one line and
   ~85% empty plane. ---- */
.silence-room {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-block: clamp(96px, 16vw, 240px);
  border-bottom: 1px solid var(--rule);
}
.silence-room.on-ink { background: var(--ink); color: var(--paper); border-color: var(--grey); }
.silence-room .display {
  grid-column: 1 / -1;
  max-width: 14ch;
  font-size: clamp(64px, 12vw, 200px);
  line-height: .84;
  letter-spacing: -.02em;
}
.silence-room .silence-note {
  grid-column: 1 / -1;
  margin: clamp(28px, 4vw, 56px) 0 0;
  max-width: 24ch;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
}
@media (max-width: 760px) {
  .silence-room { min-height: 0; padding-block: clamp(80px, 22vw, 120px); }
  .silence-room .display { font-size: clamp(52px, 17vw, 84px); }
}

/* The inevitability line sits just before pricing as its own quiet
   ink room; the disbelief line is a lone mono beat under the mechanism. */
.disbelief-beat {
  grid-column: 1 / -1;
  margin: clamp(40px, 6vw, 96px) 0 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(30px, 3.4vw, 56px);
  line-height: .95;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .silence-room .display,
  .argument-room .display,
  .mechanism-intro .display,
  .specimen-shell .display,
  #boundary-title,
  .price-display {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- FIX PASS: hero as a plinth on a concrete wall (not one giant
   white box), the hero plate contained in the upper-right, boundary
   on paper, and a 44px hit target on the in-flow FAQ link. ---- */
@media (min-width: 761px) {
  .hero-sheet { background: var(--paper); }
  .hero-backdrop {
    left: auto; right: 0; top: 0; bottom: auto;
    width: 46%; height: 64%;
    object-fit: contain; object-position: right top;
    background: var(--paper-2);
  }
  .hero-copy {
    grid-column: 1 / span 7; align-self: end;
    background: transparent; border: 0; margin-left: 0;
    padding: 0 clamp(24px, 3vw, 48px) 0 0;
  }
  .hero-offer {
    grid-column: 8 / -1; align-self: end;
    background: transparent; border: 0; border-top: 2px solid var(--ink);
    padding: clamp(14px, 1.5vw, 20px) 0 0;
  }
}
.boundary-section .boundary-row dd { color: var(--ink); }
.faq-shell details p a { display: inline-flex; align-items: center; min-height: 44px; }

/* The non-media-scoped "narrative" hero overrides leak into mobile and
   defeat the compact-portrait title sizing, pushing the offer below the
   320x568 fold. Re-assert mobile/compact hero sizing last so the full
   offer provably sits within the first 100svh sheet. */
@media (max-width: 760px) {
  .hero-title { max-width: 8ch; font-size: clamp(46px, 14vw, 74px); }
  .hero-copy { padding: 0; border: 0; margin-left: 0; }
}
@media (max-width: 479px) and (max-height: 640px) {
  .hero-title { max-width: 100%; font-size: 34px; line-height: .9; }
  .hero-backdrop { height: 26svh; min-height: 140px; max-height: 168px; }
  .hero-grid { gap: 8px; padding-top: 12px; padding-bottom: 14px; }
  .hero-product, .hero-mechanism { font-size: 12px; line-height: 15px; }
}

/* ---- Motion as mass/memory/passage (not decoration) ----
   The concrete plate drifts slower than the page (a heavy object
   lagging the scroll), and the specimen evidence is RETRIEVED into
   view like a document pulled from an archive. Both fire once, are
   reduced-motion-gated, and use the sanctioned settle curve. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-backdrop {
      animation: hero-mass-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }
  }
  .demo-beat.is-active .demo-answer { animation: ktc-settle-in var(--settle-time) var(--settle-curve) both; }
  .demo-beat.is-active .demo-evidence { animation: ktc-retrieve var(--settle-time) var(--settle-curve) both; }
}
@keyframes hero-mass-drift { from { transform: translateY(0); } to { transform: translateY(-20px); } }
@keyframes ktc-retrieve { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-backdrop,
  .demo-beat .demo-answer,
  .demo-beat .demo-evidence { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   HERO v2 + MONUMENT MOTION — 2026-08-08 (owner art-direction)
   Image-forward. Full-bleed plate. Title straddles the plate
   (~2/5 hanging over the image, the rest onto paper). Images
   drift slowly like monuments while text scrolls at normal
   speed. Deviates from the manifest's contain/no-crop/no-drift
   rules by explicit owner direction; manifest to be updated.
   ============================================================ */
@media (min-width: 761px) {
  .hero-sheet { height: 100svh; min-height: 760px; background: var(--paper); overflow: hidden; }
  .hero-backdrop {
    position: absolute; inset: 0 0 auto 0; left: 0; right: 0; top: 0; bottom: auto;
    width: 100%; height: 66%;
    object-fit: cover; object-position: center 42%;
    background: var(--paper-2);
  }
  .hero-grid { position: relative; z-index: 1; align-items: end; min-height: 100%;
    padding-top: 0; padding-bottom: clamp(28px, 5vw, 72px); }
  .hero-copy {
    grid-column: 1 / span 9; align-self: end;
    background: transparent; border: 0; margin: -9vw 0 0 0; padding: 0;
  }
  .hero-title {
    max-width: 12ch; font-size: clamp(96px, 13.5vw, 232px);
    line-height: .8; letter-spacing: -.022em;
  }
  .hero-product { max-width: 40ch; }
  .hero-offer {
    grid-column: 8 / -1; align-self: end;
    background: var(--paper); border: 0; border-top: 2px solid var(--ink);
    padding: clamp(14px, 1.5vw, 20px) 0 0;
  }
}
/* Monument drift: the plate moves slowly as the page scrolls;
   text scrolls normally. Subtle, eased, reduced-motion-gated. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-backdrop {
      animation: monument-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 110vh;
    }
    .native-image {
      animation: monument-drift-in linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes monument-drift { from { transform: translateY(0) scale(1.08); } to { transform: translateY(8%) scale(1.08); } }
@keyframes monument-drift-in { from { transform: translateY(-5%) scale(1.06); } to { transform: translateY(5%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .hero-backdrop, .native-image { animation: none !important; transform: none !important; }
}

/* ============================================================
   HERO — AUTHORITATIVE (supersedes all earlier hero rules).
   Full-bleed plate up top; title straddles its lower edge;
   no per-span uncover (that was causing the glyph collision);
   monument drift stays. Desktop only; mobile/compact untouched.
   ============================================================ */
.js .demo-beat { display: none; }
.js .demo-beat.is-active { display: block; }

@media (min-width: 761px) {
  .hero-sheet { position: relative; height: 100svh; min-height: 720px; max-height: 1080px; overflow: hidden; background: var(--paper); }
  .hero-arrival { display: none; }
  .hero-backdrop {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    width: 100%; height: 56%;
    object-fit: cover; object-position: center 46%; z-index: 0;
  }
  .hero-grid {
    position: relative; z-index: 1; min-height: 100%;
    align-items: end; padding: 0 0 clamp(32px, 5vh, 64px);
  }
  .hero-copy {
    grid-column: 1 / span 8; align-self: end;
    background: transparent; border: 0; margin: 0; padding: 0;
  }
  .hero-copy .eyebrow { margin: 0 0 10px; }
  .hero-title {
    margin: 0; max-width: 13ch;
    font-size: clamp(88px, 12.5vw, 208px); line-height: .85; letter-spacing: -.02em;
    transform: none !important;
  }
  .hero-title span { transform: none !important; animation: none !important; display: block; }
  .hero-product { max-width: 42ch; margin-top: 22px; }
  .hero-mechanism, .hero-campaign-line { max-width: 46ch; }
  .hero-offer {
    grid-column: 9 / -1; align-self: end;
    background: transparent; border: 0; border-top: 2px solid var(--ink); padding: 14px 0 0;
  }
}

/* ============================================================
   EXPERIENCE MOTION — 2026-08-08 (owner: "make monuments move")
   More plate, text lower, pronounced monument parallax on every
   image, and headlines that rise as each room arrives. Native
   scroll-driven (no JS). Reduced-motion fully neutralizes it.
   ============================================================ */
@media (min-width: 761px) {
  .hero-backdrop { height: 72%; }     /* see more of the plate */
  .hero-copy { align-self: end; }     /* text sits lower; motion carries the gap */
}

/* section plates become full-bleed parallax frames */
.section-media { overflow: hidden; }
.native-image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* the hero plate lags the scroll like heavy stone */
    .hero-backdrop {
      animation: monument-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
  @supports (animation-timeline: view()) {
    /* every section plate drifts slowly as it passes the viewport */
    .native-image {
      animation: img-monument linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    /* each room's headline rises into place as it arrives */
    .argument-room .display,
    .mechanism-intro .display,
    .specimen-shell .display,
    #boundary-title,
    .silence-room .display,
    .price-display {
      animation: room-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 50%;
    }
  }
}
/* pronounced, elegant drifts */
@keyframes monument-drift  { from { transform: translateY(-3%) scale(1.16); } to { transform: translateY(16%) scale(1.16); } }
@keyframes img-monument    { from { transform: translateY(-16%) scale(1.30); } to { transform: translateY(16%) scale(1.30); } }
@keyframes room-rise       { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-backdrop, .native-image,
  .argument-room .display, .mechanism-intro .display, .specimen-shell .display,
  #boundary-title, .silence-room .display, .price-display {
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
}

/* ============================================================
   ROOM 2 + CUMULATIVE CROSS-OUT + STONE MOTION + CLEAN INVITE
   ============================================================ */
.hero-backdrop, .native-image { animation: none !important; }  /* JS drives the stone drift */

@media (min-width: 761px) {
  .argument-room { min-height: 180svh; position: relative; overflow: clip; }
  .argument-room .section-copy { position: sticky; top: calc(var(--nav-height) + 48px); align-self: start; grid-column: 1 / span 7; z-index: 1; }
  .argument-room .section-media { position: sticky; top: 0; height: 100svh; grid-column: 7 / -1; align-self: start; margin-right: calc(-1 * var(--page-margin)); overflow: hidden; z-index: 0; }
  .argument-room .native-image { width: 100%; height: 100%; object-fit: cover; }
}

/* mobile keeps the same cinematic drift — image frames + cover so the stone can move */
@media (max-width: 760px) {
  .hero-sheet { overflow: hidden; }
  .section-media { overflow: hidden; }
  .section-media .native-image { object-fit: cover; width: 100%; height: 46svh; }
}

/* cumulative persistent cross-out: each relic is struck as you pass it and STAYS struck */
.relic-list li { opacity: .28; transition: opacity var(--settle-time) var(--settle-curve); }
.relic-list li.is-struck { opacity: 1; }
.relic-list li::after { background: var(--minium); transform: scaleX(0); transform-origin: left; transition: transform var(--settle-time) var(--settle-curve); }
.relic-list li.is-struck::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .relic-list li { opacity: 1 !important; } .relic-list li::after { transition: none; } }

/* clean invite (non-transactional); the real door + full disclosure is Pricing */
.offer-jump { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 26px;
  background: var(--ink); color: var(--paper); border: 0;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.offer-jump::after { content: "\2192"; font-size: 20px; line-height: 1; }
.offer-jump:hover { background: var(--minium); }
.room-cta { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 64px); }
.offer-room .transaction-cta { justify-content: space-between; min-height: 62px; padding: 0 22px; }
.offer-room .transaction-cta::after { content: "\2192"; font-size: 20px; }

/* ===== plates in more rooms + closing room + quiet footer ===== */
@media (min-width: 761px) {
  .mechanism-section .layout-grid { align-items: center; }
  .mechanism-intro { grid-column: 1 / span 6; }
  .mech-media { grid-column: 8 / -1; align-self: center; margin-right: calc(-1 * var(--page-margin)); }
  .mech-media .native-image { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .disbelief-beat { grid-column: 1 / span 7; }

  .closing-room .layout-grid { align-items: center; }
  .closing-line { grid-column: 1 / span 6; }
  .closing-media { grid-column: 8 / -1; margin-right: calc(-1 * var(--page-margin)); }
  .closing-media .native-image { width: 100%; aspect-ratio: 1; object-fit: cover; }
}
.plate-band { padding: 0; border: 0; height: 78svh; overflow: hidden; }
.plate-band .native-image { width: 100%; height: 100%; object-fit: cover; }
.closing-room { min-height: 84svh; display: flex; align-items: center; border-bottom: 0; }
.closing-line { margin: 0; font-family: "Anton", Impact, sans-serif; font-size: clamp(56px, 8vw, 150px); line-height: .84; letter-spacing: -.02em; text-transform: uppercase; }
.closing-line span { display: block; }
.site-footer { padding-block: 40px; }
.footer-nav { font-size: 9px; opacity: .7; }
@media (max-width: 760px) {
  .mech-media, .closing-media { margin-top: 40px; }
  .mech-media .native-image, .closing-media .native-image { height: 46svh; aspect-ratio: auto; }
  .plate-band { height: 52svh; }
}

/* ============================================================
   EXHIBIT COMPOSITION — big off-center plates, text hanging over,
   the moment lands mid-screen. No two rooms composed alike.
   ============================================================ */
@media (min-width: 761px) {
  .argument-room .section-media { grid-column: 4 / -1; height: 100svh; }
  .argument-room .native-image { object-position: left center; }
  .argument-room .section-copy { grid-column: 1 / span 5; justify-content: center; }

  .mechanism-section .layout-grid { position: relative; align-items: center; min-height: 100svh; }
  .mech-media { grid-column: 1 / span 9 !important; margin-left: calc(-1 * var(--page-margin)); margin-right: 0 !important; height: 100svh !important; align-self: stretch !important; overflow: hidden; }
  .mech-media .native-image { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: right center; }
  .mechanism-intro { grid-column: 8 / -1 !important; position: relative; z-index: 1; }
  .disbelief-beat { grid-column: 8 / -1 !important; position: relative; z-index: 1; }

  .closing-room .layout-grid { position: relative; align-items: center; min-height: 84svh; }
  .closing-media { grid-column: 5 / -1 !important; margin-right: calc(-1 * var(--page-margin)); height: 84svh !important; overflow: hidden; }
  .closing-media .native-image { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }
  .closing-line { grid-column: 1 / span 5 !important; position: relative; z-index: 1; }
}

/* MOBILE EXHIBIT: plate ~92% bled to one side, tall; text hangs over it mid-screen */
@media (max-width: 760px) {
  .section-media, .mech-media, .closing-media { width: 92%; height: 76svh; overflow: hidden; margin: 0 calc(-1 * var(--page-margin)) 0 0; }
  .mech-media { margin: 0 0 0 calc(-1 * var(--page-margin)); }
  .section-media .native-image, .mech-media .native-image, .closing-media .native-image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
  .argument-room .section-copy, .mechanism-intro, .closing-line { position: relative; z-index: 1; margin-top: -40svh; }
  .argument-room .section-copy .display, .mechanism-intro .display, .closing-line { text-shadow: 0 1px 0 var(--paper), 0 0 1px var(--paper); }
}

/* mobile exhibit fix: clean big off-center plates, no cramped text-over-image */
@media (max-width: 760px) {
  .argument-room .section-copy, .mechanism-intro, .closing-line { margin-top: 0 !important; text-shadow: none !important; }
  .section-media, .closing-media { width: 90%; height: 78svh; margin: 30px 0; margin-left: 10%; margin-right: calc(-1 * var(--page-margin)); overflow: hidden; }
  .mech-media { width: 90%; height: 78svh; margin: 30px 0; margin-left: calc(-1 * var(--page-margin)); margin-right: 10%; overflow: hidden; }
  .argument-room .section-media { height: 82svh; }
}

/* ===== ARGUMENT SCROLL-LOCK — pin the block centered so the cross-out
   plays mid-screen and nothing scrolls away before the last strike ===== */
@media (min-width: 761px) {
  .argument-room { min-height: 260svh; }
  .argument-room .section-copy {
    position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    grid-column: 1 / span 6; z-index: 1;
  }
  .argument-room .section-media { position: sticky; top: 0; height: 100svh; grid-column: 4 / -1; z-index: 0; }
}

/* ===== 2/5 OVERLAP + VARIED ALIGNMENT + TYPOGRAPHIC NOVELTY ===== */
@media (min-width: 761px) {
  /* argument: text overlaps the fog plate from the left by ~2/5 */
  .argument-room .section-copy { grid-column: 1 / span 7; }

  /* mechanism: RIGHT-aligned, text overlaps the airy hall from the right */
  .mechanism-intro { grid-column: 5 / -1 !important; text-align: right; }
  .mechanism-intro .section-body { margin-left: auto; }
  .disbelief-beat { grid-column: 5 / -1 !important; text-align: right; }

  /* boundary monolith: pushed right, hanging off the right edge */
  #boundary-title { text-align: right; }

  /* closing: text overlaps the round-memory plate from the left */
  .closing-line { grid-column: 1 / span 6 !important; }

  /* the two silence statements go opposite ways so the eye never settles */
  .silence-room:nth-of-type(odd) .display { margin-left: auto; text-align: right; }

  /* novelty: stagger the second line of the big statements */
  .argument-room .display span:nth-child(2) { margin-left: 1.4ch; }
  #boundary-title span:nth-child(2) { margin-right: 1.2ch; }
  .closing-line span:nth-child(2) { margin-left: 2ch; }
}
/* mobile: now that plates are light, let text overlap them mid-screen */
@media (max-width: 760px) {
  .argument-room .section-copy, .mechanism-intro, .closing-line { position: relative; z-index: 1; }
  .mechanism-intro { text-align: right; }
}

/* ============================================================
   CINEMA BUILD — stones stand, words walk (merged 3-brief spec).
   Plates pinned STILL; text scrolls over them 4/5; mechanism pans
   horizontally. Appended last to win the cascade.
   ============================================================ */
.mech-track { display: flex; height: 100%; width: 300%; will-change: transform; }
.mech-track .native-image { flex: 0 0 33.3333%; width: 33.3333%; height: 100%; object-fit: cover; transform: none !important; animation: none !important; }

@media (min-width: 761px) {
  .argument-room, .closing-room { min-height: 240svh; position: relative; overflow: clip; }
  .mechanism-section { min-height: 300svh; position: relative; overflow: clip; }

  /* pinned still plates */
  .argument-room .section-media, .mech-media, .closing-media {
    position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; margin: 0;
  }
  .argument-room .native-image, .closing-media .native-image {
    width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: auto !important; transform: none !important; animation: none !important;
  }
  /* 85-90vw plates slammed to an edge */
  .argument-room .section-media { grid-column: 3 / -1 !important; margin-right: calc(-1 * var(--page-margin)); }
  .mech-media { grid-column: 1 / -1 !important; margin-left: calc(-1 * var(--page-margin)); margin-right: calc(-1 * var(--page-margin)); }
  .closing-media { grid-column: 2 / -1 !important; margin-right: calc(-1 * var(--page-margin)); }

  /* text scrolls over the pinned plate at ~4/5 overlap */
  .argument-room .section-copy { grid-column: 1 / span 8 !important; position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; z-index: 1; }
  .mechanism-section .layout-grid { position: relative; }
  .mechanism-intro { grid-column: 5 / -1 !important; position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; z-index: 1; }
  .disbelief-beat { grid-column: 5 / -1 !important; text-align: right; position: relative; z-index: 1; }
  .closing-room .layout-grid { align-items: center; min-height: 100svh; }
  .closing-line { grid-column: 1 / span 7 !important; position: relative; z-index: 1; align-self: center; }

  /* NOVELTY: staggered line indents, opposite directions per room */
  .argument-room .display span:nth-child(2) { margin-left: 1.6ch; }
  .argument-room .display span:nth-child(3) { margin-left: 3.2ch; }
  .mechanism-intro .display span:nth-child(2) { margin-right: 1.6ch; }
  .closing-line span:nth-child(2) { margin-left: 2.4ch; }
}

/* ---- MOBILE: pinned plates, text overlaps 4/5 with a paper scrim ---- */
@media (max-width: 760px) {
  .argument-room, .closing-room { min-height: 200svh; position: relative; }
  .mechanism-section { min-height: 240svh; position: relative; overflow: clip; }
  .argument-room .section-media, .mech-media, .closing-media {
    position: sticky; top: 8svh; height: 72svh; width: 100%; margin: 0; overflow: hidden; z-index: 0;
  }
  .argument-room .native-image, .closing-media .native-image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
  .argument-room .section-copy, .mechanism-intro, .closing-line { position: relative; z-index: 1; margin-top: -46svh !important; }
  .mechanism-intro { text-align: right; }
  /* paper scrim behind the overlapping glyphs only (brand-legal, no shadow) */
  .argument-room .section-copy .display span,
  .mechanism-intro .display span,
  .closing-line span {
    background: var(--paper); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: .02em .14em;
  }
}

/* reduced-motion: everything anchors; pins collapse to normal flow */
@media (prefers-reduced-motion: reduce) {
  .mech-track { transform: none !important; width: 100%; flex-direction: column; }
  .mech-track .native-image { width: 100%; flex: none; height: 60svh; }
}

/* mobile overlap — do it with grid-stacking (same cell), not a margin hack,
   so text truly sits OVER the pinned plate */
@media (max-width: 760px) {
  .argument-room .layout-grid,
  .mechanism-section .layout-grid,
  .closing-room .layout-grid { display: grid; grid-template-columns: 1fr; }
  .argument-room .section-media, .mech-media, .closing-media {
    grid-area: 1 / 1; position: sticky; top: 8svh; height: 72svh; width: 100%; margin: 0; z-index: 0;
  }
  .argument-room .section-copy, .mechanism-intro, .closing-line {
    grid-area: 1 / 1; z-index: 1; position: relative; margin-top: 0 !important;
    align-self: start; padding-top: 12svh;
  }
  .disbelief-beat { grid-area: 1 / 1; z-index: 1; align-self: end; padding-bottom: 8svh; }
}

/* ============================================================
   PIN FIX — overflow:clip on the sections was disabling sticky.
   Clip only the image FRAMES; pin the grid so the room LOCKS
   centered and the effect plays mid-screen (no dead space,
   no off-screen events). Overrides all earlier room rules.
   ============================================================ */
.argument-room, .mechanism-section, .closing-room { overflow: visible !important; }

/* ARGUMENT = scroll-lock: the grid pins centered; cross-out advances in place */
.argument-room { min-height: 200svh !important; position: relative; }
.argument-room > .layout-grid {
  position: sticky !important; top: 0 !important; height: 100svh !important;
  align-items: center !important; align-content: center !important;
}
.argument-room .section-media {
  position: static !important; grid-row: 1 !important; align-self: stretch !important;
  height: 100svh !important; overflow: hidden !important; z-index: 0 !important; margin: 0 !important;
}
.argument-room .section-copy {
  position: static !important; grid-row: 1 !important; align-self: center !important;
  height: auto !important; display: block !important; z-index: 1 !important;
}
.argument-room .native-image { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; }

@media (min-width: 761px) {
  .argument-room .section-media { grid-column: 3 / -1 !important; margin-right: calc(-1 * var(--page-margin)) !important; }
  .argument-room .section-copy  { grid-column: 1 / span 8 !important; }
}
@media (max-width: 760px) {
  .argument-room > .layout-grid { grid-template-columns: 1fr !important; }
  .argument-room .section-media { grid-column: 1 !important; }
  .argument-room .section-copy  { grid-column: 1 !important; padding: 0 var(--page-margin) !important; }
}

/* ===== PIN FIX (cont.) — same clean pin for mechanism (h-pan) + closing ===== */
/* MECHANISM: grid pins; the plate-track pans horizontally (JS); text holds over it */
.mechanism-section { min-height: 300svh !important; position: relative; }
.mechanism-section > .layout-grid { position: sticky !important; top: 0 !important; height: 100svh !important; align-items: center !important; }
.mech-media { position: static !important; grid-row: 1 !important; grid-column: 1 / -1 !important; align-self: stretch !important; height: 100svh !important; overflow: hidden !important; z-index: 0 !important; margin-left: calc(-1 * var(--page-margin)) !important; margin-right: calc(-1 * var(--page-margin)) !important; }
.mechanism-intro { position: static !important; grid-row: 1 !important; align-self: center !important; z-index: 1 !important; height: auto !important; }
.disbelief-beat { grid-row: 1 !important; align-self: end !important; z-index: 1 !important; padding-bottom: 8svh; }

/* CLOSING: grid pins; image still; text centered over it */
.closing-room { min-height: 180svh !important; position: relative; }
.closing-room > .layout-grid { position: sticky !important; top: 0 !important; height: 100svh !important; align-items: center !important; }
.closing-media { position: static !important; grid-row: 1 !important; align-self: stretch !important; height: 100svh !important; overflow: hidden !important; z-index: 0 !important; margin: 0 !important; }
.closing-line { position: static !important; grid-row: 1 !important; align-self: center !important; z-index: 1 !important; }
.closing-media .native-image { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; }
@media (min-width: 761px) {
  .closing-media { grid-column: 3 / -1 !important; margin-right: calc(-1 * var(--page-margin)) !important; }
  .closing-line { grid-column: 1 / span 8 !important; }
  .mechanism-intro { grid-column: 5 / -1 !important; text-align: right; align-items: flex-end; }
}
@media (max-width: 760px) {
  .mechanism-section > .layout-grid, .closing-room > .layout-grid { grid-template-columns: 1fr !important; }
  .mechanism-intro, .disbelief-beat, .closing-media, .closing-line { grid-column: 1 !important; }
  .mechanism-intro, .closing-line { padding: 0 var(--page-margin) !important; }
}

/* mechanism: single plate slides off to reveal WHITE (paper), not another image */
.mech-media { background: var(--paper) !important; overflow: hidden !important; }
.mech-media > .native-image { width: 100% !important; height: 100% !important; object-fit: cover !important; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .mech-media > .native-image { transform: none !important; } }

/* spent scroll-lock: once seen + scrolled past, collapse so re-scroll is smooth (never re-locks) */
.argument-room.is-spent { min-height: 100svh !important; }
.argument-room.is-spent > .layout-grid { position: static !important; height: auto !important; }

/* accent is now yellow; keep focus outlines high-contrast (ink) for accessibility */
:focus-visible { outline-color: var(--ink) !important; }

/* ===== mechanism: horizontal pan IN CONCERT with normal vertical scroll — NO lock ===== */
.mechanism-section { min-height: 0 !important; position: relative; overflow: visible !important; }
.mechanism-section > .layout-grid {
  position: static !important; height: auto !important;
  display: grid !important; grid-template-columns: repeat(12, minmax(0,1fr)) !important;
  align-items: center !important; padding-block: clamp(56px, 9vh, 130px) !important;
}
.mech-media {
  position: relative !important; grid-row: 1 !important; grid-column: 1 / -1 !important;
  height: 86svh !important; width: auto !important; align-self: center !important;
  margin-left: calc(-1 * var(--page-margin)) !important; margin-right: calc(-1 * var(--page-margin)) !important;
  overflow: hidden !important; background: var(--paper) !important;
}
.mech-media > .native-image { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.mechanism-intro { position: relative !important; grid-row: 1 !important; grid-column: 6 / -1 !important; align-self: center !important; z-index: 1 !important; height: auto !important; text-align: right; align-items: flex-end; }
.disbelief-beat { position: relative !important; grid-row: 2 !important; grid-column: 1 / -1 !important; z-index: 1 !important; align-self: auto !important; text-align: right; margin-top: 32px; }
@media (max-width: 760px) {
  .mechanism-section > .layout-grid { grid-template-columns: 1fr !important; }
  .mech-media { grid-column: 1 !important; height: 66svh !important; }
  .mechanism-intro, .disbelief-beat { grid-column: 1 !important; padding: 0 var(--page-margin) !important; }
}

/* strikes drawn DIRECTLY by scroll position (--strike), latched, no time-transition */
.relic-list li { opacity: calc(.3 + .7 * var(--strike, 0)) !important; transition: none !important; }
.relic-list li::after { transform: scaleX(var(--strike, 0)) !important; transform-origin: left !important; transition: none !important; background: var(--minium) !important; }

/* ===== mechanism v2: image VERTICALLY PINNED, exits horizontally over a 2-section
   span while the text scrolls past at normal speed. ===== */
.mechanism-section { min-height: 200svh !important; position: relative; overflow: visible !important; }
.mechanism-section > .layout-grid { display: block !important; position: static !important; height: auto !important; padding: 0 !important; }
.mechanism-intro { position: relative !important; z-index: 1 !important; grid-column: auto !important;
  padding: 14svh var(--page-margin) 0 0 !important; text-align: right; align-items: flex-end; height: auto !important; }
.mech-media { position: sticky !important; top: 0 !important; height: 100svh !important; width: 100% !important;
  overflow: hidden !important; background: var(--paper) !important; z-index: 0 !important; margin: 0 !important; grid-column: auto !important; }
.mech-media > .native-image { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.disbelief-beat { position: relative !important; z-index: 1 !important; grid-column: auto !important;
  margin-top: -46svh !important; padding: 0 var(--page-margin) 30svh 0 !important; text-align: right; }
@media (max-width: 760px) {
  .mechanism-intro, .disbelief-beat { padding-left: var(--page-margin) !important; }
}

/* ===== FULL-BLEED HERO (moss, off-center) ===== */
.hero-sheet { height: 100svh !important; min-height: 720px; overflow: hidden !important; background: var(--paper) !important; }
.hero-backdrop { position: absolute !important; inset: 0 !important; left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; background: var(--paper); }
.hero-grid { position: relative !important; z-index: 1; align-items: end !important; }
@media (min-width: 761px) {
  .hero-copy { grid-column: 1 / span 7 !important; align-self: end !important; background: transparent !important; }
  .hero-offer { grid-column: 8 / -1 !important; align-self: end !important; background: transparent !important; }
}

/* ===== mechanism new-order margins (image first, pins immediately) ===== */
.mechanism-intro { margin-top: -90svh !important; padding-top: 0 !important; }
.disbelief-beat { margin-top: 20svh !important; }

/* the sticky mech image needs a TALL containing block to pin against */
.mechanism-section > .layout-grid { min-height: 200svh !important; display: block !important; position: static !important; }

/* ============================================================
   AUTHORITATIVE MOBILE (<=760) — resets every room to a clean,
   working full-width moss image with text overlaid + centered.
   No fragile pins, no narrow strips, no dead space. Wins cascade.
   ============================================================ */
@media (max-width: 760px) {
  /* HERO: full-bleed moss, text over the bottom-left */
  .hero-sheet { height: 100svh !important; overflow: hidden !important; }
  .hero-backdrop { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; }
  .hero-grid { position: relative !important; z-index: 1 !important; align-items: end !important; padding: 0 var(--page-margin) 5svh !important; grid-template-columns: 1fr !important; }
  .hero-copy { grid-column: 1 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; }
  .hero-offer { grid-column: 1 !important; margin-top: 14px !important; }
  .hero-title { font-size: clamp(64px, 20vw, 104px) !important; max-width: 100% !important; }

  /* IMAGE ROOMS: SAME as desktop — room is tall, layout-grid PINS full-height,
     image + copy overlaid in one cell. Monument holds still; text / strike / pan
     move against it. Identical mechanic to desktop, single-column. */
  .argument-room, .mechanism-section, .closing-room {
    min-height: 200svh !important; height: auto !important; position: relative !important; overflow: visible !important;
  }
  .argument-room > .layout-grid, .mechanism-section > .layout-grid, .closing-room > .layout-grid {
    display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important;
    position: sticky !important; top: 0 !important; height: 100svh !important; min-height: 100svh !important;
    padding: 0 !important; align-items: stretch !important; overflow: hidden !important;
  }
  .argument-room .section-media, .mech-media, .closing-media {
    grid-area: 1 / 1 !important; position: relative !important; top: auto !important; left: auto !important;
    width: 100% !important; height: 100svh !important; margin: 0 !important;
    overflow: hidden !important; z-index: 0 !important; align-self: stretch !important; justify-self: stretch !important;
  }
  /* argument + closing plates: pinned still. mechanism plate: JS slides it
     horizontally off-screen (do NOT lock its transform). */
  .argument-room .native-image, .closing-media .native-image {
    position: static !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important;
  }
  .mech-media .native-image {
    position: static !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  .argument-room .section-copy, .mechanism-intro, .closing-line {
    grid-area: 1 / 1 !important; position: relative !important; z-index: 1 !important;
    align-self: center !important; margin: 0 !important; padding: 0 var(--page-margin) !important; text-align: left !important;
  }
  .mechanism-intro { align-items: flex-start !important; }
  .disbelief-beat { grid-area: 1 / 1 !important; align-self: end !important; z-index: 1 !important; padding: 0 var(--page-margin) 8svh !important; text-align: left !important; margin: 0 !important; }
  /* spent argument collapses its pin so the page can continue (matches desktop) */
  .argument-room.is-spent { min-height: 100svh !important; }
  .argument-room.is-spent > .layout-grid { position: static !important; height: auto !important; }
}

/* mobile hero fixes: fill height so content sits at the bottom (not over the nav),
   and crop the landscape moss hero to show the monolith + moss, not just white. */
@media (max-width: 760px) {
  .hero-grid { min-height: 100svh !important; height: 100svh !important; }
  .hero-backdrop { object-position: 70% 60% !important; }
  .hero-title { font-size: clamp(56px, 17vw, 92px) !important; line-height: .88 !important; }
  .hero-copy .eyebrow { margin-bottom: 6px !important; }
  .hero-product, .hero-mechanism { background: var(--paper); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .hero-title span { background: var(--paper); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .06em; }
}

/* ===== ELIMINATE WHITE TEXT BOXES — text sits over the white side of each plate ===== */
.argument-room .section-copy .display span, .mechanism-intro .display span, .closing-line span,
.argument-room .section-body, .mechanism-intro .section-body,
.relic-list li, .argument-final, .disbelief-beat,
.hero-title span, .hero-product, .hero-mechanism, .hero-campaign-line {
  background: transparent !important; padding-left: 0 !important; padding-right: 0 !important;
}
/* object-position so the monolith/moss shows AND the text overlaps the WHITE side */
@media (min-width: 761px) {
  .argument-room .native-image { object-position: 62% center !important; }   /* moss-nat-2: white left for left text */
  .mech-media .native-image { object-position: 38% center !important; }      /* moss-nat-1: white right for right text */
  .closing-media .native-image { object-position: 60% center !important; }
}
@media (max-width: 760px) {
  .argument-room .native-image { object-position: 60% 55% !important; }
  .mech-media .native-image { object-position: 42% 55% !important; }
  .closing-media .native-image { object-position: 60% 55% !important; }
}

/* MOBILE HERO FIX: the grid overlay was painting opaque paper OVER the image,
   and the backdrop wasn't full height. Uncover the moss, fill it, sit copy at bottom. */
@media (max-width: 760px) {
  .hero-grid { background: transparent !important; display: flex !important; flex-direction: column !important;
    justify-content: flex-end !important; align-items: flex-start !important; height: 100svh !important; }
  .hero-copy, .hero-offer, .layout-grid.hero-grid { background: transparent !important; }
  .hero-backdrop { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 68% 58% !important; z-index: 0 !important; }
}

/* MOBILE HERO — high-specificity fix: uncap the backdrop, make the grid overlay
   truly transparent so the moss shows through. */
@media (max-width: 760px) {
  .hero-sheet img.hero-backdrop { max-height: none !important; min-height: 0 !important; height: 100% !important; width: 100% !important;
    position: absolute !important; inset: 0 !important; object-fit: cover !important; object-position: 66% 60% !important; z-index: 0 !important; }
  .hero-sheet .layout-grid.hero-grid, .hero-sheet .hero-grid, .hero-sheet .hero-copy, .hero-sheet .hero-offer {
    background: transparent !important; background-color: transparent !important; }
}

/* ============================================================
   MONUMENT STAGE — the final motion system (2026-08-08).
   One fixed, out-of-flow backdrop. A monument holds DEAD STILL
   (only breathing) while its text travels; at the section end it
   SLIDES up and off, revealing white paper, and the next monument
   RISES up into place. Directional movement + a white beat — NOT
   a morph or fade. IDENTICAL on mobile + desktop. Supersedes every
   sticky-pin / horizontal-pan block above.
   ============================================================ */
.monument-stage {
  position: fixed !important; inset: 0 !important; z-index: 0 !important;
  overflow: hidden !important; pointer-events: none !important; background: var(--paper) !important;
}
/* wrapper: JS slides this vertically (translateY) — the transition movement */
.monument-stage .monument {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  transform: translate3d(0,110%,0); will-change: transform;   /* parked below until JS places it */
  overflow: hidden !important;
}
/* inner image: holds still, only BREATHES (time-based scale/light) — decoupled
   from the wrapper slide so stillness and breathing never fight. */
.monument-stage .monument > img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: 50% 52% !important;
  animation: monument-breathe 18s ease-in-out infinite;
}
/* keep the bright STONE side under the left-set text; moss falls to the right */
.monument-stage .monument[data-room="hero"] > img      { object-position: 64% 58% !important; }
.monument-stage .monument[data-room="argument"] > img   { object-position: 60% 52% !important; }
.monument-stage .monument[data-room="mechanism"] > img  { object-position: 42% 52% !important; }
.monument-stage .monument[data-room="closing"] > img    { object-position: 58% 52% !important; }
@keyframes monument-breathe {
  0%,100% { transform: scale(1.03); filter: brightness(1)     contrast(1); }
  50%     { transform: scale(1.075); filter: brightness(1.045) contrast(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .monument-stage .monument > img { animation: none; transform: scale(1.03); }
}
/* barely-there paper veil on the text side so black display type lifts off the
   moss without a box (agent-flagged legibility fix). Light, not a scrim. */
.monument-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, rgba(239,236,230,.60) 0%, rgba(239,236,230,.22) 34%, rgba(239,236,230,0) 62%);
}

/* --- lift ALL real content above the fixed stage --- */
.hero-sheet, .section { position: relative; z-index: 1; }

/* --- MONUMENT ROOMS: transparent so the stage shows; normal flow; tall enough
       that text TRAVELS while the stone holds. Same at every width. --- */
.hero-sheet,
.argument-room, .mechanism-section, .closing-room { background: transparent !important; }
.argument-room, .mechanism-section, .closing-room {
  min-height: auto !important; height: auto !important; position: relative !important; overflow: visible !important;
}
.argument-room > .layout-grid,
.mechanism-section > .layout-grid,
.closing-room > .layout-grid {
  display: block !important; position: static !important; height: auto !important;
  min-height: 150svh !important; padding: 16svh var(--page-margin) !important; align-items: unset !important;
}
.argument-room.is-spent, .argument-room.is-spent > .layout-grid {
  min-height: 150svh !important; position: static !important; height: auto !important;
}

/* --- hide the OLD in-flow monument images; the stage renders them now --- */
.hero-backdrop,
.plate-band,
.argument-room .section-media,
.mechanism-section .mech-media, .mech-media, .mech-track,
.closing-room .closing-media { display: none !important; }

/* --- text blocks in monument rooms: no boxes, sit over the stone, readable --- */
.argument-room .section-copy, .mechanism-intro, .closing-line, .disbelief-beat {
  position: relative !important; z-index: 1 !important; background: transparent !important;
  margin: 0 !important; padding: 0 !important; text-align: left !important; max-width: 100% !important;
}
.mechanism-intro { align-items: flex-start !important; }
/* generous vertical rhythm so the copy is spread through the tall room (= travel) */
.mechanism-intro > * { margin-bottom: 4svh; }
.closing-line { padding-top: 8svh !important; }

/* non-monument content sections stay OPAQUE so they cover the stage as they pass */
.specimen-section, .boundary-section, .offer-room, .silence-room, .proof-section, footer, .site-footer {
  position: relative; z-index: 1;
}

/* ============================================================
   MONUMENT STAGE — addenda (2026-08-08 pt2)
   Paper gaps for a real white beat; mid-page footnote; strike room.
   ============================================================ */
/* WHITE BEAT: real scroll distance of paper between consecutive monuments,
   so the outgoing stone fully slides off to paper BEFORE the next rises. */
.argument-room   { margin-top: 34svh !important; }
.mechanism-section { margin-top: 34svh !important; }
.closing-room    { margin-top: 30svh !important; }
/* give the strike room more scroll so each cross-out can be WATCHED as it draws */
.argument-room > .layout-grid { min-height: 220svh !important; }

/* --- MID-PAGE FOOTNOTE: the boundary reads as a small aside, not a section --- */
.boundary-section.is-footnote {
  background: var(--paper) !important; position: relative; z-index: 1;
  padding: 14svh var(--page-margin) !important; min-height: 0 !important;
}
.boundary-section.is-footnote .boundary-note {
  max-width: 46ch; margin: 0 auto; text-align: left;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}
.boundary-section.is-footnote .footnote-mark {
  font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey); margin: 0 0 12px;
}
.boundary-section.is-footnote .boundary-list { margin: 0; display: block; }
.boundary-section.is-footnote .boundary-row {
  display: flex; gap: 12px; align-items: baseline; padding: 3px 0; border: 0;
}
.boundary-section.is-footnote .boundary-row dt {
  font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 11px; color: var(--grey); margin: 0; min-width: 2ch;
}
.boundary-section.is-footnote .boundary-row dd {
  margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink);
}
.boundary-section.is-footnote .boundary-links {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.boundary-section.is-footnote .boundary-links a {
  font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 11px; letter-spacing: .04em; color: var(--grey);
  text-decoration: underline; text-underline-offset: 3px;
}
.boundary-section.is-footnote .boundary-links a:hover { color: var(--ink); }

/* argument copy HOLDS (sticky) while the four cross-outs draw, so each strike can
   be watched; the monument behind stays still, then both release on exit. */
@media (min-width: 0px) {
  .argument-room .section-copy {
    position: sticky !important; top: 14svh !important; align-self: start !important;
  }
}

/* HERO paints INSTANTLY: its monument sits at rest by default (not parked below),
   so it shows on first paint before the deferred JS runs. Others stay parked. */
.monument-stage .monument[data-room="hero"] { transform: translate3d(0,0,0); }

/* ============================================================
   MONUMENT STAGE — DIRECTION (2026-08-08 pt3, "Aronofsky pass")
   Each monument: ~90% width, OFF-CENTER (asymmetric paper), mostly
   still with a slow drift; enters/exits from ITS OWN side with heavy
   easing so no hard slide is ever seen. Breathing desynced. JS sets
   the transform; the per-room default here parks it off pre-JS so
   only the hero paints first. Overrides the full-bleed geometry above.
   ============================================================ */
.monument-stage .monument {
  inset: auto !important; top: -9% !important; height: 118% !important; width: 90% !important;
  overflow: hidden !important; will-change: transform;
}
.monument-stage .monument > img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; animation: monument-breathe 19s ease-in-out infinite;
}
/* off-center anchors + desynced breathing + parked-at-entry defaults (pre-JS) */
.monument-stage .monument[data-room="hero"]      { right: 0 !important; left: auto !important; width: 95% !important; transform: translate3d(0,0,0); }
.monument-stage .monument[data-room="hero"] > img      { object-position: 64% 58% !important; animation-delay: -2s; }
.monument-stage .monument[data-room="argument"]  { right: 0 !important; left: auto !important; transform: translate3d(-122%,20%,0); }
.monument-stage .monument[data-room="argument"] > img  { object-position: 58% 52% !important; animation-delay: -7s; }
.monument-stage .monument[data-room="mechanism"] { left: 0 !important; right: auto !important; transform: translate3d(122%,-15%,0); }
.monument-stage .monument[data-room="mechanism"] > img { object-position: 42% 52% !important; animation-delay: -12s; }
.monument-stage .monument[data-room="closing"]   { right: 2% !important; left: auto !important; width: 88% !important; transform: translate3d(20%,122%,0); }
.monument-stage .monument[data-room="closing"] > img   { object-position: 58% 52% !important; animation-delay: -4s; }

/* ============================================================
   MONUMENT STAGE — direction pt4: big paper beats + DP crops
   (slow travel needs the room centres >~2 viewports apart).
   ============================================================ */
/* wide, UNEVEN paper beats between monuments (Aronofsky: dread before mechanism) */
.argument-room   { margin-top: 58svh !important; }
.mechanism-section { margin-top: 44svh !important; }
.closing-room    { margin-top: 40svh !important; }
/* DP monument crops — stone as a standing slab, moss climbing, negative space to one side */
.monument-stage .monument[data-room="hero"] > img      { object-position: 78% 60% !important; animation-duration: 18s !important; }
.monument-stage .monument[data-room="argument"] > img   { object-position: 30% 46% !important; animation-duration: 21s !important; }
.monument-stage .monument[data-room="mechanism"] > img  { object-position: 32% 50% !important; animation-duration: 20s !important; }
.monument-stage .monument[data-room="closing"] > img    { object-position: 86% 34% !important; animation-duration: 23s !important; }

/* ============================================================
   BREATHING ONLY (2026-08-08 pt5) — NO translate, NO whip.
   Each monument is fixed and off-center; it does nothing but BREATHE.
   Only ONE is shown (.is-active). The active stone changes only while
   an OPAQUE interlude/section covers the stage, so the change is an
   invisible cut — no fade, no slide, no motion but the breath. The
   user's own scroll reveals each fixed stone through its transparent
   room "window". Supersedes ALL prior translate/slide/pan logic.
   ============================================================ */
.monument-stage .monument {
  transform: none !important;               /* never translate — kills the whips */
  opacity: 0; transition: none !important;  /* instant swap, hidden behind opaque cover */
}
.monument-stage .monument.is-active { opacity: 1; }
/* the ONLY motion: a slow breath (scale + faint light), desynced per stone */
.monument-stage .monument > img { animation: monument-breathe 20s ease-in-out infinite; }

/* opaque paper bands that cover the stage between adjacent stones, so the cut
   is never seen. They also give the eye a beat of pure paper. */
.interlude {
  background: var(--paper) !important; position: relative; z-index: 1;
  min-height: 96svh !important; margin: 0 !important; padding: 0 !important;
}
/* the paper gaps are no longer needed — the interludes carry the space */
.argument-room, .mechanism-section, .closing-room { margin-top: 0 !important; }
/* ensure non-monument sections are opaque so the fixed stone never shows behind them */
.silence-room, .offer-room, .specimen-section, .boundary-section { position: relative; z-index: 1; }
.silence-room, .offer-room { background: var(--paper) !important; }
/* extra headroom so the slow drift never reveals a box edge */
.monument-stage .monument { top: -14% !important; height: 128% !important; }

/* interlude STATEMENT screens — fill the paper beat with one big line so it reads
   as an intentional exhibit caption, not dead space (still opaque, still hides the cut). */
.interlude--statement {
  display: flex !important; align-items: center !important;
  padding: 0 var(--page-margin) !important; min-height: 100svh !important;
}
.interlude--statement.interlude--right { justify-content: flex-end !important; }
.interlude-line {
  font-family: "Anton", Impact, sans-serif; font-weight: 400;
  font-size: clamp(40px, 11vw, 84px); line-height: .96; letter-spacing: .01em;
  text-transform: uppercase; color: var(--ink); margin: 0; max-width: 14ch;
}
.interlude--right .interlude-line { text-align: right; }

/* LEGIBILITY VEILS — faint paper gradients (not boxes) so type lifts off the moss.
   Painted above the fixed stone, below the text. */
.hero-sheet { position: relative; }
.hero-sheet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to top, rgba(239,236,230,.74) 0%, rgba(239,236,230,.38) 42%, rgba(239,236,230,0) 100%);
  pointer-events: none; z-index: 0;
}
.hero-sheet > * { position: relative; z-index: 1; }
/* footer sits over the closing stone — veil it so the policy type stays crisp */
.site-footer { position: relative; z-index: 1; }
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(239,236,230,.62) 0%, rgba(239,236,230,.9) 55%, rgba(239,236,230,.96) 100%);
  pointer-events: none; z-index: 0;
}
.site-footer > * { position: relative; z-index: 1; }

/* CLOSING FINALE — drop the last words LOW onto the moss line so they rise out of
   the reclamation (a gravestone, not a floating caption). Kanye note. */
.closing-room > .layout-grid {
  display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
  min-height: 100svh !important; padding: 0 var(--page-margin) 9svh !important;
}
.closing-room .closing-line {
  padding-top: 0 !important; margin: 0 !important; align-self: flex-start !important;
  line-height: .84 !important; text-align: left !important;
}

/* ============================================================
   LOCKED FINALE (Kanye+Ive reconciliation). The closing image is
   pinned WITH the type (sticky) so they hold as one frame — the eye
   stops. The type still CROSSES the stone (over, not carved). Words
   land LOW where the moss climbs. And the doubled footer wordmark is
   removed so the finale is the last monument, not an echo of the nav.
   ============================================================ */
.closing-room {
  position: relative; min-height: 188svh !important; margin-top: 0 !important;
  background: transparent !important; z-index: 1; overflow: visible !important;
}
.closing-frame {
  position: sticky !important; top: 0 !important; height: 100svh !important;
  overflow: hidden !important; background: var(--paper) !important; z-index: 1;
}
.closing-frame .closing-locked {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: 60% 50% !important;   /* full height: stone top -> moss base */
}
.closing-frame .closing-line {
  position: absolute !important; left: var(--page-margin) !important; right: auto !important;
  bottom: 13svh !important; margin: 0 !important; padding: 0 !important;
  line-height: .82 !important; color: var(--ink) !important; z-index: 2 !important;
  background: transparent !important; max-width: 92vw !important;
}
/* faint lift under the finale words so black caps stay crisp on the moss */
.closing-frame::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(239,236,230,.42), rgba(239,236,230,0));
  pointer-events: none; z-index: 1;
}
/* Ive: kill the hero-scale footer wordmark echoing the nav chrome */
.footer-wordmark { display: none !important; }

/* move the horizontal-scroll clip from BODY to HTML so it stops breaking
   position:sticky in the finale (body-level overflow makes body the sticky
   container; html is the real scroller and clips h-scroll without that side effect). */
html { overflow-x: clip; }
body { overflow-x: visible !important; }
/* clip was breaking the finale sticky; monuments are clipped in their own fixed
   stage so the document never h-scrolls without it. Remove the clip entirely. */
html, body { overflow-x: visible !important; }
/* closing-room must be a plain block so the sticky finale frame pins (a sticky
   flex item justified in a column doesn't hold at top:0). */
.closing-room { display: block !important; }
/* JS-driven finale pin (replaces the fragile sticky) */
.closing-frame { position: relative !important; }
.closing-frame.pin-fixed  { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100svh !important; z-index: 3 !important; }
.closing-frame.pin-bottom { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100svh !important; }

/* ============================================================
   SHOW THE ARTWORK (2026-08-08 pt6) — full-bleed monoliths.
   The 90%-off-center framing hid the stone in negative space on real
   phones. Make each monument FILL the screen so the artwork is the
   star. Keep the slow breath + a gentle drift, plus GPU compositing
   hints to stop the iOS fixed-element jitter.
   ============================================================ */
.monument-stage {
  transform: translateZ(0);            /* own compositing layer — steadies iOS fixed jank */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.monument-stage .monument {
  left: 0 !important; right: 0 !important; width: 100% !important;   /* FULL-BLEED, not 90% off-center */
  top: -10% !important; height: 120% !important;
  will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* crops that FEATURE the monolith + moss (full height, subject centred), not empty room */
.monument-stage .monument[data-room="hero"] > img      { object-position: 70% 50% !important; }
.monument-stage .monument[data-room="argument"] > img   { object-position: 52% 52% !important; }
.monument-stage .monument[data-room="mechanism"] > img  { object-position: 42% 52% !important; }
.monument-stage .monument[data-room="closing"] > img    { object-position: 58% 50% !important; }

/* TIME-BASED KEN-BURNS breath (overrides the earlier subtle scale). Runs on the
   compositor — smooth during iOS momentum scroll, and clearly felt now that the
   monoliths are full-bleed. Durations desynced per stone (set above). */
@keyframes monument-breathe {
  0%   { transform: scale(1.05) translate(0%, 0%);        filter: brightness(1)    contrast(1); }
  50%  { transform: scale(1.12) translate(-1.6%, -1.1%);  filter: brightness(1.05) contrast(1.02); }
  100% { transform: scale(1.05) translate(0%, 0%);        filter: brightness(1)    contrast(1); }
}
@media (prefers-reduced-motion: reduce) {
  .monument-stage .monument > img { animation: none !important; transform: scale(1.05) !important; }
}

/* interludes taller than the viewport so the stone-swap always lands under full
   opaque cover (fixes the visible hero->argument change at the interlude's edge). */
.interlude { min-height: 118svh !important; }

/* HERO: full-bleed + zoomed toward the mossy base so more GREEN reads (Cooper).
   Zoom origin at the bottom so the moss grows into frame, monolith base kept. */
.monument-stage .monument[data-room="hero"] > img {
  object-position: 58% 84% !important;   /* keep the monolith (right) in frame */
  transform-origin: 72% 78% !important;  /* gentle zoom toward the mossy base */
  animation: hero-breathe 22s ease-in-out infinite !important;
}
@keyframes hero-breathe {
  0%   { transform: scale(1.10); filter: brightness(1)    contrast(1); }
  50%  { transform: scale(1.16); filter: brightness(1.04) contrast(1.02); }
  100% { transform: scale(1.10); filter: brightness(1)    contrast(1); }
}

/* ============================================================
   MOTION pt2 — slow INWARD DRIFT INTO THE GREEN (Cooper).
   The zoom origin sits on each image's moss, so the slow scale reads as
   the monolith drifting inward on the green. alternate + ease-in-out =
   continuous, smooth, no loop jump. Slow and slight, but clearly present.
   ============================================================ */
@keyframes kenburns-green {
  from { transform: scale(1.05); }
  to   { transform: scale(1.17) translateY(-2%); }
}
.monument-stage .monument[data-room="hero"] > img {
  animation: kenburns-green 17s ease-in-out infinite alternate !important;
  transform-origin: 52% 92% !important; object-position: 72% 58% !important;
}
.monument-stage .monument[data-room="argument"] > img {
  animation: kenburns-green 15s ease-in-out infinite alternate !important;
  transform-origin: 60% 86% !important;
}
.monument-stage .monument[data-room="mechanism"] > img {
  animation: kenburns-green 18s ease-in-out infinite alternate !important;
  transform-origin: 44% 86% !important;
}

/* HERO full width — an earlier off-center rule left a 5% paper strip on the left. */
.monument-stage .monument[data-room="hero"] { left: 0 !important; right: 0 !important; width: 100% !important; }

/* DEBUG hue tints (inert unless html.huetest) — one unique colour per image so a
   pixel-scroll test can see exactly which stone is on screen at every position.
   hero=RED, argument=BLUE, mechanism=GREEN, closing=MAGENTA. */
html.huetest .monument-stage .monument[data-room="hero"]::after,
html.huetest .monument-stage .monument[data-room="argument"]::after,
html.huetest .monument-stage .monument[data-room="mechanism"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; mix-blend-mode: multiply;
}
html.huetest .monument-stage .monument[data-room="hero"]::after      { background: rgba(255,0,0,.55); }
html.huetest .monument-stage .monument[data-room="argument"]::after   { background: rgba(0,80,255,.55); }
html.huetest .monument-stage .monument[data-room="mechanism"]::after  { background: rgba(0,200,0,.55); }
html.huetest .closing-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; background: rgba(230,0,220,.55); mix-blend-mode: multiply;
}
/* footer opaque so the fixed stage never bleeds behind the policy type */
.site-footer { background: var(--paper) !important; }

/* ============================================================
   MOTION pt3 — constant breath + scroll-zoom into the green, less base zoom.
   The JS scroll-zoom drives the big move (pivoting on the green); the <img>
   keeps a subtle constant breath. Lower wrapper height = less crop = see more.
   ============================================================ */
.monument-stage .monument { transform-origin: 50% 90% !important; top: -5% !important; height: 110% !important; }
@keyframes kenburns-green { from { transform: scale(1.0); } to { transform: scale(1.055); } }
.monument-stage .monument[data-room="hero"] > img,
.monument-stage .monument[data-room="argument"] > img,
.monument-stage .monument[data-room="mechanism"] > img {
  animation: kenburns-green 8s ease-in-out infinite alternate !important;
  transform-origin: 50% 90% !important;
}

/* FINALE via native sticky (smooth, cannot jump like the JS fixed-toggle did).
   Taller room = longer clean hold. Overrides the .pin-fixed/.pin-bottom classes. */
.closing-room { min-height: 210svh !important; }
.closing-frame, .closing-frame.pin-fixed, .closing-frame.pin-bottom {
  position: sticky !important; top: 0 !important; bottom: auto !important;
  height: 100svh !important; width: auto !important; left: auto !important; right: auto !important;
}

/* ============================================================
   CONTENT SWAP — dashboard-is-dead now on BLACK, email proof now on WHITE.
   ============================================================ */
/* proof/demo moved onto the white silence-room -> dark text (was light for black) */
.silence-room.is-proof { background: var(--paper) !important; color: var(--ink) !important; min-height: 92svh; display: flex; align-items: center; }
.silence-room.is-proof .display,
.silence-room.is-proof .proof-letter,
.silence-room.is-proof .demo-answer,
.silence-room.is-proof .demo-question,
.silence-room.is-proof .specimen-copy { color: var(--ink) !important; }
.silence-room.is-proof .demo-evidence,
.silence-room.is-proof .proof-kicker,
.silence-room.is-proof .eyebrow { color: var(--grey) !important; }
/* dashboard headline on the black section — inherits paper (light) already; ensure it */
.specimen-section.is-dashboard { display: flex; align-items: center; }
.specimen-section.is-dashboard .display { color: var(--paper) !important; }

/* ============================================================
   FOOTER LINKS — tight vertical stack, right-aligned (Cooper).
   ============================================================ */
.footer-nav {
  display: flex !important; flex-direction: column !important;
  align-items: flex-end !important; gap: 1px !important; text-align: right !important; margin-left: auto;
}
.footer-nav a {
  min-height: 0 !important; min-width: 0 !important; padding: 1px 0 !important;
  justify-content: flex-end !important; line-height: 1.35 !important;
}

/* moss reclaiming the CTA — a little green shows through the button (Cooper). */
.offer-jump {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(13,13,12,.82), rgba(13,13,12,.86)), url(/img/moss-nat-1.jpg?u2) !important;
  background-size: cover, cover !important;
  background-position: center, center 78% !important;
}

/* is-spent must NOT collapse the argument room — that height change caused a ~700px
   JUMP into the mechanism when it fired (the "thread remembers" glitch). Keep the
   room the SAME height whether spent or not; is-spent is now inert. */
.argument-room.is-spent { min-height: 220svh !important; }
.argument-room.is-spent > .layout-grid {
  min-height: 220svh !important; position: static !important; height: auto !important;
}

/* finale: brief held beat, not a long lock — Cooper felt "stuck". Short room = the
   sticky pins only a moment, then releases straight into the footer. */
.closing-room { min-height: 118svh !important; }

/* ============================================================
   CLOSING = a normal monument (same effects as every other stone).
   No bespoke pinned frame — the fixed stage renders moss-nat-4, the
   "LATER, YOU ASK." text scrolls over it, and it breathes + zooms into
   the green exactly like hero/argument/mechanism.
   ============================================================ */
.closing-room {
  background: transparent !important; position: relative !important; display: block !important;
  min-height: 150svh !important; margin-top: 0 !important; overflow: visible !important;
}
.closing-room > .layout-grid {
  display: block !important; position: static !important; height: auto !important;
  min-height: 150svh !important; padding: 60svh var(--page-margin) 0 !important;
}
.closing-room .closing-line {
  position: relative !important; z-index: 1 !important; color: var(--ink) !important;
  background: transparent !important; margin: 0 !important; line-height: .84 !important; text-align: left !important;
}
/* closing stone breathes into the green like the rest */
.monument-stage .monument[data-room="closing"] > img {
  animation: kenburns-green 19s ease-in-out infinite alternate !important;
  transform-origin: 50% 90% !important;
}
/* faint lift so the black finale words stay crisp over the moss */
.closing-room::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(239,236,230,.5), rgba(239,236,230,0));
  pointer-events: none; z-index: 0;
}

/* closing image full width (an old off-center rule left it at 88%). */
.monument-stage .monument[data-room="closing"] { left: 0 !important; right: 0 !important; width: 100% !important; }

/* ============================================================
   HOMEPAGE FOOTER (2026-08-08 final): links LEFT, transparent so the
   closing art shows through, "a paper blueprint product" credit.
   ============================================================ */
.site-footer { background: transparent !important; position: relative; z-index: 1; }
.site-footer::before { display: none !important; }   /* remove the paper veil/white bottom */
/* faint lift only behind the footer text so it stays readable over the moss */
.site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(239,236,230,0) 0%, rgba(239,236,230,.45) 60%, rgba(239,236,230,.6) 100%);
}
.footer-nav {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; text-align: left !important; gap: 1px !important; margin-left: 0 !important;
}
.footer-nav a { justify-content: flex-start !important; min-height: 0 !important; min-width: 0 !important; padding: 1px 0 !important; }
.footer-mark { text-align: left !important; color: var(--grey) !important; }
/* footer credit was unreadable (grey on moss) -> ink, slightly stronger */
.footer-mark { color: var(--ink) !important; opacity: 1 !important; font-weight: 500 !important; }

/* ONE continuous bottom fade (no second gradient / no delineation line).
   Remove the closing-room's own fade band and the footer's separate veil; use a
   single gradient that begins transparent up in the closing and reaches paper at
   the very bottom, spanning both. */
.closing-room::after { display: none !important; }
.site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -520px; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(239,236,230,0) 0%, rgba(239,236,230,.42) 55%, rgba(239,236,230,.6) 100%) !important;
}
.site-footer > * { position: relative; z-index: 1; }

/* ONE fade only: the paper pricing block fades straight into the moss, which then
   runs unbroken to the very bottom. No footer gradient, no border = no delineation. */
.site-footer::after { display: none !important; }
.offer-room, #pricing {
  border-bottom: 0 !important;
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 66%, rgba(239,236,230,0) 100%) !important;
  padding-bottom: 42svh !important;   /* keep pricing copy in the opaque zone, fade below it */
}
/* footer text sits directly on the moss now — keep it dark and legible */
.footer-nav a, .footer-mark { color: var(--ink) !important; }
/* the crisp full-width line = the footer's border-top. Remove it. */
.site-footer { border-top: 0 !important; }

/* Restore the single continuous white fade at the bottom (the border line that
   caused the "delineation" is gone now). Pricing back to solid paper. */
.offer-room, #pricing { background: var(--paper) !important; padding-bottom: 12svh !important; }
.site-footer::after {
  content: "" !important; display: block !important; position: absolute;
  left: 0; right: 0; bottom: 0; top: -520px; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(239,236,230,0) 0%, rgba(239,236,230,.42) 55%, rgba(239,236,230,.6) 100%) !important;
}
.site-footer > * { position: relative; z-index: 1; }

/* simplified human pricing block (checkout terms moved to /subscribe) */
.price-display .per { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .28em; font-weight: 400; letter-spacing: .02em; vertical-align: baseline; margin-left: .15em; color: var(--grey); }
.trial-note { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 12px; letter-spacing: .03em; color: var(--grey); margin: 18px 0 0; max-width: 46ch; line-height: 1.5; }
.offer-room .transaction-cta { margin-top: 30px; }

/* HERO gets extra image height so it can travel UP (revealing more green) without
   ever exposing paper at the bottom. */
.monument-stage .monument[data-room="hero"] { top: -5% !important; height: 110% !important; transform-origin: 50% 100% !important; }

/* REMOVE ALL GRAY RULE/BOUNDARY LINES (Cooper) — the --rule (#C9C5BC) 1px borders
   that appear at section/image boundaries and between list rows. Keep the black CTA
   border and the yellow strike lines (those aren't gray rules). */
.section, .hero-offer, .relic-list, .relic-list li, .proof-sheet, .proof-letter,
.boundary-note, .boundary-list, .included-list, .offer-ledger, .offer-row, .status-row,
.pricing-links, .footer-nav {
  border-top: 0 !important; border-bottom: 0 !important;
}

/* catch the last stray list border */
main li, main dt, main dd, .included-list li { border-top: 0 !important; border-bottom: 0 !important; }

/* BUTTON full color — no black transparency, just the moss image (white + green),
   dark text so it reads (Cooper). */
.offer-jump {
  background-color: transparent !important;
  background-image: url(/img/moss-nat-1.jpg?u2) !important;
  background-size: cover !important;
  background-position: center 70% !important;
}
.offer-jump, .offer-jump * { color: var(--ink) !important; }

/* boundary-note policy links -> tight vertical stack, right-aligned (like the footer) */
.boundary-section.is-footnote .boundary-links {
  display: flex !important; flex-direction: column !important; align-items: flex-end !important;
  text-align: right !important; gap: 2px !important; margin-top: 16px !important;
}
.boundary-section.is-footnote .boundary-links a {
  min-width: 0 !important; min-height: 0 !important; padding: 1px 0 !important; line-height: 1.35 !important;
}

/* HERO button keeps its dark overlay (full-color moss is only for the dashboard CTA) */
.hero-offer .offer-jump {
  background-image: linear-gradient(rgba(13,13,12,.82), rgba(13,13,12,.86)), url(/img/moss-nat-1.jpg?u2) !important;
  background-size: cover, cover !important;
  background-position: center, center 78% !important;
}
.hero-offer .offer-jump, .hero-offer .offer-jump * { color: var(--paper) !important; }
/* remove the "KILLTHECRM.COM" arrival flash on load (Cooper) */
.hero-arrival { display: none !important; }

/* stop the elastic overscroll at the ends so pulling past the bottom can't lift the
   fade and reveal the full-colour moss (Cooper). Paper bg as a backstop. */
html, body { overscroll-behavior-y: none; background-color: var(--paper); }

/* ============================================================
   "THE DASHBOARD IS DEAD." — the marketing punch. Taller black stage,
   three staggered lines (DEAD. slammed huge + right), scroll-triggered
   fly-ins, and a yellow accent sweep under DEAD.
   ============================================================ */
.specimen-section.is-dashboard { min-height: 165svh !important; display: flex !important; align-items: center !important; }
.dashboard-kill { display: block !important; width: 100%; }
.dashboard-kill span { display: block; line-height: .86; text-transform: uppercase; }
.dashboard-kill .l1 { text-align: left; font-size: clamp(56px, 15.5vw, 150px); color: var(--paper); }
.dashboard-kill .l2 { font-size: clamp(30px, 8vw, 66px); color: var(--grey); margin: .16em 0 .04em; letter-spacing: .06em; }
.dashboard-kill .l3 { text-align: right; font-size: clamp(92px, 25vw, 240px); color: var(--paper); position: relative; }
.dashboard-kill .l3::after { content: ""; position: absolute; right: 0; bottom: .14em; height: .055em; width: 0; background: #e0a80b; }

.is-dashboard[data-reveal] .l1, .is-dashboard[data-reveal] .l2,
.is-dashboard[data-reveal] .l3, .is-dashboard[data-reveal] .dk-cta { opacity: 0; }
@keyframes dk-left  { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes dk-up    { from { opacity: 0; transform: translateY(34px); }  to { opacity: 1; transform: none; } }
@keyframes dk-right { from { opacity: 0; transform: translateX(90px) scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes dk-sweep { from { width: 0; } to { width: 100%; } }
.is-dashboard.in .l1 { animation: dk-left .8s cubic-bezier(.2,.8,.2,1) both; }
.is-dashboard.in .l2 { animation: dk-up .7s .30s cubic-bezier(.2,.8,.2,1) both; }
.is-dashboard.in .l3 { animation: dk-right .9s .55s cubic-bezier(.16,1,.3,1) both; }
.is-dashboard.in .l3::after { animation: dk-sweep .7s 1.25s cubic-bezier(.16,1,.3,1) both; }
.is-dashboard.in .dk-cta { animation: dk-up .7s 1.05s ease both; }
@media (prefers-reduced-motion: reduce) {
  .is-dashboard[data-reveal] .l1, .is-dashboard[data-reveal] .l2,
  .is-dashboard[data-reveal] .l3, .is-dashboard[data-reveal] .dk-cta { opacity: 1 !important; animation: none !important; }
  .dashboard-kill .l3::after { width: 100% !important; animation: none !important; }
}

/* IS on the SAME (left) side as THE DASHBOARD; DEAD. clearly right-aligned */
.dashboard-kill .l1 { text-align: left !important; }
.dashboard-kill .l2 { text-align: left !important; }
.dashboard-kill .l3 { text-align: right !important; font-size: clamp(78px, 21vw, 200px) !important; }
/* IS and DEAD both right-aligned; THE DASHBOARD stays left */
.dashboard-kill .l2 { text-align: right !important; }
.dashboard-kill .l3 { text-align: right !important; }
/* remove the yellow accent sweep under DEAD. */
.dashboard-kill .l3::after { display: none !important; }

/* image swap crops: hero monolith to the RIGHT edge; argument shows its monolith */
.monument-stage .monument[data-room="hero"] > img { object-position: 50% 62% !important; }
.monument-stage .monument[data-room="argument"] > img { object-position: 88% 52% !important; }

/* ============================================================
   PROOF — interactive macOS Mail demo (replaces cinematic demo)
   ============================================================ */
.proof-lead {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 44ch;
  margin: 0 0 28px;
}

/* ============================================================
   PROOF v4 - pixel-exact iOS Mail (LIGHT mode) - workflow build
   ============================================================ */
/* ============================================================
   PROOF — authentic iOS Mail (LIGHT mode) rebuild. Cream/paper site,
   so the widget screen is light: white chrome, dark glyphs, white body,
   natural-prose answers, left-bar quoted source, signature, PDF cards.
   System font only (CSP default-src 'self'); all glyphs inline SVG.
   ============================================================ */
.is-proof .km-stage { display: flex; flex-direction: column; gap: 34px; width: 100%; }
.is-proof .km-copy-top, .is-proof .km-copy-bottom { max-width: 60ch; }
.is-proof .km-copy-bottom { margin: 0; }

/* device shell (mobile: plain rounded card) */
.km-device { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.km-screen {
  --km-blue:#007aff; --km-grey:#8e8e93; --km-tert:#c7c7cc;
  --km-chrome:#f9f9f9; --km-card:#ffffff; --km-group:#f2f2f7; --km-sep:#c6c6c8;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  height: clamp(560px, 80svh, 760px);
  background: #ffffff; border-radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: #000; text-align: left; -webkit-font-smoothing: antialiased;
  box-shadow: 0 40px 90px -50px rgba(20,18,14,.4), 0 10px 30px -20px rgba(20,18,14,.28);
}
.km-defs { position: absolute; width: 0; height: 0; }

/* status bar (shared) */
.km-status { flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 22px 0 26px; background: var(--km-chrome); font-size: 15px; font-weight: 600; color:#000; }
.km-status-time { letter-spacing: .2px; }
.km-status-ic { display: flex; align-items: center; gap: 6px; }
.km-status-ic svg { display: block; }

/* view toggle */
.km-list { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--km-card); }
.km-thread { display: none; flex-direction: column; flex: 1; min-height: 0; position: relative; background: var(--km-card); }
[data-view="thread"] .km-list { display: none; }
[data-view="thread"] .km-thread { display: flex; }

/* ---- inbox list screen ---- */
.km-lnav { flex: none; padding: 4px 20px 10px; background: var(--km-card); }
.km-lnav-back { color: var(--km-blue); font-size: 15px; }
.km-ltitle { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; color: #000; }
.km-lsub { margin: 3px 0 0; color: var(--km-grey); font-size: 13px; }
.km-rows { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--km-card); scrollbar-width: none; }
.km-rows::-webkit-scrollbar { display: none; }
.km-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  border: 0; cursor: pointer; background: transparent; color: inherit; font: inherit;
  padding: 10px 18px; }
.km-row:hover, .km-row.is-cur { background: rgba(0,0,0,.03); }
.km-runread { width: 9px; height: 9px; border-radius: 50%; background: var(--km-blue); margin-top: 20px; flex: none; }
.km-rav { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #e5e5ea; color: #1c1c1e;
  display: grid; place-items: center; font-size: 13px; font-weight: 600; margin-top: 2px; }
.km-rav.km-av-agent { background: #f1efe9; color: #0d0d0c; }
.km-rav.km-av-agent svg { width: 22px; height: 22px; }
.km-rmain { flex: 1; min-width: 0; border-top: .5px solid var(--km-sep); padding-top: 10px; }
.km-row:first-child .km-rmain { border-top: 0; }
.km-rtop { display: flex; align-items: center; gap: 6px; }
.km-rfrom { font-size: 16px; font-weight: 600; color: #000; }
.km-rtime { margin-left: auto; font-size: 13px; color: var(--km-grey); white-space: nowrap; }
.km-rchev { width: 7px; height: 12px; fill: none; stroke: var(--km-tert); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.km-rsubj { display: block; font-size: 15px; color: #000; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-rprev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; color: var(--km-grey); margin-top: 2px; line-height: 1.35; }

/* ---- thread nav (liquid-glass pills) ---- */
.km-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 12px 8px; background: var(--km-chrome); }
.km-back, .km-updown { display: inline-flex; align-items: center; height: 36px; border: 0;
  background: rgba(120,120,128,.16); border-radius: 19px; color: #000;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.km-back { gap: 6px; padding: 0 10px 0 9px; cursor: pointer; }
.km-back svg { width: 11px; height: 17px; fill: none; stroke: var(--km-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.km-back-badge { background: #000; color: #fff; font-size: 14px; font-weight: 600; border-radius: 11px; padding: 2px 9px; }
.km-title { font-size: 17px; font-weight: 600; color: #000; letter-spacing: -.2px; }
.km-updown { width: 104px; justify-content: space-around; position: relative; }
.km-udbtn { flex: 1; display: grid; place-items: center; height: 36px; background: transparent; border: 0; cursor: pointer; color: var(--km-blue); }
.km-udbtn svg { width: 18px; height: 11px; fill: none; stroke: var(--km-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.km-udbtn[data-disabled] { opacity: .3; pointer-events: none; }

/* ---- Summarize subbar ---- */
.km-subbar { flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px 10px; background: var(--km-chrome); border-bottom: .5px solid var(--km-sep); }
.km-subcount { font-size: 15px; color: var(--km-grey); }
.km-summarize { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer; font: inherit; }
.km-summarize svg { width: 18px; height: 18px; }
.km-sumlabel { font-size: 15px; font-weight: 600;
  background: linear-gradient(100deg,#F5457C,#F5872E,#A64BF0,#3F8CFF);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- scroll region + subject ---- */
.km-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  position: relative; background: var(--km-card); scrollbar-width: none; }
.km-scroll::-webkit-scrollbar { display: none; }
.km-tbody[hidden] { display: none; }
.km-tbody { padding-bottom: 84px; }
.km-subject { padding: 10px 18px 14px; background: var(--km-card); color: #000;
  font-size: 28px; font-weight: 700; line-height: 1.18; letter-spacing: -.4px; }

/* ---- message: collapsed row vs expanded ---- */
.km-msg { background: var(--km-card); }
.km-crow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0;
  cursor: pointer; background: var(--km-card); color: inherit; font: inherit;
  padding: 11px 18px; border-top: .5px solid var(--km-sep); min-height: 60px; }
.km-cav { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; }
.km-cav.km-av-agent svg { width: 19px; height: 19px; }
.km-cid { flex: 1; min-width: 0; }
.km-ctop { display: flex; align-items: baseline; gap: 8px; }
.km-cname { font-size: 15px; font-weight: 600; color: #000; }
.km-cdate { margin-left: auto; font-size: 14px; color: var(--km-grey); white-space: nowrap; }
.km-cprev { font-size: 14px; color: var(--km-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.km-full { display: none; }
.km-msg.is-open > .km-full { display: block; }
.km-msg.is-open > .km-crow { display: none; }

/* ---- expanded header (light) ---- */
.km-hdr { position: relative; display: flex; gap: 12px; align-items: flex-start;
  background: var(--km-card); padding: 12px 18px 14px; }
.km-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; font-weight: 600; margin-top: 2px; }
.km-av-you { background: #8e8e93; color: #fff; }
.km-av-agent { background: #f1efe9; color: #0d0d0c; }
.km-av-agent svg { width: 22px; height: 22px; }
.km-hid { flex: 1; min-width: 0; }
.km-hrow { display: flex; align-items: center; gap: 5px; font-size: 15px; line-height: 21px; letter-spacing: -.2px; }
.km-hlabel { color: var(--km-grey); }
.km-hlabel-from { color: var(--km-grey); }
.km-hname-you { color: #000; font-weight: 600; }
.km-hname-agent { color: var(--km-blue); font-weight: 600; }
.km-haddr { color: var(--km-blue); }
.km-haddr-plain { color: #000; }
.km-onlyyou { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--km-grey);
  background: rgba(120,120,128,.14); border-radius: 6px; padding: 1px 7px; line-height: 16px; }
.km-hchev { width: 7px; height: 12px; fill: none; stroke: var(--km-tert); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.km-hdate { color: var(--km-grey); }
.km-hdate span { color: var(--km-grey); }
.km-hclip { position: absolute; top: 16px; right: 18px; width: 15px; height: 15px; fill: none;
  stroke: var(--km-grey); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- white body ---- */
.km-body { background: #fff; padding: 18px 0 22px; }
.km-body > p { margin: 0; padding: 0 18px; font-size: 17px; line-height: 24px; color: #1a1a1a; }
.km-body > p { margin-top: 22px; }
.km-body > p:first-child { margin-top: 0; }

/* quoted source (left bar) */
.km-quote { margin: 18px 18px 0; padding: 2px 0 2px 15px; border-left: 3px solid var(--km-tert); }
.km-quote-line { margin: 0; font-size: 16px; line-height: 1.5; font-style: italic; color: #3a3a3c; }
.km-quote-cite { display: block; margin: 6px 0 0; font-size: 13px; color: #8a8a8e; font-style: normal; }
.km-quote-list { list-style: none; margin: 6px 0 0; padding: 0; }
.km-quote-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.75; color: #3a3a3c; }
.km-q-when { color: #8a8a8e; flex: none; }

/* signature (cream tile + quote bar + lines) */
.km-sig { display: flex; align-items: center; gap: 15px; margin: 26px 18px 0; }
.km-sig-tile { flex: none; width: 60px; height: 60px; border-radius: 13px; background: #f1efe9; color: #0d0d0c;
  display: grid; place-items: center; font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.km-sig-tile svg { width: 32px; height: 32px; }
.km-sig-lines { border-left: 3px solid var(--km-tert); padding-left: 15px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.km-sig-name { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.km-sig-org { font-size: 15px; font-style: italic; color: #9a7c4c; line-height: 1.3; }
.km-sig-mail { font-size: 15px; color: #0a6cd4; line-height: 1.35; }
.km-sig-url { font-size: 14px; color: #8a8a8e; line-height: 1.3; }

/* per-message blue reply arrow (newest expanded message) */
.km-msg-reply { display: flex; margin: 6px 18px 0 auto; width: 34px; height: 34px;
  align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
.km-msg-reply svg { width: 22px; height: 22px; fill: none; stroke: var(--km-blue); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* attachment cards (grey on white, rendered PDF glyph) */
.km-attrow { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 0; }
.km-att { display: flex; align-items: center; gap: 14px; background: #efefef; border-radius: 14px; padding: 9px 12px 9px 14px; }
.km-att-doc { width: 46px; height: 58px; flex: none; display: block; }
.km-att-docwrap { position: relative; flex: none; width: 46px; height: 58px; }
.km-att-docwrap .km-att-doc { position: absolute; inset: 0; }
.km-att-badge { position: absolute; top: -4px; right: -5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #efefef; }
.km-att-badge svg { width: 11px; height: 11px; display: block; }
.km-att-meta { flex: 1; min-width: 0; }
.km-att-name { font-size: 16px; font-weight: 600; color: #1c1c1e; line-height: 1.25; overflow-wrap: anywhere; }
.km-att-size { margin-top: 3px; font-size: 14px; color: #8a8a8e; }
.km-att-made { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: #8a8a8e; }
.km-att-made svg { width: 12px; height: 12px; flex: none; display: block; }
.km-att-dl { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #e5e5e7; display: grid; place-items: center; }
.km-att-dl svg { width: 21px; height: 21px; display: block; }

/* floating bottom toolbar (light glass over white body) */
.km-toolbar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex;
  align-items: center; justify-content: space-between; pointer-events: none; }
.km-tb-actions, .km-tb-compose { pointer-events: auto; background: rgba(250,250,250,.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.22); }
.km-tb-actions { display: flex; align-items: center; gap: 2px; border-radius: 26px; padding: 0 6px; height: 50px; }
.km-tb-compose { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; }
.km-tool { width: 52px; height: 50px; display: grid; place-items: center; background: transparent; border: 0;
  cursor: pointer; transition: transform .1s ease; }
.km-tb-compose .km-tool { width: 50px; }
.km-tool svg { width: 22px; height: 22px; fill: none; stroke: var(--km-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- responsive: desktop iPhone device frame (dark bezel kept) ---- */
@media (max-width: 767px) {
  .km-device { max-width: none; }
  /* fill the viewport top-to-bottom while pinned: header(56) + 16 top pad = 72 pin top,
     16 bottom pad -> screen height = 100svh - 88, with even 16px padding above and below */
  .km-screen { height: calc(100svh - 88px); min-height: 500px; border-radius: 22px; }
}
@media (min-width: 768px) {
  .km-device { max-width: 396px; padding: 14px; background: #0b0b0d; border-radius: 54px;
    box-shadow: inset 0 0 0 2px #1c1c1e, inset 0 0 0 3px #000, 0 2px 3px rgba(255,255,255,.05),
      0 50px 100px -45px rgba(20,18,14,.5), 0 12px 30px rgba(20,18,14,.22); }
  .km-screen { border-radius: 42px; height: clamp(600px, 80svh, 780px); box-shadow: none; }
  .km-device::before { content: ""; position: absolute; z-index: 6; top: 26px; left: 50%;
    transform: translateX(-50%); width: 110px; height: 32px; border-radius: 17px; background: #000; }
  .km-status { height: 52px; padding-top: 6px; }
}
@media (min-width: 1000px) {
  .is-proof .km-stage { display: grid; grid-template-columns: minmax(300px, 1fr) 424px;
    grid-template-rows: auto auto; align-items: center; gap: clamp(48px, 6vw, 80px);
    max-width: 1000px; margin: 0 auto; }
  .is-proof .km-copy-top { grid-column: 1; grid-row: 1; align-self: end; max-width: 46ch; }
  .is-proof .km-copy-bottom { grid-column: 1; grid-row: 2; align-self: start; max-width: 46ch; margin-top: 20px; }
  .is-proof .km-device { grid-column: 2; grid-row: 1 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .km-scroll { scroll-behavior: auto; }
  .km-tool { transition: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .km-back, .km-updown { background: #e3e3e8; }
  .km-tb-actions, .km-tb-compose { background: rgba(250,250,250,.96); }
}

/* ---- Pin the phone to the top of the viewport while the user taps through it.
   Pattern: a tall wrapper (.km-pinwrap) creates a scroll runway; an inner element
   (.km-pin) is position:sticky and only wraps the device, so it has clean travel.
   The top of the mail window locks at the top of the screen and stays put during
   every click (rows/back/up-down never move the window) for the whole runway. ---- */
.is-proof .layout-grid { display: block; }
.is-proof .specimen-shell { display: block; }
.is-proof .km-copy-top { max-width: 46ch; margin-inline: auto; }
.is-proof .km-copy-bottom { max-width: 46ch; margin-inline: auto; }
/* Do NOT pin the phone with position:sticky: on iOS Safari an inner
   -webkit-overflow-scrolling:touch scroller inside a sticky/fixed ancestor stops
   capturing touch, so the page scrolls instead of the email (the "click in" bug).
   Instead the phone is a full-height in-flow element and gentle scroll-snap settles
   it filling the screen just below the fixed header. The inner email scroll is then
   a plain overflow scroller with no sticky ancestor and works natively. */
.km-pinwrap { position: relative; }
.km-pin { position: static; }
.km-device { scroll-snap-align: start; scroll-snap-stop: normal; }
html { scroll-snap-type: y proximity; scroll-padding-top: 72px; }
@media (min-width: 768px) { html { scroll-padding-top: calc(var(--nav-height) + 20px); } }