/* Tenfit launch site. Tokens are shared with the app (docs/site/BRIEF.md). */

:root {
  --paper: #f7f2ea;
  --card: #fffcf7;
  --sunken: #efe7db;
  --hairline: #e0d5c5;
  --hairline-strong: #b9aa94;
  --ink: #2a211c;
  --ink-muted: #6b5d52;
  --berry: #8a1f4b;
  --berry-deep: #6f173c;
  --berry-soft: #f4e1e8;
  --on-berry: #ffffff;
  --fit: #2f6b45;
  --between: #8a5a00;
  --off: #a8322a;
  --nail-nude: #e9c9b8;
  --nail-gold: #c39a4f;

  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --pad-x: clamp(20px, 5vw, 48px);
  --section-gap: clamp(80px, 12vw, 160px);
  --frame-shadow:
    0 30px 60px -30px rgb(42 33 28 / 0.35), 0 2px 6px rgb(42 33 28 / 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1513;
    --card: #241d1a;
    --sunken: #14100e;
    --hairline: #3a302b;
    --hairline-strong: #5c4e45;
    --ink: #f2e9df;
    --ink-muted: #b5a698;
    --berry: #e58aae;
    --berry-deep: #f0a7c3;
    --berry-soft: #3b1f2b;
    --on-berry: #1a1513;
    --fit: #7cc496;
    --between: #e2b35c;
    --off: #f08a80;
    --nail-nude: #8c6a5c;
    --nail-gold: #d9b56e;
  }
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
p {
  margin: 0;
}

em {
  font-style: italic;
  font-weight: 400;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

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

main:focus {
  outline: none;
}

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

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--berry);
  color: var(--on-berry);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease);
}

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

/* ---------- Type ---------- */

.display,
.display-2,
.problem-quote,
.festive-title,
.step-num,
.tile h3,
.wordmark {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings:
    "SOFT" 50,
    "WONK" 0;
}

.display {
  font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.display-2 {
  font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.display em,
.display-2 em {
  color: var(--berry);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--berry);
}

.lead {
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: 1.125rem;
}

.fine {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--berry);
  color: var(--on-berry);
  font: 600 1rem / 1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    box-shadow 160ms var(--ease),
    transform 120ms var(--ease);
}

.btn:hover {
  background: var(--berry-deep);
  box-shadow: 0 10px 24px -12px rgb(138 31 75 / 0.6);
}

.btn:active {
  transform: scale(0.97);
}

.btn-pill {
  padding: 0 18px;
  font-size: 0.9375rem;
}

.btn-primary {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1.0625rem;
}

.btn-large {
  min-height: 56px;
  padding: 0 36px;
  font-size: 1.125rem;
}

.text-link,
.nav-link,
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 6px;
  color: var(--berry);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition:
    background-color 160ms var(--ease),
    transform 120ms var(--ease);
}

.text-link:hover,
.footer-link:hover {
  color: var(--berry-deep);
  text-decoration-thickness: 2px;
}

.text-link:active,
.nav-link:active,
.footer-link:active,
.brand:active {
  transform: scale(0.97);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background-color 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 120ms var(--ease);
}

.wordmark {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.logo-nail {
  fill: var(--berry);
}

.logo-measure {
  fill: none;
  stroke: var(--card);
  stroke-width: 1.5;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  padding: 0 12px;
  color: var(--ink);
  font-weight: 400;
  font-size: 0.9375rem;
  text-decoration: none;
}

.nav-link:hover {
  background: var(--sunken);
}

@media (max-width: 719px) {
  .header-nav ul {
    display: none;
  }
}

/* ---------- Sections ---------- */

.band {
  padding-block: var(--section-gap);
  border-top: 1px solid var(--hairline);
}

.band-sunken {
  background: var(--sunken);
}

.section-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(32px, 6vw, 88px) var(--section-gap);
}

.hero-grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.hero-copy {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.hero-copy .lead {
  color: var(--ink);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 5fr 7fr;
  }
}

