/* CoverGuide stylesheet.
   One file, one cascade. Tokens below are the single source of truth for
   colour and spacing; prefer them over new literal values. */

:root {
  /* Ink and ground. Three brand values carry the site: navy, orange, white.
     Every neutral below is a tint of the navy rather than a warm grey, so
     nothing on the page competes with the brand. */
  --ink:#1b2a41;
  --navy:#20364f;
  --navy-brand:#14243d;
  --muted:#4a5b72;
  --paper:#ffffff;
  --mist:#dde7f2;
  --line:#d3dde9;

  /* Accent. The bright tone only clears WCAG AA on dark grounds; light
     grounds use the ink tone. Never swap these. Orange is never text on
     white and white is never text on orange: that pairing is 2.75:1.
     Orange grounds take navy text, which measures 5.2:1. */
  --accent-bright:#f07c2b;
  --accent-ink:#c2410c;
  --accent-line:#f7c9a3;
  --orange:var(--accent-ink);
  --brand-orange:var(--accent-bright);
  --error:#b42318;

  /* Surfaces. One raised surface, one sunken, and two washes: a navy one for
     structure and an orange one for anything that asks for attention. */
  --surface:#ffffff;
  --surface-sunken:#f1f5fa;
  --navy-wash:#eef3f9;
  --accent-wash:#fff3e8;
  --error-wash:#fdf2f1;
  --error-line:#f0c4bf;
  --on-navy:#dde7f2;
  --on-navy-dim:#cbd6e4;

  /* Spacing scale. Structural rhythm uses these, not literals. */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;

  /* Radius scale. Four steps, not nine ad-hoc values. */
  --r1:8px; --r2:12px; --r3:18px; --r-pill:999px;

  /* Elevation. Navy-tinted, so a card reads as lifted off the white ground
     rather than ringed in orange. Orange appears as a deliberate keyline. */
  --shadow-sm:0 1px 2px rgba(20,36,61,.06), 0 2px 6px rgba(20,36,61,.06);
  --shadow-md:0 4px 8px rgba(20,36,61,.07), 0 10px 24px rgba(20,36,61,.08);
  --shadow-lg:0 8px 14px rgba(20,36,61,.09), 0 22px 48px rgba(20,36,61,.12);

  /* System UI stack: renders as the reader's own OS face, costs no request
     and no payload. Arial was the single strongest dated signal here. */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.65 var(--sans)
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent-ink);
  outline-offset:4px
}
/* The ink orange carries the ring on white (5.2:1) but sinks into navy,
   where the bright tone measures 5.7:1. One ring, legible on both grounds. */
.topline :focus-visible,.checker-aside :focus-visible,.feature-right :focus-visible,.escalation :focus-visible,footer :focus-visible {
  outline-color:var(--accent-bright)
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
button[hidden],[hidden] {
  display:none!important
}
.wrap {
  width:min(1160px,calc(100% - 80px));
  margin:auto
}
.topline {
  background:var(--navy-brand);
  color:var(--on-navy);
  border-bottom:2px solid var(--accent-bright);
  font-size:12px;
  letter-spacing:.025em
}
.topline .wrap {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:32px
}
.flag {
  color:var(--accent-bright);
  margin-left:10px
}
.header {
  position:sticky;
  top:0;
  z-index:30;
  background:#ffffffeb;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(15px)
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:87px;
  gap:30px
}
.brand {
  font-weight:700;
  font-size:25px;
  letter-spacing:-1.3px;
  display:flex;
  align-items:center;
  gap:9px
}
.brand span {
  font-weight:400;
  margin-left:-9px
}
.brand svg {
  height:33px;
  width:31px;
  margin-right:3px
}
.nav nav {
  display:flex;
  gap:35px;
  font-size:13px;
  font-weight:600
}
.nav-help {
  font-size:12px;
  border:1px solid var(--line);
  border-radius:var(--r1);
  padding:9px 14px
}
.nav-help span {
  margin-left:12px
}
.hero {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:65px;
  align-items:center;
  padding-top:var(--s8);
  padding-bottom:var(--s8)
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  line-height:1.5;
  color:var(--accent-ink)
}
.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px
}
.little-line {
  display:block;
  width:28px;
  height:3px;
  background:var(--accent-bright)
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font:76px/.99 var(--sans);
  letter-spacing:-2.5px;
  margin:28px 0 23px
}
h1 em {
  color:var(--orange);
  font-weight:400
}
h2 {
  font:48px/1.08 var(--sans);
  letter-spacing:-1px;
  margin:13px 0 16px
}
h3 {
  line-height:1.3
}
.hero-copy>p {
  max-width:460px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:var(--s6)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s3);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:13px;
  min-height:47px;
  padding:12px 26px;
  text-decoration:none!important;
  transition:background .15s,border-color .15s,color .15s,transform .15s
}
.button:hover {
  transform:translateY(-1px)
}
/* The brand orange is the action colour and carries navy type, because white
   on orange is 2.75:1 while navy on orange is 5.2:1. */
.primary {
  background:var(--accent-bright);
  border-color:var(--accent-bright);
  color:var(--navy-brand)
}
.primary:hover {
  background:#e06a14;
  border-color:#e06a14
}
.secondary {
  background:transparent;
  border-color:var(--navy);
  color:var(--navy)
}
.secondary:hover {
  background:var(--navy-wash)
}
.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  font-size:12px;
  font-weight:600;
  border:1px solid var(--accent-line);
  border-radius:var(--r-pill);
  background:var(--accent-wash);
  padding:12px 22px;
  text-decoration:none!important;
  transition:background .15s,border-color .15s,transform .15s
}
.text-link:hover {
  background:var(--accent-bright);
  border-color:var(--accent-bright);
  color:var(--navy-brand);
  transform:translateY(-1px)
}
.hero-note {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  margin-top:var(--s5)
}
.hero-note svg {
  width:15px;
  height:15px
}
.hero-art {
  background:var(--navy-wash);
  border:1px solid var(--line);
  border-radius:var(--r3);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lg)
}
/* The photograph runs to the card's own edge on three sides, so the card
   crops it rather than framing it. Padding lives on the body below. */
.art-photo {
  position:relative;
  background:var(--mist)
}
.art-photo img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover
}
/* A scrim rather than a tint: the eyebrow has to clear contrast against
   whatever part of the photograph happens to sit behind it, and only the
   bottom band carries type. */
