/* Abatement Desk landing page.

   One look, on paper. A contractor's mental model of a document worth trusting
   is a business letter or a printed schedule: a toned sheet, black text, rules
   you can actually see, numbers in an ordinary typeface, and one ink used
   sparingly. There is deliberately no dark mode — a printed form does not have
   one, and serving two palettes was half of why this page read as software.

   Two faces, and the split says something true. The serif is the document: the
   headline, every heading, every sentence that argues, and the fee schedule.
   The sans is the software and the form furniture: the filings worklist, field
   captions, the footnote under the table, the footer. There is no monospace
   anywhere. Mono here only ever said "developer tool"; the one place with real
   tabular work — a column of dates, a column of amounts — is handled by
   font-variant-numeric on the face that is already there.

   Green is the firm's ink and appears five times: the letterhead rule, links,
   the submit button, and the rules that mark the record speaking for itself.
   Nothing else on the page is coloured — a state is carried by weight and by
   which column it sits in, never by hue, because colour-coded status is what
   makes a list read as a positions table.

   Three silhouettes carry the rhythm: full width (masthead, lede, the docket),
   a three-part report band (the pillars), and a labelled record — heading
   right-aligned in the margin, argument at measure — for everything that
   argues in prose. Zero border radius anywhere; paper has corners.

   No inline styles and no remote fonts: site/_headers serves style-src 'self',
   so both are blocked at the browser. Every face below is a system stack. */

:root {
  /* Pinned, not "light dark". The select's arrow and its popup list of 51
     options are drawn by the browser from this property and from no token we
     control, so it has to agree with the palette below — and the palette below
     is now the only one there is. */
  color-scheme: light;

  /* A text serif, not a display serif: this face sets whole paragraphs, so it
     is chosen for a large x-height on screen. Charter and Iowan ship on macOS,
     Sitka Text and Cambria on Windows, Georgia everywhere. */
  --serif: Charter, "Iowan Old Style", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --paper: #f4f3ef;
  --sheet: #ffffff;
  --ink: #181818;
  --ink-2: #3f3f3d;
  --ink-3: #5c5c58;
  --green: #1d4d34;

  /* A printed rule is visible. These are near-solid greys, not the 8%-alpha
     hairlines that read as a UI divider and disappear on a toned ground. */
  --rule: #cbc9c2;
  --rule-faint: #e0ded7;

  /* A page, not a viewport. At 68rem the marginal-heading layout left a third
     of a wide screen empty to the right of a 32rem measure, which reads as a
     column that failed to fill rather than as a margin someone chose. 62rem is
     about the proportion of a letter with its margins on. */
  --frame: 62rem;
  --measure: 32rem;
  --rail: 14rem;
  --rail-gap: 3rem;
  --gutter: 1.25rem;

  --band-major: clamp(3.25rem, 5.5vw, 5.5rem);
  --band-minor: clamp(1.9rem, 3.25vw, 3rem);
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.62 var(--serif);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.masthead,
main,
footer {
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1,
h2,
h3 { margin: 0; }

p { margin: 0 0 1.05em; }

p:last-child { margin-bottom: 0; }

a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

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

/* Labels each docket cell carries for a screen reader and, below 44rem where
   the column headings are gone, for everyone. */
.cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Letterhead: the wordmark over a heavy rule with a hairline under it. The
   double rule is stationery, not decoration — the one place on the page that
   says whose page this is, and the only device that appears exactly once. The
   heavy stroke is the firm's ink; everything under it is black. */
.masthead {
  padding-block: clamp(1.5rem, 3vw, 2.25rem) 0;
}

.wordmark {
  margin: 0 0 0.45rem;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.masthead::after {
  content: "";
  display: block;
  height: 4px;
  border-top: 3px solid var(--green);
  border-bottom: 1px solid var(--rule);
}

/* The lede. The headline is a sentence someone would say, so it is set as one:
   the document serif at book weight, about fifty characters to the line, open
   leading. What makes it the loudest thing on the page is that it runs the
   width of the frame while everything under it is at text size — measure and
   leading rather than sheer weight, which is what keeps it a sentence rather
   than a slogan.

   Serif stacks here ship Regular and Bold only. Nothing on this page asks a
   serif for 500 or 600: the browser would synthesise it by smearing the
   outline, which looks exactly like the cheap render it is. */
#lede { padding-block: clamp(2.25rem, 5vw, 3.75rem) var(--band-minor); }

#lede h1 {
  max-width: 24em;
  font-size: clamp(1.4rem, 1.05rem + 1.55vw, 2.3rem);
  font-weight: 400;
  line-height: 1.26;
  text-wrap: pretty;
}

.lede-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  max-width: 56rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* The record speaking. Same device as the code quoted further down: behind a
   rule in the firm's ink, at full black, a size up from the prose beside it. */
#lede .evidence {
  margin: 0;
  padding-left: 1.05rem;
  border-left: 2px solid var(--green);
  font-size: clamp(1.0625rem, 1.02rem + 0.3vw, 1.175rem);
  line-height: 1.5;
  text-wrap: pretty;
}

#lede .dek {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
}