.hero-art {
  width: 100%;
}

.hand {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.blob {
  fill: var(--berry-soft);
  opacity: 0.6;
}

.finger {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linecap: round;
}

.hand-lines path:nth-child(-n + 2) {
  fill: none;
}

.nail,
.nail-berry {
  stroke: var(--ink);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.nail {
  fill: var(--nail-nude);
}

.nail-berry {
  fill: var(--berry);
}

.leader {
  stroke: var(--ink-muted);
  stroke-width: 1.25;
  stroke-dasharray: 4 5;
}

.mm-label,
.tick-sizes text,
.tick-mm text,
.size-string,
.tag-between text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

.mm-label {
  font-size: 24px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.ruler-base {
  stroke: var(--hairline-strong);
  stroke-width: 1.25;
}

.ticks line {
  stroke: var(--hairline-strong);
  stroke-width: 1.5;
}

.tick-lit {
  stroke-width: 4;
  stroke-linecap: round;
}

.tick-fit {
  stroke: var(--fit);
}

.tick-between {
  stroke: var(--between);
}

.tick-sizes text {
  font-size: 19px;
  fill: var(--ink);
}

.tick-mm text {
  font-size: 16px;
  fill: var(--ink-muted);
}

.tag-fit {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  fill: var(--fit);
  text-anchor: middle;
}

.tag-between rect {
  fill: var(--card);
  stroke: var(--between);
  stroke-width: 1.5;
}

.tag-between text {
  font-size: 20px;
  fill: var(--between);
}

.size-string {
  font-size: 30px;
  fill: var(--ink);
  white-space: pre;
}

@media (max-width: 599px) {
  .tag-fit {
    display: none;
  }

  /* The 640-unit art draws at about 0.55 scale here, so the text grows. */
  .mm-label {
    font-size: 36px;
    stroke-width: 8px;
  }

  .tick-sizes text {
    font-size: 30px;
  }

  .tick-mm text {
    font-size: 26px;
  }

  .tag-between text {
    font-size: 30px;
  }

  .size-string {
    font-size: 44px;
  }
}

/* The once-only hero sequence: runs only when main.js adds .is-playing. */
.js .hero-art .leader,
.js .hero-art .tick-lit,
.js .hero-art .tag-fit,
.js .hero-art .tag-between,
.js .hero-art .nail-berry {
  opacity: 0;
}

.js .hero-art.is-playing .leader {
  opacity: 1;
  transition: opacity 300ms var(--ease) calc(var(--n) * 150ms);
}

.js .hero-art.is-playing .tick-lit,
.js .hero-art.is-playing .tag-fit,
.js .hero-art.is-playing .tag-between {
  opacity: 1;
  transition: opacity 260ms var(--ease) calc(var(--n) * 150ms + 300ms);
}

.js .hero-art.is-playing .nail-berry {
  opacity: 1;
  transition: opacity 300ms var(--ease) calc(var(--n) * 120ms + 1100ms);
}

/* ---------- Problem ---------- */

.problem {
  text-align: center;
}

.problem-quote {
  max-width: 40ch;
  margin-inline: auto;
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  font-weight: 400;
  line-height: 1.3;
}

.problem-answer {
  margin-top: 28px;
  color: var(--ink-muted);
}

/* ---------- How it works ---------- */

.steps {
  display: grid;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 4vw, 56px);
  }
}

.step {
  display: grid;
  align-content: start;
  gap: 14px;
}

.step p {
  color: var(--ink-muted);
  max-width: 62ch;
}

.step h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.vignette {
  display: block;
  height: 120px;
  width: auto;
  max-width: 100%;
  margin-bottom: 8px;
}

.v-line,
.v-line path {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.v-dash {
  stroke-dasharray: 3 4;
}

.v-mono {
  stroke-width: 3;
}

.v-berry {
  fill: none;
  stroke: var(--berry);
  stroke-width: 1.75;
  stroke-linecap: round;
}

.v-berry-fill {
  fill: var(--berry);
}

.v-between {
  fill: none;
  stroke: var(--between);
  stroke-width: 2;
}

.v-berry-text {
  fill: var(--berry);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
}

.step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--berry);
  padding-bottom: 14px;
  position: relative;
}