.art-photo::after {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:58%;
  background:linear-gradient(to top,rgba(20,36,61,.85),rgba(20,36,61,.45) 40%,rgba(20,36,61,0));
  pointer-events:none
}
.art-body {
  padding:22px 24px 18px
}
.art-top {
  position:absolute;
  inset:auto 0 0;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px 15px;
  font-size:8px;
  letter-spacing:1.9px;
  font-weight:700;
  color:#fff
}
.tiny-dot {
  width:8px;
  height:8px;
  background:var(--accent-bright);
  border-radius:50%
}
.art-policies {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.paper {
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r1);
  padding:17px 12px;
  box-shadow:0 4px 0 rgba(20,36,61,.07)
}
.paper b {
  font-size:11px;
  display:block
}
.paper small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.paper-icon {
  color:var(--navy-brand);
  background:var(--mist);
  border-radius:var(--r1);
  padding:5px 8px;
  font-size:12px
}
.paper-icon.alt {
  color:var(--accent-ink);
  background:var(--accent-wash)
}
.paper-check {
  font-size:10px;
  color:var(--accent-ink);
  margin-left:auto
}
.art-insight {
  margin-top:20px;
  display:flex;
  gap:12px;
  align-items:center;
  padding:17px 13px;
  background:var(--accent-wash);
  border:1px solid var(--accent-line);
  border-left:3px solid var(--accent-bright);
  border-radius:var(--r1)
}
.art-insight b {
  font-size:11px
}
.art-insight p {
  font-size:9px;
  color:var(--muted);
  margin:4px 0 0
}
.insight-icon {
  font:700 21px var(--sans);
  color:var(--navy-brand);
  background:var(--accent-bright);
  display:grid;
  place-items:center;
  flex:0 0 25px;
  height:25px;
  border-radius:50%
}
.art-caption {
  font-size:12px;
  color:var(--muted);
  margin:16px 0 0;
  text-align:center
}
/* A step sequence, so it should read as three steps rather than three cells
   of a table. Numerals carry the order; hairline dividers are not needed. */
.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s5);
  padding:var(--s7) 0;
  border-block:1px solid var(--line);
  font-size:16px;
  font-weight:600;
  line-height:1.4
}
.principles>div {
  display:flex;
  align-items:center;
  gap:var(--s4);
  min-width:0
}
.principles span {
  display:grid;
  place-items:center;
  flex:none;
  width:38px;
  height:38px;
  border-radius:var(--r-pill);
  background:var(--accent-bright);
  color:var(--navy-brand);
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px
}
.section {
  padding-top:var(--s8);
  padding-bottom:var(--s8)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:32px
}
.section-heading p {
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.8
}
.section-index {
  font-size:12px;
  letter-spacing:1.5px;
  color:var(--navy);
  white-space:nowrap;
  margin-bottom:6px
}
.checker {
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  border-radius:var(--r3);
  display:grid;
  grid-template-columns:1fr 300px;
  overflow:hidden;
  background:var(--surface)
}
.checker-main {
  padding:27px 30px
}
.checker-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:5px
}
.checker-heading h3 {
  font-size:17px;
  margin:0
}
.text-button {
  background:none;
  border:none;
  color:var(--navy);
  padding:5px 0;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px
}
.subtle {
  font-size:12px;
  color:var(--muted)
}
.person-field {
  margin:20px 0
}
.field label,.letter-mode label {
  display:block;
  font-size:10px;
  font-weight:600;
  margin-bottom:6px
}
.field label span {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  margin-left:5px
}
.field input,.field select,.letter-mode select {
  width:100%;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:var(--r1);
  padding:9px 10px;
  background:var(--surface);
  color:var(--ink);
  font-size:12px
}
.field input::placeholder {
  color:var(--muted);
  font-size:11px
}
/* A select is the one control the browser draws its own furniture on. Removing
   it and painting a navy chevron keeps the closed control identical to the text
   inputs beside it; forced-colours mode below hands the furniture back. */
.field select,.letter-mode select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' fill='none' stroke='%2320364f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px
}
@media (forced-colors:active) {
  .field select,.letter-mode select {
    appearance:auto;
    -webkit-appearance:auto;
    padding-right:10px;
    background-image:none
  }
}
/* Each entry is a card rather than a hairline rule, because a reader comparing
   three policies has to see where one stops and the next starts. The orange
   edge and the orange badge are the same signal at two scales: the card is
   findable while scrolling, the badge names it once you are inside. */
.policy-card {
  padding:var(--s5);
  margin-bottom:var(--s3);
  border:1px solid var(--line);
  border-left:3px solid var(--accent-bright);
  border-radius:var(--r2);
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}
.policy-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s4);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--line)
}
/* Orange on the wash, never on white: the bright tone is 2.75:1 as type, the
   ink tone on this wash measures past AA. */
.policy-title b {
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border:1px solid var(--accent-line);
  border-radius:var(--r-pill);
  background:var(--accent-wash);
  color:var(--accent-ink);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase
}
.remove-policy {
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:none;
  padding:0 var(--s3);
  font-size:10px;
  color:var(--error);
  text-decoration:none
}
.remove-policy:hover {
  border-color:var(--error-line);
  background:var(--error-wash);
  text-decoration:underline
}
.policy-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4)
}
.field.full-field {
  grid-column:1/-1
}
/* The typed-name box belongs to the select above it, so it sits inside the same
   field and keeps the hint that explains why spelling matters. */
.choice-other {
  margin-top:var(--s2);
  padding-left:var(--s3);
  border-left:2px solid var(--accent-line)
}
.field-hint {
  font-size:9px;
  color:var(--muted);
  margin:4px 0 0
}
.add-button {
  width:100%;
  padding:13px;
  border:1px dashed var(--navy);
  border-radius:var(--r1);
  color:var(--navy);
  background:var(--navy-wash);
  font-size:12px;
  font-weight:500
}
.add-button:hover {
  border-color:var(--accent-bright);
  background:var(--accent-wash);
  color:var(--accent-ink)
}
.add-button span {
  margin-right:7px
}
.checker-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:var(--s5)
}
.checker-bottom p {
  max-width:170px;
  font-size:9px;
  color:var(--muted);
  margin:0
}
.checker-bottom p span {
  margin-right:5px
}
/* The sidebar is the site's one piece of standing explanation, so it reads
   as navy rather than as another pale card beside the form. */
