:root {
  --paper: #FBF6EC;
  --paper-deep: #F1E8D6;
  --ink: #17142B;
  --ink-soft: #26213F;
  --muted: #514C68;
  --muted-on-ink: #CFCAE3;
  --coral: #FB7185;
  --amber: #FBBF24;
  --mint: #5EEAD4;
  --blue: #60A5FA;
  --violet: #C084FC;
  --focus: #1D4ED8;
}

:root {
  --display: "Futura", "Futura PT", "Century Gothic", "Bahnschrift", "Trebuchet MS", sans-serif;
  --text: "Charter", "Bitstream Charter", "Sitka Text", "Cambria", "Georgia", serif;
  --ring: var(--focus);
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --measure: 40rem;
  --stroke: 2px;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: 1rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3, .wordmark, .button, .eyebrow, .folio, nav, legend, label, .demo-total, .face-count, .face-pill, .badge strong, .footer-line {
  font-family: var(--display);
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 7.2vw, 5.25rem); letter-spacing: -0.035em; overflow-wrap: anywhere; }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.75rem); }
h3 { font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.01em; }

p, ul, ol { margin-block: 0 1rem; }
ul, ol { padding-inline-start: 1.25rem; }
li { margin-block-end: 0.4rem; }
strong { font-weight: 700; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { background: var(--amber); color: var(--ink); text-decoration-color: var(--ink); }

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

.skip {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  border-radius: 999px;
  transform: translateY(-300%);
}
.skip:focus { transform: none; --ring: var(--amber); background: var(--ink); color: var(--paper); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.1rem var(--gutter);
  border-block-end: var(--stroke) solid var(--ink);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  padding-block: 0.25rem;
}
.wordmark b { font-weight: 700; background: var(--ink); color: var(--paper); padding: 0.05em 0.4em; border-radius: 0.4em; }
.wordmark:hover { background: none; }
.wordmark:hover b { background: var(--ink); }
.mark { flex: none; }

nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.4rem; margin: 0; padding: 0; list-style: none; }
nav li { margin: 0; }
nav a { display: inline-block; padding-block: 0.55rem; font-weight: 600; font-size: 0.98rem; text-decoration: none; }
nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }

.button {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--coral);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { background: var(--ink); color: var(--paper); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--amber); }
.button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--coral); }
.button-quiet { background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--mint); }
.button-quiet:hover { background: var(--paper); color: var(--ink); box-shadow: 7px 7px 0 var(--blue); }
nav .button-small { padding: 0.5rem 1.05rem; font-size: 0.95rem; box-shadow: 3px 3px 0 var(--coral); }

.actions { display: flex; flex-wrap: wrap; gap: 1.1rem 1.25rem; margin-block: 1.75rem 1rem; }
.fine { font-size: 0.95rem; color: var(--muted); }

.gate { position: relative; display: inline-flex; gap: 0.2em; align-items: stretch; block-size: 1.15em; vertical-align: -0.2em; }
.gate i { display: block; inline-size: 0.24em; border-radius: 999px; background: var(--ink); transform-origin: center top; }
.gate i:nth-child(1) { background: var(--coral); }
.gate i:nth-child(2) { background: var(--amber); }
.gate i:nth-child(3) { background: var(--mint); }
.gate i:nth-child(4) { background: var(--blue); }
.gate b {
  position: absolute;
  inset-inline: -0.22em;
  inset-block-start: calc(50% - 0.11em);
  block-size: 0.22em;
  border-radius: 999px;
  background: var(--violet);
  transform: rotate(-24deg);
}
.gate i, .gate b { outline: 1.5px solid var(--ink); outline-offset: -0.5px; }
.gate-small { font-size: 0.95em; margin-inline-end: 0.35em; }
.tally { display: inline-flex; flex-wrap: wrap; gap: 0.35em 0.75em; }

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-block-end: 1.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero h1 { font-size: clamp(2.75rem, 9.4vw, 7.25rem); line-height: 0.9; margin-block-end: 1.75rem; }
.hero .line { display: block; }
.hero .line-2 { margin-inline-start: clamp(0rem, 6vw, 5.5rem); }
.hero em { font-style: normal; background: linear-gradient(transparent 58%, var(--amber) 58%, var(--amber) 92%, transparent 92%); padding-inline: 0.06em; }
.lead { max-inline-size: var(--measure); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; }

