@charset "utf-8";
/* ==========================================================================
   Catomni Support — support.catomni.app
   Palette and typography follow the Catomni Studio brand guidelines. The seven
   hex values are the guidelines' own, and they match catomni.app's live CSS
   custom properties exactly, so neither source is being approximated.

   Browser baseline is deliberately conservative: Chrome/Edge 100+, Safari 15.0.
   That rules out :has(), @layer, container queries, CSS nesting and
   color-mix(). Selection state is therefore expressed with the
   `:checked ~ sibling` pattern, which has worked since IE9.

   Two deviations from the product palette, both required by §11 (accessibility
   is non-negotiable and wins where the two disagree):
     1. Input and component borders use Ink #302424 (14.0:1 on cream), not
        Catomni's --border #e7daca (1.3:1, far under the 3:1 that 1.4.11
        requires of a boundary identifying a control). #e7daca stays on
        decorative dividers and card edges, where 1.4.11 does not apply.
     2. Coral #e78459 never carries cream text (2.5:1). Where coral is a fill it
        takes ink (5.6:1), which is Catomni's own pairing in its dark theme.

   Teal #084054 and Mist #a4b0bd are the palette's two cool notes, and neither
   is applied. Against a warm cream ground they read as blue sitting on top of
   an earth-tone system rather than as part of it. Ink carries text, borders and
   fills; coral is the one accent; tan carries muted text on dark surfaces. Mist
   is kept as a token so the intent is on the record; teal has no token at all,
   because nothing here is a candidate for it.
   ========================================================================== */

/* --- self-hosted faces ---------------------------------------------------
   Inter is served from our own origin as WOFF2, matching catomni.app's
   --font-sans. Some networks block fonts.googleapis.com outright, and a
   third-party font CDN in the request chain is a needless question to answer in
   a procurement review.

   One file, latin subset: Inter is variable, so a single WOFF2 carries every
   weight the page uses. Every stack ends in a real system font, so a blocked or
   missing file degrades to Segoe UI or Arial rather than to an unstyled page. `local()` is deliberately NOT used: it would make a
   workstation with some other 'Inter' installed render different metrics than
   anything QA saw. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  /* A range, not a weight: Google ships Inter and Rosario as variable fonts, so
     each weight URL is byte-identical and one file carries the whole axis.
     Verified in Chromium — 400 and 600 measure different widths from the single
     file, and both differ from the fallback. */
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Rosario';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/rosario.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Kolker Brush';
  font-style: normal;
  /* One weight, no axis. A brush script, and currently unreferenced — see the
     `--sc-font-display` note below. An unused family is never downloaded, so
     the declaration costs nothing but keeps the face one token away. */
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/kolker-brush.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  /* brand — catomni.app's own tokens, light theme */
  --sc-strong: #302424;       /* --brand-ink; headings, labels, strong text */
  --sc-dark-navy: #302424;    /* --brand-ink / --foreground; dark surfaces */
  --sc-primary: #302424;      /* primary fill; cream on ink is 14.0:1 */
  --sc-seafoam: #cdb9a8;      /* --brand-tan, decorative only */
  --sc-emerald: #e78459;      /* --brand-coral, accent */
  --sc-aqua: #e78459;         /* --brand-coral */
  --sc-mint: #f8e3d4;         /* --accent */
  --sc-light-grey: #f1e7da;   /* --secondary */
  /* --brand-mist. In the palette and deliberately unused: it is the one cool
     note, and on a warm cream ground it reads as blue sitting on top of an
     earth-tone system rather than part of it. Kept as a token, not applied. */
  --sc-mist: #a4b0bd;
  --sc-off-white: #fcf7f0;    /* --background, brand cream */
  --sc-white: #fffcf7;        /* --card */

  /* derived, accessibility-driven */
  --sc-ink: #302424;          /* body text, 14.0:1 on cream */
  --sc-ink-muted: #6b5d57;    /* --muted-foreground, 5.9:1 on cream */
  --sc-border: #e7daca;       /* --border, decorative dividers only */
  --sc-border-strong: #302424; /* input + component boundaries, 14.0:1 */
  --sc-danger: #af3709;       /* --destructive / --brand-ember, 5.8:1 */
  --sc-danger-bg: #fdf1ea;
  --sc-warn: #8a5300;         /* --warning, 5.4:1 on cream */
  --sc-warn-bg: #fdf5e8;
  --sc-focus: #af3709;        /* --ring, 5.8:1 */

  /* type */
  /* The three roles the brand guidelines name, and the one they name that is
     not freely licensed:
       Kolker Brush  Heading — "main titles and key focal points". A brush
                     script. Kept as a token and nothing more: the hero title
                     now takes the header wordmark's face, so no rule consumes
                     this, and the browser never fetches the file.
       Rosario       "Body & Number", letter spacing 1. Paragraphs and prose.
       Inter         assigned to "dashboards ... and login portals", which is
                     what this is, so it takes every control, label and button —
                     the wordmark, and now the hero title with it.
       Inlander      the secondary face for subheadings and captions. Not on
                     Google Fonts and not freely licensed, so Inter covers those
                     roles instead — its own stated remit here. */
  --sc-font-display: 'Kolker Brush', 'Segoe Script', 'Brush Script MT', cursive;
  --sc-font-body: 'Rosario', 'Segoe UI', Arial, Helvetica, sans-serif;
  --sc-font-heading: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
  --sc-font-ui: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
  --sc-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* layout */
  /* One gutter for every column grid on the page. The form had three — 0.7rem
     between the choice cards, 1rem between fields, 1.5rem between the paired
     fieldsets — so no two grids shared a column edge and nothing below the hero
     lined up with anything above it. One value is what makes a grid a grid. */
  --sc-gutter: 1.25rem;

  --sc-radius: 10px;          /* --radius: .625rem */
  --sc-radius-sm: 6px;
  --sc-shadow: 0 1px 2px rgba(48, 36, 36, 0.06), 0 8px 24px rgba(48, 36, 36, 0.07);
  --sc-tap: 44px;

  color-scheme: light;
}

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