.checker-aside {
  padding:32px 28px;
  background:var(--navy-brand);
  color:var(--on-navy)
}
.checker-aside .eyebrow {
  color:var(--accent-bright)
}
.checker-aside .text-link {
  color:var(--accent-bright);
  background:transparent;
  border-color:var(--accent-bright)
}
.checker-aside .text-link:hover {
  background:var(--accent-bright);
  color:var(--navy-brand)
}
.checker-aside h3 {
  font:30px/1.1 var(--sans);
  margin:25px 0 17px
}
.checker-aside>p {
  font-size:12px;
  color:var(--on-navy-dim)
}
.document-tip {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-left:3px solid var(--accent-bright);
  border-radius:var(--r1);
  padding:19px 16px;
  margin:27px 0
}
.document-tip>span {
  font-size:8px;
  letter-spacing:1px;
  color:var(--accent-bright);
  font-weight:700
}
.document-tip b {
  display:block;
  font:23px var(--sans);
  margin:8px 0 11px
}
.document-tip p {
  font-size:10px;
  color:var(--on-navy-dim);
  margin:0
}
.checker-aside p.aside-small {
  font-size:10px;
  line-height:1.8
}
.checker-aside .text-link {
  display:inline-block;
  margin-top:16px;
  font-size:10px
}
.notice {
  font-size:11px;
  color:var(--accent-ink);
  background:var(--accent-wash);
  border-left:3px solid var(--accent-bright);
  padding:12px;
  margin:15px 0
}
.inline-button {
  background:none;
  border:0;
  text-decoration:underline;
  color:inherit;
  padding:0
}
.form-error {
  color:var(--error);
  font-size:12px;
  margin:15px 0 0
}
.results {
  margin-top:var(--s5);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  border-radius:var(--r3);
  padding:28px;
  scroll-margin-top:110px
}
.results h3 {
  font:32px var(--sans);
  margin:12px 0 20px
}
.result-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  border-block:1px solid var(--line);
  padding:20px 0;
  margin-bottom:24px
}
.result-stats span {
  font-size:10px;
  color:var(--muted);
  display:block
}
.result-stats b {
  font:30px var(--sans);
  color:var(--navy-brand)
}
.result-stats small {
  font-size:9px;
  display:block;
  color:var(--muted)
}
.result-alert {
  padding:16px 19px;
  background:var(--accent-wash);
  border-left:3px solid var(--accent-bright);
  margin-top:12px;
  font-size:12px
}
.result-alert.ok {
  background:var(--navy-wash);
  border-color:var(--navy)
}
.result-alert h4 {
  font-size:13px;
  margin:0 0 5px
}
.result-alert p {
  margin:0
}
.limit-check {
  display:flex;
  gap:12px;
  align-items:flex-end;
  padding-top:12px;
  flex-wrap:wrap
}
.limit-check .field {
  min-width:190px
}
.limit-note {
  font-size:11px;
  margin:10px 0 0!important;
  font-weight:600
}
.result-disclaimer {
  font-size:11px;
  color:var(--muted);
  margin-top:20px
}
.result-actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:20px
}
.rights-section {
  background:var(--navy-wash);
  border-block:1px solid var(--line)
}
.rights-grid {
  display:grid;
  grid-template-columns:.85fr 1.35fr;
  gap:65px;
  align-items:start
}
.feature-right {
  padding:var(--s6);
  background:var(--navy-brand);
  color:var(--on-navy);
  box-shadow:var(--shadow-lg);
  border-radius:var(--r3)
}
.pill {
  font-size:8px;
  letter-spacing:1.3px;
  color:var(--accent-bright);
  border:1px solid var(--accent-bright);
  border-radius:var(--r-pill);
  padding:6px 10px;
  display:inline-block
}
.feature-right h3 {
  font:37px/1.12 var(--sans);
  margin:29px 0 21px
}
.feature-right em {
  color:var(--accent-bright)
}
.feature-right p {
  font-size:12px;
  color:var(--on-navy-dim);
  line-height:1.8
}
.feature-right a {
  font-size:10px;
  text-decoration:underline;
  text-underline-offset:4px
}
.accordions details {
  border-bottom:1px solid var(--line)
}
.accordions details:first-child {
  border-top:1px solid var(--line)
}
.accordions summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  padding:22px 0;
  gap:20px
}
.accordions summary::-webkit-details-marker {
  display:none
}
.accordions summary span {
  font-size:19px;
  font-weight:400;
  color:var(--accent-ink);
  transition:transform .15s
}
.accordions details[open] summary span {
  transform:rotate(45deg)
}
.detail-content {
  padding:0 20px 20px 0;
  font-size:12px;
  color:var(--muted)
}
.detail-content p {
  margin-bottom:12px
}
.detail-content a {
  font-size:10px;
  text-decoration:underline
}
.claim-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:65px
}
.claim-panel {
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  border-radius:var(--r3);
  padding:28px
}
.claim-panel h3 {
  font-size:16px;
  margin-bottom:7px
}
.reason-options {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:22px 0
}
.reason {
  display:flex;
  align-items:center;
  text-align:left;
  padding:14px 13px;
  gap:12px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r1);
  color:var(--ink);
  font-size:11px
}
.reason span {
  font-size:9px;
  color:var(--muted)
}
/* Selection state, not navigation. These buttons swap the panel beside them,
   so they carry a tick when chosen rather than an arrow that reads as
   "opens elsewhere". */
.reason b {
  font-weight:400;
  margin-left:auto;
  opacity:0
}
.reason.active b {
  opacity:1
}
.reason.active {
  border-color:var(--accent-bright);
  background:var(--accent-wash);
  box-shadow:inset 4px 0 var(--accent-bright)
}
.letter-mode {
  margin:22px 0 15px
}
.full {
  width:100%;
  justify-content:space-between
}
.claim-advice {
  padding:18px 0
}
.claim-advice .eyebrow {
  color:var(--orange)
}
.claim-advice h3 {
  font:34px/1.13 var(--sans);
  margin:17px 0 22px
}
.claim-advice ol {
  padding:0;
  list-style:none;
  counter-reset:steps
}
.claim-advice li {
  position:relative;
  padding:0 0 19px 39px;
  font-size:12px;
  color:var(--muted);
  counter-increment:steps
}
.claim-advice li::before {
  content:counter(steps);
  position:absolute;
  left:0;
  top:0;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--accent-bright);
  display:grid;
  place-items:center;
  color:var(--navy-brand);
  font-weight:700;
  font-size:10px
}
.claim-advice li strong {
  display:block;
  color:var(--ink);
  font-size:12px;
  margin-bottom:4px
}
.claim-advice .small-note {
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:10px;
  color:var(--muted)
}
.claim-advice a {
  font-size:10px;
  text-decoration:underline
}
.letter-panel {
  margin-top:var(--s6);
  padding:var(--s6);
  background:var(--surface-sunken);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  border-radius:var(--r3)
}
.letter-panel h3 {
  font:28px/1.2 var(--sans);
  margin:10px 0
}
.letter-panel textarea {
  display:block;
  width:100%;
  height:420px;
  resize:vertical;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--r1);
  font-size:12px;
  line-height:1.8;
  background:var(--surface);
  color:var(--ink);
  margin:20px 0
}
.letter-actions {
  display:flex;
  gap:13px;
  align-items:center;
  flex-wrap:wrap
}
.letter-actions span {
  font-size:11px
}
/* The last step on the page is the one that leaves the site, so it is stated
   in navy with an orange action rather than set between two hairlines. */
