@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: #a8401c;
  --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: cover;
  object-position: 50% 50%;
}

.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(--ink);
  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(--ink);
  border-bottom: 1px solid var(--ink);
  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(--ink);
}

.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(--ink);
  border-bottom: 1px solid var(--ink);
}

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

.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,
.boundary-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(--grey);
  border-bottom: 1px solid var(--grey);
}

.specimen-tab {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--grey);
  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(--grey);
}

.status-row {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(0, 2fr);
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--grey);
  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(--ink);
  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(--grey);
}

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

.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(--ink);
  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(--ink);
}

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

.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(--ink);
}

.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(--ink);
}

.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(--ink);
  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(--ink);
  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(--ink);
  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(--ink);
}

.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(--ink);
}

.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(--ink);
}

.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(--ink);
}

.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(--ink);
}

.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(--ink);
  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(--ink);
  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(--ink);
  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(--ink);
}

.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(--ink);
  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(--ink);
    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(--ink);
  }

  .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(--grey); }
  .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: 68% 50%;
  transform: scale(1.12);
}

.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(--grey);
  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 680ms steps(1, end) forwards; }
.js .hero-title span { transform: translateY(112%); animation: title-uncover 1050ms cubic-bezier(.16,.84,.44,1) forwards; }
.js .hero-title span:nth-child(2) { animation-delay: 80ms; }
.js .hero-title span:nth-child(3) { animation-delay: 160ms; }
.js .hero-backdrop { animation: room-settles 1300ms cubic-bezier(.16,.84,.44,1) both; }

@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 500ms linear;
}
.argument-room.is-concluded .argument-final { opacity: 1; }
.relic-list li { opacity: .15; transition: opacity 380ms linear; }
.relic-list li.is-current { opacity: 1; }

.demo-beat { display: none; 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(--grey);
  color: var(--paper-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.8;
}

.offer-room {
  background: var(--ink);
  color: var(--paper);
}
.offer-room .seller-line,
.offer-room .pricing-detail,
.offer-room .included-list li { color: var(--paper-2); }
.offer-room .included-list,
.offer-room .included-list li,
.offer-room .offer-detail { border-color: var(--grey); }
.offer-room .offer-ledger { border-color: var(--paper); }
.offer-room .offer-row { border-color: var(--grey); }
.offer-room .transaction-cta { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.offer-room .transaction-cta:hover { background: var(--minium); border-color: var(--minium); color: var(--paper); }
.offer-room .trial-disclosure { color: var(--paper); }
.offer-room .pricing-links a { color: var(--paper); }

@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; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .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: ktc-settle-in linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
      will-change: opacity, transform;
    }

    /* Stagger members of a group by shifting the scroll range,
       not by time delay, so the eye reads them in sequence. */
    .mechanism-bay:nth-child(2),
    .boundary-row:nth-child(2),
    .faq-shell details:nth-child(even) { animation-range: entry 10% cover 28%; }
    .mechanism-bay:nth-child(3),
    .boundary-row:nth-child(3) { animation-range: entry 14% cover 32%; }
    .boundary-row:nth-child(4) { animation-range: entry 18% cover 36%; }

    /* The pricing offer holds the transactional CTA + full disclosure.
       Reveal it earlier and gentler so the commercial facts are never
       the thing the reader is waiting on. */
    .pricing-offer { animation-range: entry 2% cover 16%; }
  }
}

/* ---- 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; }
}