/* The UA rule for [hidden] is a bare attribute selector, so any class rule that
   sets `display` beats it. Without this, a hidden error message still paints
   its ⚠ glyph. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* "LETTER SPACING 1" against Rosario in the guidelines. */
  letter-spacing: 0.01em;
  background: var(--sc-off-white);
  color: var(--sc-ink);
  font-family: var(--sc-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* §10: no decorative tracking on body text — it hurts readability in inputs. */
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
legend {
  font-family: var(--sc-font-heading);
  font-weight: 600;
  color: var(--sc-strong);
  margin: 0 0 0.4em;
  line-height: 1.25;
}

a {
  color: var(--sc-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--sc-strong);
}

p {
  margin: 0 0 0.85rem;
}

/* --- focus -----------------------------------------------------------------
   :focus first for Safari 15.0–15.3, which has no :focus-visible. Modern
   engines then narrow it to keyboard focus. The ring is solid rather than the
   40%-opacity ring in §10: at 40% Emerald drops under the 3:1 required of a
   focus indicator. */
:focus {
  outline: 3px solid var(--sc-focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--sc-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--sc-white);
  color: var(--sc-strong);
  font-family: var(--sc-font-ui);
  font-weight: 600;
  padding: 0.75rem 1.1rem;
  border-radius: 0 0 var(--sc-radius) 0;
}
.skip-link:focus {
  left: 0;
}

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

/* ==========================================================================
   Header
   ========================================================================== */

/* catomni.app's own header is light: cream ground, ink wordmark, coral mark.
   The hero below it stays dark, which is the product's dark surface. */
.site-header {
  background: var(--sc-off-white);
  color: var(--sc-ink);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sc-border);
}
.site-header .inner {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  min-height: var(--sc-tap);
}
.brand:hover .wordmark {
  text-decoration: underline;
}
/* The mark is 1036x420, so it is sized by height and left to find its width.
   `currentColor` on the paths means the colour lives here, in one place. */