.escalation {
  display:flex;
  align-items:center;
  gap:25px;
  padding:var(--s6);
  margin-top:var(--s7);
  background:var(--navy-brand);
  color:var(--on-navy);
  border-radius:var(--r3);
  box-shadow:var(--shadow-md)
}
.escalation .eyebrow {
  color:var(--accent-bright)
}
.escalation .button {
  background:var(--accent-bright);
  border-color:var(--accent-bright);
  color:var(--navy-brand)
}
.escalation .button:hover {
  background:#e06a14;
  border-color:#e06a14
}
.escalation-mark {
  font:40px var(--sans);
  align-self:flex-start;
  color:var(--accent-bright)
}
.escalation h3 {
  font:29px var(--sans);
  margin:6px 0 8px
}
.escalation p {
  max-width:570px;
  font-size:12px;
  color:var(--on-navy-dim);
  margin:0
}
.escalation .button {
  margin-left:auto;
  white-space:nowrap;
  font-size:14px
}
.sources-section {
  background:var(--navy-wash)
}
.source-stamp {
  border:2px solid var(--accent-bright);
  border-radius:var(--r1);
  padding:13px 18px;
  font-size:12px;
  letter-spacing:1.5px;
  color:var(--accent-ink);
  text-align:center;
  line-height:1.9;
  transform:rotate(-3deg)
}
.source-stamp b {
  font-size:13px;
  font-weight:500
}
.source-list {
  border-top:1px solid var(--line)
}
.source-list>a {
  display:flex;
  align-items:center;
  gap:25px;
  padding:19px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none
}
.source-list>a:hover {
  background:var(--surface);
  box-shadow:inset 4px 0 var(--accent-bright)
}
.source-list>a>span {
  font-size:10px;
  color:var(--muted)
}
.source-list>a>span:last-child {
  margin-left:auto;
  font-size:18px;
  color:var(--accent-ink)
}
.source-list b {
  font-size:12px;
  font-weight:600;
  display:block
}
.source-list small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
footer {
  background:var(--navy-brand);
  color:var(--on-navy);
  border-top:3px solid var(--accent-bright);
  padding:39px 0 25px
}
.footer-top {
  display:flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid rgba(255,255,255,.16);
  padding-bottom:28px
}
.footer-top p {
  font-size:13px;
  color:var(--on-navy-dim);
  margin:0
}
.footer-top>a:last-child {
  font-size:13px;
  margin-left:auto
}
.footer-bottom {
  display:flex;
  gap:60px;
  align-items:flex-start;
  padding-top:23px
}
.footer-bottom p {
  font-size:9px;
  line-height:1.9;
  max-width:740px;
  color:var(--on-navy-dim);
  margin:0
}
.footer-bottom button {
  color:var(--on-navy-dim);
  white-space:nowrap;
  margin-left:auto;
  font-size:9px
}
dialog {
  border:1px solid var(--line);
  border-radius:var(--r3);
  padding:40px;
  max-width:520px;
  background:var(--paper);
  color:var(--ink);
  width:calc(100% - 30px)
}
dialog::backdrop {
  background:rgba(20,36,61,.6);
  backdrop-filter:blur(3px)
}
dialog h2 {
  font-size:40px
}
dialog p {
  font-size:13px;
  color:var(--muted)
}
.dialog-close {
  position:absolute;
  right:15px;
  top:10px;
  background:none;
  border:0;
  color:var(--navy);
  font-size:25px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip {
  position:absolute;
  left:10px;
  top:-70px;
  z-index:100;
  background:var(--navy-brand);
  color:#fff;
  border-radius:var(--r1);
  padding:12px
}
.skip:focus {
  top:5px
}
@media(min-width:1500px) {
  .hero {
    padding-top:85px;
    padding-bottom:85px
  }
}
@media(max-width:1050px) {
  .hero {
    gap:35px
  }
  h1 {
    font-size:63px
  }
  .hero-actions {
    gap:17px;
    flex-wrap:wrap
  }
  .art-body {
    padding:18px 20px 16px
  }
  .checker {
    grid-template-columns:1fr 260px
  }
  .rights-grid,.claim-layout {
    gap:35px
  }
  .feature-right {
    padding:25px
  }
  .feature-right h3 {
    font-size:32px
  }
  .checker-bottom {
    flex-wrap:wrap
  }
  .nav nav {
    gap:23px
  }
  h2 {
    font-size:43px
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 36px)
  }
  /* 12px is the floor for any text we ask a reader to parse. */
  .topline {
    font-size:12px
  }
  .topline .wrap {
    min-height:var(--s6)
  }
  .topline .wrap>span {
    font-size:12px
  }
  .nav {
    min-height:76px;
    gap:10px;
    flex-wrap:wrap;
    padding:15px 0
  }
  .brand {
    font-size:23px
  }
  .brand svg {
    width:25px;
    height:29px
  }
  .nav nav {
    order:3;
    flex-basis:100%;
    justify-content:space-between;
    gap:10px;
    border-top:1px solid var(--line);
    padding-top:10px;
    font-size:11px
  }
  .nav-help {
    font-size:10px;
    padding:6px 9px
  }
  .nav-help span {
    margin-left:8px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:42px;
    padding-bottom:35px;
    gap:35px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.5px
  }
  h1 {
    font-size:61px;
    letter-spacing:-2px;
    margin-top:var(--s5)
  }
  .hero-copy>p {
    font-size:14px
  }
  .hero-actions {
    margin-top:var(--s5);
    gap:20px
  }
  .hero-note {
    font-size:9px
  }
  .hero-art {
    max-width:440px;
    width:100%;
    margin:auto
  }
  .principles {
    grid-template-columns:1fr;
    padding:var(--s6) 0;
    gap:var(--s4);
    font-size:16px;
    line-height:1.5
  }
  .principles>div {
    padding-right:var(--s3)
  }
  .section {
    padding-block:48px
  }
  .section-heading {
    margin-bottom:var(--s5);
    align-items:flex-start
  }
  .section-index {
    display:none
  }
  h2 {
    font-size:38px
  }
  .section-heading p {
    font-size:12px
  }
  .checker {
    grid-template-columns:1fr
  }
  .checker-main {
    padding:22px 18px
  }
  .checker-aside {
    border-top:2px solid var(--accent-bright);
    padding:23px
  }
  .checker-aside h3 {
    font-size:27px;
    margin:15px 0
  }
  .document-tip {
    margin:18px 0;
    padding:15px
  }
  .checker-aside .text-link {
    margin:0
  }
  .checker-bottom {
    gap:15px
  }
  .checker-bottom p {
    max-width:130px
  }
  .checker-bottom .button {
    gap:12px;
    padding:11px 14px;
    font-size:11px
  }
  .checker-heading .text-button {
    font-size:14px
  }
  .policy-card {
    padding:var(--s4)
  }
  .policy-fields {
    gap:12px
  }
  .results {
    padding:22px 18px
  }
  .result-stats {
    gap:9px
  }
  .result-stats b {
    font-size:25px
  }
  .result-stats span {
    font-size:9px
  }
  .result-stats small {
    font-size:8px
  }
  .result-actions .button {
    width:100%
  }
  .rights-grid,.claim-layout {
    grid-template-columns:1fr;
    gap:28px
  }
  .feature-right {
    padding:26px
  }
  .feature-right h3 {
    font-size:36px
  }
  .accordions summary {
    font-size:12px;
    padding:19px 0
  }
  .claim-panel {
    padding:23px 18px
  }
  .claim-advice {
    padding:0 5px
  }
  .claim-advice h3 {
    font-size:31px
  }
  .escalation {
    align-items:flex-start;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px;
    padding:var(--s5)
  }
  .escalation-mark {
    display:none
  }
  .escalation .button {
    margin:0
  }
  .letter-panel {
    padding:20px 15px
  }
  .letter-panel .checker-heading {
    align-items:flex-start
  }
  .letter-panel h3 {
    font-size:25px
  }
  .letter-panel textarea {
    font-size:12px;
    padding:14px
  }
  .source-stamp {
    display:none
  }
  .source-list>a {
    gap:15px
  }
  .source-list b {
    font-size:11px
  }
  .source-list small {
    font-size:9px
  }
  .footer-top {
    gap:14px;
    flex-wrap:wrap
  }
  .footer-top p {
    order:3;
    flex-basis:100%;
    font-size:13px
  }
  .footer-bottom {
    flex-direction:column;
    gap:17px
  }
  .footer-bottom button {
    margin:0
  }
  dialog {
    padding:30px 24px
  }
  .form-error {
    font-size:11px
  }
  html {
    scroll-padding-top:145px
  }
  .results {
    scroll-margin-top:150px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  /* The card lift is motion too, not just a transition. */
  .route-card:hover {
    transform:none!important
  }
  * {
    transition:none!important
  }
}
@media print {
  .header,.topline,.hero,.principles,.checker,#rights,#claim,#sources,footer,.section-heading,.result-actions,.limit-check,.hero-note {
    display:none!important
  }
  body {
    background:white
  }
  .wrap {
    width:100%
  }
  .section {
    padding:0
  }
  .results {
    border:0;
    padding:0
  }
  .results[hidden] {
    display:block!important
  }
}