/* The docket. This is the software, so it is the one block set in the sans —
   and it is framed the way a printed table is: a caption above it, rules
   around and between, a footnote below. No radius, no shadow, no tint; the
   white is the form printed on the sheet.

   A filer reads this list for three things, in this order: when the crew can
   start, what has to happen to hold that date, and which job — which they know
   by address. So the day is the first column and the heaviest thing in the
   row, and there is no job counter, because nobody with jobs to run needs to
   be told how many they have. */
#filings { padding-bottom: var(--band-major); }

.panel-caption {
  margin-bottom: 0.55rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.panel {
  border: 1px solid var(--rule);
  background: var(--sheet);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

.cols,
.jobs li {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.55fr) minmax(0, 1.05fr);
  gap: 0.3rem 1.5rem;
  padding: 0.8rem clamp(0.9rem, 2.2vw, 1.4rem);
}

/* Field captions, the way a form heads a column: small, sentence case,
   ordinary weight. Uppercase letter-spaced micro-labels are dashboard
   convention and were most of what made this block read as one. */
.cols {
  padding-block: 0.55rem;
  border-bottom: 2px solid var(--ink);
  color: var(--ink-3);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.jobs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jobs li + li { border-top: 1px solid var(--rule-faint); }

.cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.cell .sub {
  color: var(--ink-3);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* The answer to the only question the headline raises. */
.start .when {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.job .name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Whether something is owed is carried by ink, not by hue: black and semibold
   where there is something to do, grey and regular where there is not. One
   axis, and it is the same axis the rest of the page uses for emphasis. */
.todo .act {
  font-size: 0.9375rem;
  line-height: 1.35;
}

.todo.due .act {
  color: var(--ink);
  font-weight: 600;
}

.todo.clear .act { color: var(--ink-3); }

.panel-note {
  max-width: var(--measure);
  margin: 0.8rem 0 0;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* The labelled record. Everything that argues in prose takes the same two
   columns — what this section is, in the margin, then the section. It is the
   device a statute or a printed policy uses for its side-notes, and it gives
   the page one spine to read down. */
#already-here,
#boundary,
#pricing,
#rules,
#cta {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--rail-gap);
  align-items: start;
}

#already-here .rail,
#boundary .rail,
#pricing .rail,
#rules .rail,
#cta .rail { text-align: right; }

#already-here .body > p,
#boundary .body > p,
#rules .body > p,
#cta .body > p,
#pricing .body > p { max-width: var(--measure); }

/* Bands. Space carries the hierarchy; a rule appears only where one argument
   ends and the next begins, which is three places, not eight. */
#already-here { padding-block: 0 var(--band-major); }

#pillars,
#pricing,
#cta { border-top: 1px solid var(--rule); }

#pillars { padding-block: var(--band-major) var(--band-minor); }

#boundary { padding-block: 0 var(--band-major); }

#pricing { padding-block: var(--band-major) var(--band-minor); }

#rules { padding-block: 0 var(--band-major); }

#cta { padding-block: var(--band-major); }

/* Marginal headings, in three ranks. Bold rather than a weight the serif does
   not have, and no tracking: a printed side-note is set in the text face. */
#already-here h2,
#pricing h2,
#cta h2 {
  font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

#already-here .body p {
  max-width: 31rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.175rem);
  line-height: 1.55;
}

#boundary h2 {
  color: var(--ink-2);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

/* The three pillars, as three parts of one argument — a report's columns, not
   a grid of feature cards: no box, no fill, no radius, one rule each at the
   weight the letterhead uses.

   Not three equal thirds. Pillar 3 carries the whole regulatory argument —
   two paragraphs, the code quoted, and the penalty — against pillar 2's single
   paragraph, so equal columns leave a third of the band empty under the first
   two. The words are frozen and the citations are frozen, so the grid is the
   only thing here that can move. */
#pillars {
  display: grid;
  grid-template-columns: minmax(0, 0.89fr) minmax(0, 0.89fr) minmax(0, 1.22fr);
  /* Tighter than the bands elsewhere. Three columns inside a 62rem page leave
     the short two at about 33 characters a line, which is under what a serif
     wants; every rem taken out of the gutters goes back into the measure. */
  gap: clamp(1.5rem, 2.4vw, 2.25rem);
}

#pillars article {
  padding-top: 0.9rem;
  border-top: 2px solid var(--ink);
}

