.section-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--space-content-inline);
}

.section-eyebrow {
  font-family: var(--font-loud);
}

.module-label,
.readout-header,
.answer-header,
.readout-row,
.citation,
.check-link,
.copy-button,
.instruction {
  font-family: var(--font-mono);
}

.section-eyebrow {
  color: var(--red);
}

.module-label,
.readout-header,
.answer-header {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  line-height: 1.3;
  text-transform: uppercase;
}

.prop {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

.has-toys .prop {
  visibility: hidden;
}

.toy-gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.ask-section,
.services-section {
  position: relative;
}

.numerals {
  position: relative;
}

.check-wrap {
  position: relative;
  max-width: 44rem;
}

.check-block {
  position: relative;
  z-index: 5;
}

.services-heading,
.service-row {
  position: relative;
}

.prop--arch-red {
  right: clamp(1rem, 4vw, 3rem);
  bottom: -114px;
  width: 150px;
  height: auto;
}

.prop--sphere-blue {
  top: -54px;
  right: -24px;
  z-index: 4;
  width: 120px;
  height: auto;
}

.prop--cube-yellow {
  top: -68px;
  left: clamp(1rem, 8vw, 8rem);
  width: 130px;
  height: auto;
}

.prop--cone-purple {
  right: clamp(2rem, 12vw, 10rem);
  bottom: -40px;
  width: 110px;
  height: auto;
}

.prop--halfdisc-ink {
  top: -70px;
  right: 18%;
  width: 140px;
  height: auto;
}

.ask-section {
  border-top: 1px solid var(--color-faint);
  background: var(--paper);
  padding-block: var(--space-section);
}

.ask-container {
  max-width: none;
  margin-inline: 0;
}

.paper-tile {
  position: relative;
  isolation: isolate;
  max-width: 52rem;
  margin: 0 0 var(--space-block, 4rem);
  padding: 32.5px 40px 2.4rem 38px;
  color: var(--color-ink);
}

.paper-tile::before {
  position: absolute;
  inset: -29.5px -65px -46px -39.5px;
  z-index: -1;
  border: 1px solid transparent;
  border-image: url("../assets/props/tile-paper.webp") 160 160 252 160 fill / 80px 80px 126px 80px / 0 stretch;
  pointer-events: none;
  content: "";
}

.paper-tile__title {
  margin: 0 0 1.05rem;
  line-height: 0;
}

.paper-tile__title img {
  display: block;
  width: clamp(10rem, 38%, 274.5px);
  height: auto;
}

.paper-tile .manifesto {
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.2rem);
  line-height: 1.8;
  letter-spacing: 0;
}

.paper-tile .source-line {
  margin-top: 1.6rem;
}

.manifesto {
  max-width: 26ch;
  margin: 0;
  color: var(--color-ink-dim);
  font-size: var(--manifesto-size);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: pretty;
}

.manifesto .w {
  color: var(--color-ink-dim);
  transition: color var(--duration-word) ease;
}

.manifesto .w.is-lit {
  color: var(--color-ink);
}

.source-line,
.outcome-source,
.board-footnote {
  max-width: 70ch;
  margin: 1.5rem 0 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.source-line a,
.outcome-source a,
.check-link {
  color: inherit;
  text-underline-offset: 0.25em;
}

.source-line a:hover,
.source-line a:focus-visible,
.outcome-source a:hover,
.outcome-source a:focus-visible,
.check-link:hover,
.check-link:focus-visible {
  color: var(--color-accent);
}

.numerals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  width: 100%;
  margin: clamp(3rem, 7vw, 5rem) 0 0;
}

.numeral-patch {
  position: relative;
  aspect-ratio: 1000 / 1080;
  overflow: visible;
}

.numeral-patch__face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.numeral-patch__face { z-index: 1; }

.numeral-patch__source {
  position: absolute;
  left: var(--hit-x);
  top: var(--hit-y);
  z-index: 2;
  display: block;
  width: var(--hit-w);
  height: var(--hit-h);
}

.numeral-patch__source:focus-visible {
  outline: 2px solid var(--ink);
}

/* POSE-1 (Cyril 2026-09-04 "it just looks so uniform"): three patches pinned by hand, none of them square */
/* POSE-2 (Cyril 2026-09-04 "make the middle card not skewed and the left and right just a bit"). */
.numeral-patch--red { --pose-rot: -1.4deg; --pose-y: 3px; }
.numeral-patch--blue { --pose-rot: 0deg; --pose-y: -4px; }
.numeral-patch--yellow { --pose-rot: 1.6deg; --pose-y: 5px; }