/* ---- Readable controls, comfortable targets, wordmark ---- */
/* Readable controls and comfortable targets across phone and desktop layouts. */
.nav {
   flex-wrap: wrap;
   gap: 18px;
   padding-block: 18px;
}
.nav nav {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.nav nav a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 16px;
   min-height: 44px;
   border: 1px solid var(--line);
   border-radius: var(--r-pill);
   background: var(--surface);
   color: var(--navy-brand);
   text-decoration: none;
}
.nav nav a:hover {
   background: var(--accent-bright);
   border-color: var(--accent-bright);
   color: var(--navy-brand);
   text-decoration: none;
}
.nav nav a[aria-current="page"] {
   background: var(--navy-brand);
   color: #fff;
   border-color: var(--navy-brand);
}
.page-intro {
   padding-top: 40px;
}
.page-intro h1, .section h1 {
   font-size: clamp(30px, 4vw, 46px);
   line-height: 1.2;
   letter-spacing: -.8px;
   margin: 16px 0;
}
.page-intro p, .reading-page p {
   max-width: 760px;
}
.task-nav {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
}
.task-nav a {
   padding: 12px 0;
   text-decoration: underline;
}
.page-cards, .contact-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--s5);
}
/* An odd number of contacts would otherwise leave the last card stranded
   beside an empty half-row. */
.contact-card:last-child:nth-child(odd) {
   grid-column: 1 / -1;
}
.page-cards {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}
.route-card, .contact-card {
   padding: var(--s5);
   border: 1px solid var(--line);
   border-radius: var(--r3);
   background: var(--surface);
   box-shadow: var(--shadow-sm);
   transition: box-shadow .18s ease, transform .18s ease;
   min-width: 0;
}
.route-card {
   display: block;
}
/* The accent is the same short rule that introduces every eyebrow on the
   site, set inside the card above the heading. A full-bleed stripe along the
   card's top edge would be decoration applied to a box; this is the page's
   own mark, so the three choices read as part of the system. It lengthens on
   hover, which is the only moving part. */