.mark {
  height: 24px;
  width: auto;
  flex: 0 0 auto;
  color: var(--sc-emerald);
}
.wordmark {
  font-family: var(--sc-font-ui);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--sc-ink);
}
.site-header nav {
  margin-left: auto;
  display: flex;
  gap: 1.1rem;
  font-family: var(--sc-font-ui);
  font-size: 0.9rem;
}
.site-header nav a {
  color: var(--sc-ink-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--sc-tap);
}
.site-header nav a:hover,
.site-header nav a:focus {
  color: var(--sc-ink);
  text-decoration: underline;
}
@media (max-width: 640px) {
  .site-header nav {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--sc-dark-navy);
  color: var(--sc-white);
  padding: 2.1rem 1.25rem 2.9rem;
  text-align: center;
}
.hero .inner {
  max-width: 640px;
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--sc-font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sc-aqua);
  margin: 0 0 0.55rem;
}
/* The hero title takes the wordmark's face and treatment exactly — Inter via
   `--sc-font-ui`, weight 500, letter spacing -0.02em — so the largest line on
   the page speaks in the same voice as "Catomni" in the header. A sans needs
   far less room than the brush script it replaces, so the sizing returns to the
   sans scale: clamp() from 1.5rem, which stays legible at 360px. */
.hero h1 {
  color: var(--sc-white);
  font-family: var(--sc-font-ui);
  font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 0.35rem;
}
.hero p {
  color: var(--sc-mint);
  margin: 0.5rem auto 0;
  max-width: 52ch;
}

/* ==========================================================================
   Layout
   ========================================================================== */

main {
  max-width: 820px;
  margin: -1.7rem auto 3rem;
  padding: 0 1rem;
}

/* One content inset, on every page. The number is the confirmation card's, not
   the old 1.75rem, because the roomier value is the one that reads as
   deliberate at the top of a page — and a submitter meets these cards one at a
   time, so any two that inset differently look like two different products.
   `.confirm` re-states it with the hero overlap added; see the Confirmation
   section. */
.card {
  background: var(--sc-white);
  border: 1px solid var(--sc-seafoam);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  padding: 2.4rem;
}
@media (max-width: 520px) {
  .card {
    padding: 1.15rem;
  }
  main {
    padding: 0 0.75rem;
  }
}
/* The inset only holds at the bottom if nothing adds to it. A card ending on a
   paragraph was handing back the padding plus that paragraph's 0.85rem bottom
   margin — 53px against the 39.4px above it — while a card ending on a button
   measured true. Zeroing the last child's margin leaves the padding as the only
   thing setting the bottom gap, whatever the card happens to end on. */
.card > :last-child {
  margin-bottom: 0;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.8rem;
  /* UA stylesheets set min-inline-size: min-content on fieldset, so one
     unshrinkable child — a native file input — widens the whole form past the
     viewport. */
  min-inline-size: 0;
  min-width: 0;
}
legend {
  font-size: 1.06rem;
  padding: 0;
  margin-bottom: 0.2rem;
}
.legend-hint {
  font-family: var(--sc-font-body);
  font-size: 0.92rem;
  color: var(--sc-ink-muted);
  margin: 0 0 0.7rem;
}

/* ==========================================================================
   Choice cards — the "Something's broken / I need something new" pair.

   A visually-hidden real radio drives everything. That keeps the control
   keyboard-operable and correctly announced with no JavaScript at all, and the
   selected state is carried by the native radio, a 2px border, a tinted fill
   and a check glyph — four signals, only one of which is colour.
   ========================================================================== */