[data-slide] {
  --slide-y: 40px;
  transform: translate3d(0, calc(var(--slide-y, 0px) + var(--parallax, 0px) + var(--pose-y, 0px)), 0) rotate(var(--pose-rot, 0deg)) scale(var(--pose-scale, 1));
  opacity: 1;
  transition: transform 0.7s var(--ease) var(--slide-delay, 0ms);
  will-change: transform;
}

[data-slide="x"] {
  transform: translate3d(-40px, calc(var(--slide-y, 0px) + var(--parallax, 0px) + var(--pose-y, 0px)), 0) rotate(var(--pose-rot, 0deg)) scale(var(--pose-scale, 1));
}

[data-slide].is-in {
  --slide-y: 0px;
  transform: translate3d(0, calc(var(--slide-y, 0px) + var(--parallax, 0px) + var(--pose-y, 0px)), 0) rotate(var(--pose-rot, 0deg)) scale(var(--pose-scale, 1));
  will-change: auto;
}

[data-slide="x"].is-in {
  transform: translate3d(0, calc(var(--slide-y, 0px) + var(--parallax, 0px) + var(--pose-y, 0px)), 0) rotate(var(--pose-rot, 0deg)) scale(var(--pose-scale, 1));
}

.board-block {
  max-width: none;
  margin-top: clamp(3rem, 7vw, 5rem);
}

.board-intro {
  margin: 1.25rem 0 1.5rem;
  color: var(--color-ink);
  font-size: 1.125rem;
  line-height: 1.4;
}

.check-form input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.framed-panel,
.visual-frame {
  border: var(--outline);
  border-radius: 0;
  background: var(--white);
}

/* QUILT-1: the twelve trades are the rendered quilt blocks pinned on the page; the named
   businesses hang under each block as a ruled label. The question and trade stay in the DOM
   for readers and search, the block carries them visually. */
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* the max-content labels must not widen the columns */
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
  margin-block: 2.5rem 6rem; /* the last row's open label hangs ~6rem below the grid; keep it off the CTA box */
}

.board-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  transition: transform 0.7s var(--ease) var(--slide-delay, 0ms);
}

.board-tile.is-in {
  transition-delay: 0s;
}

.tile-art {
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 140ms var(--ease);
  /* the 1000x1400 frame reserves rows 800..1178 for the open label; at rest the label is rolled, so the next
     row moves up over that band (rows read ~1.6x the column gap) and the longest open label just kisses the
     next block's top edge (data-open lifts the tile above it) */
  margin-bottom: -45%;
}

.board-tile[data-open="true"] {
  z-index: 5;
}

/* MOBILE-3: a press reads at once; on a phone the first frame lands a few hundred ms after the tap */
.board-tile:has(.tile-unroll:active) .tile-art,
.board-tile[data-loading="true"] .tile-art {
  transform: rotate(var(--tilt, 0deg)) scale(0.97);
}

.tile-shadow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.tile-label-shadow,
.tile-label-body {
  position: absolute;
  left: 0;
  top: var(--label-top, 40%);
  width: 100%;
  height: auto;
  pointer-events: none;
}

.tile-label-shadow { z-index: 1; }