.route-card::before {
   content: '';
   display: block;
   width: 28px;
   height: 3px;
   background: var(--accent-bright);
   margin-bottom: var(--s4);
   transition: width .18s ease;
}
.route-card:hover {
   background: var(--surface);
   text-decoration: none;
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
}
.route-card:hover::before,
.route-card:focus-visible::before {
   width: 48px;
}
.route-card h3 {
   font-size: 22px;
}
.route-card span {
   display: inline-flex;
   align-items: center;
   gap: var(--s2);
   margin-top: var(--s4);
   min-height: 44px;
   padding: 10px 20px;
   border: 1px solid var(--accent-line);
   border-radius: var(--r-pill);
   background: var(--accent-wash);
   font-weight: 700;
   color: var(--accent-ink);
   text-decoration: none;
   transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.route-card:hover span,
.route-card:focus-visible span {
   background: var(--accent-bright);
   border-color: var(--accent-bright);
   color: var(--navy-brand);
}
.contact-card {
   margin-bottom: 20px;
   overflow-wrap: anywhere;
}
.contact-card h2 {
   font-size: 24px;
   line-height: 1.3;
}
.contact-card a, .reading-page a {
   text-decoration: underline;
   text-underline-offset: 3px;
}
.contact-card li {
   margin-block: var(--s1);
}
/* Phoning or emailing an office is the whole purpose of this page, and it is
   often done one-handed under stress. Every one of these rows gets a full
   44px target rather than a 17px line of text. */
.contact-card dd a,
.contact-card li a {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding-block: var(--s2);
}
.contact-card dt {
   font-weight: 700;
   margin-top: var(--s3);
}
.contact-card dd {
   margin: 0;
}
/* Same disclosure affordance as the rights accordions, so one interaction
   does not have two visual languages across the site. */
.contact-card summary {
   cursor: pointer;
   font-weight: 600;
   padding-block: var(--s3);
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--s5);
   min-height: 44px;
}
.contact-card summary::-webkit-details-marker {
   display: none;
}
.contact-card summary::after {
   content: '\FF0B';
   font-size: 19px;
   font-weight: 400;
   color: var(--accent-ink);
   transition: transform .15s;
}
.contact-card details[open] summary::after {
   transform: rotate(45deg);
}
.contact-card details {
   border-top: 1px solid var(--line);
   font-size: 14px;
}
/* A row of links, not prose, so each one can take a full target. */
.link-row a {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
}
.directory-filter {
   margin: var(--s6) 0;
   max-width: 600px;
}
/* The insurer register's evidence statuses. The four states differ by their own
   letter and word, by border style and by background - never by colour alone,
   because a reader usually meets one badge at a time with no neighbour to
   compare it against. --accent-bright is absent on purpose: it measures 2.6:1
   on --surface and fails both as text and as a 3:1 boundary. E is the quietest
   of the four, because a documented record is still not an answer about anyone's
   policy and must not get the page's attention colour. Dashed already reads as
   provisional here, via .contact-card-sponsored. */
.status-badge {
   display: inline-flex;
   align-items: center;
   margin: 0 0 var(--s3);
   padding: var(--s1) var(--s3);
   border: 1px solid var(--line);
   border-radius: var(--r-pill);
   background: var(--surface-sunken);
   color: var(--ink);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .6px;
   text-transform: uppercase;
}
.status-badge-e {
   border-style: solid;
   border-color: var(--navy-brand);
   background: var(--navy-wash);
   color: var(--navy-brand)
}
.status-badge-b {
   border-style: dashed;
   border-color: var(--muted);
   color: var(--muted)
}
.status-badge-h {
   border-style: dotted;
   border-color: var(--ink)
}
.status-badge-u {
   border-style: dashed;
   border-color: var(--accent-ink);
   background: var(--accent-wash);
   color: var(--accent-ink)
}
.register-group {
   margin: var(--s7) 0;
}
.register-group > h2 {
   margin-bottom: var(--s2);
}
.register-group > .subtle {
   max-width: 70ch;
   margin-bottom: var(--s5);
}
.register-card h3 {
   margin: 0 0 var(--s3);
   font-size: 21px;
   line-height: 1.3;
}
.register-card dd ul {
   margin: var(--s1) 0 0;
   padding-left: var(--s4);
}
.register-card .source-list {
   margin: var(--s3) 0;
}
.register-scope {
   margin: var(--s3) 0 0;
   font-size: 14px;
   color: var(--muted);
}
/* The legend pairs a badge with its permitted use, so the badge column must not
   collapse onto the text at narrow widths. */
.status-legend {
   margin: var(--s4) 0 var(--s3);
}
.status-legend dt {
   margin-top: var(--s3);
}
.status-legend dd {
   margin: 0 0 var(--s2);
}
.underwriter-index {
   margin: var(--s4) 0 0;
}
.underwriter-index dt {
   margin-top: var(--s4);
   font-weight: 700;
}
.underwriter-index dd {
   margin: var(--s1) 0 0;
   font-size: 15px;
}
/* One font family, with a consistent hierarchy instead of display typefaces. */
body {
   font-size: 16px;
   line-height: 1.65;
}
h1, h2, h3, h4, .document-tip b, .result-stats b {
   font-family: var(--sans);
   font-weight: 700;
}
.hero h1 {
   font-size: clamp(36px, 5vw, 64px);
   line-height: 1.12;
   letter-spacing: -1.2px;
}
h1 em, .feature-right em {
   font-style: normal;
   font-weight: inherit;
}
h2 {
   font-size: clamp(28px, 3.5vw, 40px);
   line-height: 1.2;
   letter-spacing: -.6px;
}
.checker-aside h3, .feature-right h3, .claim-advice h3, .results h3,.letter-panel h3, .escalation h3 {
   font-size: 26px;
   font-weight: 700;
   line-height: 1.3;
}
.document-tip b, .result-stats b {
   font-size: 24px;
   line-height: 1.35;
}
.brand span {
   font-weight: 700;
}
.hero-copy > p, .checker-aside > p, .feature-right p, dialog p {
   font-size: 16px;
}
.hero-note, .checker-aside p.aside-small, .document-tip p,.claim-advice .small-note, .escalation p, .footer-top p, .footer-bottom p {
   font-size: 14px;
}
.text-link, .feature-right a, .detail-content a, .claim-advice a,.checker-aside .text-link, .footer-bottom button, .letter-actions span {
   font-size: 14px;
}
.eyebrow, .section-index, .pill, .document-tip > span {
   font-size: 12px;
   letter-spacing: 1px;
   font-weight: 700;
}
.art-top, .paper small, .art-insight p, .art-caption {
   font-size: 12px;
   letter-spacing: normal;
}
.paper b, .art-insight b {
   font-size: 14px;
}
.paper {
   flex-wrap: wrap;
}
.result-stats span, .policy-title b {
   font-size: 13px;
   font-weight: 700;
}
.accordions summary {
   font-size: 16px;
   font-weight: 600;
}
.reason, .button, .add-button, .nav nav {
   font-weight: 600;
}
.field label, .letter-mode label {
   font-size: 14px;
}
.field input, .field select, .letter-mode select, .letter-panel textarea {
   font-size: 16px;
   min-height: 48px;
}
.field input::placeholder {
   font-size: 14px;
   color: var(--muted);
}
.field-hint, .subtle, .result-stats small, .result-disclaimer, .checker-bottom p {
   font-size: 13px;
   color: var(--muted);
}
.button, .reason, .add-button {
   font-size: 15px;
   min-height: 48px;
}
.text-button, .remove-policy, .inline-button, .dialog-close {
   min-height: 44px;
   min-width: 44px;
}
/* Standalone action links sit on their own line, so they can carry a real
   touch target without disturbing running text. Links inside paragraphs are
   deliberately excluded. */
