:root {
  --stop: #D7261E;
  --paper: #F3F4F0;
  --white: #FFFFFF;
  --ink: #101820;
  --muted: #3B464D;
  --rule: #9AA3A8;
  --carbon: #2340C8;
  --carbon-dark: #16288A;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Archivo', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--carbon); }
a:hover { color: var(--carbon-dark); }
:focus-visible { outline: 3px solid var(--carbon); outline-offset: 3px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 900px) { .wrap { padding: 0 64px; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 12px 16px; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { margin: 0; line-height: 1; text-wrap: balance; word-spacing: 0.12em; }
h2 { font-size: clamp(28px, 4.4vw, 56px); font-weight: 850; font-stretch: 80%; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 40px; }
h3 { font-size: 24px; font-weight: 750; letter-spacing: -0.3px; margin-bottom: 8px; }
p { margin: 0 0 16px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; font-weight: 700; font-size: 17px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; color: var(--white); }
.btn-carbon { background: var(--carbon); color: var(--white); }
.btn-carbon:hover { background: var(--carbon-dark); color: var(--white); }
.btn-lg { min-height: 60px; padding: 16px 30px; font-size: 19px; }
.btn-block { width: 100%; }
.text-link { color: var(--ink); font-weight: 600; font-size: 18px; padding: 12px 0; }
.text-link:hover { color: var(--carbon); }

/* Header */
.top { border-bottom: 2px solid var(--ink); background: var(--paper); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.logo { white-space: nowrap; font-size: 32px; font-weight: 900; font-stretch: 112%; letter-spacing: -1px; color: var(--ink); text-decoration: none; }
.logo-sm { font-size: 24px; }
.top nav { display: flex; align-items: center; gap: 32px; }
.top nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 17px; }
.top nav a:not(.btn):hover { color: var(--carbon); }
@media (max-width: 860px) { .top nav a:not(.btn) { display: none; } .top nav .btn { font-size: 16px; padding: 10px 16px; white-space: nowrap; } }
@media (max-width: 359px) { .top nav .btn { font-size: 15px; padding: 10px 12px; } }

/* Hero */
.hero { padding: 48px 0 64px; }
.hero-in { display: grid; gap: 28px; }
.hero h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: 0.93; font-weight: 850; font-stretch: 74%; letter-spacing: -2px; text-transform: uppercase; }
@media (min-width: 1000px) {
  .hero { padding: 56px 0 88px; }
  .hero-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 72px; align-items: start; }
  .hero h1 { grid-column: 1 / -1; padding-bottom: 32px; border-bottom: 2px solid var(--ink); }
}
.lede { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; max-width: 620px; margin-bottom: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.actions .proof { flex-basis: 100%; margin: 8px 0 0; }
@media (max-width: 599px) { .hero .actions .btn, .ping-try .btn { width: 100%; } .hero .actions .proof { order: 1; margin: 2px 0 4px; } .hero .actions .text-link { order: 2; } }
/* Proof beside the call action: what it costs to say yes (nothing yet) */
.proof { font-family: var(--mono); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); margin: 14px 0 0; }
.proof::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: 1px; background: var(--stop); }

/* Docket */
.docket { margin: 0; background: var(--white); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--carbon); font-family: var(--mono); max-width: 520px; width: calc(100% - 10px); }
.docket-head { display: flex; flex-wrap: wrap; white-space: nowrap; justify-content: space-between; gap: 2px 12px; padding: 16px 20px; border-bottom: 2px solid var(--ink); font-weight: 600; font-size: 14px; letter-spacing: 1px; }
.docket-lines { margin: 0; padding: 4px 20px; }
.docket-lines div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 14px 0; border-bottom: 1px dashed var(--rule); font-size: 17px; }
.docket-lines div:last-child { border-bottom: 0; }
.docket-lines dd { margin: 0 0 0 auto; font-weight: 600; white-space: nowrap; color: var(--carbon); }
.docket-lines dt small { display: block; font-size: 14px; font-weight: 500; color: var(--muted); }
@media (max-width: 480px) { .docket-lines div { font-size: 16px; } .docket-head { font-size: 15px; } }
.carbon { color: var(--carbon); }