/* Two explicit columns on the same gutter as everything else, collapsing at the
   same 620px the fields do. `auto-fit, minmax(210px, 1fr)` collapsed at its own
   width instead, so between roughly 480px and 620px the cards were still two-up
   while every field below them had already stacked. */
.choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sc-gutter);
}
@media (max-width: 620px) {
  .choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.choice {
  position: relative;
  display: block;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.choice-body {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: var(--sc-tap);
  height: 100%;
  padding: 0.85rem 0.95rem;
  background: var(--sc-light-grey);
  border: 2px solid var(--sc-seafoam);
  border-radius: var(--sc-radius);
  cursor: pointer;
  font-family: var(--sc-font-ui);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--sc-strong);
}
.choice-body .tick {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.1rem;
  display: block;
}
.tick-ring {
  fill: var(--sc-white);
  stroke: var(--sc-primary);
  stroke-width: 2;
}
.tick-check {
  fill: none;
  stroke: transparent;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.choice-text {
  display: block;
}
.choice-text small {
  display: block;
  font-family: var(--sc-font-body);
  font-weight: 400;
  font-size: 0.87rem;
  color: var(--sc-ink-muted);
  margin-top: 0.15rem;
}
.choice:hover .choice-body {
  border-color: var(--sc-primary);
}
.choice input:checked ~ .choice-body {
  border-color: var(--sc-strong);
  background: var(--sc-mint);
}
.choice input:checked ~ .choice-body .tick-ring {
  fill: var(--sc-emerald);
  stroke: var(--sc-strong);
}
.choice input:checked ~ .choice-body .tick-check {
  stroke: var(--sc-white);
}
.choice input:focus ~ .choice-body {
  outline: 3px solid var(--sc-focus);
  outline-offset: 2px;
}
.choice input:focus:not(:focus-visible) ~ .choice-body {
  outline: none;
}
.choice input:focus-visible ~ .choice-body {
  outline: 3px solid var(--sc-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Fields
   ========================================================================== */

/* `minmax(0, 1fr)` rather than `1fr`: a grid item's default minimum is its
   min-content width, so a long unbroken value — an email address, a pasted URL —
   widens its column and pushes the row past the card instead of wrapping. */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--sc-gutter);
}
@media (max-width: 620px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field {
  margin-bottom: 1.1rem;
}
.field > label,
.field > .label {
  display: block;
  font-family: var(--sc-font-ui);
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--sc-strong);
  margin-bottom: 0.3rem;
}
.req {
  color: var(--sc-primary);
  font-weight: 700;
}
.req-word {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--sc-primary);
}
.optional {
  font-family: var(--sc-font-body);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--sc-ink-muted);
}
.hint {
  font-size: 0.87rem;
  color: var(--sc-ink-muted);
  margin: 0.2rem 0 0.35rem;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
textarea,
select {
  width: 100%;
  min-height: var(--sc-tap);
  /* A control, not prose. The guidelines put Inter on portal UI, and a
     humanist body face in an input reads as content rather than as a field. */
  font-family: var(--sc-font-ui);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--sc-ink);
  background: var(--sc-white);
  border: 2px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-sm);
  padding: 0.6rem 0.7rem;
}
textarea {
  min-height: 140px;
  resize: vertical;
}
select {
  /* Own arrow, drawn in CSS so no image request and no JS. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sc-strong) 50%),
    linear-gradient(135deg, var(--sc-strong) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
input::placeholder,
textarea::placeholder {
  color: var(--sc-ink-muted);
  opacity: 1;
}
.char-count {
  font-family: var(--sc-font-ui);
  font-size: 0.8rem;
  color: var(--sc-ink-muted);
  margin: 0.25rem 0 0;
  text-align: right;
}

/* --- errors ---------------------------------------------------------------
   Never colour-only: the message carries an icon glyph and the word, the
   border thickens, and aria-invalid + aria-describedby wire it to the input. */
.error {
  display: block;
  font-family: var(--sc-font-ui);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--sc-danger);
  margin: 0.3rem 0 0;
}
.error::before {
  content: '\26A0\FE0E  ';
}
.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: var(--sc-danger);
  background: var(--sc-danger-bg);
}
.field.invalid > label {
  color: var(--sc-danger);
}