.hero-stage { position: relative; min-block-size: 24rem; display: grid; align-items: end; justify-items: center; padding-block-start: 3rem; }

.spectrum { position: absolute; inset-block: -6rem 12%; inset-inline: 8% 4%; display: flex; gap: 5%; transform: rotate(-9deg); }
.spectrum i { flex: 1; border: var(--stroke) solid var(--ink); border-radius: 999px; transform-origin: center top; }
.spectrum i:nth-child(1) { background: var(--coral); margin-block-end: 22%; }
.spectrum i:nth-child(2) { background: var(--amber); margin-block-end: 6%; }
.spectrum i:nth-child(3) { background: var(--mint); margin-block-end: 30%; }
.spectrum i:nth-child(4) { background: var(--blue); margin-block-end: 0; }
.spectrum i:nth-child(5) { background: var(--violet); margin-block-end: 16%; }

.demo {
  --ring: var(--amber);
  position: relative;
  counter-reset: taps;
  inline-size: min(100%, 23rem);
  min-inline-size: 0;
  margin: 0;
  padding: 1.4rem 1.4rem 1.2rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 1.75rem;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 10px 10px 0 var(--amber);
  transform: rotate(2.5deg);
}
.demo legend {
  float: inline-start;
  inline-size: 100%;
  padding: 0;
  margin-block-end: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-on-ink);
}
.demo-name { clear: both; margin: 0 0 1rem; font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.demo-strokes { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.tapgate { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; }
.tap {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  inline-size: 1.75rem;
  block-size: 5.25rem;
  border: var(--stroke) solid var(--muted-on-ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.tap:hover { transform: translateY(-3px); }
.tap:checked { counter-increment: taps; border-color: var(--paper); }
.tap:nth-of-type(1):checked { background: var(--coral); }
.tap:nth-of-type(2):checked { background: var(--amber); }
.tap:nth-of-type(3):checked { background: var(--mint); }
.tap:nth-of-type(4):checked { background: var(--blue); }
.tap-strike { inline-size: 2.25rem; block-size: 2.25rem; border-style: dashed; }
.tap-strike:checked { background: var(--violet); border-style: solid; }
.slash {
  position: absolute;
  inset-inline: -0.5rem 2.2rem;
  inset-block-start: calc(50% - 0.25rem);
  block-size: 0.5rem;
  border-radius: 999px;
  background: var(--violet);
  outline: 1.5px solid var(--ink);
  transform: rotate(-24deg) scaleX(0);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.tap-strike:checked + .slash { transform: rotate(-24deg) scaleX(1); }
.demo-total { display: flex; align-items: baseline; gap: 0.75rem; margin: 1rem 0 0.25rem; font-weight: 700; }
.demo-total::after { content: counter(taps); font-size: 4.5rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.demo-label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-on-ink); }
.demo-hint { margin: 0; font-size: 0.9rem; color: var(--muted-on-ink); }

.section { padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); }
.section > h2, .split-head h2 { max-inline-size: 18ch; margin-block-end: 1.25rem; }
.section > p, .prose > ul, .prose > p { max-inline-size: var(--measure); }
.section + .section { border-block-start: var(--stroke) solid var(--ink); }
.more { margin-block-start: 2rem; font-family: var(--display); font-weight: 700; }

.band-ink {
  --ring: var(--amber);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  padding-inline-start: clamp(1rem, 22vw, 20rem);
}
.band-ink h2 { font-size: clamp(2rem, 6vw, 4.5rem); margin-block-end: 1.5rem; }
.band-ink p { max-inline-size: var(--measure); color: var(--muted-on-ink); font-size: 1.15rem; }
.band-ink a { color: var(--paper); font-family: var(--display); font-weight: 700; }
.band-ink a:hover { color: var(--ink); }

.pillars { counter-reset: pillar; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.pillar { counter-increment: pillar; margin: 0; padding: 1.25rem 1.25rem 1.5rem; border: var(--stroke) solid var(--ink); border-radius: 1.25rem; background: var(--paper-deep); }
.pillar::before {
  content: counter(pillar, decimal-leading-zero);
  display: inline-block;
  margin-block-end: 2.5rem;
  padding: 0.1rem 0.7rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
}
.pillar:nth-child(2) { margin-block-start: 2.5rem; }
.pillar:nth-child(3) { margin-block-start: 5rem; }
.pillar:nth-child(4) { margin-block-start: 1.25rem; }
.pillar h3 { margin-block-end: 0.6rem; }
.pillar p { margin: 0; }
.pillar-coral::before, .card-coral::before { background: var(--coral); }
.pillar-amber::before, .card-amber::before { background: var(--amber); }
.pillar-mint::before, .card-mint::before { background: var(--mint); }
.pillar-blue::before, .card-blue::before { background: var(--blue); }
.card-violet::before { background: var(--violet); }

.section-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); align-items: start; }
.ledger { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); border: var(--stroke) solid var(--ink); border-radius: 1.25rem; overflow: hidden; }
.ledger-col { padding: 1.5rem; }
.ledger-col h3 { margin-block-end: 1rem; }
.ledger-col ul { margin: 0; padding: 0; list-style: none; }
.ledger-col li { position: relative; margin: 0; padding-block: 0.6rem; padding-inline-start: 1.4rem; border-block-start: 1px solid currentColor; }
.ledger-col li::before { content: ""; position: absolute; inset-inline-start: 0.2rem; inset-block: 0.75rem; inline-size: 0.3rem; border-radius: 999px; background: var(--amber); outline: 1.5px solid var(--ink); }
.ledger-can { background: var(--paper-deep); }
.ledger-cannot { --ring: var(--amber); background: var(--ink); color: var(--paper); }
.ledger-cannot li::before { background: var(--mint); inset-block: calc(50% - 0.15rem) auto; block-size: 0.3rem; inline-size: 0.9rem; inset-inline-start: 0; }

.section-themes { position: relative; overflow: hidden; padding-inline-end: clamp(1rem, 40vw, 34rem); }
.spectrum-wide { inset-block: -4rem -4rem; inset-inline: auto 3%; inline-size: min(34vw, 26rem); transform: rotate(12deg); }
.section-planned { background: var(--paper-deep); }
.section-planned > h2::after { content: ""; display: block; inline-size: 4.5rem; block-size: 0; margin-block-start: 0.9rem; border-block-start: 4px dashed var(--ink); }

.page-head { padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3.5rem); border-block-end: var(--stroke) solid var(--ink); }
.page-head h1 { max-inline-size: 14ch; margin-block-end: 1.25rem; }
.page-head .lead { margin: 0; }
.folio { margin-block-end: 1.5rem; font-size: 1.7rem; line-height: 1; }
.page-head-404 { border: 0; min-block-size: 55vh; }