#pillars h2 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.1rem, 1.03rem + 0.35vw, 1.28rem);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

#pillars p {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.55;
}

#pillars strong { color: var(--ink); }

/* What every one of these jobs costs today, before anything is filed. The most
   concrete sentence on the page, so it closes its own pillar at full black
   behind a rule of its own. */
#pillars .cost {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.15rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* The code, quoted. Behind the same rule as the evidence line under the
   headline: those two are the places the record speaks for itself. Set a size
   down from the prose around it — it is evidence being produced, not the
   argument being made. */
#pillars blockquote {
  margin: 1.1rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--green);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Pricing as a fee schedule, which is the form this page's own reader already
   knows: the state charges for a notification in printed bands, quoted three
   inches below this, and we charge in bands too. Ruled rows, the amount set at
   text size in the same face as everything else. A boxed card with a 30px
   numeral is pricing-page furniture and it was the loudest software tell left
   on the page.

   Stacking the plans rather than standing them side by side also lands the
   three identical $49 rates in a column, one under the other, which shows that
   the rate does not change with the plan better than three cards ever did. */
#pricing .deck {
  margin: 0 0 1.35rem;
  color: var(--ink-2);
}

/* Held to the measure the prose around it takes, so the section has one right
   edge. Left to fill the body column the schedule ran wider than every sentence
   above and below it, which reads as a table that overshot rather than as one
   set to the page. */
.plans,
.payg { max-width: 33rem; }

.plans {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.plans li,
.payg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name   amount"
    "covers extra";
  column-gap: 1.5rem;
  align-items: baseline;
  padding-block: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--rule-faint);
}