.error-summary {
  border: 2px solid var(--sc-danger);
  border-radius: var(--sc-radius);
  background: var(--sc-danger-bg);
  padding: 1rem 1.1rem;
  margin: 0 0 1.5rem;
}
.error-summary h2 {
  font-size: 1.02rem;
  color: var(--sc-danger);
  margin: 0 0 0.4rem;
}
.error-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}
.error-summary li + li {
  margin-top: 0.25rem;
}
.error-summary a {
  color: var(--sc-danger);
  font-weight: 600;
}

.notice {
  border: 1px solid var(--sc-seafoam);
  border-left: 4px solid var(--sc-emerald);
  border-radius: var(--sc-radius-sm);
  background: var(--sc-off-white);
  padding: 0.75rem 0.9rem;
  font-size: 0.93rem;
  margin: 0.8rem 0 0;
}
.notice.warn {
  border-color: var(--sc-seafoam);
  border-left-color: var(--sc-warn);
  background: var(--sc-warn-bg);
  color: var(--sc-warn);
}
.notice.warn a {
  color: var(--sc-warn);
}
.notice strong {
  font-family: var(--sc-font-ui);
}

/* ==========================================================================
   Attachments
   ========================================================================== */

.drop {
  display: block;
  border: 2px dashed var(--sc-primary);
  border-radius: var(--sc-radius);
  background: var(--sc-off-white);
  padding: 1.2rem;
  text-align: center;
}
/* The label wraps the real input, so focus inside it must be visible on the
   whole zone. :focus-within is Safari 10.1+, comfortably inside the baseline. */
.drop:focus-within {
  outline: 3px solid var(--sc-focus);
  outline-offset: 2px;
}
.drop-title {
  display: block;
  font-family: var(--sc-font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--sc-strong);
  cursor: pointer;
}
.drop-sub {
  display: block;
  font-size: 0.92rem;
  color: var(--sc-ink-muted);
  margin: 0.15rem 0 0.7rem;
}
.drop.over {
  border-style: solid;
  border-color: var(--sc-emerald);
  background: var(--sc-mint);
}
.drop .types {
  display: block;
  font-family: var(--sc-font-body);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--sc-ink-muted);
  margin: 0.7rem auto 0;
  max-width: 46ch;
}
/* The real input is always present and always reachable — it is only visually
   restyled, never replaced by the drop zone (§11 keyboard operability). */