.draft {
  margin: 2rem var(--gutter) 0;
  max-inline-size: 46rem;
  padding: 1rem 1.25rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 1rem;
  background: var(--amber);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-0.6deg);
}
.draft strong { font-family: var(--display); }

.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin-block: 2.25rem 0.9rem; max-inline-size: 24ch; }
.prose h2:first-child { margin-block-start: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: 1.75rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.card { position: relative; margin: 0; padding: 2.4rem 1.25rem 1.25rem; border: var(--stroke) solid var(--ink); border-radius: 1.25rem; background: var(--paper); }
.card::before { content: ""; position: absolute; inset-block-start: -0.9rem; inset-inline-start: 1.25rem; inline-size: 0.8rem; block-size: 2.6rem; border: var(--stroke) solid var(--ink); border-radius: 999px; }
.card:nth-child(3n + 2) { transform: translateY(1rem); }
.card h3 { margin-block-end: 0.5rem; }
.card p { margin: 0; }

.plain { padding: 0; list-style: none; max-inline-size: var(--measure); }
.plain li { margin: 0; padding-block: 0.8rem; border-block-start: 1px solid var(--ink); }
.plain strong { font-family: var(--display); }

.steps { counter-reset: step; margin: 0; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); list-style: none; }
.step { counter-increment: step; position: relative; margin: 0; max-inline-size: 44rem; padding-block-end: 2.75rem; padding-inline-start: 5rem; }
.step:nth-child(even) { margin-inline-start: clamp(0rem, 12vw, 11rem); }
.step::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.3rem;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  display: grid;
  place-items: center;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--coral);
}
.step:nth-child(2)::before { background: var(--amber); }
.step:nth-child(3)::before { background: var(--mint); }
.step:nth-child(4)::before { background: var(--blue); }
.step h2 { margin-block-end: 0.75rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.step p { margin: 0; }
.steps + .section { border-block-start: var(--stroke) solid var(--ink); }

.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 5vw, 5rem); padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.q { padding-block: 1.5rem; border-block-start: var(--stroke) solid var(--ink); }
.q h2 { font-size: 1.35rem; line-height: 1.15; margin-block-end: 0.6rem; letter-spacing: -0.01em; }
.q p { margin: 0; }