.plans h3,
.payg h3 {
  grid-area: name;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.amount {
  grid-area: amount;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.amount span {
  color: var(--ink-2);
  font-weight: 400;
}

.plans .covers {
  grid-area: covers;
  margin: 0.15rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.plans .extra {
  grid-area: extra;
  margin: 0.15rem 0 0;
  color: var(--ink-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

/* The on-ramp, not the business. It closes the schedule under a heavier rule
   rather than standing beside the plans as a fourth one, and its note runs the
   full width instead of sitting in the column the rates line up in. */
.payg {
  grid-template-areas:
    "name amount"
    "note note";
  margin-bottom: 1.5rem;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.payg-price { display: contents; }

.payg-note {
  grid-area: note;
  max-width: 30rem;
  margin: 0.15rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* The comparison against the state's own fee: the one sentence in this section
   that is quoting the record rather than quoting us. */
#pricing .anchor {
  margin-top: 1.3rem;
  padding-left: 1.05rem;
  border-left: 2px solid var(--green);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* Reference matter. Quieter than everything above it on purpose: it is there
   to be checked, not read. */
#rules h2 {
  color: var(--ink-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
}

#rules p {
  color: var(--ink-3);
  font-size: 0.9375rem;
  line-height: 1.6;
}

#rules strong {
  color: var(--ink-2);
  font-weight: 700;
}

/* The ask. Form furniture, so it is set in the sans: sentence-case captions at
   ordinary weight above square boxes, the way a paper form heads a field. One
   field, one challenge and one button, all on the same two edges. */
/* 21rem, not 23rem: the form column is fixed, so every rem it takes comes out
   of the sentence beside it, which was down to about 265px and four lines.
   21rem is 336px, which still clears the 300px Turnstile will not render
   below. */
#cta .body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 2.25rem;
  align-items: start;
}

#cta form {
  width: min(100%, 21rem);
  margin-top: 0;
}

#cta label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink-2);
  font: 400 0.875rem/1.35 var(--sans);
}

/* The second field's label needs the space above it that the first one gets
   from the paragraph above the form. :first-of-type counts labels among the
   form's own children, so the honeypot's label — nested in .trap — is not one
   of them and cannot claim the gap. */
#cta form > label:not(:first-of-type) { margin-top: 1.05rem; }

/* The border is --ink-3, not the --rule token the dividers use. --rule is
   decorative and may sit near-invisible; this border is the only thing marking
   where a control is, so WCAG 1.4.11 applies and wants 3:1 against the ground
   behind it. --ink-3 measures 6.1:1 on the sheet and 6.7:1 on white. */
#cta input[type="email"],
#cta select {
  width: 100%;
  /* The line box, the padding above and below it, and the two borders — the
     three numbers on the next lines, added up. A select draws its own inner
     line box and ignores the inherited line-height, which leaves it about two
     pixels short of the input and the pair stacked with a visible step. Both
     controls state the height so neither depends on how its box is drawn. */
  min-height: calc(1.5em + 1.2rem + 2px);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background: var(--sheet);
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
}

#cta input[type="email"]::placeholder { color: var(--ink-3); }

#cta input[type="email"]:focus-visible,
#cta select:focus-visible { border-color: var(--green); }

/* The disclosure arrow stays the browser's own. Drawing our own would mean a
   background image, and the only source style-src 'self' leaves is a data:
   URI. The UA shape is also the one the platform's own selects use, which is
   what tells a reader this opens a list. The arrow and the popup list of 51
   options behind it are drawn from `color-scheme` on :root and from no token,
   which is why that property is pinned to light rather than left to follow the
   visitor's OS. */
#cta select { cursor: pointer; }

/* Why an out-of-state reader would touch the field at all: help for the
   control above it, not another sentence of the argument. */
#jurisdiction-note,
#opening-note {
  margin: 0.4rem 0 0;
  font: 400 0.875rem/1.45 var(--sans);
}

#jurisdiction-note { color: var(--ink-3); }

/* A shade darker than the note above it, and set off by its own space. Both
   are help for the same control, but this one is the page keeping a promise
   straight — what the September 14 email is, and who does not get one — and a
   reader deciding whether to hand over an address has to actually read it. Fine
   print is where that sentence would go to die. */
#opening-note {
  margin-top: 0.7rem;
  color: var(--ink-2);
}

/* Turnstile renders itself into this box at data-size="flexible": full width
   of the form column, so its two edges are the input's and the button's.
   Reserving the height keeps the button from jumping once the widget loads —
   72px, which is what the rendered widget measures, not the 65px the docs give
   for the frame inside it. */
#cta .cf-turnstile {
  min-height: 72px;
  margin-top: 1rem;
}