.drop input[type='file'] {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  /* Its intrinsic width is the button plus the "no file chosen" text, which
     does not shrink on its own. */
  min-width: 0;
  width: 100%;
  font-family: var(--sc-font-body);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.drop input[type='file']::file-selector-button {
  font-family: var(--sc-font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--sc-white);
  background: var(--sc-primary);
  border: 0;
  border-radius: var(--sc-radius-sm);
  padding: 0.6rem 1rem;
  margin-right: 0.7rem;
  min-height: var(--sc-tap);
  cursor: pointer;
}

.guard {
  background: var(--sc-warn-bg);
  border: 1px solid var(--sc-seafoam);
  border-left: 4px solid var(--sc-warn);
  border-radius: var(--sc-radius-sm);
  padding: 0.7rem 0.85rem;
  font-size: 0.92rem;
  color: var(--sc-warn);
  margin: 0.8rem 0 0;
}

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}
.thumb {
  position: relative;
  overflow-wrap: anywhere;
  /* No overflow:hidden here — it would clip the hit area of the remove button,
     which is deliberately positioned outside the chip's box. */
  width: 104px;
  border: 2px solid var(--sc-aqua);
  border-radius: 4px;
  background: var(--sc-off-white);
  padding: 0.35rem;
  font-family: var(--sc-font-ui);
  font-size: 0.7rem;
  color: var(--sc-strong);
  word-break: break-all;
}
.thumb img {
  display: block;
  width: 100%;
  height: 58px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 0.3rem;
  background: var(--sc-light-grey);
}
.thumb .doc {
  display: block;
  height: 58px;
  line-height: 58px;
  text-align: center;
  font-size: 1.4rem;
  background: var(--sc-light-grey);
  border-radius: 2px;
  margin-bottom: 0.3rem;
}
.thumb button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: var(--sc-tap);
  height: var(--sc-tap);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.thumb button span {
  display: block;
  width: 24px;
  height: 24px;
  margin: 10px 10px 0 auto;
  border-radius: 50%;
  background: var(--sc-danger);
  color: var(--sc-white);
  font-size: 0.85rem;
  line-height: 24px;
  text-align: center;
  font-weight: 700;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--sc-tap);
  font-family: var(--sc-font-ui);
  font-weight: 700;
  font-size: 1rem;
  color: var(--sc-white);
  background: var(--sc-primary);
  border: 2px solid var(--sc-primary);
  border-radius: var(--sc-radius-sm);
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  background: var(--sc-strong);
  border-color: var(--sc-strong);
  color: var(--sc-white);
}
.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}
.btn.ghost {
  color: var(--sc-strong);
  background: var(--sc-white);
  border-color: var(--sc-border-strong);
  font-size: 0.93rem;
  padding: 0.55rem 1.1rem;
}
.btn.ghost:hover {
  background: var(--sc-off-white);
  color: var(--sc-strong);
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--sc-light-grey);
  padding-top: 1.3rem;
}
@media (max-width: 520px) {
  .submit-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    width: 100%;
  }
  /* Turnstile's flexible size wants the full width once it is on its own row. */
  .turnstile-wrap,
  .turnstile-slot {
    width: 100%;
  }
}
.turnstile-wrap {
  /* The Turnstile iframe has a documented 300px floor. At a 320px viewport the
     card is narrower than that, so it scrolls inside this box rather than
     pushing the whole document sideways. */
  max-width: 100%;
  overflow-x: auto;
  flex: 0 1 auto;
}
.turnstile-slot {
  min-height: 0;
  max-width: 100%;
  /* Deliberately not `flex: 1 1 300px`: the submit row switches to a column on
     narrow screens, where flex-basis applies to the height and would reserve
     300px of empty space under the button. */
  flex: 0 1 auto;
}

.privacy {
  font-size: 0.86rem;
  color: var(--sc-ink-muted);
  border-top: 1px solid var(--sc-light-grey);
  margin: 1.3rem 0 0;
  padding-top: 0.9rem;
}
.privacy a {
  font-weight: 600;
}

/* ==========================================================================
   Confirmation + status
   ========================================================================== */

/* `main` carries `margin-top: -1.7rem`, which lifts the first card into the
   hero. On a light card that overlap is the point — you see the card's own edge
   cross the boundary. This card is `--sc-strong`, the exact colour the hero is
   painted in, so its top 1.7rem does not read as card at all: it merges into the
   hero and the heading looks jammed against the boundary, 12px of visible space
   above against 38px below.

   So the top padding carries the overlap on top of the shared inset —
   2.4rem + 1.7rem — and the sides and bottom keep the inset alone. That is what
   makes this card measure the same from its visible top edge as a light card
   does from its real one: identical on every page, and symmetric top to bottom
   on this one. The 520px block below does the same arithmetic against the
   narrow inset, because the overlap does not shrink with the viewport. */
