/* Firearm Tracker design system.
   Direction (approved mood board 2026-10-30): Lawfully-light ground, Boundless calm, Parcels' single
   number box, WillowPays' headline-left / live-artefact-right hero.
   Signature: the docket (an application file with a brass marker moving along the SAPS path).
   Everything else stays quiet. One fluid wrap for every module (craft trap 57). */

:root {
  --paper: #f4f6f3;
  --card: #ffffff;
  --ink: #16362d;          /* field green: text, brand */
  --ink-2: #3e564e;        /* secondary text, 7.4:1 on paper */
  --ink-3: #5d6f68;        /* tertiary text, 5.1:1 on paper */
  --line: #d6ded9;
  --line-2: #e6ebe7;
  --brass: #b8862b;        /* fills and marks only, never body text */
  --brass-ink: #7e5a12;    /* brass as text: 6.0:1 on white */
  --brass-wash: #f6eedd;
  --done: #2f7d4f;
  --done-wash: #e5f1e9;
  --wait: #a3b0ab;
  --alert: #a33a2a;
  --alert-wash: #f8e7e3;
  --deep: #102a23;         /* dark band ground */

  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-read: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: min(1240px, 100% - 2 * var(--gut));
  --gut: clamp(16px, 4vw, 40px);
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --shadow: 0 1px 2px rgba(16, 42, 35, .06), 0 8px 28px rgba(16, 42, 35, .08);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* the bottom padding keeps a focused field from scrolling under the floating help button */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; scroll-padding-bottom: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--f-ui); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-s); text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: var(--wrap); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--f-ui); font-stretch: 87.5%; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.5rem + 3.4vw, 4.25rem); line-height: 1.02; font-weight: 750; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.75rem); line-height: 1.08; font-weight: 720; letter-spacing: -.015em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height: 1.2; font-weight: 680; }
p { margin: 0; }
:is(main, .foot) :is(p, li) { max-width: 38em; } /* reading measure: no line past ~75 characters at any width */
main li { text-wrap: pretty; } /* no one-word last line in a list item */
/* a link standing alone in a list, nav, line or table cell is a tap target, not inline prose: give it 24px+ */
main :is(li, p, nav, td) > a:only-child:not(.btn), .crumbs a { display: inline-block; padding-block: 3px; }
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink-2); max-width: 34em; }
.kicker { font-size: .95rem; font-weight: 600; color: var(--brass-ink); margin-bottom: 14px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons + fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 650; font-stretch: 95%; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: #0e2b23; }
.btn--brass { background: var(--brass); color: #1b1305; }
.btn--brass:hover { background: #a7781f; }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--quiet { color: var(--ink); background: transparent; padding-inline: 12px; }
.btn--quiet:hover { background: var(--line-2); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
:is(ul, ol) + .btn { margin-top: 24px; }

.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: .9rem; color: var(--ink-3); }
.field input, .field select, .field textarea {
  min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-s);
  background: #fff; transition: border-color .15s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover { border-color: #b9c6bf; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(184, 134, 43, .35); }
.field .err { color: var(--alert); font-size: .92rem; font-weight: 600; }
/* error state: --alert is the danger token (6.6:1 on white), the ring is the same red at low alpha */
:is(input, select, textarea)[aria-invalid="true"],
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(163, 58, 42, .16); }
.field :is(input, select, textarea)[aria-invalid="true"]:focus { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(163, 58, 42, .3); }
.field:has([aria-invalid="true"]) label { color: var(--alert); }
/* password field with a show/hide control inside the box */
.pw { position: relative; display: grid; }
.pw input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 64px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; border-radius: var(--r-m); cursor: pointer; }
.pw-toggle:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }
/* a button that reads as a text link (switching panels inside the account card) */
.linkish { border: 0; background: none; padding: 10px 0; margin: -10px 0; font: inherit; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--brass-ink); }
.linkish:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
/* the home and track number box draws its border on the wrapper, so the wrapper carries the error */
.lookup:has(input[aria-invalid="true"]) { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(163, 58, 42, .16), var(--shadow); }
.lookup:has(input[aria-invalid="true"]) .lookup__in input { box-shadow: none; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(244, 246, 243, .94); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.hdr.is-scrolled { border-bottom-color: var(--line); }
.hdr__in { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 750; font-stretch: 87.5%; font-size: 1.2rem; letter-spacing: -.01em; }
.brand svg { width: 32px; height: 32px; flex: none; }
.nav { display: flex; gap: 2px; margin-left: 16px; }
.nav a { padding: 10px 12px; border-radius: var(--r-s); text-decoration: none; font-weight: 550; color: var(--ink-2); font-size: .98rem; white-space: nowrap; }
.btn, .brand span { white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--line-2); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }
.hdr__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hdr__search { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--ink); }
.hdr__search:hover { background: var(--line-2); }
.hdr__search svg { width: 20px; height: 20px; }
.hdr__menu { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.hdr__menu svg { width: 22px; height: 22px; margin: auto; }
.hdr .btn { min-height: 44px; }
@media (max-width: 1199px) {
  .nav { display: none; }
  .hdr__menu { display: grid; place-items: center; }
  .hdr__signin { display: none; }
  .nav.is-open {
    display: grid; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 12px var(--gut) 20px;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(16, 42, 35, .08);
  }
  .nav.is-open a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav.is-open a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brass); padding-left: 14px; }
  .nav.is-open .nav__acct:not(a) { display: grid; } /* a wrapper of account links stacks like the rest of the menu */
}
/* account links live in the collapsed menu only; the wide header already shows Sign in / My applications */
@media (min-width: 1200px) { .nav .nav__acct { display: none; } }
@media (max-width: 479px) {
  .hdr__in { gap: 8px; }
  .hdr__end { gap: 4px; }
  .hdr .btn--solid { padding: 0 14px; font-size: .95rem; }
  /* phones: the one-line wordmark (107px) does not fit beside search, the button and the menu, so it
     stacks into a two-line lockup the height of the mark (measured: fits from 360px wide) */
  .hdr .brand { gap: 8px; }
  .hdr .brand span { white-space: normal; width: min-content; font-size: 1rem; line-height: 1; }
}
@media (max-width: 519px) {
  .hdr .btn--solid[href="dashboard.html"] { display: none; } /* signed in: "My applications" lives in the menu on phones */
}
@media (max-width: 399px) {
  .hdr .btn--solid[href$="#register"] { display: none; }
  .hdr .brand span { white-space: nowrap; width: auto; font-size: 1.05rem; }
}
@media (max-width: 359px) {
  .hdr .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- hero ---------- */
.hero { padding: clamp(36px, 6vw, 88px) 0 clamp(48px, 6vw, 96px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { margin-bottom: 20px; max-width: 11.5em; }
.hero .lede { margin-bottom: 30px; }
.hero__note { margin-top: 16px; font-size: .95rem; color: var(--ink-3); display: flex; gap: 8px; align-items: flex-start; }
.hero__note svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--done); }
.hero__note + .hero__note { margin-top: 6px; }
@media (max-width: 959px) { .hero__grid { grid-template-columns: 1fr; } }
/* Home hero on the range photo (Allen chose this 2026-10-30). A forest-green scrim, darkest
   behind the text, keeps white type well above 4.5:1; the cards keep their own ink. */
.hero--photo { color: #fff; background: linear-gradient(90deg, rgba(22,54,45,.94) 0%, rgba(22,54,45,.86) 45%, rgba(22,54,45,.55) 100%), url(../img/range.webp) center 60% / cover no-repeat; }
.hero--photo h1 { color: #fff; }
.hero--photo .lede { color: #dfe8e3; }
.hero--photo .hero__note { color: #c9d8d1; }
.hero--photo .hero__note svg { color: #d9b46a; }
.hero--photo .docket, .hero--photo form { color: var(--ink); }
.hero--photo .docket { box-shadow: 0 24px 60px rgba(0,0,0,.35); }
@media (max-width: 959px) { .hero--photo { background: linear-gradient(rgba(22,54,45,.9), rgba(22,54,45,.9)), url(../img/range-m.webp) center / cover no-repeat; } }
/* short phones: the fixed costs (padding, headline floor) win below ~640px tall, so trim them */
@media (max-width: 479px) and (max-height: 700px) {
  .hero { padding-top: 20px; }
  .hero h1 { font-size: 2rem; margin-bottom: 14px; }
  .hero .lede { margin-bottom: 20px; font-size: 1rem; }
}

/* the single number box (Parcels pattern) */
.lookup { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-m); padding: 8px; box-shadow: var(--shadow); max-width: 600px; }
.lookup__row { display: flex; gap: 8px; }
.lookup__in { flex: 1; min-width: 0; display: grid; }
.lookup__in label { font-size: .85rem; font-weight: 600; color: var(--ink-3); padding: 6px 12px 0; }
.lookup__in input { border: 0; outline: none; background: transparent; padding: 2px 12px 8px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); font-weight: 650; letter-spacing: .04em; min-height: 44px; font-variant-numeric: tabular-nums; }
.lookup__in input::placeholder { color: #9aa9a3; font-weight: 500; letter-spacing: .02em; }
.lookup:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(184, 134, 43, .35), var(--shadow); }
.lookup .btn { min-height: 56px; padding-inline: 26px; border-radius: var(--r-s); align-self: flex-start; }
.lookup__more { border-top: 1px solid var(--line-2); margin-top: 6px; padding: 4px 4px 0; }
.lookup__more summary { cursor: pointer; padding: 10px 8px; font-size: .95rem; font-weight: 600; color: var(--ink-2); list-style: none; display: flex; gap: 6px; align-items: center; min-height: 44px; }
.lookup__more summary::-webkit-details-marker { display: none; }
.lookup__more summary svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.lookup__more[open] summary svg { transform: rotate(45deg); }
.lookup__more .field { padding: 0 8px 10px; }
.lookup__err { color: var(--alert); font-weight: 600; font-size: .95rem; padding: 0 12px 8px; } /* sits inside .lookup__in, under the input */
@media (max-width: 559px) {
  .lookup__row { flex-direction: column; }
  .lookup .btn { width: 100%; }
}

/* ---------- the docket (signature) ---------- */
.docket {
  position: relative; background: var(--card); border-radius: var(--r-l); box-shadow: var(--shadow);
  border: 1px solid var(--line); overflow: hidden;
}
.docket__tab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; background: var(--ink); color: #e9efe9; font-size: .92rem; }
.docket__tab b { color: #fff; font-weight: 650; }
.docket__badge { background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 4px 10px; font-size: .82rem; white-space: nowrap; }
.docket__head { padding: 22px 22px 6px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.docket__label { font-size: .85rem; color: var(--ink-3); font-weight: 550; }
.docket__ref { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem); font-weight: 760; font-stretch: 87.5%; letter-spacing: .03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.docket__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: .95rem; margin-top: 6px; }
.docket__days { text-align: right; align-self: end; }
.docket__days b { display: block; font-size: 1.6rem; font-weight: 720; font-stretch: 87.5%; line-height: 1; font-variant-numeric: tabular-nums; }
.docket__now { margin: 16px 22px 0; padding: 14px 16px; border-radius: var(--r-m); background: var(--brass-wash); border: 1px solid #ecdcb8; }
.docket__now strong { display: block; font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
.docket__now span { color: var(--ink-2); font-size: .95rem; }
.docket__sample { padding: 12px 22px 18px; font-size: .85rem; color: var(--ink-3); }

/* the track: a vertical line of stops, the brass marker sits on the current stop */
.track { list-style: none; margin: 18px 22px 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(11, 1fr); }
.track::before { content: ""; position: absolute; left: calc(100% / 22); right: calc(100% / 22); top: 11px; height: 3px; background: var(--line); border-radius: 3px; }
.track__fill { position: absolute; left: calc(100% / 22); top: 11px; height: 3px; background: var(--done); border-radius: 3px; width: 0; transition: width .5s var(--ease); }
.track li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.track__dot { width: 25px; height: 25px; border-radius: 50%; background: #fff; border: 3px solid var(--line); position: relative; z-index: 1; transition: background-color .3s, border-color .3s; }
.track li.is-done .track__dot { background: var(--done); border-color: var(--done); }
.track li.is-done .track__dot::after { content: ""; position: absolute; inset: 0; background: center / 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.track li.is-now .track__dot { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 6px rgba(184, 134, 43, .22); }
/* labels: only the first stop, the current stop and the last stop are named, each on one line.
   A column is ~40px, too narrow for any name, so a label hangs below its dot (absolute) instead of
   sizing the column: the ends align to the track's ends, the current one centres on its dot, and an
   end label steps aside when the current stop is close enough to collide with it. */
.track { padding-bottom: 1.6rem; }
.track__name { position: absolute; top: 33px; left: 50%; transform: translateX(-50%); font-size: .75rem; line-height: 1.15; color: var(--ink-3); font-weight: 550; white-space: nowrap; visibility: hidden; }
.track li:is(:first-of-type, :last-of-type, .is-now) .track__name { visibility: visible; }
.track li:first-of-type .track__name, .track li:nth-of-type(2).is-now .track__name { left: 0; transform: none; }
.track li:last-of-type .track__name, .track li:nth-last-of-type(2).is-now .track__name { left: auto; right: 0; transform: none; }
.track li.is-now .track__name { color: var(--ink); font-weight: 700; }
.track:has(li:is(:nth-of-type(2), :nth-of-type(3)).is-now) li:first-of-type .track__name,
.track:has(li:is(:nth-last-of-type(2), :nth-last-of-type(3)).is-now) li:last-of-type .track__name { visibility: hidden; }
@media (max-width: 559px) {
  .track__name { display: none; }
  .track { margin-bottom: 4px; padding-bottom: 0; }
  .track__dot { width: 20px; height: 20px; border-width: 3px; }
  .track::before, .track__fill { top: 8px; }
}

/* ---------- sections ---------- */
.band { padding: clamp(56px, 8vw, 120px) 0; }
.band--card { background: var(--card); }
.band--deep { background: var(--deep); color: #e4ebe6; }
.band--deep h2, .band--deep h3 { color: #fff; }
.band--deep .lede { color: #c7d3cc; }
.band__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: start; margin-bottom: clamp(32px, 4vw, 56px); }
.band__head .lede { justify-self: start; }
@media (max-width: 859px) { .band__head { grid-template-columns: 1fr; } }
.band:not(.band--card, .band--deep) + .band:not(.band--card, .band--deep) { padding-top: clamp(8px, 2vw, 24px); }

/* numbered steps (a real sequence) */
/* flex, not a 3-col grid: a row of 2 (or a last row of 2 after 3) stretches to fill instead of leaving a hole */
.steps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(16px, 2.4vw, 32px); list-style: none; padding: 0; margin: 0; }
.steps li { max-width: none; } /* a card is not a line of prose: the 38em reading cap left them narrower than the tables beside them */
.steps li { flex: 1 1 300px; position: relative; background: var(--paper); border-radius: var(--r-l); padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 12px; }
/* paper on white is a 1.08:1 edge: give these cards the same hairline every other card on the site carries */
.band--card .steps li { background: var(--paper); border: 1px solid var(--line-2); }
/* brass alone is 2.98:1 on paper; seven parts brass to three brass-ink keeps the gold and reaches 3.6:1 (large text) */
.steps__n { font-size: 3.4rem; line-height: .9; font-weight: 780; font-stretch: 75%; color: color-mix(in srgb, var(--brass) 70%, var(--brass-ink)); font-variant-numeric: tabular-nums; }
.steps p { color: var(--ink-2); text-wrap: pretty; }
/* a card whose title links to its section: a 44px title row, and the whole card is the tap target */
.steps h3 > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.steps h3 > a:only-child::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.steps li:has(> h3 > a:only-child):hover { border-color: var(--ink); }
/* cards hug their own content (align-items:flex-start on .steps): the "what you do" box follows its text
   instead of being pushed to a stretched card's floor, which left 100-220px of dead space (craft trap 74) */
.steps li > :has(+ .steps__art) { margin-bottom: 8px; }
/* stages: stage 6 (the one confirmed SAPS wording, and one of the slowest steps) carries the most text,
   so it takes a double-width card; that brings its height level with stage 7 instead of leaving a
   ~240px hole under the short card beside it, and stages 8 to 10 share the next row */
#s6 { flex: 2 1 600px; }
.steps .saps-says { max-width: none; } /* a strip, not prose: it spans its card like the box below it */
.steps__art { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; min-height: 108px; display: grid; align-content: center; gap: 8px; }

/* mini illustrations inside the steps */
.mini-input { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--ink); border-radius: var(--r-s); padding: 10px 12px; font-weight: 650; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.mini-input i { width: 2px; height: 1.1em; background: var(--brass); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mini-row { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.mini-row b { font-weight: 650; }
/* done green on its wash is 4.34:1; mixed 30% toward ink it is 5.7:1 */
.mini-pill { margin-left: auto; font-size: .78rem; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--done-wash); color: color-mix(in srgb, var(--done) 70%, var(--ink)); white-space: nowrap; flex: none; }
.mini-pill--brass { background: var(--brass-wash); color: var(--brass-ink); }
.mini-sms { background: var(--paper); border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: .9rem; }

/* journey: the whole path as a wide timeline */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--line); margin-top: 8px; }
.journey__leg { padding: 22px 22px 0 0; position: relative; }
.journey__leg::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.band--card .journey__leg::before { background: var(--card); }
.journey__where { font-size: .9rem; font-weight: 650; color: var(--brass-ink); margin-bottom: 6px; }
.journey__leg h3 { margin-bottom: 10px; }
.journey__leg ol { margin: 0; padding: 0 0 0 1.9em; color: var(--ink-2); display: grid; gap: 4px; font-size: .97rem; }
.journey__leg ol li::marker { font-variant-numeric: tabular-nums; }
.journey__time { margin-top: 14px; font-size: .92rem; color: var(--ink-3); }
/* on touch-size screens the stage links and "Before you apply" links are taps, not prose: 44px rows */
@media (max-width: 767px) {
  .journey .journey__leg ol > li > a:any-link, .journey .journey__time > a:only-child { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .journey__leg ol { gap: 0; }
}
@media (max-width: 959px) {
  .journey { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid var(--line); padding-left: 24px; gap: 28px; }
  .journey__leg { padding: 0; }
  .journey__leg::before { top: 2px; left: -33px; }
}

/* timing chart (bars sized by data; widths come from inline style --w) */
/* one grid for the whole chart (rows are display:contents) so every bar starts and ends on the same lines */
.timing { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) max-content; align-items: center; gap: 12px 16px; }
.timing__row { display: contents; }
.timing__name { font-weight: 600; font-size: .97rem; }
.timing__bar { height: 14px; background: var(--line-2); border-radius: 8px; overflow: hidden; }
.timing__bar span { display: block; height: 100%; width: var(--w); background: var(--ink); border-radius: 8px; }
.timing__row.is-slow > .timing__bar span { background: var(--brass); }
.timing__val { font-size: .92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.timing__src { margin-top: 18px; font-size: .9rem; color: var(--ink-3); max-width: 46em; }
/* phones: label and value share one line above their bar. Sparse auto-placement put each value on
   the row AFTER its full-width bar (next to the following label), so the grid packs dense: the value
   backfills its own label's row. The bar's bottom margin is the gap between one row and the next. */
@media (max-width: 559px) {
  .timing { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: 6px 12px; align-items: baseline; }
  .timing__bar { grid-column: 1 / -1; margin-bottom: 14px; }
  .timing__name { grid-column: 1; } .timing__val { grid-column: 2; text-align: right; }
}
.article__body > figure { margin: 2em 0 0 !important; } /* beats the inline margin:0 copied from the homepage */

/* split: copy one side, photo the other */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__img { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 3; background: var(--line-2); }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { margin-bottom: 18px; }
.split .lede { margin-bottom: 24px; }
@media (max-width: 859px) { .split { grid-template-columns: 1fr; } .split--flip > :first-child { order: 0; } }

.checks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.checks svg { width: 22px; height: 22px; color: var(--done); margin-top: 2px; }
.band--deep .checks svg { color: #8fd0a8; }

/* things you must not do: the same row as .checks, with a cross in the alert red. Works with an inline
   svg (as .checks) or with bare <li> text, where the cross is drawn by a mask in the token colour. */
.list--never { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.list--never li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.list--never svg { width: 22px; height: 22px; color: var(--alert); margin-top: 2px; }
.list--never li:not(:has(> svg))::before {
  content: ""; width: 20px; height: 20px; margin-top: .2em; background: var(--alert);
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
/* on the dark band the alert red is 2.3:1; a light coral keeps the "no" reading at 7.6:1 on --deep */
.band--deep .list--never svg { color: #f0a493; }
.band--deep .list--never li:not(:has(> svg))::before { background: #f0a493; }
.list--plain { list-style: disc; padding-left: 1.25em; margin: 0; display: grid; gap: 10px; }
.list--plain li::marker { color: var(--ink-3); }

/* the documents checklist: a native box in the done green, each row a 44px+ tap target (the label is
   the target, the box sits in a 24px column). Ticked rows say so with a green box and a calmer text
   colour, never a strikethrough: the document still has to go in the folder. */
.list--checklist { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line-2); }
.list--checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; border-bottom: 1px solid var(--line-2); max-width: none; }
.list--checklist input[type="checkbox"] { width: 22px; height: 22px; margin: 13px 0 0 1px; accent-color: var(--done); cursor: pointer; }
.list--checklist label { display: block; min-height: 44px; padding: 10px 0; cursor: pointer; }
.list--checklist input:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.list--checklist input:checked + label { color: var(--ink-2); }
.list--checklist input:checked + label strong { color: color-mix(in srgb, var(--done) 70%, var(--ink)); }

/* the status line as SAPS words it: a quiet tinted strip, not a control, so no border and no pill */
/* Markup: <p class="saps-says"><span>SAPS shows:</span> <q>PAYMENT RECEIVED</q></p>. Curly quotes are
   kept on purpose: they mark the capitals as SAPS's exact words, not our shouting. */
.saps-says { background: var(--line-2); border-radius: var(--r-s); padding: 10px 14px; font-family: var(--f-ui); display: grid; gap: 2px; justify-items: start; max-width: none; }
.saps-says > span:first-child { font-size: .85rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.saps-says q { font-family: var(--f-ui); font-stretch: 87.5%; font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink); quotes: "\201C" "\201D"; }
.mini-sms__tag { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }

/* feature tiles with icons + checklist */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tile { background: var(--card); border-radius: var(--r-l); padding: 28px; display: grid; gap: 12px; align-content: start; border: 1px solid var(--line-2); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
a.tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.tile__ic { width: 56px; height: 56px; border-radius: 14px; background: var(--brass-wash); display: grid; place-items: center; color: var(--brass-ink); }
.tile__ic svg { width: 28px; height: 28px; }
.tile p { color: var(--ink-2); }
.tile__go { margin-top: 6px; font-weight: 650; display: inline-flex; gap: 6px; align-items: center; }
.tile__go svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
a.tile:hover .tile__go svg { transform: translateX(3px); }
.tile--photo { padding: 0; overflow: hidden; }
.tile--photo .tile__body { padding: 22px 24px 26px; display: grid; gap: 10px; }
.tile--photo img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
@media (max-width: 959px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .tiles { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .tiles:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: a photo card becomes a compact row, square thumbnail left, title and a short line right
   (six full-width photos were ~2000px of scrolling). The whole row stays the tap target, 80px+ tall. */
@media (max-width: 639px) {
  .tiles:has(> .tile--photo) { grid-template-columns: 1fr; gap: 10px; }
  .tile--photo { grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 0; border-radius: var(--r-m); min-height: 80px; }
  .tile--photo img { aspect-ratio: 1; width: 80px; height: 100%; min-height: 80px; }
  .tile--photo .tile__body { padding: 10px 14px; gap: 2px; }
  .tile--photo h3 { font-size: 1.05rem; }
  .tile--photo .tile__body p { font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* quotes (demo testimonials are labelled as examples on the page) */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.quote { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-l); padding: 28px; display: grid; gap: 18px; align-content: space-between; }
.quote blockquote { margin: 0; font-family: var(--f-read); font-size: 1.12rem; line-height: 1.55; color: #f1f5f2; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: .95rem; color: #c7d3cc; }
.quote__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--deep); background: #d9c08c; flex: none; }
.quote figcaption b { color: #fff; display: block; }
@media (max-width: 959px) { .quotes { grid-template-columns: 1fr; } }

/* FAQ (details/summary) */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-weight: 650; font-size: 1.1rem; font-stretch: 95%; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--brass-ink); }
.faq__a { padding: 0 0 24px; color: var(--ink-2); max-width: 46em; display: grid; gap: 12px; }
.faq__a a { color: var(--ink); font-weight: 600; }

/* closing call to action */
.cta { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--ink); color: #fff; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.cta__copy { padding: clamp(32px, 5vw, 64px); display: grid; gap: 18px; align-content: center; }
.cta h2 { color: #fff; }
.cta p { color: #cfdbd4; max-width: 30em; }
.cta__img { min-height: 280px; }
.cta__img img { width: 100%; height: 100%; object-fit: cover; }
.cta .btn--line { border-color: #fff; color: #fff; }
.cta .btn--line:hover { background: #fff; color: var(--ink); }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 859px) { .cta { grid-template-columns: 1fr; } .cta__img { min-height: 200px; order: -1; } }

/* ---------- sub-page masthead (shared) ---------- */
.mast { position: relative; min-height: clamp(300px, 34vw, 440px); display: grid; align-items: end; color: #fff; overflow: hidden; }
.mast__img { position: absolute; inset: 0; }
.mast__img img { width: 100%; height: 100%; object-fit: cover; }
.mast::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 42, 35, .15) 0%, rgba(16, 42, 35, .55) 45%, rgba(16, 42, 35, .9) 100%); }
.mast__in { position: relative; z-index: 1; padding: 96px 0 clamp(32px, 4vw, 52px); }
.mast h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); max-width: 16em; margin-bottom: 14px; }
.mast p { color: #e3ebe6; font-size: clamp(1.02rem, 1rem + .25vw, 1.2rem); max-width: 36em; }
/* every crumb is one 24px+ row on a shared centre line (the links had 3px padding the current item
   lacked, so it sat lower). The photo is light at the top of the masthead, so the row carries a soft
   green halo; the current page is white at full strength, told apart by weight, not by fading. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .92rem; margin-bottom: 18px; color: #fff; }
.mast .crumbs { text-shadow: 0 1px 2px rgba(16, 42, 35, .7), 0 0 14px rgba(16, 42, 35, .55); } /* the halo is for the photo only */
.crumbs > :is(a, span) { display: inline-flex; align-items: center; min-height: 28px; padding-block: 0; }
.crumbs a { color: #fff; text-decoration: none; font-weight: 650; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.crumbs a:hover { text-decoration: underline; }
.mast .crumbs span[aria-hidden] { color: #c9d8d1; }
.crumbs > span:last-child { font-weight: 500; }

/* ---------- guide article ---------- */
.article { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 6vw, 80px) 0; align-items: start; }
.article > * { min-width: 0; } /* a wide table must scroll inside .tablewrap, not widen the grid track */
/* contents rail on the LEFT (2026-10-30): read contents, then content, the order phones already show.
   On the right, the reading measure left a ~270px gutter between ragged short lines and the rail;
   here the ragged edge falls to the page margin instead. */
.article > .toc { grid-column: 1; grid-row: 1; }
.article > .article__body { grid-column: 2; grid-row: 1; }
.article__body { font-family: var(--f-read); font-size: 1.13rem; line-height: 1.7; max-width: 42em; }
.article__body > * + * { margin-top: 1.1em; }
.article__body h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 2em; scroll-margin-top: 96px; }
.article__body h3 { margin-top: 1.6em; }
.article__body ul, .article__body ol { padding-left: 1.3em; display: grid; gap: .45em; }
.article__body a { color: var(--ink); font-weight: 600; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.article__body strong { font-weight: 650; }
.article__body table { width: 100%; border-collapse: collapse; font-family: var(--f-ui); font-size: .98rem; }
.article__body th, .article__body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article__body th { font-weight: 650; background: var(--line-2); }
/* components used inside an article keep their own type and spacing, not the reading styles */
.article__body :is(.steps, .checks, .timing, .faq, .note, .tiles, .journey, .pill-row, .list--checklist, .saps-says) { font-family: var(--f-ui); font-size: 1rem; line-height: 1.55; }
.article__body :is(.steps, .checks) { padding-left: 0; gap: 12px; }
/* in an article, cards sit two-up on a grid that spans the full column; a grid (not flex) keeps a
   lone last card at one column instead of stretching it into a 700px line */
.article__body .steps { gap: 16px; display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.article__body .steps li { flex-basis: 260px; }
.article__body .steps li { background: var(--card); border: 1px solid var(--line-2); padding: 22px 22px 24px; }
/* tablet, one card per row (refusals sets 1fr inline): wider side padding keeps the card's text box
   under a 40em line while the card itself still spans the column */
@media (min-width: 600px) and (max-width: 1023px) { .article__body .steps li { padding-inline: clamp(22px, 5.5vw, 40px); } }
.article__body .steps h3 { margin-top: 0; }
.article__body .faq summary { font-size: 1.05rem; }
.article__body :is(.steps, .checks, .faq, .timing, .list--never, .list--plain) * + * { margin-top: 0; }
/* lists of reading content are prose: they take the article's serif at the article's size, not the
   16px UI sans they used to drop to. Callouts stay sans (they are boxes) at the site body size. */
.article__body :is(.checks, .list--never, .list--plain) { font-family: var(--f-read); font-size: inherit; line-height: 1.6; padding-left: 0; }
.article__body .list--plain { padding-left: 1.25em; gap: 10px; }
.article__body .list--checklist { padding-left: 0; gap: 0; }
/* at the larger serif size the shared 38em cap is ~690px; 35em holds list lines near 75 characters */
.article__body :is(.checks, .list--never, .list--plain) > li { max-width: 35em; }
.list--checklist label { max-width: 38rem; }
.article__body :is(.checks, .list--never) svg { margin-top: .22em; }
.article__body .note { font-size: 1.0625rem; }
/* table scroll cue: white covers sit on the content (local) and soft shades on the box edges (scroll),
   so a shade only shows on a side that has more columns to scroll to */
.tablewrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m);
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 42, 35, .16), rgba(16, 42, 35, 0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 42, 35, .16), rgba(16, 42, 35, 0)) right / 14px 100% no-repeat scroll,
    #fff;
}
/* desktop: the article column is wider than the 42em reading measure; a wide comparison table may use
   all of it. The cap moves from the body onto its children (in rem, so an em does not resolve against a
   child's own smaller font, craft trap 80) and the wide table is exempt. */
@media (min-width: 1024px) {
  .article > .article__body { max-width: none; }
  .article > .article__body > * { max-width: 47.5rem; }
  .article > .article__body > :is(.tablewrap--wide, .tablewrap[aria-label="Licence types compared"]) { max-width: none; }
}
.tablewrap table th:first-child, .tablewrap table td:first-child { padding-left: 18px; }
/* wide comparison table: scrolls inside its box from tablet up; on a phone each row becomes its own
   card, the row header is the card title and every cell carries its column name from data-label.
   The whole display set is restated (craft trap 54) and the thead is dropped, not visually hidden,
   because once the table is dissolved its column headers are attached to nothing. */
.tablewrap--wide table { min-width: 760px; }
@media (max-width: 767px) {
  .tablewrap--wide { overflow: visible; border: 0; border-radius: 0; background: none; }
  .tablewrap--wide table { min-width: 0; }
  .tablewrap--wide :is(table, caption, tbody, tr, th, td) { display: block; }
  .tablewrap--wide thead { display: none; }
  .tablewrap--wide tbody { display: grid; gap: 12px; }
  .tablewrap--wide tr { border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; overflow: hidden; }
  .article__body .tablewrap--wide th[scope="row"] { padding: 12px 16px; font-size: 1.02rem; border-bottom: 1px solid var(--line); }
  .article__body .tablewrap--wide td { padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
  .article__body .tablewrap--wide td:last-child { border-bottom: 0; }
  .tablewrap--wide td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .84rem; font-weight: 650; color: var(--ink-2); }
}
.note { font-family: var(--f-ui); font-size: 1rem; line-height: 1.55; background: var(--card); border-left: 4px solid var(--brass); border-radius: 0 var(--r-m) var(--r-m) 0; padding: 18px 20px; display: grid; gap: 6px; }
.note strong { font-weight: 700; }
.note--warn { border-left-color: var(--alert); background: var(--alert-wash); }
.note { max-width: 42rem; }
main .note > * { max-width: none; } /* the box holds the measure, so the text runs to its right edge */
.note-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.note-pair > .note { max-width: none; align-content: start; }
@media (max-width: 699px) { .note-pair { grid-template-columns: 1fr; } }
.src { font-family: var(--f-ui); font-size: .82rem; font-weight: 650; color: var(--ink-2); /* ink-3 on this grey was 4.42:1, ink-2 is 6.6:1 */ background: var(--line-2); border-radius: 4px; padding: 1px 6px; white-space: nowrap; vertical-align: 2px; }
.toc { position: sticky; top: 96px; display: grid; gap: 14px; }
.toc__box { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 20px; }
.toc__box h2 { font-size: 1rem; }
.toc__box > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toc__box > summary::-webkit-details-marker { display: none; }
.toc__box[open] > summary { margin-bottom: 10px; }
@media (min-width: 1024px) { .toc__box > summary { pointer-events: none; } }
@media (max-width: 1023px) {
  .toc__box { padding: 0 20px; }
  .toc__box > summary { min-height: 52px; cursor: pointer; }
  .toc__box > summary::after { content: ""; width: 10px; height: 10px; margin: -4px 4px 0 0; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); transition: transform .2s var(--ease); }
  .toc__box[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .toc__box[open] { padding-bottom: 12px; }
}
.toc__box ol { list-style: none; margin: 0; padding: 0; display: grid; }
/* `.article` lifts this above the "lone link" rule, which made each link inline-block and its divider
   only as wide as its words */
.toc__box a, .article .toc__box li > a:any-link { display: flex; align-items: center; padding: 8px 0; min-height: 36px; text-decoration: none; color: var(--ink-2); font-size: .95rem; border-bottom: 1px solid var(--line-2); }
/* sticky rail: never taller than the window under the 72px header (top: 96px, 16px foot room), so the
   "Check my status" box stays reachable by scrolling the rail itself. 4px inner padding keeps focus
   rings from being clipped by the scroll box. */
@media (min-width: 1024px) {
  .toc { max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 28px; margin: -4px; scrollbar-width: thin; }
  /* the fade only exists while the rail overflows: a scroll timeline is inactive on a box that cannot
     scroll, so a rail that fits shows no mask; it lifts once the end of the list is reached */
  @supports (animation-timeline: scroll()) {
    .toc { animation: toc-more linear both; animation-timeline: scroll(self); }
    @keyframes toc-more {
      0%, 96% { -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
      100% { -webkit-mask-image: none; mask-image: none; }
    }
  }
}
@media (max-width: 1023px) { .toc__box a, .article .toc__box li > a:any-link { min-height: 44px; } }
.toc__box li:last-child a { border-bottom: 0; }
.toc__box a:hover { color: var(--ink); }
.toc__cta { background: var(--ink); color: #fff; border-radius: var(--r-m); padding: 20px; display: grid; gap: 12px; }
.toc__cta p { color: #cfdbd4; font-size: .95rem; }
@media (max-width: 1023px) { .article { grid-template-columns: 1fr; } .article > .toc, .article > .article__body { grid-column: auto; grid-row: auto; } .toc { position: static; order: -1; } .toc__cta { display: none; } }

/* ---------- tracker result ---------- */
.result { margin-top: 32px; }
.result[hidden] { display: none; }
.status-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
.status-card__top { padding: 24px 26px; display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; border-bottom: 1px solid var(--line-2); }
.status-card__status { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); font-weight: 740; font-stretch: 87.5%; line-height: 1.15; }
.status-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; padding: 20px 26px; border-bottom: 1px solid var(--line-2); }
.status-card__facts dt { font-size: .85rem; color: var(--ink-3); font-weight: 550; }
.status-card__facts dd { margin: 2px 0 0; font-weight: 650; }
.status-card__saps { padding: 20px 26px; display: grid; gap: 10px; background: var(--paper); }
.status-card__saps h3 { font-size: 1rem; }
.status-card__saps p { color: var(--ink-2); }
.status-card__note { margin: 0; padding: 12px 26px; font-size: .92rem; color: var(--ink-2); background: var(--paper); border-bottom: 1px solid var(--line-2); }
.vtrack { list-style: none; padding: 20px 26px 26px; margin: 0; display: grid; gap: 0; }
.vtrack li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.vtrack li::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 3px; background: var(--line); }
.vtrack li:last-child::before { display: none; }
.vtrack li.is-done::before { background: var(--done); }
.vtrack .track__dot { width: 27px; height: 27px; }
.vtrack b { display: block; font-weight: 650; }
.vtrack span { color: var(--ink-3); font-size: .93rem; }
.vtrack li.is-now b { color: var(--brass-ink); }
.vtrack li.is-done .track__dot { background: var(--done); border-color: var(--done); }
.vtrack li.is-done .track__dot::after { content: ""; position: absolute; inset: 0; background: center / 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.vtrack li.is-now .track__dot { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 6px rgba(184, 134, 43, .22); }
.empty { text-align: left; background: var(--card); border: 1.5px dashed var(--line); border-radius: var(--r-l); padding: 28px; display: grid; gap: 10px; }
.loading { display: flex; gap: 12px; align-items: center; padding: 22px 26px; background: var(--card); border-radius: var(--r-l); border: 1px solid var(--line); }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- dashboard ---------- */
.dash { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.dash { padding-top: clamp(28px, 4vw, 48px); }

/* ---------- signed-in board: every application on one road ---------- */
.board { background: var(--ink); color: #e9efe9; padding: clamp(32px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); }
.board h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.board__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 28px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.board__hi { color: #d9b46a; font-weight: 650; margin-bottom: 8px; }
.board__sum { font-family: var(--f-read); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: #cddad3; max-width: 36em; margin-top: 10px; }
.board__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.board__out { color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; }
.board__out:hover { border-color: #fff; }
.route { --name: clamp(140px, 18vw, 220px); --step: clamp(150px, 16vw, 210px); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-l); padding: 18px clamp(16px, 2.4vw, 28px) 10px; }
.route ol { list-style: none; margin: 0; padding: 0; }
.route .route__zones { display: grid; grid-template-columns: repeat(11, 1fr); margin-left: calc(var(--name) + 16px); margin-right: calc(var(--step) + 16px); font-size: .8rem; font-weight: 600; color: #a9bdb4; }
.route__zones li { grid-column: span var(--span); padding: 0 6px 10px; border-bottom: 2px solid rgba(217, 180, 106, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route__zones li:last-child { overflow: visible; }
.route__zones li + li { border-left: 1px dashed rgba(255, 255, 255, .22); }
.route li { max-width: none; }
.lane { display: grid; grid-template-columns: var(--name) minmax(0, 1fr) var(--step); align-items: center; gap: 16px; padding: 14px 0; }
.lane + .lane { border-top: 1px solid rgba(255, 255, 255, .08); }
.lane__name { font-weight: 650; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; overflow-wrap: anywhere; }
.lane__chip { background: var(--brass); color: var(--ink); font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.lane__road { position: relative; height: 26px; }
.lane__road::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 calc(100% / 11 - 3px), transparent calc(100% / 11 - 3px) calc(100% / 11)); }
.lane__fill { position: absolute; left: 0; top: 11px; height: 4px; border-radius: 4px; background: #5fb684; width: 0; transition: width .9s var(--ease); }
.lane__pin { position: absolute; top: 0; left: 0; translate: -50% 0; width: 26px; height: 26px; border-radius: 50%; background: var(--brass); color: var(--ink); font-size: .8rem; font-weight: 760; display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(184, 134, 43, .25); font-variant-numeric: tabular-nums; opacity: 0; transition: left .9s var(--ease), opacity .3s .6s; }
.route.is-drawn .lane__fill { width: calc(var(--to) * 100%); }
.route.is-drawn .lane__pin { left: calc(var(--at) * 100%); opacity: 1; }
.lane__step { font-size: .92rem; color: #cddad3; }
.lane__step a { color: #fff; font-weight: 650; }
.lane--unknown .lane__road::before, .lane--empty .lane__road::before { opacity: .55; }
.lane--empty .lane__name { color: #a9bdb4; font-weight: 550; }
@media (prefers-reduced-motion: reduce) { .lane__fill, .lane__pin { transition: none; } }
@media (max-width: 759px) {
  .route { padding: 6px 16px; }
  .route__zones { display: none; }
  .lane { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 0 16px; }
  .lane__road { grid-column: 1 / -1; grid-row: 2; }
  .lane__step { grid-row: 1; grid-column: 2; text-align: right; font-size: .85rem; }
}

/* an application as a docket */
.docket--app .docket__tab b { font-size: 1rem; }
.docket__badge--moved { background: var(--brass); color: var(--ink); font-weight: 700; }
.docket--app .docket__days span { font-size: .85rem; color: var(--ink-3); }
.docket--app .docket__meta span + span::before { content: "/"; margin-right: 18px; color: var(--line); }
.docket--app .track { margin-top: 22px; }
.docket__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin: 18px 22px 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); }
.docket__facts dt { font-size: .85rem; color: var(--ink-3); font-weight: 550; }
.docket__facts dd { margin: 2px 0 0; font-weight: 650; }
.docket__acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 22px 22px; }
.apps:has(.docket--app) { gap: clamp(18px, 2.5vw, 28px); }

.dash__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.apps { display: grid; gap: 16px; }
.app { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; }
.app__ref { font-weight: 720; font-stretch: 87.5%; font-size: 1.35rem; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.app__nick { color: var(--ink-3); font-size: .95rem; }
.app__status { font-weight: 650; }
.app__when { font-size: .9rem; color: var(--ink-3); }
.app__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.app .track { grid-column: 1 / -1; margin: 6px 0 0; }
.app__changed { display: inline-block; background: var(--brass-wash); color: var(--brass-ink); font-weight: 700; font-size: .82rem; border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: 3px; white-space: nowrap; }
@media (max-width: 639px) { .app { grid-template-columns: 1fr; } .app__acts { justify-content: start; } }
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 6vw, 80px) 0; align-items: start; }
.auth__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; box-shadow: var(--shadow); }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--line-2); border-radius: 999px; padding: 4px; }
.auth__tabs button { min-height: 44px; border: 0; background: transparent; border-radius: 999px; font-weight: 650; cursor: pointer; }
.auth__tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(16, 42, 35, .15); }
.auth__fine { font-size: .9rem; color: var(--ink-3); }
/* Continue with Google: Google's own button (or our plain stand-in) above the email form, a hairline "or" between */
.sso { display: grid; gap: 14px; }
.sso[hidden] { display: none; }
.sso__btn { min-height: 44px; display: flex; justify-content: center; }
.sso__fallback { width: 100%; max-width: 400px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 4px; font: 500 .95rem/1 var(--f-ui); cursor: pointer; }
.sso__fallback svg { width: 18px; height: 18px; flex: none; }
.sso__fallback:hover { background: #f8faf9; }
.sso__fallback:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.sso__msg { margin: 0; text-align: center; font-size: .9rem; color: var(--ink-2); }
.sso__or { margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; font-size: .85rem; color: var(--ink-3); }
.sso__or::before, .sso__or::after { content: ""; border-top: 1px solid var(--line); }
@media (max-width: 859px) { .auth { grid-template-columns: 1fr; } .auth__card { order: -1; } }

/* ---------- footer ---------- */
.foot { background: var(--deep); color: #c7d3cc; padding: clamp(48px, 6vw, 80px) 0 88px; font-size: .95rem; } /* 88px: the last line clears the help button */
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot .brand { color: #fff; margin-bottom: 14px; display: flex; padding: 0; }
.helpcard { margin-top: 28px; border-radius: var(--r-l); overflow: hidden; background: var(--card); border: 1px solid var(--line-2); }
.helpcard img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.helpcard__body { padding: 22px 24px 24px; display: grid; gap: 10px; justify-items: start; }
.helpcard__body p { color: var(--ink-2); }
.foot h2 { font-size: 1rem; color: #fff; margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot a { text-decoration: none; display: inline-block; padding: 6px 0; color: #dbe5df; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 8px; font-size: .88rem; color: #aebcb5; }
@media (max-width: 859px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__about { grid-column: 1 / -1; } }

/* ---------- search dialog + help chat ---------- */
dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(16, 42, 35, .45); backdrop-filter: blur(2px); }
.search { width: min(640px, 100vw - 24px); margin: 10vh auto auto; background: #fff; border-radius: var(--r-l); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); overflow: hidden; }
.search__bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--line-2); }
.search__bar svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.search__bar input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 1.15rem; min-height: 52px; -webkit-appearance: none; appearance: none; }
.search__bar input::-webkit-search-cancel-button, .search__bar input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search__list { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow: auto; }
.search__list a { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-s); text-decoration: none; }
.search__list a:hover, .search__list a:focus { background: var(--paper); outline: none; }
.search__list b { font-weight: 650; }
.search__list span { font-size: .92rem; color: var(--ink-3); }
.search__hint { padding: 14px 18px; color: var(--ink-3); font-size: .95rem; }

/* help button: a 48px round mark (44px on phones), 12px from the corner plus the safe area, at every width (the labelled pill sat over form fields and the end of
   the contents rail). The label stays in the button, clipped, so it is still the accessible name, and
   it slides out beside the mark on hover or keyboard focus on pointer screens. */
.chat-btn {
  position: fixed; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 0;
  background: var(--ink); color: #fff; font-weight: 650; box-shadow: 0 8px 22px rgba(16, 42, 35, .28); cursor: pointer;
}
.chat-btn svg { width: 21px; height: 21px; }
/* phones: the corner the help button sits in is kept clear on the first screens: the example card's
   day counter and the journey lists step in from the right edge by the button's width */
@media (max-width: 559px) {
  .docket__head { padding-right: 56px; }
  .journey__leg { padding-right: 48px; }
}
@media (max-width: 389px) { .hero__note { padding-right: 40px; } }
@media (max-width: 559px) { .chat-btn { width: 44px; height: 44px; right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); } }
.chat-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chat-btn:hover { background: #0e2b23; }
@media (hover: hover) and (pointer: fine) {
  .chat-btn:is(:hover, :focus-visible) span {
    width: auto; height: auto; clip: auto; overflow: visible; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--ink); color: #fff; font-size: .92rem; padding: 7px 12px; border-radius: 999px; box-shadow: 0 6px 18px rgba(16, 42, 35, .2);
  }
}
.chat-btn[aria-expanded="true"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.chat { position: fixed; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom) + 60px); z-index: 60; width: min(380px, 100vw - 24px); height: min(560px, 100vh - 120px); background: #fff; border-radius: var(--r-l); box-shadow: 0 24px 60px rgba(0, 0, 0, .22); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.chat[hidden] { display: none; }
.chat__top { background: var(--ink); color: #fff; padding: 14px 10px 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.chat__top b { font-weight: 650; display: block; }
.chat__top span { font-size: .85rem; color: #c7d3cc; }
.chat__x { width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.chat__x:hover { background: rgba(255, 255, 255, .12); }
.chat__x svg { width: 20px; height: 20px; }
.chat__log { overflow-y: auto; padding: 16px; display: grid; gap: 10px; align-content: start; background: var(--paper); }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .97rem; line-height: 1.45; }
.msg a { font-weight: 650; }
.msg--bot { background: #fff; border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.msg--me { background: var(--ink); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: .9rem; font-weight: 600; }
.chips button:hover { border-color: var(--ink); }
.chat__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line-2); }
.chat__form input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 16px; min-height: 46px; }
.chat__form input:focus { outline: none; border-color: var(--ink); }
.chat__form button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--brass); color: #1b1305; cursor: pointer; display: grid; place-items: center; }
.chat__form button svg { width: 20px; height: 20px; }

/* ---------- misc ---------- */
.legal { padding: clamp(40px, 6vw, 80px) 0; }
.legal .article__body { max-width: 46em; }
.disclaimer { font-size: .9rem; color: var(--ink-3); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .9rem; font-weight: 600; white-space: nowrap; }
a.pill { min-height: 44px; padding-inline: 16px; text-decoration: none; } /* jump links are taps */
a.pill:hover { border-color: var(--ink); }
.pill svg { width: 16px; height: 16px; color: var(--done); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print { .hdr, .chat-btn, .chat, .foot, .toc { display: none !important; } body { background: #fff; } }