.step-num::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hairline-strong);
  transform-origin: left;
}

.js .step:not(.is-in) .step-num::after {
  transform: scaleX(0);
}

.js .step.is-in .step-num::after {
  transition: transform 600ms var(--ease) calc(var(--stagger, 0ms) + 150ms);
}

/* ---------- Features ---------- */

.bento {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .tile-7 {
    grid-column: span 7;
  }

  .tile-5 {
    grid-column: span 5;
  }

  .tile-6 {
    grid-column: span 6;
  }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--card);
  transition:
    box-shadow 240ms var(--ease),
    transform 240ms var(--ease),
    opacity 500ms var(--ease);
}

.tile:hover {
  box-shadow: 0 12px 32px -16px rgb(138 31 75 / 0.25);
  transform: translateY(-2px);
}

.tile h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tile > p {
  color: var(--ink-muted);
}

.detail {
  margin-top: auto;
  padding-top: 12px;
}

/* 1. Sizing row */
.sizing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper);
  font-size: 0.9375rem;
}

.sr-finger {
  font-weight: 600;
}

.sr-dot {
  color: var(--ink-muted);
}

.pill-between {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--between);
  color: var(--between);
  font-size: 0.875rem;
  font-weight: 600;
}

.sr-arrow {
  color: var(--ink);
}

/* 2. Size strings */
.size-strings {
  display: grid;
  gap: 4px;
}

.size-line {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.unmeasured-tag {
  justify-self: start;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--berry-soft);
  color: var(--ink);
  font-size: 0.9375rem;
}

.blink {
  color: var(--berry);
}

@media (prefers-reduced-motion: no-preference) {
  .blink {
    animation: blink 1.2s steps(1, end) 3;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* 3. Receipt: never wraps, shrinks with its tile. */
.receipt {
  container-type: inline-size;
}

.receipt-inner {
  padding: 16px 18px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 8px;
  background: var(--paper);
  font-size: clamp(0.625rem, 5.2cqi, 0.9375rem);
}

.receipt-inner p {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  white-space: nowrap;
}

.receipt-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ink-muted);
  font-weight: 500;
  color: var(--berry);
}

/* 4. Board */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 639px) {
  .board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.board-col {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 96px;
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--sunken);
}

.board-head {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.board-head .mono {
  color: var(--ink-muted);
}

.chip {
  display: block;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--card);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.chip-ghost {
  border-style: dashed;
  background: transparent;
}

.chip-moving {
  border-color: var(--berry);
}

/* 5. Paper */
.paper-wrap {
  display: grid;
  place-items: center;
  padding-block: 12px 20px;
}

.paper {
  display: grid;
  gap: 10px;
  width: min(220px, 80%);
  aspect-ratio: 210 / 297;
  max-height: 200px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 24px -18px rgb(42 33 28 / 0.45);
  transform: rotate(-2deg);
  align-content: start;
}

.paper > span {
  display: block;
  height: 1px;
  background: #b9aa94;
}

.paper .paper-title {
  height: 6px;
  width: 50%;
  background: #2a211c;
}

.paper .w-60 {
  width: 60%;
}

.paper .w-80 {
  width: 80%;
}

.paper .w-40 {
  width: 40%;
}

.paper .paper-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  height: auto;
  background: none;
}

.paper-grid span {
  height: 18px;
  border: 1px solid #b9aa94;
}

/* 6. Device */
.device-wrap {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.device {
  display: grid;
  place-items: center;
  width: 84px;
  height: 140px;
  border: 1.5px dashed var(--hairline-strong);
  border-radius: 18px;
}

.device-caption {
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

/* ---------- See it ---------- */

.see-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .see-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
  }
}