.confirm {
  background: var(--sc-strong);
  border-color: var(--sc-strong);
  color: var(--sc-mint);
  text-align: center;
  padding: 4.1rem 2.4rem 2.4rem;
}
@media (max-width: 520px) {
  .confirm {
    padding: 2.85rem 1.15rem 1.15rem;
  }
}
.confirm h1,
.confirm h2 {
  color: var(--sc-white);
}
.confirm p {
  max-width: 50ch;
  margin: 0.4rem auto;
}
.confirm strong {
  color: var(--sc-white);
}
.ref {
  display: inline-block;
  font-family: var(--sc-font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--sc-aqua);
  background: rgba(231, 132, 89, 0.14);
  border: 1px solid var(--sc-aqua);
  border-radius: var(--sc-radius-sm);
  padding: 0.55rem 1.1rem;
  margin: 0.9rem 0;
}
.confirm .btn.ghost {
  background: transparent;
  color: var(--sc-mint);
  border-color: var(--sc-seafoam);
  margin-top: 1.3rem;
}
.confirm .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sc-white);
}
.confirm a {
  color: var(--sc-aqua);
}
.next-steps {
  text-align: left;
  max-width: 46ch;
  margin: 1.4rem auto 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(205, 185, 168, 0.4);
  border-radius: var(--sc-radius-sm);
  font-size: 0.95rem;
}
.next-steps h2 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--sc-font-ui);
  color: var(--sc-aqua);
  margin: 0 0 0.5rem;
}
.next-steps ol {
  margin: 0;
  padding-left: 1.2rem;
}
.next-steps li + li {
  margin-top: 0.3rem;
}

.status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--sc-light-grey);
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
}
.status-head .ref {
  margin: 0;
  font-size: 1.2rem;
  color: var(--sc-strong);
  background: var(--sc-off-white);
  border-color: var(--sc-seafoam);
}
.pill {
  display: inline-block;
  font-family: var(--sc-font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  border: 1px solid transparent;
}
.pill.received {
  background: var(--sc-light-grey);
  color: var(--sc-strong);
  border-color: var(--sc-seafoam);
}
.pill.review {
  background: var(--sc-mint);
  color: var(--sc-strong);
  border-color: var(--sc-aqua);
}
.pill.progress {
  background: var(--sc-primary);
  color: var(--sc-white);
}
.pill.resolved {
  background: var(--sc-strong);
  color: var(--sc-white);
}
.pill.closed {
  background: var(--sc-white);
  color: var(--sc-ink-muted);
  border-color: var(--sc-border);
}

.timeline {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.timeline li {
  position: relative;
  padding: 0 0 0.9rem 1.6rem;
  border-left: 2px solid var(--sc-light-grey);
  font-size: 0.95rem;
}
.timeline li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0.45rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sc-white);
  border: 3px solid var(--sc-seafoam);
}
.timeline li.done::before {
  background: var(--sc-emerald);
  border-color: var(--sc-strong);
}
.timeline time {
  display: block;
  font-family: var(--sc-font-ui);
  font-size: 0.78rem;
  color: var(--sc-ink-muted);
}

.meta-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.3rem;
}
.meta-table th,
.meta-table td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sc-light-grey);
  padding: 0.5rem 0.4rem;
  font-size: 0.95rem;
}
.meta-table th {
  width: 34%;
  font-family: var(--sc-font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sc-ink-muted);
  font-weight: 700;
}
.verbatim {
  background: var(--sc-off-white);
  border: 1px solid var(--sc-light-grey);
  border-left: 4px solid var(--sc-seafoam);
  border-radius: var(--sc-radius-sm);
  padding: 0.9rem 1rem;
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--sc-font-body);
  font-size: 0.98rem;
}

/* ==========================================================================
   Ops dashboard
   ========================================================================== */

.ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  margin: 0 0 1.5rem;
}
.stat {
  background: var(--sc-white);
  border: 1px solid var(--sc-seafoam);
  border-radius: var(--sc-radius);
  padding: 0.9rem 1rem;
}
.stat b {
  display: block;
  font-family: var(--sc-font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--sc-strong);
  line-height: 1.1;
}
.stat span {
  font-family: var(--sc-font-ui);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-ink-muted);
}
.stat.alarm {
  border-color: var(--sc-danger);
  background: var(--sc-danger-bg);
}
.stat.alarm b {
  color: var(--sc-danger);
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sc-seafoam);
  border-radius: var(--sc-radius);
  background: var(--sc-white);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.data th,