/* Bands */
.band { padding: 80px 0; border-top: 2px solid var(--ink); }
@media (min-width: 900px) { .band { padding: 112px 0; } }
.band-white { background: var(--white); }
.band-ink { background: var(--ink); color: var(--paper); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; } }
.steps li { display: flex; gap: 20px; padding: 28px 0; border-bottom: 1px dashed var(--rule); }
@media (min-width: 900px) { .steps li { flex-direction: column; padding: 28px 32px 8px 0; border-bottom: 0; border-top: 2px solid var(--ink); } }
.step-no { font-family: var(--mono); font-weight: 600; font-size: 18px; color: var(--carbon); min-width: 32px; }
.steps p { color: var(--muted); }

/* ==== Price and what you get, merged (10 Oct rework): what you do (three lines) beside what we do (the tick list). ==== */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 16px 0 16px 40px; border-bottom: 1px dashed var(--rule); }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 22px; width: 16px; height: 9px; border-left: 3px solid var(--carbon); border-bottom: 3px solid var(--carbon); transform: rotate(-45deg); }
.get { display: grid; gap: 48px; }
@media (min-width: 1000px) { .get { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 80px; align-items: start; } .get-you { position: sticky; top: 32px; } }
.get-lede { font-size: 20px; max-width: 460px; }
.you-do { list-style: none; counter-reset: you; margin: 0 0 28px; padding: 0; border-top: 2px solid var(--ink); max-width: 460px; }
.you-do li { counter-increment: you; display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px dashed var(--rule); font-size: clamp(22px, 2.2vw, 28px); font-weight: 750; font-stretch: 90%; line-height: 1.2; }
.you-do li::before { content: '0' counter(you); font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--carbon); min-width: 28px; }
.get-label { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin: 0 0 4px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
@media (min-width: 700px) { .get-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
.get-list li { color: var(--muted); }
.get-list strong { display: block; color: var(--ink); }
.get-small { font-family: var(--mono); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); margin: 20px 0 0; max-width: 680px; }
.get-you .get-small { margin: 0; max-width: 460px; }
/* ==== End price and what you get ==== */

/* FAQ */
.faq-wrap { display: grid; gap: 0; }
@media (min-width: 1000px) { .faq-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 80px; } }
.faq details { border-bottom: 1px dashed var(--rule); }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 0; font-size: 20px; font-weight: 650; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 8px; top: 18px; font-family: var(--mono); font-size: 26px; color: var(--carbon); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { color: var(--muted); padding-bottom: 20px; max-width: 680px; }