#cta button {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--green);
  border-radius: 0;
  background: var(--green);
  color: #ffffff;
  font: 600 1rem/1.2 var(--sans);
  cursor: pointer;
}

#cta button:hover { opacity: 0.88; }

/* While a submission is in flight the button stays enabled and focusable —
   disabling it drops keyboard focus to <body> and nothing puts it back, so a
   keyboard user would have to tab from the top of the page to retry. The guard
   flag in waitlist.js stops the double submit; aria-busy on the button draws
   it. On the button and not on the form: the form is an ancestor of the
   role="status" region, and aria-busy on an ancestor tells assistive tech to
   withhold what is inside it — which would silence the one line on the page
   that says whether the address was recorded. */
#cta button[aria-busy="true"] {
  cursor: default;
  opacity: 0.55;
}

/* The one line on the page that is allowed to say no. Set at reading size in
   the document face rather than as fine print, because a storage failure has
   to land as hard as a success does. */
#waitlist-status:not(:empty) {
  margin: 1rem 0 0;
  color: var(--ink);
  line-height: 1.5;
}

#cta noscript {
  display: block;
  margin-top: 1.05rem;
  color: var(--ink-3);
  font: 400 0.875rem/1.5 var(--sans);
}

/* The honeypot. `display: none` is detected by the better bots, so it is
   positioned off-screen instead: absent to a person, present to a machine. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The two pages that are one sentence long: the 404, and what a native form
   POST renders when JavaScript is off. Neither argues anything, so neither is
   allowed to run to the width of the frame. */
#notice { padding-block: clamp(2.75rem, 8vw, 5rem) var(--band-major); }

#notice h1 {
  max-width: 22ch;
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: pretty;
}

#notice p {
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.175rem);
  line-height: 1.55;
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2rem;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-block: 1.6rem 3.5rem;
  color: var(--ink-3);
  font: 400 0.875rem/1.5 var(--sans);
}

footer p { margin: 0; }

/* One column. The marginal heading stops being a margin and becomes a heading,
   and the pillars drop to two. */
@media (max-width: 60rem) {
  .lede-support {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  #already-here,
  #boundary,
  #pricing,
  #rules,
  #cta {
    grid-template-columns: minmax(0, 1fr);
  }

  #already-here .rail,
  #boundary .rail,
  #pricing .rail,
  #rules .rail,
  #cta .rail {
    margin-bottom: 0.8rem;
    text-align: left;
  }

  #cta .body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  #pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The docket keeps all three pieces of information, but the job moves above
   the two cells that answer questions about it and the column caption becomes
   a label on each cell. Stacking all three would make one row as tall as a
   paragraph and the list would stop being a list. */
@media (max-width: 44rem) {
  #pillars { grid-template-columns: minmax(0, 1fr); }

  .cols { display: none; }

  .jobs li {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas:
      "job   job"
      "start todo";
    gap: 0.65rem 1.1rem;
  }

  .jobs .start { grid-area: start; }

  .jobs .job { grid-area: job; }

  .jobs .todo { grid-area: todo; }

  .jobs .start .cell-label,
  .jobs .todo .cell-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0.05rem;
    overflow: visible;
    clip-path: none;
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.3;
  }

  /* The schedule's amount stays on its name's line — the pair is the row — and
     the sentences under it take the full width rather than splitting a
     300px-wide column in two. */
  .plans li {
    grid-template-areas:
      "name   amount"
      "covers covers"
      "extra  extra";
  }

  .plans .extra { text-align: left; }
}

@media (max-width: 34rem) {
  :root { --gutter: 1.125rem; }
}

/* Turnstile will not render narrower than 300px, so at a 320px viewport the
   page gutters are what decide whether the widget pushes the page sideways.
   0.625rem leaves exactly 300, which keeps the input, the challenge and the
   button on the same two edges instead of letting one of them bleed. */
@media (max-width: 21.5rem) {
  :root { --gutter: 0.625rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}