.text-link,
.footer-top a,
.footer-bottom a,
.claim-advice a,
.feature-right a,
.detail-content > a {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
}
.text-button, .remove-policy {
   font-size: 14px;
}
.detail-content, .claim-advice li, .claim-advice li strong, .result-alert, .section-heading p {
   font-size: 15px;
}
.result-alert h4, .source-list b {
   font-size: 16px;
}
.source-list small, .notice, .form-error, .limit-note {
   font-size: 14px;
}
.policy-fields > *, .result-stats > *, .checker-main {
   min-width: 0;
}
.result-stats b, .result-alert, .source-list {
   overflow-wrap: anywhere;
}
[aria-invalid="true"] {
   border: 2px solid var(--error) !important;
}
@media (max-width: 760px) {
    .header {
     position: static;
  }
    .page-cards, .contact-grid {
     grid-template-columns: 1fr;
  }
    .nav nav {
     justify-content: flex-start;
     gap: 8px;
  }
    .nav nav a {
     display: flex;
     align-items: center;
     min-height: 44px;
     font-size: 13px;
  }
    .checker-heading {
     flex-wrap: wrap;
  }
    .checker-bottom .button {
     font-size: 15px;
     width: 100%;
  }
    .checker-bottom p {
     max-width: none;
  }
    .letter-panel textarea {
     font-size: 16px;
  }
    html {
     scroll-padding-top: 175px;
  }
    .results {
     scroll-margin-top: 175px;
  }
}
/* Logo typography is local and confined to the wordmark. */
@font-face {
   font-family: 'Space Grotesk';
   src: url('fonts/space-grotesk-regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'Space Grotesk';
   src: url('fonts/space-grotesk-bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}
.hero h1 em {
   color: var(--accent-ink);
}
.brand {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   gap: 10px;
   font-family: 'Space Grotesk', Arial, sans-serif;
   font-size: 29px;
   letter-spacing: -1.2px;
   line-height: 1.2;
   text-decoration: none;
   color: var(--navy-brand);
}
.brand:hover {
   text-decoration: none;
}
/* The wordmark is also the home link, so it needs a real target. */
.brand {
   min-height: 44px;
}
.brand span {
   margin: 0;
}
.brand .brand-name {
   display: inline-flex;
   align-items: baseline;
}
.brand .brand-cover {
   font-weight: 700;
}
/* Brand spec: "Guide" is the accent orange. A brand name is exempt from the
   contrast rule (WCAG 1.4.3), which is just as well - the brand orange is
   2.75:1 on white. Everything that is not the wordmark uses --accent-ink. */
.brand .brand-guide {
   color: var(--accent-bright);
   font-weight: 400;
}
.brand .brand-mark {
   width: 48px;
   height: 34px;
   margin: 0;
   flex-shrink: 0;
}
.brand-circle {
   fill: var(--navy-brand);
}
.brand-accent {
   fill: var(--accent-bright);
}
.brand-overlap {
   fill: #0f1c30;
}
footer {
   background: var(--navy-brand);
}
footer .brand {
   color: #fff;
}
/* On navy the same accent measures 5.65:1, so the footer wordmark needs no
   override - it inherits the brand colour set above. */
footer .brand-circle {
   fill: #e8edf2;
}
footer .brand-overlap {
   fill: #f89b53;
}
@media (max-width: 760px) {
    .brand {
     font-size: 27px;
  }
    .nav nav {
     border-top: 0;
     padding-top: 4px;
  }
    .nav nav a {
     padding: 10px 13px;
  }
}
@media (max-width: 480px) {
    /* Five nav pills wrap to two rows on a phone; tightening the block
       padding returns some of the first screen to content. Targets stay 44px. */
    .nav {
     padding-block: var(--s3);
     gap: var(--s3);
  }
    .nav nav {
     gap: var(--s1);
  }
    .policy-fields, .result-stats {
     grid-template-columns: 1fr;
  }
    .result-stats > div {
     padding: 8px 0;
  }
    .hero h1 {
     font-size: clamp(34px, 10vw, 44px);
  }
    .topline .wrap {
     flex-wrap: wrap;
     gap: 4px;
  }
    .limit-check .field {
     min-width: 0;
     width: 100%;
  }
}

/* Commercial directory listings. Deliberately no shadow, accent or size boost:
   a paid listing must be distinguishable from a statutory office without being
   more visually prominent than one. */
.contact-card-sponsored {
  border:1px dashed var(--line);
  border-radius:var(--r1);
  padding:var(--s4);
  background:var(--surface-sunken)
}
.contact-disclosure {
  margin-top:0
}

/* ---- Where the three brand values land -------------------------------- */
/* Navy states and structures, orange points and acts, white carries the
   reading. Everything that used to be a warm grey, tan or olive is now a
   navy tint, so no fourth hue dilutes those three. */

/* Headings are navy rather than near-black, so the brand colour carries the
   page's structure as well as its blocks. */
h1, h2, h3, h4 {
   color: var(--navy-brand);
}
.checker-aside h3,
.feature-right h3,
.escalation h3 {
   color: #fff;
}

/* Standalone action links are orange; links inside running prose stay in ink
   so a paragraph is not stippled with accent colour. */
.text-link,
.detail-content > a,
.claim-advice > a {
   color: var(--accent-ink);
}
.feature-right a,
.footer-top > a:last-child {
   color: var(--accent-bright);
}

/* A section eyebrow carries the same short orange rule the hero does, which
   is what makes the accent read as a system rather than a stray highlight. */
.section-heading .eyebrow,
.page-intro .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
}
.section-heading .eyebrow::before,
.page-intro .eyebrow::before {
   content: '';
   width: 28px;
   height: 3px;
   background: var(--accent-bright);
   flex: none;
}

/* The field a reader is working in takes an orange rim, matching the focus
   ring, so pointer focus and keyboard focus look like one state. */
.field input:focus,
.field select:focus,
.letter-mode select:focus,
.letter-panel textarea:focus,
.directory-filter input:focus {
   border-color: var(--accent-bright)
}

/* Newsletter signup. */
.signup-intro {
  max-width:60ch;
  color:var(--muted);
  margin-bottom:var(--s5)
}
.signup-form {
  max-width:620px
}
.signup-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px
}
/* Off-screen rather than display:none, which some bots skip over. */
.signup-honeypot {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}
.signup-consent {
  display:flex;
  gap:var(--s3);
  align-items:flex-start;
  margin:var(--s5) 0
}
.signup-consent input {
  flex:none;
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--accent-ink)
}
.signup-consent label {
  font-size:12px;
  line-height:1.5;
  color:var(--ink)
}
.signup-status {
  margin:var(--s4) 0 0;
  font-size:12px;
  font-weight:600
}
.signup-status.is-error {
  color:var(--error)
}
.signup-status:empty {
  margin:0
}
.signup-form .field-hint {
  max-width:60ch
}
@media (max-width: 760px) {
  .signup-fields { grid-template-columns:1fr }
}