/* Start form */
.start { display: grid; gap: 40px; }
@media (min-width: 1000px) { .start { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 80px; } }
.start-copy p { font-size: 20px; max-width: 480px; }
.start-copy .small { font-family: var(--mono); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.form { border: 2px solid var(--ink); padding: 28px 24px; background: var(--paper); box-shadow: 10px 10px 0 var(--carbon); }
@media (min-width: 600px) { .form { padding: 36px; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.field-row { display: grid; gap: 0 20px; }
@media (min-width: 600px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field label { font-weight: 650; font-size: 16px; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea { font: inherit; font-size: 17px; padding: 12px 14px; min-height: 50px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); border-radius: 0; width: 100%; }
.field input::placeholder { color: #6B757B; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--carbon); outline-offset: 0; border-color: var(--carbon); }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field-error { color: #B3261E; font-size: 15px; }
.hp { position: absolute; left: -9999px; }
.form .proof { margin-top: 14px; }
.form-status { margin: 16px 0 0; font-weight: 600; }
.form-status.ok { color: #1B6B3A; }
.form-status.err { color: #B3261E; }

/* Footer */
.foot { border-top: 2px solid var(--ink); padding: 32px 0 40px; font-size: 16px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.foot a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.foot-in > span + span { margin-right: auto; }
.foot-id { margin: 0; flex-basis: 100%; order: 1; font-family: var(--mono); font-weight: 500; }
.foot .foot-id a { min-height: 44px; }
@media (max-width: 599px) { .foot-sep { display: none; } .foot .foot-id a { display: flex; } }
@media (max-width: 699px) { .foot-in > span + span { flex-basis: 100%; } }

/* Simple pages */
.page { padding: 64px 0 96px; }
.page .wrap { max-width: 820px; }
.page h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 850; font-stretch: 80%; text-transform: uppercase; margin-bottom: 32px; }
.page h2 { font-size: 26px; text-transform: none; font-stretch: 100%; letter-spacing: -0.3px; margin: 40px 0 12px; }
.page li { margin-bottom: 8px; }

.got-email-in { display: grid; gap: 12px; }
@media (min-width: 1000px) { .got-email-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 72px; align-items: start; } }
.got-email h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; font-stretch: 100%; text-transform: none; letter-spacing: -0.3px; word-spacing: normal; margin: 0; }
.got-email p { font-size: 19px; max-width: 760px; margin: 0; }
.got-email.band { padding: 56px 0; }

/* Example site and Tom's phone: styles live in /showcase/phone.css, loaded by the #example section. */

/* The full stop: a small red square after the wordmark */
.logo::after { content: ''; display: inline-block; width: 0.17em; height: 0.17em; margin-left: 0.05em; background: var(--stop); }

/* ==== Showcase (10 Oct 2026): the logo fold. ==== */

/* ==== Logo fold (10 Oct rework, on the homepage at #logo): the old logo redrawn sharp, its colours pulled out, and the site built over a real house.
   About 10.5 seconds. Base styles are the end frame (no JS, reduced motion). brine.js adds .armed (first frame, paused) and .run (play).
   The figure and the mini site are size containers, so every cqw below scales with the box it sits in. ==== */
.logo-band.band { padding: 72px 0; }
@media (min-width: 900px) { .logo-band.band { padding: 96px 0; } }
.logo-in { display: grid; gap: 32px; }
@media (min-width: 1000px) { .logo-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 64px; align-items: center; } }
.logo-copy h2 { margin-bottom: 24px; }
.logo-copy p { font-size: 20px; max-width: 460px; }
.fold { margin: 0; max-width: 860px; container-type: inline-size; }
.fold-stage { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 3cqw; align-items: center; padding: 3cqw; background: #E7E4DC; border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--carbon); }
.armed .fold-stage { cursor: pointer; }
.f-src { display: grid; gap: 2.4cqw; }
.f-logo { position: relative; aspect-ratio: 84 / 32; overflow: hidden; box-shadow: 0 0.6cqw 1.6cqw rgba(16, 24, 32, 0.25); }
.f-logo > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-old { image-rendering: pixelated; }
.f-word { font: 850 10px var(--sans); font-stretch: 80%; }
.f-sub { font: 700 7px var(--sans); }
.f-scan { border-left: 0.6cqw solid var(--carbon); opacity: 0; } /* full logo width, so translateX(100%) carries the bar across it */
.f-tags { display: grid; margin: 0; font-family: var(--mono); font-size: max(1.5cqw, 10px); font-weight: 600; line-height: 1.3; }
.f-tag { grid-area: 1 / 1; }
.f-tag-old { opacity: 0; }
.f-pal { list-style: none; margin: 0; padding: 0; display: grid; gap: 1cqw; font-family: var(--mono); font-size: max(1.5cqw, 10px); font-weight: 600; }
.f-pal li { display: flex; align-items: center; gap: 1.2cqw; }
.f-pal li::before { content: ''; width: 4.6cqw; height: 4.6cqw; flex: none; background: var(--c); outline: 1px solid rgba(16, 24, 32, 0.45); }
.f-site { background: var(--white); border: 2px solid var(--ink); min-width: 0; }
.f-bar { display: flex; align-items: center; gap: 0.8cqw; padding: 1cqw 1.4cqw; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: max(1.3cqw, 9px); white-space: nowrap; overflow: hidden; }
.f-bar i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--rule); flex: none; }
.f-bar span { margin-left: 1cqw; color: var(--muted); }
.f-view { position: relative; container-type: inline-size; aspect-ratio: 3 / 2; overflow: hidden; background: #9DB8CF; }
.f-view > * { position: absolute; margin: 0; }
.f-photo, .f-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-head { left: 0; right: 0; top: 0; height: 12cqw; padding: 0 3cqw; display: flex; align-items: center; justify-content: space-between; background: #232A2E; }
.f-mark { height: 8.5cqw; width: auto; }
.f-call { padding: 1.6cqw 2.6cqw; background: #F08A24; color: #232A2E; font-weight: 800; font-size: 3.4cqw; line-height: 1; white-space: nowrap; }
.f-plate { right: 3.5cqw; top: 17cqw; width: 37cqw; padding: 3cqw; background: #F4EEE2; display: flex; flex-direction: column; gap: 1.6cqw; box-shadow: 0 1cqw 3cqw rgba(16, 24, 32, 0.3); }
.f-h1 { color: #232A2E; font-weight: 850; font-stretch: 78%; font-size: 4.4cqw; line-height: 0.95; text-transform: uppercase; }
.f-txt { height: 1.4cqw; width: 90%; background: #CFC6B4; transform-origin: 0 0; }
.f-txt2 { width: 64%; }
.f-btn { align-self: flex-start; margin-top: 1cqw; padding: 1.8cqw 2.6cqw; background: #F08A24; color: #232A2E; font-weight: 800; font-size: 3.2cqw; line-height: 1; white-space: nowrap; }
/* A pointer that walks to Call Tom and taps it. Gone in the end frame. */
.f-cursor { right: 9cqw; top: 7cqw; width: 4cqw; height: 5cqw; background: var(--white); clip-path: polygon(0 0, 100% 62%, 56% 66%, 74% 100%, 58% 100%, 42% 70%, 0 92%); filter: drop-shadow(0 0 0.3cqw #000); opacity: 0; }
@container (max-width: 520px) {
  .fold-stage { grid-template-columns: minmax(0, 1fr); gap: 4cqw; padding: 4cqw; }
  .f-src { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 5cqw; row-gap: 2cqw; }
  .f-tags { grid-row: 2; font-size: max(3cqw, 11px); }
  .f-pal { grid-row: 1 / span 2; grid-column: 2; font-size: max(3cqw, 11px); }
  .f-pal li::before { width: 7cqw; height: 7cqw; }
  .f-bar { font-size: max(2.6cqw, 10px); padding: 2cqw 2.6cqw; gap: 1.6cqw; }
  .f-bar i { width: 2.2cqw; height: 2.2cqw; }
}
.fold-steps { margin: 26px 0 0; padding-left: 1.6em; font-size: 16px; line-height: 1.45; }
.fold-steps li { margin-bottom: 4px; }
.fold-steps li::marker { font-family: var(--mono); color: var(--carbon); font-weight: 600; }
.fold-replay { font: inherit; font-size: 16px; font-weight: 650; color: var(--ink); background: none; border: 0; padding: 0 4px; min-height: 44px; text-decoration: underline; cursor: pointer; }
.fold-replay:hover { color: var(--carbon); }
.fold-replay[hidden] { display: none; }

/* Timeline: 0.5 scan and redraw, 2.2 colours out, 3.2 the house in colour, 4.4 header, 5.5 plate, 7 buttons, 8.2 to 10.4 the tap. */
.armed .f-scan { animation: f-scan 1.4s 0.5s both; }
.armed .f-new { animation: f-reveal 1.4s 0.5s both; }
.armed .f-tag-old { animation: f-tag-out 1.9s both; }
.armed .f-tag-new { animation: f-in 0.4s 1.9s both; }
.armed .f-pal li { animation: f-pal 0.6s calc(2.2s + var(--i) * 0.25s) cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.armed .f-photo img { animation: f-photo 1.4s 3.2s ease-out both; }
.armed .f-head { animation: f-drop 0.5s 4.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.armed .f-mark { animation: f-pop 0.5s 4.9s both; }
.armed .f-plate { animation: f-wipe 0.6s 5.5s cubic-bezier(0.6, 0, 0.2, 1) both; }
.armed .f-h1 { animation: f-up 0.5s 6s both; }
.armed .f-txt { animation: f-grow 0.4s 6.5s both; }
.armed .f-txt2 { animation-delay: 6.65s; }
.armed .f-btn { animation: f-pop 0.4s 7s both; }
.armed .f-call { animation: f-pop 0.4s 7.6s both, f-tap 0.35s 9.4s both; }
.armed .f-cursor { animation: f-cursor 2.2s 8.2s ease-in-out both; }
.armed .fold-steps li { animation: f-step 0.4s both; }
.armed .fold-steps li:nth-child(2) { animation-delay: 0.5s; }
.armed .fold-steps li:nth-child(3) { animation-delay: 2.2s; }
.armed .fold-steps li:nth-child(4) { animation-delay: 3.2s; }
.armed:not(.run) :is(.fold-stage *, .fold-steps li) { animation-play-state: paused; }

@keyframes f-scan { 0% { opacity: 0; transform: none; } 5%, 95% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
@keyframes f-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes f-tag-out { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes f-in { from { opacity: 0; } }
@keyframes f-pal { from { transform: translateY(-4cqw) scale(0.4); opacity: 0; } }
@keyframes f-photo { from { filter: grayscale(1) contrast(0.9); transform: scale(1.08); } to { filter: none; transform: none; } }
@keyframes f-drop { from { transform: translateY(-100%); } }
@keyframes f-pop { from { transform: scale(0.6); opacity: 0; } }
@keyframes f-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes f-up { from { transform: translateY(3cqw); opacity: 0; } }
@keyframes f-grow { from { transform: scaleX(0); } }
@keyframes f-tap { 50% { transform: scale(0.9); background: #FFB066; } }
@keyframes f-cursor {
  0% { transform: translate(-34cqw, 40cqw); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: none; opacity: 1; }
  78% { transform: scale(0.85); }
  86% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
@keyframes f-step { from { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .fold * { animation: none !important; } }
/* ==== End logo fold ==== */
/* ==== End showcase ==== */

/* ==== Load-in and reveals (10 Oct rework, design/AGENCY-RESEARCH.md). Transform, opacity and clip-path only: no layout shift.
   The hero and docket run in CSS alone, so they play and finish without JS too. Scroll reveals hide nothing until brine.js has run. ==== */
.load-in .ln { display: block; overflow: clip; overflow-clip-margin: 0.08em; }
.load-in .ln > span { display: block; animation: ln-rise 0.9s calc(0.1s + var(--i) * 0.13s) cubic-bezier(0.16, 1, 0.3, 1) both; }
.load-in-up { animation: rise-in 0.8s calc(0.1s + var(--i) * 0.13s) cubic-bezier(0.16, 1, 0.3, 1) both; }
/* The docket feeds out like a till receipt, then prints line by line */
.docket { animation: feed 0.6s 0.45s cubic-bezier(0.6, 0, 0.2, 1) both; }
.docket-lines > div { animation: print 0.3s calc(0.95s + var(--i) * 0.16s) steps(4, end) both; }
@keyframes ln-rise { from { transform: translateY(105%); } }
@keyframes rise-in { from { transform: translateY(18px); opacity: 0; } }
@keyframes feed { from { clip-path: inset(0 -16px 100% -4px); } to { clip-path: inset(-4px -16px -16px -4px); } }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.rv { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--rv, 0) * 70ms); }
.reveal-on .rv:not(.in) { opacity: 0; transform: translateY(14px); }
@media print { .reveal-on .rv:not(.in) { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .load-in .ln > span, .load-in-up, .docket, .docket-lines > div { animation: none; }
  .rv { transition: none; }
}
/* ==== End load-in and reveals ==== */

/* ==== Start form choices (10 Oct rework): domain and hosting radios, and the ramble box's hint ==== */
.field-hint { font-size: 16px; line-height: 1.45; color: var(--muted); margin: 0; }
.field textarea { min-height: 200px; resize: vertical; }
.choice { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; gap: 2px; }
.choice legend { font-weight: 650; font-size: 16px; padding: 0; margin-bottom: 6px; }
.choice label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 17px; font-weight: 500; cursor: pointer; }
.choice input[type=radio] { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; margin: 0; flex: none; accent-color: var(--carbon); }
.choice input[type=radio]:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; }
.choice-with { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.choice-with label { flex: none; }
.choice-with input:not([type=radio]) { flex: 1 1 200px; width: auto; min-width: 0; }
/* ==== End start form choices ==== */