.see-stage {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.app-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 600px;
  padding: 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--frame-shadow);
}

.app-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px;
  background: var(--paper);
}

@media (max-width: 759px) {
  .app-frame {
    max-width: 360px;
    aspect-ratio: 9 / 19.5;
    padding: 10px;
    border-radius: 32px;
  }

  .app-frame iframe {
    border-radius: 24px;
  }
}

.full-link {
  justify-self: center;
}

.try-list {
  display: grid;
  gap: 8px;
}

.try-title {
  margin-bottom: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.try-btn {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 10px 10px 0;
  background: transparent;
  color: var(--ink);
  font: 600 1rem / 1.2 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    transform 120ms var(--ease);
}

.try-btn:hover {
  background: var(--card);
}

.try-btn:active {
  transform: scale(0.97);
}

.try-btn[aria-pressed="true"] {
  border-left-color: var(--berry);
  background: var(--card);
  color: var(--berry);
}

/* Below 960 px the list sits above the app it drives, as a row of tabs. */
@media (max-width: 959px) {
  .try-list {
    order: -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .try-title {
    grid-column: 1 / -1;
  }

  .try-btn {
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;
    text-align: center;
    padding: 0 8px;
  }

  .try-btn[aria-pressed="true"] {
    border-bottom-color: var(--berry);
  }
}

/* ---------- Festive ---------- */

.festive {
  background: var(--berry);
  color: var(--on-berry);
}

.festive-edge {
  display: block;
  width: 100%;
  height: 16px;
  margin-block: 10px;
}

.festive-edge path {
  fill: none;
  stroke: var(--on-berry);
  stroke-width: 1;
  opacity: 0.25;
}

.festive-grid {
  display: grid;
  gap: 24px;
  padding-block: clamp(40px, 6vw, 72px);
}

@media (min-width: 860px) {
  .festive-grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 64px;
  }
}

.festive-title {
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.festive-grid p {
  max-width: 62ch;
}

/* ---------- Closing ---------- */

.closing {
  border-top: 0;
}

.closing-inner {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
}

.closing .lead {
  max-width: 48ch;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.footer-inner {
  display: grid;
  gap: 8px 24px;
  align-items: center;
  justify-items: center;
  padding-block: 20px;
  text-align: center;
}

@media (min-width: 640px) {
  .footer-inner {
    grid-template-columns: auto 1fr auto;
  }

  .footer-inner > p:nth-child(2) {
    text-align: center;
  }
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.footer-link {
  font-size: 0.875rem;
}

/* ---------- Reveal ---------- */

.js [data-reveal] {
  transition:
    opacity 500ms var(--ease) var(--stagger, 0ms),
    transform 500ms var(--ease) var(--stagger, 0ms);
}

.js [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(12px);
}

.js [data-reveal="rise"]:not(.is-in) {
  transform: translateY(24px);
}

/* Tiles keep their stagger on reveal; main.js zeroes it afterwards for a snappy hover. */
.js .tile.is-in {
  transition:
    box-shadow 240ms var(--ease),
    transform 300ms var(--ease) var(--stagger, 0ms),
    opacity 500ms var(--ease) var(--stagger, 0ms);
}

/* ---------- Reduced motion: final state, no transforms ---------- */

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

  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }

  .js [data-reveal],
  .js [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }

  .js .hero-art .leader,
  .js .hero-art .tick-lit,
  .js .hero-art .tag-fit,
  .js .hero-art .tag-between,
  .js .hero-art .nail-berry {
    opacity: 1;
  }

  .js .step .step-num::after,
  .js .step:not(.is-in) .step-num::after {
    transform: none;
  }

  .tile:hover,
  .btn:active,
  .try-btn:active,
  .text-link:active,
  .nav-link:active,
  .footer-link:active,
  .brand:active {
    transform: none;
  }
}