/* The signup sits in a card so it reads as an optional offer beside the
   guidance, not another step in it. Two columns on a desktop - the promise on
   the left, the form on the right - collapsing to one on a narrow screen. */
.signup-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s7);
  align-items:center;
  padding:var(--s7) var(--s6);
  border:1px solid var(--line);
  border-radius:var(--r3);
  background:var(--surface);
  box-shadow:var(--shadow-md)
}
.signup-card h2 {
  font-size:clamp(26px,3vw,34px);
  margin:var(--s4) 0 var(--s4)
}
.signup-card .signup-intro {
  margin-bottom:0
}
/* The form already constrains itself for a full-width section; inside the card
   the column is the constraint. */
.signup-card .signup-form {
  max-width:none
}
@media (max-width:860px) {
  .signup-card {
    grid-template-columns:1fr;
    align-items:start;
    gap:var(--s5);
    padding:var(--s6) var(--s5)
  }
  .signup-card .signup-intro {
    margin-bottom:var(--s2)
  }
}

/* Terms and privacy sit together at the end of the footer rule. The group
   carries the auto margin the lone privacy control used to. */
.footer-legal {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s5);
  margin-left:auto
}
.footer-bottom .footer-legal button {
  margin-left:0
}
@media (max-width:760px) {
  .footer-legal {
    margin-left:0;
    gap:var(--s4)
  }
}

/* Reading pages: an opening line set larger than the body, and the pair of
   exits at the foot of the page. */
.reading-page .lede {
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  max-width:760px
}
.terms-cta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s5);
  margin-top:var(--s7);
  padding-top:var(--s6);
  border-top:1px solid var(--line)
}
/* Reading-page links are underlined; a button is not a link in running text. */
.reading-page a.button {
  text-decoration:none
}

/* 12px is the floor for anything a reader is asked to parse, and a step
   numeral is read. These three sat at 9px and 10px. */
.reason span {
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px
}
.source-list>a>span {
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px
}
.paper-check {
  font-size:12px
}

/* The consent box stays visually small, but the square it sits in is a real
   44px target and is itself a label for the same input, so tapping the square
   toggles the box. */
.signup-consent-box {
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  margin:-11px 0 -11px -11px;
  cursor:pointer
}
.signup-consent input {
  width:22px;
  height:22px;
  margin:0
}

/* ---- Confirmations ----------------------------------------------------- */
/* These replace window.confirm. A <dialog> opened with showModal() keeps what
   the browser dialog gave us for free - the focus trap, the inert page behind
   it and Escape to cancel - while carrying the site's own type, colour and
   focus ring instead of operating-system chrome. */
dialog {
   box-shadow: var(--shadow-lg);
}
.confirm-dialog {
   max-width: 460px;
   padding: var(--s6);
}
.confirm-dialog h2 {
   font-size: 26px;
   line-height: 1.25;
   margin: var(--s2) 0 var(--s3);
}
.confirm-dialog p {
   font-size: 15px;
   margin: 0;
}
.confirm-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: var(--s3);
   margin-top: var(--s5);
}
/* The affirmative button is last in the source so it sits on the right on a
   desktop; reversing the column puts it on top on a phone, where the thumb
   starts at the bottom. */
@media (max-width: 480px) {
   .confirm-actions {
     flex-direction: column-reverse;
  }
   .confirm-actions .button {
     width: 100%;
  }
}
/* A dialog that fades in reads as part of the page rather than as something
   the browser threw on top of it. Browsers without @starting-style simply get
   the dialog at full opacity, and the reduced-motion block above removes the
   transition entirely. */
dialog {
   opacity: 0;
   transition: opacity .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;
}
dialog[open] {
   opacity: 1;
}
@starting-style {
   dialog[open] {
     opacity: 0;
  }
}

/* Collapsed navigation.
   Five destination pills wrapped onto three rows and took a third of a phone
   screen before the page began. They collapse behind one control instead.

   The control ships hidden and site.js reveals it, so a reader without
   JavaScript keeps the wrapped rows rather than a menu nothing can open.
   `has-toggle` is set in the same breath, which is why no rule here has to
   care about the hidden state. */
.nav-toggle {
   display: none;
   align-items: center;
   gap: var(--s2);
   min-height: 44px;
   padding: 10px 16px;
   border: 1px solid var(--line);
   border-radius: var(--r-pill);
   background: var(--surface);
   color: var(--navy-brand);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
}
.nav-toggle:hover {
   background: var(--accent-bright);
   border-color: var(--accent-bright);
}
.nav-toggle[aria-expanded="true"] {
   background: var(--mist);
   border-color: var(--navy-brand);
}
/* Three bars from one element: the middle is the box, the other two are its
   pseudo-elements. Open, the outer bars cross and the middle one goes. */
.burger {
   position: relative;
   width: 17px;
   height: 2px;
   border-radius: 2px;
   background: currentColor;
   transition: background .15s ease;
}
.burger::before,
.burger::after {
   content: '';
   position: absolute;
   left: 0;
   width: 100%;
   height: 2px;
   border-radius: 2px;
   background: currentColor;
   transition: transform .15s ease;
}
.burger::before {
   transform: translateY(-5px);
}
.burger::after {
   transform: translateY(5px);
}
.nav-toggle[aria-expanded="true"] .burger {
   background: transparent;
}
.nav-toggle[aria-expanded="true"] .burger::before {
   transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .burger::after {
   transform: rotate(-45deg);
}
@media (max-width: 760px) {
   .nav.has-toggle .nav-toggle {
     display: inline-flex;
  }
   /* The header is static at this width, so it needs to be told to hold the
      panel; otherwise the drop lands against the viewport. */
   .header {
     position: relative;
  }
   /* A drop over the page rather than a row inside the bar: the bar stays the
      height of the wordmark whether the menu is open or shut. */
   .nav.has-toggle > nav {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 1;
     display: none;
     flex-direction: column;
     gap: var(--s2);
     margin: 0;
     padding: var(--s4) 18px calc(var(--s4) + 2px);
     border: 0;
     border-bottom: 1px solid var(--line);
     background: var(--surface);
     box-shadow: var(--shadow-md);
  }
   .nav.has-toggle.is-open > nav {
     display: flex;
  }
   .nav.has-toggle > nav a {
     width: 100%;
     justify-content: flex-start;
     font-size: 14px;
  }
}