.tile-block {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

.tile-label-body { z-index: 1; }

.tile-unroll {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.tile-unroll:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.board-tile:nth-child(3n + 1) { --tilt: 0.8deg; }
.board-tile:nth-child(3n + 2) { --tilt: -0.6deg; }
.board-tile:nth-child(3n) { --tilt: 0.3deg; }

.tile-question,
.tile-trade,
.tile-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.board-list {
  display: grid;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.board-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.55rem;
}

.board-name {
  font: inherit;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.check-error {
  color: var(--red);
}

.stamp {
  display: inline-block;
  padding: 0.3rem 0.55rem;
  border: 2px solid currentColor;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.stamp-missing {
  border-color: var(--ink);
  color: var(--white);
  background: var(--ink);
}

.stamp-site {
  background: transparent;
  text-transform: none;
  transform: none;
}

.readout-row .verdict-fix {
  color: var(--red);
}

.readout-row .verdict-add {
  color: var(--yellow);
}

.readout-row .verdict-ok {
  color: var(--blue);
}

.tile-total {
  margin: 0.5rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(43, 42, 47, 0.4);
  color: rgba(43, 42, 47, 0.78);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

/* FLAP-2b: the rendered console is the selector; the quilt tiles remain the readable stage. */
.board-block--console:not(.is-enhanced) > .console,
.board-block--console:not(.is-enhanced) > .console-unlisted {
  display: none;
}

.board-block--console .board-intro {
  max-width: 42rem;
}

.console {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 2rem auto 0;
  aspect-ratio: 2 / 1;
  isolation: isolate;
}

.console-shade,
.console-housing {
  position: absolute;
  display: block;
  pointer-events: none;
}

.console-shade {
  z-index: 0;
  inset: 0;
}

.console-housing {
  inset: 0;
  z-index: 1;
}

.console-shade img,
.console-housing img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.console-shade img {
  mix-blend-mode: multiply;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(transparent, #000 12%, #000 75%, transparent);
  mask-composite: intersect;
}

/* Feather residual shadow alpha at the image edges; keep the quilt/label join intact. */
.tile-shadow,
.tile-label-shadow {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(#000 90%, transparent);
  mask-composite: intersect;
}

.tile-shadow {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(transparent, #000 10%, #000 90%, transparent);
}

.flap-row,
.key-field {
  position: absolute;
  inset: 0;
}

.flap-row {
  z-index: 2;
  pointer-events: none;
}

.flap {
  position: absolute;
  left: var(--box-left);
  top: var(--box-top);
  width: var(--box-width);
  height: var(--box-height);
  perspective: 300px;
  transform-style: preserve-3d;
}

.flap-top,
.flap-bottom,
.flap-fold {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--flap-font-size-px, 1rem);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: pre;
  user-select: none;
}

.flap-top,
.flap-bottom {
  z-index: 1;
  clip-path: var(--top-clip);
}

.flap-bottom {
  clip-path: var(--bottom-clip);
}

.flap-layer {
  transform-style: preserve-3d;
}

.flap-layer img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.flap-fallback {
  position: absolute;
  inset: var(--glyph-offset-px, 0px) 0 auto;
  display: block;
  height: var(--flap-font-size-px, 1rem);
  padding: 0;
  font-size: var(--flap-font-size-px, 1rem);
  font-weight: 700;
  line-height: 1;
}

/* The UA rule that hides [hidden] elements is display:none, and the author rule above beats it
   on origin alone, so console.js could set fallback.hidden all it liked and the text glyph kept
   painting straight over the decoded card. That is the doubled lettering. Same fix the pad
   already uses for .pad__shade, .pad__curl and .pad__ear further down this file. */
.flap-fallback[hidden] {
  display: none;
}

.flap-layer.is-fallback {
  background: #fbf8f1;
  border-radius: 2px;
}

.flap-top,
.flap-fold--top {
  clip-path: var(--top-clip);
}

.flap-fold--bottom {
  clip-path: var(--bottom-clip);
}

.flap-fold {
  z-index: 3;
  opacity: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  --flap-phase-ms: 45ms;
  transition: transform var(--flap-phase-ms) linear, filter var(--flap-phase-ms) linear, opacity 0ms linear;
}

.flap-fold--top {
  filter: brightness(1);
  transform-origin: 50% var(--top-hinge);
  transform: rotateX(0deg);
}

.flap-fold--bottom {
  filter: brightness(.86);
  transform-origin: 50% var(--bottom-hinge);
  transform: rotateX(90deg);
}

.key-field {
  z-index: 4;
  pointer-events: none;
}

.console-key {
  position: absolute;
  left: var(--box-left);
  top: var(--box-top);
  width: var(--box-width);
  height: var(--box-height);
  padding: 0;
  border: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.console-key::after {
  position: absolute;
  inset: 2px;
  border: 2px solid transparent;
  content: "";
  pointer-events: none;
}

.console-key:hover::after {
  border-color: var(--white);
}

.console-key:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.key-pressed {
  position: absolute;
  left: var(--pressed-left);
  top: var(--pressed-top);
  width: var(--pressed-width);
  height: var(--pressed-height);
  max-width: none;
  pointer-events: none;
}

.console-unlisted {
  margin: 1rem 0 0;
  text-align: center;
}

.link-button {
  min-height: var(--tap-target);
  padding: 0.35rem 0;
  border: 0;
  color: var(--color-muted);
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.link-button:hover,
.link-button:focus-visible {
  color: var(--ink);
}

/* The tick's slot is always there, hidden rather than absent, so choosing this
   answer never nudges the line. */
.console-unlisted__button {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  gap: 8px;
}

.console-unlisted__marker {
  visibility: hidden;
  inline-size: 14px;
  text-align: center;
}

.console-unlisted__button[aria-pressed="true"] {
  color: var(--ink);
}

.console-unlisted__button[aria-pressed="true"] .console-unlisted__marker {
  visibility: visible;
}

.board-followup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 1200px;
  margin: 1.5rem auto 0;
}

.board-result {
  min-width: 0;
}

.board-result .tile-art {
  /* Reserve the unrolled label before the follow-up question. */
  margin-bottom: -20%;
}

.board-followup .bubble {
  margin-top: 1.5rem;
}

.board-followup .check-wrap {
  min-width: 0;
  max-width: none;
}

.board-followup .check-block {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.board-followup .check-block h3 {
  font-size: clamp(2rem, 3vw, 3rem);
}

@media (max-width: 899px) {
  .board-followup {
    grid-template-columns: minmax(0, 1fr);
    max-width: 576px;
    gap: 2.5rem;
  }
}

.console-stage .board-tile[hidden] {
  display: none;
}

.board-block--console.is-enhanced .console-stage .board-tile {
  width: min(100%, 576px);
  margin-inline: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.board-block--console.is-enhanced .console-stage .board-tile[hidden] {
  display: none;
}

.board-block--console.is-enhanced .console-stage .board-tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.board-block--console.is-enhanced .console-stage .board-tile--unlisted {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--outline);
  background: var(--white);
  box-shadow: var(--shadow-pop);
}

.board-block--console.is-enhanced .console-stage .board-tile--unlisted .tile-question,
.board-block--console.is-enhanced .console-stage .board-tile--unlisted .tile-total {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

.board-block--console.is-enhanced .console-stage .board-tile--unlisted .tile-question {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}

.board-block--console.is-enhanced .console-stage .board-tile--unlisted .tile-total {
  margin-top: 1rem;
  font-size: 0.9rem;
}

@media (max-width: 767px) {
  .console {
    /* full bleed: the handset render carries its own 5 % margins, and the key pitch needs the width to clear 44 px */
    width: 100vw;
    margin: 1.25rem calc(50% - 50vw) 0;
  }

  .board-block--console.is-enhanced .console-stage .board-tile {
    width: 100%;
  }

  .console-key {
    /* the phone render leaves a 30px row gap; this makes the hit pitch 170px high */
    margin: calc(var(--key-gap-y) / -2) 0 0 calc(var(--key-gap-x) / -2);
    width: calc(var(--box-width) + var(--key-gap-x));
    height: calc(var(--box-height) + var(--key-gap-y));
  }
}

@media (prefers-reduced-motion: reduce) {
  .flap-fold {
    display: none;
    transition: none;
  }

  .flap-top,
  .flap-bottom {
    transition: none;
  }

  .board-block--console.is-enhanced .console-stage .board-tile {
    transition: none;
    transform: none;
  }
}

.bubble {
  position: relative;
  max-width: 42rem;
  margin-top: 3rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: var(--outline);
  background: var(--white);
  box-shadow: var(--shadow-pop);
}

.bubble[data-slide] {
  transform: translate3d(0, calc(var(--slide-y, 0px) + var(--parallax, 0px)), 0) scale(0.96);
  transition: transform 0.7s var(--ease) var(--slide-delay, 0ms);
}

.bubble[data-slide].is-in {
  transform: translate3d(0, calc(var(--slide-y, 0px) + var(--parallax, 0px)), 0) scale(1);
}

.bubble::before,
.bubble::after {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
}

.bubble::before {
  bottom: -31px;
  left: 3rem;
  border-top: 28px solid var(--ink);
  border-right: 28px solid transparent;
  border-left: 28px solid transparent;
}

.bubble::after {
  bottom: -24px;
  left: calc(3rem + 3px);
  border-top: 24px solid var(--white);
  border-right: 24px solid transparent;
  border-left: 24px solid transparent;
}

.board-prompt {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 0.95;
}

.outcome-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 600px) {
  /* MOBILE-5: the two answers share one row instead of stacking beside an empty half */
  .outcome-toggle {
    flex-wrap: nowrap;
  }

  .outcome-toggle .toggle-button {
    flex: 1 1 0;
    padding-inline: 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

.check-button {
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: var(--outline);
  border-radius: 0;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 6px 6px 0 var(--paper);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.check-button:hover,
.check-button:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--paper);
}

.check-button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--paper);
}

.toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cta-min-height);
  padding: var(--space-cta-block) var(--space-cta-inline);
  border: var(--outline);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--cta-size);
  font-weight: 700;
  letter-spacing: var(--cta-tracking);
  line-height: 1.2;
  text-transform: uppercase;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.toggle-button[data-outcome="not-there"] {
  background: var(--white);
}

.toggle-button:hover,
.toggle-button:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}

/* Selected has to read as a different thing from hover. It shared this rule until
   2026-09-07, so pressing "It's not" moved the cap the same 3px a mouse already had
   it at and changed nothing else: the answer opened underneath but the button looked
   untouched, and on a phone hover never fires at all. Now the cap sits all the way
   down on the board with the ink inverted, which no hover state can imitate. */
.toggle-button[aria-pressed="true"] {
  transform: translate(3px, 3px);
  color: var(--paper);
  background: var(--ink);
  box-shadow: 0 0 0 var(--ink);
}

.toggle-button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.outcome-block {
  max-width: 42ch;
  margin-top: 1.5rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.outcome-block p {
  margin: 0;
}

.outcome-block .outcome-source {
  margin-top: 1.25rem;
}

.board-footnote {
  margin-top: 1.5rem;
}

.check-block {
  max-width: 44rem;
  margin-block: 4rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: var(--outline);
  color: var(--paper);
  background: var(--ink);
  box-shadow: 12px 12px 0 var(--red);
}

.check-block h3 {
  max-width: 18ch;
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}

.check-body {
  max-width: 44ch;
  margin: 1.5rem 0 2rem;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  opacity: 0.85;
}

.check-form {
  display: flex;
  gap: 0.75rem;
}

.check-form input {
  min-width: 0;
  flex: 1;
  min-height: 3.5rem;
  padding: 1rem;
  border: var(--outline);
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 1rem;
}

.check-button {
  flex: none;
}

.check-readout {
  margin-top: 1.5rem;
  padding: 1.5rem 0 0;
  border: 0;
  border-top: 3px solid var(--paper);
  color: var(--paper);
  background: transparent;
}

.check-readout .readout-header {
  color: var(--paper);
}

.check-readout .readout-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  padding: 0.75rem 0;
  border-bottom: 2px solid rgba(251, 248, 241, 0.25);
  color: var(--paper);
}

.check-readout .readout-row span:first-child {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.check-readout .readout-row span:nth-child(2) {
  color: var(--paper);
  font-family: var(--font-body);
}

.check-readout .verdict-fix,
.check-readout .verdict-add,
.check-readout .verdict-ok {
  padding: 0.25rem 0.6rem;
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.check-readout .verdict-fix {
  color: var(--ink);
  background: var(--red);
}

.check-readout .verdict-add {
  color: var(--ink);
  background: var(--yellow);
}

.check-readout .verdict-ok {
  color: var(--ink);
  background: var(--blue);
}

.check-status {
  margin: 1.25rem 0 0;
  color: var(--paper);
  font-size: 0.875rem;
  line-height: 1.5;
}

.check-offline {
  color: var(--color-muted);
}

.check-after {
  max-width: 42ch;
  margin: 2rem 0 1rem;
  color: var(--paper);
  font-size: 1.125rem;
  line-height: 1.4;
}

.check-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.services-section {
  background: var(--color-surface);
  padding-block: var(--space-section);
}

.services-heading {
  padding-inline: var(--space-content-inline);
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.services-heading .section-eyebrow {
  margin-bottom: var(--space-eyebrow-to-heading);
}

.section-title {
  max-width: 14ch;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--h2-size);
  font-weight: 700;
  font-variation-settings: "opsz" var(--display-opsz);
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}

.service-list {
  border-top: var(--outline);
}

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  min-height: 60vh;
  padding: clamp(2.5rem, 6vw, 5rem) var(--space-content-inline);
  border-bottom: var(--outline);
}

.service-row:nth-child(1) {
  color: var(--ink);
  background: var(--red);
}

.service-row:nth-child(2) {
  color: var(--ink);
  background: var(--blue);
}

.service-row:nth-child(3) {
  color: var(--ink);
  background: var(--yellow);
}

/* AUDIT-FIX-1 row 10: the display type stays white (large text, 3.8:1 on red / 3.2:1 on blue);
   the 17-px body reads in ink (4.3:1 on red / 5.0:1 on blue). The palette itself is frozen. */
.service-row:nth-child(1) .service-number,
.service-row:nth-child(1) h3,
.service-row:nth-child(2) .service-number,
.service-row:nth-child(2) h3 {
  color: var(--white);
}

.service-copy {
  order: 1;
}

.service-number {
  display: block;
  margin-bottom: 0.5rem;
  color: inherit;
  font-family: var(--font-hero);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.8;
  transform: translateY(20px);
  transition: transform 0.5s var(--ease) 150ms;
}

.service-row.is-in .service-number {
  transform: translateY(0);
}

.service-visual {
  order: 2;
  min-width: 0;
}

.service-copy h3 {
  max-width: 16ch;
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}

.service-body {
  max-width: 40ch;
  margin: 1.5rem 0 2rem;
  color: inherit;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Jargon tags under a service heading; hover, focus or tap opens a caption-sized bubble. */
.term-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}

.term {
  position: relative;
  display: inline-block;
}

.term-tag {
  padding: 0.38rem 0.65rem 0.32rem;
  border: var(--outline);
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  cursor: help;
  transform: rotate(-2deg);
}

.term:nth-child(even) .term-tag {
  transform: rotate(2deg);
}

.term-tag:hover,
.term-tag:focus-visible,
.term-tag[aria-expanded="true"] {
  color: var(--yellow);
  background: var(--ink);
}

.term-note {
  position: absolute;
  left: -0.4rem;
  bottom: calc(100% + 14px);
  z-index: 3;
  width: max-content;
  max-width: min(15rem, calc(100vw - 3rem));
  padding: 0.6rem 0.8rem 0.65rem;
  border: var(--outline);
  border-radius: 0.9rem;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-bubble);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.015em;
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) rotate(-1deg);
  transform-origin: 1.2rem 100%;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.term-note b {
  display: block;
  margin-bottom: 0.15rem;
}

.term-note::before,
.term-note::after {
  position: absolute;
  left: 1.2rem;
  border-style: solid;
  border-color: transparent;
  content: "";
}

.term-note::before {
  bottom: -13px;
  margin-left: -9px;
  border-width: 13px 9px 0;
  border-top-color: var(--ink);
}

.term-note::after {
  bottom: -9px;
  margin-left: -6px;
  border-width: 9px 6px 0;
  border-top-color: var(--white);
}

.term-tag:hover + .term-note,
.term-tag:focus-visible + .term-note,
.term-tag[aria-expanded="true"] + .term-note {
  opacity: 1;
  transform: translateY(0) rotate(-1deg);
}

.means-label {
  margin: 0 0 0.5rem;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  opacity: 0.85;
  text-transform: uppercase;
}

.means-line {
  max-width: 42ch;
  margin: 0;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
}

.visual-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: var(--outline);
  border-radius: 0;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-pop);
}

.visual-frame .field-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.field-lockup {
  position: absolute;
  inset: 1rem auto auto 1rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.field-lockup small {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.readout-frame,
.answer-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.readout-header,
.answer-header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.readout-rows {
  display: grid;
}

.readout-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(2.5rem, 0.5fr);
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
  animation: readout-slide 0.5s var(--ease) both;
}

.readout-row:nth-child(1) { animation-delay: 0ms; }
.readout-row:nth-child(2) { animation-delay: 60ms; }
.readout-row:nth-child(3) { animation-delay: 120ms; }
.readout-row:nth-child(4) { animation-delay: 180ms; }
.readout-row:nth-child(5) { animation-delay: 240ms; }
.readout-row:nth-child(6) { animation-delay: 300ms; }
.readout-row:nth-child(7) { animation-delay: 360ms; }

@keyframes readout-slide {
  from { transform: translateX(-24px); }
  to { transform: translateX(0); }
}

.readout-row:last-child {
  border-bottom: 0;
}

.readout-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.answer-question {
  margin: 1.5rem 0 0.75rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.answer-copy {
  margin: 0 0 1.5rem;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.6;
}

.citation {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.book-section {
  position: relative;
  border-top: 1px solid var(--color-faint);
  background: var(--paper);
  padding-block: var(--space-section);
}

.book-container {
  max-width: 100rem;
}

.book-intro {
  max-width: 38ch;
  margin: 1.25rem 0 0;
  color: var(--color-ink-dim);
  font-size: 1.125rem;
  line-height: 1.5;
}

.pad {
  container-type: inline-size;
  touch-action: pan-y pinch-zoom; /* vertical page scrolling remains available outside the grab zone */
  user-select: none; /* a page curl must never start a text selection over the days */
  -webkit-user-select: none;
  --page-x: 18.75%;
  --page-y: 10.909%;
  --page-w: 62.5%;
  --page-h: 59.091%;
  --page-matrix: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  --header-x-page: 0%;
  --header-y-page: 0%;
  --header-w-page: 100%;
  --header-h-page: 12.308%;
  --weekday-x-page: 3.5%;
  --weekday-y-page: 13.077%;
  --weekday-w-page: 93%;
  --weekday-h-page: 6.154%;
  --grid-x-page: 3.5%;
  --grid-y-page: 20%;
  --grid-w-page: 93%;
  --grid-h-page: 75.385%;
  position: relative;
  width: min(150%, 1200px);
  aspect-ratio: var(--still-ar, 1600 / 1100);
  margin: calc(clamp(2.5rem, 6vw, 5rem) - 18%) auto 0; /* PAD-6: the page over the back now lives in the headroom, keep it under the copy */ /* the still carries flip headroom above the pad; pull the pad body up into the copy's air */
  left: 50%;
  transform: translateX(-50%);
  isolation: isolate;
}

.pad__shade,
.pad__body,
.pad__curl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  -webkit-user-drag: none;
}

.pad__shade {
  z-index: 0;
  filter: brightness(0);
  opacity: 0.55;
}

.pad__shade[hidden] { display: none; }

/* PAPER-1 (Cyril 2026-09-04 "make this more clearly a piece of paper against the background"):
   a tight edge shadow plus a soft lift under the whole silhouette, so the page over the back
   reads as a sheet with thickness instead of dissolving into the ecru. */
.pad__body {
  /* the paper lifts a stop above the ecru so it reads as a whiter sheet, the desk shadow layer is untouched */
  filter: brightness(1.08) drop-shadow(0 1px 1px rgba(28, 26, 25, 0.35)) drop-shadow(0 8px 14px rgba(28, 26, 25, 0.28));
}

.pad__body { z-index: 1; }

.pad__curl { z-index: 2; pointer-events: none; }
.pad__curl[hidden] { display: none; }
.pad.is-flipping { cursor: grabbing; }

.pad__page {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: var(--page-w);
  height: var(--page-h);
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  transform-origin: 0 0;
  transform: var(--page-matrix);
  will-change: transform;
  cursor: grab;
}

/* CUE-1 (Cyril 2026-09-04 "subtly obvious"): the bottom corner of the page is dog-eared. It lifts a
   little while the pointer is over the pad, and a click on it turns the month. */
.pad__ear {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 1.5rem;
  width: 2.4cqi;
  height: 1.5rem;
  height: 2.4cqi;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  --ear-pad: max(18px, calc((44px - 2.4cqi) / 2));
  box-sizing: content-box;
  padding: var(--ear-pad);
  margin: calc(var(--ear-pad) * -1);
}

.pad__ear[hidden] { display: none; }

.pad__ear::before { /* the sheet beneath, in the flap's shadow */
  content: "";
  position: absolute;
  inset: var(--ear-pad);
  background: linear-gradient(135deg, transparent 50%, rgba(40, 30, 20, 0.22) 50%, rgba(40, 30, 20, 0.04) 100%);
}

.pad__ear::after { /* the lifted flap: the page back, lit along the fold, shaded toward the tip */
  content: "";
  position: absolute;
  inset: var(--ear-pad);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(315deg, #fefcf8 0%, #f3eee4 45%, #e4ddcf 100%);
}

.pad:hover .pad__ear,
.pad__ear:focus-visible {
  width: 2.125rem;
  width: 3.4cqi;
  height: 2.125rem;
  height: 3.4cqi;
}

.pad__grab {
  position: absolute;
  inset: 72% 0 0;
  z-index: 1;
  pointer-events: none;
  touch-action: none;
}

@media (pointer: coarse) {
  .pad__grab { pointer-events: auto; }
}

.pad__header,
.pad__weekdays,
.pad__grid {
  position: absolute;
}

.pad__header {
  top: var(--header-y-page);
  left: var(--header-x-page);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  gap: 1.6cqi;
  width: var(--header-w-page);
  height: var(--header-h-page);
  box-sizing: border-box;
  overflow: visible;
}

.pad__month {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-size: 2.6cqi;
  font-weight: 700;
  line-height: 0.9;
  opacity: 0.86;
  text-overflow: ellipsis;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  mix-blend-mode: multiply;
}

.pad__nav {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  width: 3.4cqi;
  height: 2.75rem;
  height: 3.4cqi;
  min-width: 3.125rem; /* the page sits under --page-matrix (≈0.89 scale on phones): 50 px lands at ≥ 44 px on screen */
  min-height: 3.125rem;
  padding: 0.5rem;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.86;
  mix-blend-mode: multiply;
}

/* drawn chevrons: a glyph sits on the x-height, these centre on the caps */
.pad__nav svg {
  width: 0.75rem;
  width: 1.2cqi;
  height: 1.25rem;
  height: 2cqi;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pad__nav:hover,
.pad__nav:focus-visible { color: var(--red); }

.pad__nav:disabled {
  cursor: default;
  opacity: 0.25;
}

.pad__weekdays {
  top: var(--weekday-y-page);
  left: var(--weekday-x-page);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  width: var(--weekday-w-page);
  height: var(--weekday-h-page);
  box-sizing: border-box;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-size: 1.9cqi;
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: 0.86;
  text-align: center;
  text-transform: uppercase;
  mix-blend-mode: multiply;
}

.pad__grid {
  top: var(--grid-y-page);
  left: var(--grid-x-page);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  width: var(--grid-w-page);
  height: var(--grid-h-page);
}

.pad__day {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 1px solid transparent;
  outline-offset: -0.5px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-size: 2.7cqi;
  font-weight: 400;
  line-height: 1;
  opacity: 0.86;
  mix-blend-mode: multiply;
}

.pad__day:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.pad__day:hover:not(:disabled):not(.is-picked) .pad__ring-path {
  stroke-dashoffset: 0;
  opacity: 0.35;
}

.pad__day:disabled {
  cursor: default;
  opacity: 0.35;
}

.pad__day.is-picked { opacity: 1; }

.pad__ring {
  position: absolute;
  inset: 3% 2%;
  width: 96%;
  height: 94%;
  overflow: visible;
  pointer-events: none;
}

.pad__ring path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 350ms ease, opacity 200ms ease;
}

.pad__ring-path { stroke: var(--red); }

.pad__booked-ring {
  stroke: var(--ink);
  opacity: 0;
  transform: rotate(8deg);
  transform-origin: 50% 50%;
}

.pad__day.is-picked .pad__ring-path,
.pad__day.is-booked .pad__booked-ring {
  stroke-dashoffset: 0;
}

.pad__day.is-booked .pad__booked-ring { opacity: 1; }

/* MOBILE-1: the pad's day cells are ~20 px tall on a phone; below 600 px the month's open days repeat as 48 px
   buttons under the pad and the pad itself turns into the display (its ring still marks the pick) */
.day-list {
  display: none;
}

@media (max-width: 600px) {
  .day-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    max-width: 60rem;
    margin: 1.25rem auto 0;
  }

  .day-list__day {
    min-height: 48px;
    padding: 0.6rem 0.5rem;
    border: var(--outline);
    border-radius: 0;
    background: var(--white);
    box-shadow: 4px 4px 0 var(--ink);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .day-list__day.is-picked {
    background: var(--yellow);
  }

  .pad__day {
    pointer-events: none;
  }
}

.book-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  max-width: 60rem;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--outline);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-pop);
}

.book-form__chosen,
.book-form__done,
.book-form__error {
  grid-column: 1 / -1;
  margin: 0;
}

.book-form__chosen {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

.book-form__bands {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.book-form__bands legend {
  width: 100%;
  margin-bottom: 0.25rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-form__bands label,
.book-form__field {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
}

.book-form__bands label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap-target);
  cursor: pointer;
}

.book-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.book-form__field input {
  min-height: 3rem;
  padding: 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.book-form__field input:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.book-form__help {
  grid-column: 1 / -1;
  margin: -0.5rem 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.book-form__submit {
  justify-self: start;
  align-self: end;
}

.book-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: var(--shadow-pop);
}

.book-form__done { color: var(--blue); }

.book-form__error { color: var(--red); }

.book-form__done,
.book-form__error {
  font-size: 0.95rem;
  line-height: 1.5;
}

.book-form__error a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.marquee {
  overflow: hidden;
  border-top: var(--outline);
  background: var(--ink);
  padding-block: 1.25rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee-group {
  flex: none;
  padding-right: 2rem;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 1025px) {
  .service-row:nth-child(even) .service-copy {
    order: 2;
  }

  .service-row:nth-child(even) .service-visual {
    order: 1;
  }
}

@media (max-width: 767px) {
  .ask-section,
  .services-section,
  .book-section {
    padding-block: var(--space-section-tight);
  }

  .paper-tile {
    padding: 1.5rem 1.4rem 1.6rem;
  }

  .paper-tile__title img {
    width: 58%;
  }

  .paper-tile .manifesto {
    font-size: 1rem;
    line-height: 1.65;
  }

  .question-fields {
    grid-template-columns: 1fr;
  }

  .question-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-copy h3 {
    max-width: 18ch;
  }

  .visual-frame {
    width: 100%;
  }

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

@media (max-width: 900px) {
  .service-row {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (max-width: 899px) {
  .numerals {
    grid-template-columns: 1fr;
    max-width: 34rem;
    margin-inline: auto;
  }
}

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

@media (max-width: 640px) {
  .board-grid {
    grid-template-columns: 1fr;
  }

  .check-form {
    flex-direction: column;
  }

  .check-button {
    align-self: flex-start;
  }
}

@media (max-width: 720px) {
  .prop--arch-red {
    right: 1rem;
    bottom: -74px;
    width: 97.5px;
  }

  .prop--sphere-blue {
    top: -35px;
    right: -16px;
    width: 78px;
  }

  .prop--halfdisc-ink {
    top: -46px;
    right: 12%;
    width: 91px;
  }

  .prop--cube-yellow,
  .prop--cone-purple,
  .prop--cylinder-white {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-slide],
  .service-number {
    transform: none;
    transition: none;
    animation: none;
    will-change: auto;
  }

  .board-tile:hover,
  .toggle-button:hover,
  .toggle-button:focus-visible,
  .toggle-button[aria-pressed="true"],
  .toggle-button:active {
    transform: none;
    transition: none;
  }

  .readout-row,
  .toggle-button {
    animation: none;
    transition: none;
  }

  .manifesto .w {
    color: var(--color-ink);
    transition: none;
  }

  .marquee-track {
    animation-play-state: paused;
  }

  .pad__ring path {
    transition: none;
  }
}