table.data td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--sc-light-grey);
  white-space: nowrap;
}
table.data th {
  background: var(--sc-strong);
  color: var(--sc-white);
  font-family: var(--sc-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
table.data tr:last-child td {
  border-bottom: 0;
}
.bar-cell {
  width: 45%;
  min-width: 90px;
}
.bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--sc-emerald);
  min-width: 2px;
}
/* Bar widths are classes rather than inline styles: `style-src 'self'` with no
   'unsafe-inline' would otherwise drop every width and render flat bars. */
.w-0 {
  width: 0%;
}
.w-5 {
  width: 5%;
}
.w-10 {
  width: 10%;
}
.w-15 {
  width: 15%;
}
.w-20 {
  width: 20%;
}
.w-25 {
  width: 25%;
}
.w-30 {
  width: 30%;
}
.w-35 {
  width: 35%;
}
.w-40 {
  width: 40%;
}
.w-45 {
  width: 45%;
}
.w-50 {
  width: 50%;
}
.w-55 {
  width: 55%;
}
.w-60 {
  width: 60%;
}
.w-65 {
  width: 65%;
}
.w-70 {
  width: 70%;
}
.w-75 {
  width: 75%;
}
.w-80 {
  width: 80%;
}
.w-85 {
  width: 85%;
}
.w-90 {
  width: 90%;
}
.w-95 {
  width: 95%;
}
.w-100 {
  width: 100%;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--sc-dark-navy);
  color: var(--sc-mint);
  padding: 2rem 1.25rem;
  font-size: 0.88rem;
}
.site-footer .inner {
  max-width: 820px;
  margin: 0 auto;
}
.site-footer .fw {
  display: block;
  font-family: var(--sc-font-ui);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--sc-white);
}
.site-footer .tag {
  display: block;
  font-family: var(--sc-font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-aqua);
  margin: 0.2rem 0 0.9rem;
}
.site-footer p {
  max-width: 70ch;
}
.site-footer a {
  color: var(--sc-mint);
  font-weight: 600;
}
.site-footer a:hover {
  color: var(--sc-white);
}
.site-footer .legal {
  display: block;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(205, 185, 168, 0.3);
  font-size: 0.8rem;
  color: var(--sc-seafoam);
}

/* ==========================================================================
   Utilities + motion
   ========================================================================== */

.hidden {
  display: none !important;
}
.center {
  text-align: center;
}
.mt {
  margin-top: 1.2rem;
}
code {
  font-family: var(--sc-font-mono);
  font-size: 0.9em;
  background: var(--sc-off-white);
  border: 1px solid var(--sc-light-grey);
  border-radius: 3px;
  padding: 0.05em 0.3em;
}

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

/* Windows High Contrast / forced colours: keep the state signals that are not
   colour, drop the ones that are. */
/* Windows High Contrast Mode replaces every colour we chose, so the selected
   state has to be re-expressed in system colours — otherwise the check glyph
   and the tinted fill both vanish and selection becomes invisible. */
@media (forced-colors: active) {
  .choice input:checked ~ .choice-body {
    border-style: double;
    border-width: 4px;
  }
  .tick-ring {
    fill: Canvas;
    stroke: CanvasText;
  }
  .choice input:checked ~ .choice-body .tick-ring {
    fill: Highlight;
    stroke: CanvasText;
  }
  .choice input:checked ~ .choice-body .tick-check {
    stroke: Canvas;
  }
  .btn {
    border: 2px solid ButtonText;
  }
  .bar {
    background: Highlight;
  }
}

@media print {
  .site-header nav,
  .btn,
  .drop,
  .skip-link {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .card {
    border: 1px solid #999;
    box-shadow: none;
  }
}