.badges { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.badge { display: grid; gap: 0.15rem; margin: 0; min-inline-size: 11rem; padding: 0.9rem 1.25rem; border: var(--stroke) dashed var(--ink); border-radius: 1rem; background: var(--paper); }
.badge strong { font-size: 1.2rem; }
.badge span { font-size: 0.9rem; color: var(--muted); }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 2.25rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.swatch { margin: 0; }
.swatch h3 { margin-block-end: 0.7rem; }
.swatch-note { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--muted); }
.faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--stroke) solid var(--ink); border-radius: 1.1rem; overflow: hidden; box-shadow: 6px 6px 0 var(--ink); }
.swatch-single .faces { grid-template-columns: minmax(0, 1fr); }
.swatch:nth-child(odd) .faces { transform: rotate(-0.8deg); }
.swatch:nth-child(3n) .faces { transform: rotate(0.9deg); }
.face { display: grid; gap: 0.6rem; padding: 0.7rem; background: var(--t-bg); color: var(--t-text); }
.face-band { display: block; block-size: 1.6rem; border-radius: calc(var(--t-radius) / 2); background: var(--t-gradient); }
.face-card { display: grid; gap: 0.35rem; justify-items: start; padding: 0.7rem; border: 1px solid var(--t-border); border-radius: var(--t-radius); background: var(--t-surface); color: var(--t-text); }
.face-count { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.face-pill { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--t-accent); color: var(--t-accent-text); font-size: 0.78rem; font-weight: 700; }
.face-dots { display: flex; gap: 0.3rem; }
.face-dots i { inline-size: 0.7rem; block-size: 0.7rem; border-radius: 50%; }
.dot-accent { background: var(--t-accent); }
.dot-success { background: var(--t-success); }
.dot-warning { background: var(--t-warning); }
.dot-danger { background: var(--t-danger); }

.section-form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem clamp(1.5rem, 5vw, 5rem); align-items: start; }
.section-form > h2 { grid-column: 1 / -1; margin: 0; }
.form { position: relative; max-inline-size: 40rem; }
.field { display: grid; gap: 0.4rem; margin-block-end: 1.4rem; }
label { font-weight: 700; font-size: 1.05rem; }
.optional { font-weight: 500; color: var(--muted); }
.help { font-size: 0.92rem; color: var(--muted); }
select, textarea, input[type="email"], input[type="text"] {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.7rem 0.9rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 0.8rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
textarea { resize: vertical; min-block-size: 11rem; }
select:focus-visible, textarea:focus-visible, input:focus-visible { outline-offset: 2px; border-radius: 0.8rem; box-shadow: 5px 5px 0 var(--mint); }
button.button { font-family: var(--display); }
.field-trap { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-note { padding: 1.25rem; border: var(--stroke) solid var(--ink); border-radius: 1.25rem; background: var(--paper-deep); transform: rotate(1deg); }
.form-note h3 { margin-block-end: 0.75rem; }
.form-note ul { margin: 0; }

.site-footer { --ring: var(--amber); margin-block-start: clamp(2rem, 5vw, 4rem); padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 2rem; background: var(--ink); color: var(--paper); }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; margin-block-end: 2.5rem; }
.footer-line { margin: 0; max-inline-size: 12ch; font-size: clamp(1.6rem, 3.6vw, 2.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }
.site-footer .gate i, .site-footer .gate b { outline-color: var(--ink); }
.site-footer nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; }
.site-footer nav ul { display: block; }
.site-footer nav a { padding-block: 0.4rem; }
.site-footer a:hover { color: var(--ink); }
.site-footer .fine { margin: 0; padding-block-start: 1.25rem; border-block-start: 1px solid var(--muted-on-ink); color: var(--muted-on-ink); }

@media (max-width: 62rem) {
  .hero, .section-split, .section-form, .footer-top { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { min-block-size: 0; padding-block: 3rem 1rem; }
  .spectrum { inset-block: 0.5rem 14%; inset-inline: 18% 18%; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:nth-child(n) { margin-block-start: 0; }
  .pillar:nth-child(even) { transform: translateY(1.25rem); }
  .band-ink { padding-inline-start: var(--gutter); }
  .section-themes { padding-inline-end: var(--gutter); padding-block-end: 11rem; }
  .spectrum-wide { inset-block: auto -5rem; inset-inline: 30% 6%; inline-size: auto; block-size: 12rem; }
  .qa { grid-template-columns: minmax(0, 1fr); }
  .form-note { transform: none; }
}

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .site-header { padding-block: 0.8rem; }
  nav ul { gap: 0 1.1rem; }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar:nth-child(even) { transform: none; }
  .pillar::before { margin-block-end: 1.25rem; }
  .card:nth-child(3n + 2) { transform: none; }
  .step { padding-inline-start: 0; padding-block-start: 4.25rem; }
  .step:nth-child(even) { margin-inline-start: 0; }
  .step::before { inset-block-start: 0; }
  .site-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo { transform: rotate(1.2deg); box-shadow: 6px 6px 0 var(--amber); padding: 1.1rem; }
  .tap { inline-size: 1.6rem; block-size: 4.5rem; }
  .tapgate { gap: 0.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes drop { from { opacity: 0; transform: translateY(-0.75rem); } }
  @keyframes rise { from { opacity: 0; transform: translateY(1.1em); } }
  @keyframes draw { from { transform: scaleY(0); } }
  @keyframes strike { from { transform: rotate(-24deg) scaleX(0); } }
  @keyframes land { from { opacity: 0; transform: translateY(2.5rem) rotate(9deg); } }
  @keyframes settle { from { transform: translateY(1.5rem); } }

  .site-header { animation: drop 0.5s ease-out both; }
  .hero .eyebrow, .page-head .folio { animation: rise 0.5s 0.1s ease-out both; }
  .hero .line, .page-head h1 { animation: rise 0.6s 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .hero .line-2 { animation-delay: 0.3s; }
  .hero .lead, .page-head .lead { animation: rise 0.6s 0.46s ease-out both; }
  .hero .actions, .hero .fine, .page-head .actions { animation: rise 0.6s 0.58s ease-out both; }
  .hero .spectrum i { animation: draw 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .hero .spectrum i:nth-child(1) { animation-delay: 0.35s; }
  .hero .spectrum i:nth-child(2) { animation-delay: 0.43s; }
  .hero .spectrum i:nth-child(3) { animation-delay: 0.51s; }
  .hero .spectrum i:nth-child(4) { animation-delay: 0.59s; }
  .hero .spectrum i:nth-child(5) { animation-delay: 0.67s; }
  .demo { animation: land 0.7s 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

  .eyebrow .gate i, .folio .gate i { animation: draw 0.3s ease-out both; }
  .eyebrow .gate i:nth-child(1), .folio .gate i:nth-child(1) { animation-delay: 0.3s; }
  .eyebrow .gate i:nth-child(2), .folio .gate i:nth-child(2) { animation-delay: 0.38s; }
  .eyebrow .gate i:nth-child(3), .folio .gate i:nth-child(3) { animation-delay: 0.46s; }
  .eyebrow .gate i:nth-child(4), .folio .gate i:nth-child(4) { animation-delay: 0.54s; }
  .eyebrow .gate b, .folio .gate b { animation: strike 0.25s 0.66s ease-out both; }

  
  @supports (animation-timeline: view()) {
    .pillar, .card, .step, .swatch, .q, .ledger {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .gate i, .gate b, .spectrum i, .tap:checked, .slash { forced-color-adjust: none; }
  .button { box-shadow: none; }
}

@media print {
  .site-header nav, .hero-stage, .skip, .spectrum { display: none; }
  body { background: #fff; }
}
.t-prism-light {
  --t-bg: #FBFBFE;
  --t-surface: #FFFFFF;
  --t-text: #1B1830;
  --t-accent: #9333EA;
  --t-accent-text: #FFFFFF;
  --t-border: #E4E2F0;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #FB7185, #FBBF24, #5EEAD4, #60A5FA, #C084FC);
  --t-radius: 16px;
}
.t-prism-dark {
  --t-bg: #141226;
  --t-surface: #1E1B33;
  --t-text: #F5F3FF;
  --t-accent: #C084FC;
  --t-accent-text: #1B1830;
  --t-border: #352F55;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #FB7185, #FBBF24, #5EEAD4, #60A5FA, #C084FC);
  --t-radius: 16px;
}
.t-midnight-neon-dark {
  --t-bg: #0B0F1A;
  --t-surface: #111827;
  --t-text: #E6FFFA;
  --t-accent: #5EEAD4;
  --t-accent-text: #0B0F1A;
  --t-border: #1F3A3A;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #5EEAD4, #5EEAD4);
  --t-radius: 16px;
}
.t-aurora-light {
  --t-bg: #F3F4FB;
  --t-surface: #FFFFFF;
  --t-text: #1E1B4B;
  --t-accent: #5B46D6;
  --t-accent-text: #FFFFFF;
  --t-border: #D9DBF0;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #5FE1CA, #B9A5FF);
  --t-radius: 16px;
}
.t-aurora-dark {
  --t-bg: #0F1130;
  --t-surface: #181B45;
  --t-text: #EEF0FF;
  --t-accent: #5FE1CA;
  --t-accent-text: #0F1130;
  --t-border: #2E3270;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #5FE1CA, #B9A5FF);
  --t-radius: 16px;
}
.t-pastel-pop-light {
  --t-bg: #FFF7F9;
  --t-surface: #FFFFFF;
  --t-text: #3B1F2E;
  --t-accent: #C8236C;
  --t-accent-text: #FFFFFF;
  --t-border: #F6CFE0;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #FFE0ED, #FFF5D6, #E9E1FF, #D9F7EC);
  --t-radius: 16px;
}
.t-pastel-pop-dark {
  --t-bg: #2A1F28;
  --t-surface: #352A34;
  --t-text: #FFEFF5;
  --t-accent: #FF8CC0;
  --t-accent-text: #2A1F28;
  --t-border: #524050;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #FF8CC0, #C4B5FD);
  --t-radius: 16px;
}
.t-retro-arcade-dark {
  --t-bg: #190F2C;
  --t-surface: #241642;
  --t-text: #FAF8FF;
  --t-accent: #F0ED65;
  --t-accent-text: #190F2C;
  --t-border: #3D2A6B;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #F0ED65, #F0ED65);
  --t-radius: 8px;
}
.t-ocean-breeze-light {
  --t-bg: #E7F6F8;
  --t-surface: #FFFFFF;
  --t-text: #0B2F33;
  --t-accent: #087B88;
  --t-accent-text: #FFFFFF;
  --t-border: #BFE0E6;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #E7F6F8, #BFE9EF, #8FD6E0);
  --t-radius: 16px;
}
.t-ocean-breeze-dark {
  --t-bg: #07262A;
  --t-surface: #0E3539;
  --t-text: #E7F6F8;
  --t-accent: #5CD6E3;
  --t-accent-text: #07262A;
  --t-border: #1F565C;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #5CD6E3, #5CD6E3);
  --t-radius: 16px;
}
.t-forest-glow-light {
  --t-bg: #F1F8F2;
  --t-surface: #FFFFFF;
  --t-text: #14261E;
  --t-accent: #1F7A3A;
  --t-accent-text: #FFFFFF;
  --t-border: #C5DEC8;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #1F7A3A, #1D4ED8);
  --t-radius: 16px;
}
.t-forest-glow-dark {
  --t-bg: #14261E;
  --t-surface: #1C3328;
  --t-text: #EFFBEF;
  --t-accent: #A3E6A1;
  --t-accent-text: #14261E;
  --t-border: #2F5240;
  --t-success: #A3E6A1;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #14261E, #1F4A33, #3C7A4C);
  --t-radius: 16px;
}
.t-rainbow-light {
  --t-bg: #FFFDF7;
  --t-surface: #FFFFFF;
  --t-text: #1F1A17;
  --t-accent: #D92D6F;
  --t-accent-text: #FFFFFF;
  --t-border: #F0E4D0;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(90deg, #EF4444 0%, #EF4444 20%, #F59E0B 20%, #F59E0B 40%, #22C55E 40%, #22C55E 60%, #3B82F6 60%, #3B82F6 80%, #A855F7 80%, #A855F7 100%);
  --t-radius: 16px;
}
.t-rainbow-dark {
  --t-bg: #191421;
  --t-surface: #221B2C;
  --t-text: #FFF8F0;
  --t-accent: #FBBF24;
  --t-accent-text: #191421;
  --t-border: #3B3049;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(90deg, #EF4444 0%, #EF4444 20%, #F59E0B 20%, #F59E0B 40%, #22C55E 40%, #22C55E 60%, #3B82F6 60%, #3B82F6 80%, #A855F7 80%, #A855F7 100%);
  --t-radius: 16px;
}
.t-minimal-light-light {
  --t-bg: #F5F6F8;
  --t-surface: #FFFFFF;
  --t-text: #1E293B;
  --t-accent: #475569;
  --t-accent-text: #FFFFFF;
  --t-border: #DDE1E7;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #475569, #2563EB);
  --t-radius: 8px;
}
.t-minimal-dark-dark {
  --t-bg: #15171B;
  --t-surface: #1D2025;
  --t-text: #E5E7EB;
  --t-accent: #E5E7EB;
  --t-accent-text: #15171B;
  --t-border: #30353C;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #E5E7EB, #93C5FD);
  --t-radius: 8px;
}
.t-cyberpunk-dark {
  --t-bg: #121127;
  --t-surface: #1A1838;
  --t-text: #F4F1FF;
  --t-accent: #F472B6;
  --t-accent-text: #121127;
  --t-border: #352F6A;
  --t-success: #22D3EE;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #F472B6, #22D3EE);
  --t-radius: 8px;
}
.t-solar-flare-light {
  --t-bg: #FFF8EC;
  --t-surface: #FFFFFF;
  --t-text: #2B1A05;
  --t-accent: #C2410C;
  --t-accent-text: #FFFFFF;
  --t-border: #F5DFB8;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #FB923C, #FACC15);
  --t-radius: 16px;
}
.t-solar-flare-dark {
  --t-bg: #1F1308;
  --t-surface: #2B1B0C;
  --t-text: #FFF4E0;
  --t-accent: #FB923C;
  --t-accent-text: #1F1308;
  --t-border: #4A3119;
  --t-success: #4ADE80;
  --t-warning: #FACC15;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #FB923C, #FACC15);
  --t-radius: 16px;
}
.t-lavender-dream-light {
  --t-bg: #F6F2FF;
  --t-surface: #FFFFFF;
  --t-text: #2A1D4E;
  --t-accent: #7C3AED;
  --t-accent-text: #FFFFFF;
  --t-border: #DCD3F5;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #EEE7FF, #DCCFFF, #C4B5FD);
  --t-radius: 16px;
}
.t-lavender-dream-dark {
  --t-bg: #1C1530;
  --t-surface: #261D40;
  --t-text: #F3EEFF;
  --t-accent: #A78BFA;
  --t-accent-text: #1C1530;
  --t-border: #3F3363;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #A78BFA, #A78BFA);
  --t-radius: 16px;
}
.t-rose-gold-light {
  --t-bg: #FBF1F0;
  --t-surface: #FFFFFF;
  --t-text: #3A2325;
  --t-accent: #9E5460;
  --t-accent-text: #FFFFFF;
  --t-border: #EAC9C6;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #F6D4D1, #E8B4B8, #B76E79);
  --t-radius: 16px;
}
.t-rose-gold-dark {
  --t-bg: #241617;
  --t-surface: #301F21;
  --t-text: #FBEDEC;
  --t-accent: #E3A1A8;
  --t-accent-text: #241617;
  --t-border: #4F3639;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #E3A1A8, #F6D4D1);
  --t-radius: 16px;
}
.t-sunset-light {
  --t-bg: #FFF5F0;
  --t-surface: #FFFFFF;
  --t-text: #2E1326;
  --t-accent: #BE185D;
  --t-accent-text: #FFFFFF;
  --t-border: #F4D1C4;
  --t-success: #15803D;
  --t-warning: #B45309;
  --t-danger: #BE123C;
  --t-gradient: linear-gradient(135deg, #FB923C, #EC4899, #7C3AED);
  --t-radius: 16px;
}
.t-sunset-dark {
  --t-bg: #1E1024;
  --t-surface: #2A1733;
  --t-text: #FFF1F7;
  --t-accent: #FB923C;
  --t-accent-text: #1E1024;
  --t-border: #4A2C59;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: linear-gradient(135deg, #FB923C, #EC4899, #7C3AED);
  --t-radius: 16px;
}
.t-deep-space-dark {
  --t-bg: #0B1023;
  --t-surface: #131A35;
  --t-text: #EDF1FF;
  --t-accent: #8B98F0;
  --t-accent-text: #0B1023;
  --t-border: #283366;
  --t-success: #4ADE80;
  --t-warning: #FBBF24;
  --t-danger: #FB7185;
  --t-gradient: radial-gradient(circle at 30% 20%, #1B2447, #0B1023 70%);
  --t-radius: 16px;
}
.t-high-contrast-light {
  --t-bg: #FFFFFF;
  --t-surface: #FFFFFF;
  --t-text: #000000;
  --t-accent: #0000CC;
  --t-accent-text: #FFFFFF;
  --t-border: #000000;
  --t-success: #006600;
  --t-warning: #7A4A00;
  --t-danger: #B20000;
  --t-gradient: linear-gradient(135deg, #0000CC, #B20000);
  --t-radius: 8px;
}
.t-high-contrast-dark {
  --t-bg: #000000;
  --t-surface: #000000;
  --t-text: #FFFFFF;
  --t-accent: #FFFF00;
  --t-accent-text: #000000;
  --t-border: #FFFFFF;
  --t-success: #66FF66;
  --t-warning: #FFD36B;
  --t-danger: #FF8080;
  --t-gradient: linear-gradient(135deg, #FFFF00, #66FFFF);
  --t-radius: 8px;
}