/* ==========================================================================
   Northward, by Evernorth Foundation
   A single, consolidated design system. No remote fonts, no dependencies.

   Contents
   01 Design tokens
   02 Reset and base elements
   03 Layout primitives
   04 Buttons and form controls
   05 Skip link, legal ribbon, header, navigation
   06 Hero
   07 Urgent routes
   08 Guided path
   09 Generated results (guide and tools share this)
   10 Renter toolkit
   11 Plain-language library and glossary
   12 Resources, about, legal
   13 Footer and floating UI
   14 Motion
   15 Responsive
   16 Reduced motion, forced colours, print
   ========================================================================== */

/* 01 Design tokens ======================================================== */

:root {
  color-scheme: light;

  /* Surfaces, light to dark */
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eaf0f6;
  --navy-700: #123252;
  --navy-800: #0d2138;
  --navy-900: #08182a;

  /* Text */
  --ink: #14273c;
  --ink-2: #465b70;
  --ink-3: #5a6e82;
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, 0.76);
  --on-dark-3: rgba(255, 255, 255, 0.6);

  /* Lines. --rule is decorative, --edge is a visible control boundary
     (>= 3:1 against white for WCAG 2.2 non-text contrast). */
  --rule: #dce4ed;
  --rule-2: #c6d2df;
  --edge: #74889c;
  --edge-dark: rgba(255, 255, 255, 0.46);

  /* Brand and status */
  --brand: #1c56c9;
  --brand-hi: #4a83ef;
  --brand-dk: #16408f;
  --brand-50: #eaf0fc;
  --brand-100: #d6e2f9;
  --moss: #266350;
  --moss-50: #e4f1ec;
  --amber: #7a5100;
  --amber-50: #fdf2d9;
  --red: #98292c;
  --red-50: #fdedec;

  /* Focus. A two-tone ring stays visible on light and dark surfaces. */
  --focus: #ffbf1f;
  --focus-halo: #0b1e33;

  /* Type */
  --serif: Georgia, Cambria, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-micro: 0.72rem;
  --fs-meta: 0.78rem;
  --fs-small: 0.85rem;
  --fs-body: 0.95rem;
  --fs-lead: 1.06rem;
  --fs-h4: 1.18rem;
  --fs-h3: 1.34rem;
  --fs-display-3: clamp(1.7rem, 2.5vw, 2.35rem);
  --fs-display-2: clamp(2.1rem, 3.7vw, 3.4rem);
  --fs-display-1: clamp(2.85rem, 5.6vw, 4.55rem);

  /* Space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --section: clamp(68px, 8vw, 104px);

  /* Shape and depth */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-1: 0 1px 2px rgba(11, 25, 40, 0.06), 0 3px 10px rgba(11, 25, 40, 0.05);
  --shadow-2: 0 2px 6px rgba(11, 25, 40, 0.07), 0 12px 28px rgba(11, 25, 40, 0.09);
  --shadow-3: 0 4px 12px rgba(11, 25, 40, 0.09), 0 26px 60px rgba(11, 25, 40, 0.16);
  --shadow-dark: 0 20px 50px rgba(0, 0, 0, 0.34);

  --shell: 1220px;
  --header-h: 72px;
}

/* 02 Reset and base elements ============================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--brand) 0 34%, var(--moss) 34% 62%, var(--amber) 62% 100%);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  margin-bottom: var(--s3);
  line-height: 1.2;
  text-wrap: balance;
}

p {
  margin-bottom: var(--s4);
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--brand-dk);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

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

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select,
summary,
label,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
summary,
select,
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

em {
  font-weight: inherit;
}

code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
}

::selection {
  background: var(--brand-100);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--focus-halo);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 03 Layout primitives ==================================================== */

.shell {
  width: min(calc(100% - 48px), var(--shell));
  margin-inline: auto;
}

.eyebrow,
.kicker {
  display: block;
  margin-bottom: var(--s3);
  color: var(--brand-dk);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Section heading with a numbered chapter marker. */
.chapter-heading {
  display: grid;
  max-width: 920px;
  margin-bottom: var(--s7);
  align-items: start;
  grid-template-columns: 56px 1fr;
  gap: var(--s5);
}

.chapter-number {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 2px 0 0;
  place-items: center;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-dk);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.chapter-heading h2,
.section-intro h2,
.resources-section h2,
.about-section h2,
.legal-section h2 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: var(--fs-display-2);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.04;
}

.chapter-heading h2 em,
.section-intro h2 em,
.hero h1 em {
  font-style: italic;
}

.chapter-heading > div > p:last-child {
  max-width: 60ch;
  margin: var(--s4) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-lead);
}

/* Wide three-part section intro. */
.section-intro--compact {
  display: grid;
  margin-bottom: var(--s7);
  align-items: end;
  grid-template-columns: 190px minmax(320px, 1.35fr) minmax(230px, 0.75fr);
  gap: var(--s6);
}

.section-intro--compact .kicker {
  align-self: start;
  margin-top: 10px;
}

.section-intro--compact > p:last-child {
  margin: 0 0 var(--s1);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* 04 Buttons and form controls =========================================== */

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.button span[aria-hidden] {
  transition: transform 180ms ease;
}

.button:hover span[aria-hidden] {
  transform: translateX(3px);
}

.button--primary {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: var(--shadow-1);
  color: var(--on-dark);
}

.button--primary:hover {
  border-color: #2464e0;
  background: #2464e0;
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.button--ink {
  border-color: var(--navy-800);
  background: var(--navy-800);
  color: var(--on-dark);
}

.button--ink:hover {
  border-color: var(--navy-700);
  background: var(--navy-700);
  transform: translateY(-1px);
}

.button--paper {
  border-color: var(--edge);
  background: var(--surface);
  color: var(--ink);
}

.button--paper:hover {
  border-color: var(--ink);
  background: var(--surface-2);
}

.button--quiet {
  border-color: var(--rule-2);
  background: transparent;
  color: var(--ink-2);
}

.button--quiet:hover {
  border-color: var(--edge);
  background: var(--surface-2);
  color: var(--ink);
}

.button--coral {
  border-color: var(--brand-hi);
  background: var(--brand-hi);
  color: #06182c;
}

.button--coral:hover {
  border-color: #6d9ef5;
  background: #6d9ef5;
  transform: translateY(-1px);
}

.text-button {
  min-height: 40px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--brand-dk);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.text-button:hover {
  color: var(--brand);
}

.text-button--light {
  color: var(--on-dark);
}

.text-button--light:hover {
  color: var(--on-dark);
  opacity: 0.82;
}

select,
input[type="search"],
input[type="number"] {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

select:hover,
input[type="search"]:hover,
input[type="number"]:hover {
  border-color: var(--ink-3);
}

/* Every select carries its own chevron, including the ones that are not
   wrapped, so the control always reads as a dropdown. */
select {
  padding: 10px 46px 10px 14px;
  appearance: none;
  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.5L6 6.5L11 1.5' fill='none' stroke='%23465b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

input[type="search"],
input[type="number"] {
  padding: 10px 14px;
}

.select-wrap {
  position: relative;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.form-actions--split {
  justify-content: space-between;
}

.field-hint {
  margin-bottom: var(--s5);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* 05 Skip link, ribbon, header, navigation =============================== */

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  transform: translateY(-180%);
  border-radius: 6px;
  background: var(--navy-900);
  color: var(--on-dark);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.legal-ribbon {
  position: relative;
  z-index: 200;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-3);
  color: #2b3f54;
  font-size: var(--fs-micro);
}

.legal-ribbon__inner {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  padding-block: 6px;
}

.legal-ribbon p {
  margin: 0;
}

.legal-ribbon a {
  flex: 0 0 auto;
  color: var(--brand-dk);
  font-weight: 700;
  white-space: nowrap;
}

.site-header {
  position: sticky;
  z-index: 150;
  top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 33, 56, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(6, 18, 30, 0.14);
}

.header-inner {
  display: grid;
  min-height: var(--header-h);
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: var(--s6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--on-dark);
  text-decoration: none;
}

.brand-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  object-fit: cover;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-family: var(--serif);
  font-size: 1.16rem;
  letter-spacing: -0.012em;
  line-height: 1.05;
}

.brand small {
  margin-top: 3px;
  color: var(--on-dark-3);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: var(--s6);
}

.site-nav a {
  position: relative;
  padding: 24px 0;
  color: var(--on-dark-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="true"] {
  color: var(--on-dark);
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  height: 2px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  border-radius: 2px;
  background: var(--brand-hi);
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.quick-exit {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  color: var(--on-dark);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.quick-exit:hover {
  border-color: var(--surface);
  background: var(--surface);
  color: var(--navy-800);
}

.menu-button {
  display: none;
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 88px) 0 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    radial-gradient(80% 120% at 78% 8%, rgba(74, 131, 239, 0.2), transparent 62%),
    linear-gradient(152deg, #0b1d31 0%, #10263e 58%, #142c49 100%);
  background-size: 58px 58px, 58px 58px, auto, auto;
  color: var(--on-dark);
}

.hero::after {
  position: absolute;
  top: 6%;
  right: -14%;
  width: 560px;
  height: 560px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  box-shadow: 0 0 0 64px rgba(255, 255, 255, 0.014), 0 0 0 128px rgba(255, 255, 255, 0.014);
  pointer-events: none;
}

.hero-contours {
  position: absolute;
  right: -6%;
  bottom: -30%;
  width: 46%;
  height: 78%;
  opacity: 0.5;
  background: repeating-radial-gradient(ellipse at 60% 50%, transparent 0 22px, rgba(150, 190, 255, 0.09) 23px 24px, transparent 25px 46px);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(408px, 0.8fr);
  gap: clamp(40px, 5vw, 76px);
}

.hero-copy {
  padding-bottom: clamp(48px, 6vw, 78px);
}

.hero .eyebrow {
  position: relative;
  margin-bottom: var(--s5);
  padding-left: 34px;
  color: #a9c3ee;
}

.hero .eyebrow::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 24px;
  height: 2px;
  content: "";
  background: var(--brand-hi);
}

.hero h1 {
  max-width: 15ch;
  margin-bottom: var(--s5);
  font-family: var(--serif);
  font-size: var(--fs-display-1);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.99;
}

.hero h1 em {
  display: block;
  margin-top: 6px;
  color: #e6ddd0;
  letter-spacing: -0.038em;
}

.hero-lede {
  max-width: 56ch;
  margin-bottom: var(--s6);
  color: var(--on-dark-2);
  font-size: var(--fs-lead);
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

.hero .button--paper {
  border-color: rgba(255, 255, 255, 0.44);
  background: transparent;
  color: var(--on-dark);
}

.hero .button--paper:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.09);
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: var(--s6) 0 0;
  padding: var(--s4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--on-dark-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  list-style: none;
}

.trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.trust-list span {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(74, 131, 239, 0.24);
  color: #b7d0f8;
  font-size: 0.6rem;
}

/* Start-here card */
.hero-help {
  position: relative;
  z-index: 3;
  overflow: hidden;
  margin-bottom: clamp(48px, 6vw, 78px);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-dark);
  color: var(--ink);
}

.hero-help::before {
  display: block;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-hi) 100%);
}

.hero-help__heading {
  padding: var(--s5) 28px var(--s4);
}

.hero-help__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--brand-dk);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-help__badge::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: var(--brand);
}

.hero-help h2 {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 1.82rem;
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

.hero-help__heading p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.hero-help__topics {
  border-top: 1px solid var(--rule);
}

.hero-help__topics button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 13px 28px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  text-align: left;
  transition: background 150ms ease, padding-left 150ms ease;
}

.hero-help__topics button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  content: "";
  transform: scaleY(0);
  background: var(--brand);
  transition: transform 160ms ease;
}

.hero-help__topics button:hover,
.hero-help__topics button:focus-visible {
  padding-left: 32px;
  background: var(--surface-2);
}

.hero-help__topics button:hover::before,
.hero-help__topics button:focus-visible::before {
  transform: scaleY(1);
}

.hero-help__topics strong,
.hero-help__topics small {
  display: block;
}

.hero-help__topics strong {
  font-size: 0.9rem;
}

.hero-help__topics small {
  margin-top: 2px;
  color: var(--ink-2);
  font-size: var(--fs-micro);
}

.hero-help__topics b {
  flex: 0 0 auto;
  color: var(--brand-dk);
  font-size: 1.05rem;
  transition: transform 160ms ease;
}

.hero-help__topics button:hover b {
  transform: translateX(4px);
}

.hero-help__guided {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 13px 28px;
  background: var(--brand-50);
  color: var(--brand-dk);
  font-size: var(--fs-meta);
  font-weight: 700;
  text-decoration: none;
  transition: background 150ms ease;
}

.hero-help__guided:hover {
  background: var(--brand-100);
}

/* Journey rail at the foot of the hero */
.chapter-strip {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.chapter-strip button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  border: 0;
  background: none;
  color: var(--on-dark-3);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 150ms ease;
}

.chapter-strip button::before {
  width: 7px;
  height: 7px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  transition: background 150ms ease, border-color 150ms ease;
}

.chapter-strip button:hover,
.chapter-strip button:focus-visible {
  color: var(--on-dark);
}

.chapter-strip button:hover::before,
.chapter-strip button:focus-visible::before {
  border-color: var(--brand-hi);
  background: var(--brand-hi);
}

.chapter-strip i {
  height: 1px;
  min-width: 20px;
  flex: 1;
  background: rgba(255, 255, 255, 0.15);
}

/* 07 Urgent routes ======================================================= */

.urgent-section {
  padding: var(--section) 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.urgent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: var(--s4);
}

.urgent-card {
  position: relative;
  display: flex;
  min-height: 178px;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.urgent-card::before {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 3px;
  content: "";
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--brand);
}

.urgent-card:nth-child(1)::before,
.urgent-card:nth-child(2)::before {
  background: var(--red);
}

.urgent-card:nth-child(3)::before {
  background: var(--amber);
}

.urgent-card:nth-child(5)::before {
  background: var(--moss);
}

.urgent-card:hover,
.urgent-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--edge);
  box-shadow: var(--shadow-2);
}

.urgent-card__icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  margin-bottom: var(--s5);
  place-items: center;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.urgent-card strong,
.urgent-card small {
  display: block;
}

.urgent-card strong {
  margin-bottom: 5px;
  font-size: 0.95rem;
  line-height: 1.3;
}

.urgent-card small {
  max-width: calc(100% - 26px);
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: 1.45;
}

.card-arrow {
  position: absolute;
  right: 18px;
  bottom: 17px;
  color: var(--brand-dk);
  font-size: 1.05rem;
  transition: transform 160ms ease;
}

.urgent-card:hover .card-arrow {
  transform: translate(3px, -3px);
}

/* 08 Guided path ========================================================= */

.guide-section {
  padding: var(--section) 0;
  background: var(--surface-3);
}

.guide-layout {
  display: grid;
  align-items: start;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: var(--s7);
}

.guide-aside {
  position: sticky;
  top: calc(var(--header-h) + 28px);
}

.step-list {
  position: relative;
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}

.step-list::before {
  position: absolute;
  z-index: 0;
  top: 26px;
  bottom: 30px;
  left: 17px;
  width: 2px;
  content: "";
  background: var(--rule-2);
}

.step-list li {
  position: relative;
  display: grid;
  min-height: 70px;
  align-items: start;
  grid-template-columns: 36px 1fr;
  gap: var(--s3);
}

.step-list li > span {
  position: relative;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  font-weight: 700;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.step-list li strong,
.step-list li small {
  display: block;
}

.step-list li strong {
  margin: 6px 0 2px;
  color: var(--ink-2);
  font-size: var(--fs-meta);
}

.step-list li small {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  line-height: 1.4;
}

.step-list li.is-current strong,
.step-list li.is-done strong {
  color: var(--ink);
}

.step-list li.is-current > span {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(28, 86, 201, 0.13);
  color: var(--on-dark);
}

.step-list li.is-done > span {
  border-color: var(--moss);
  background: var(--moss);
  color: var(--on-dark);
}

.privacy-note {
  display: flex;
  gap: 10px;
  padding: var(--s4);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.privacy-note > span {
  flex: 0 0 auto;
  color: var(--moss);
}

.privacy-note p {
  margin: 0;
}

.privacy-note strong {
  color: var(--ink);
}

.guide-panel {
  position: relative;
  padding: var(--s6) var(--s7) var(--s7);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.guide-panel__topline {
  display: flex;
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  border-bottom: 1px solid var(--rule);
  color: var(--brand-dk);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.guide-step legend {
  display: block;
  width: 100%;
  margin-bottom: var(--s2);
  font-family: var(--serif);
  font-size: var(--fs-display-3);
  font-weight: 400;
  letter-spacing: -0.026em;
  line-height: 1.14;
}

.choice-stack {
  display: grid;
  max-width: 680px;
  gap: 10px;
}

.choice-stack--compact {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-card {
  position: relative;
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: var(--s3);
  padding: 12px 15px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.choice-card:hover {
  border-color: var(--brand);
  background: var(--surface-2);
}

.choice-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand);
}

.choice-card input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--brand);
}

.choice-card strong,
.choice-card small {
  display: block;
}

.choice-card strong {
  font-size: var(--fs-small);
}

.choice-card small {
  margin-top: 2px;
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: 1.45;
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.stage-choice {
  position: relative;
  min-height: 132px;
}

.stage-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.stage-choice span {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.stage-choice span::before {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 26px;
  height: 34px;
  content: "";
  border: 2px solid var(--rule-2);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  transition: border-color 160ms ease;
}

.stage-choice span:hover,
.stage-choice input:focus-visible + span {
  border-color: var(--brand);
  background: var(--surface-2);
}

.stage-choice input:checked + span {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand);
}

.stage-choice input:checked + span::before,
.stage-choice span:hover::before {
  border-color: var(--brand);
}

.stage-choice strong,
.stage-choice small {
  display: block;
}

.stage-choice strong {
  font-size: var(--fs-h4);
}

.stage-choice small {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: 1.45;
}

/* 09 Generated results =================================================== */

.guide-result,
.tool-result,
.quote-result {
  animation: result-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.result-status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s4);
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Outlined, not inverted: `background: currentColor` beside `color` on the
   same element resolves against that element's own colour. */
.result-status > span[aria-hidden] {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.status-routine { border-color: var(--moss); background: var(--moss-50); color: var(--moss); }
.status-check { border-color: var(--brand-dk); background: var(--brand-50); color: var(--brand-dk); }
.status-act { border-color: var(--amber); background: var(--amber-50); color: var(--amber); }
.status-urgent { border-color: var(--red); background: var(--red-50); color: var(--red); }
.status-outside { border-color: #5a5348; background: #f2efe9; color: #5a5348; }

.result-title {
  max-width: 22ch;
  margin-bottom: var(--s3);
  font-family: var(--serif);
  font-size: var(--fs-display-3);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.result-explanation {
  max-width: 68ch;
  margin-bottom: var(--s5);
  color: var(--ink-2);
  font-size: var(--fs-body);
}

.result-columns {
  display: grid;
  margin-top: var(--s5);
  grid-template-columns: minmax(0, 1.15fr) minmax(210px, 0.85fr);
  gap: var(--s5);
}

.result-box {
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.result-box h4,
.result-sources h4 {
  margin: 0 0 var(--s3);
  color: var(--ink-2);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.result-box ol,
.result-box ul {
  margin: 0;
  padding-left: 20px;
  font-size: var(--fs-small);
}

.result-box li {
  margin-bottom: 9px;
}

.result-box li:last-child {
  margin-bottom: 0;
}

.result-escalation {
  margin: var(--s4) 0 0;
  padding: 15px 18px;
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--red-50);
  font-size: var(--fs-small);
}

.result-sources {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.source-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.source-list a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-dk);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.source-list a:hover {
  border-color: var(--brand);
  background: var(--brand-50);
}

.result-meta {
  margin: var(--s4) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-micro);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

.safety-bar {
  display: flex;
  margin: 0 0 var(--s5);
  padding: 14px 18px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  border-radius: var(--radius-sm);
  background: var(--red);
  color: var(--on-dark);
}

.safety-bar p {
  margin: 0;
  font-size: var(--fs-small);
}

.safety-bar a {
  flex: 0 0 auto;
  color: var(--on-dark);
  font-weight: 700;
}

/* The plan hands the reader the matching toolkit items. */
.result-tools {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--moss);
  border-radius: var(--radius-sm);
  background: var(--moss-50);
}

.result-tools h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s2);
  color: var(--moss);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.result-tools > p {
  max-width: 62ch;
  margin: 0 0 var(--s4);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.result-tools ul {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  list-style: none;
}

.result-tools button {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 15px 16px;
  align-items: start;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  column-gap: var(--s3);
  row-gap: 2px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.result-tools button:hover {
  transform: translateY(-2px);
  border-color: var(--moss);
  box-shadow: var(--shadow-1);
}

.result-tools button i {
  display: grid;
  width: 28px;
  height: 28px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 6px;
  background: var(--moss-50);
  color: var(--moss);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 800;
}

.result-tools button strong {
  grid-column: 2;
  font-size: var(--fs-small);
}

.result-tools button small {
  grid-column: 2;
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: 1.45;
}

.result-tools button b {
  grid-row: 1 / 3;
  grid-column: 3;
  align-self: center;
  color: var(--moss);
  font-size: 1.05rem;
  transition: transform 150ms ease;
}

.result-tools button:hover b {
  transform: translateX(3px);
}

.result-tools--none {
  border-left-color: var(--rule-2);
  background: var(--surface-2);
}

.result-tools--none h4 {
  color: var(--ink-2);
}

/* Coverage escape hatch offered when the arrangement is unclear. */
.result-continue {
  display: flex;
  margin-top: var(--s5);
  padding: 16px 18px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  border: 1px dashed var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.result-continue p {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* 10 Renter toolkit ====================================================== */

.tools-section {
  padding: var(--section) 0;
  background: var(--surface-2);
}

/* Router: the guided path decides which tools open. */
.tool-router {
  display: grid;
  margin-bottom: var(--s5);
  padding: 22px 26px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px var(--s6);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.tool-router.is-matched {
  border-left-color: var(--moss);
  background: var(--moss-50);
}

.tool-router__lead {
  margin: 0;
  grid-column: 1;
  font-size: var(--fs-lead);
}

.tool-router__note {
  margin: 0;
  grid-column: 1;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.tool-router__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 0;
  grid-column: 1;
}

.tool-router__chips button {
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--moss);
  border-radius: 999px;
  background: var(--surface);
  color: var(--moss);
  font-size: var(--fs-micro);
  font-weight: 700;
  transition: background 140ms ease, color 140ms ease;
}

.tool-router__chips button:hover {
  background: var(--moss);
  color: var(--on-dark);
}

.tool-router > .button {
  grid-row: 1 / -1;
  grid-column: 2;
}

.tool-tabs {
  position: sticky;
  z-index: 40;
  top: var(--header-h);
  display: flex;
  overflow-x: auto;
  margin-bottom: var(--s5);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  scrollbar-width: thin;
}

.tool-tabs a {
  min-width: max-content;
  min-height: 48px;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-right: 1px solid var(--rule);
  color: #2b3f55;
  font-size: var(--fs-meta);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.tool-tabs a:last-child {
  border-right: 0;
}

.tool-tabs a:hover,
.tool-tabs a:focus-visible {
  background: var(--brand-50);
  color: var(--brand-dk);
}

/* Each tool is a disclosure so only the relevant ones are open at once. */
.tool-block {
  margin-top: var(--s3);
  scroll-margin-top: calc(var(--header-h) + 24px);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tool-block[open] {
  border-color: var(--edge);
  box-shadow: var(--shadow-2);
}

/* Green is reserved for the "matched to your plan" state, so the resting
   accents avoid it. */
.tool-block--blue { border-top: 3px solid var(--brand); }
.tool-block--cedar { border-top: 3px solid var(--red); }
.tool-block--paper { border-top: 3px solid #4a7fb5; }
.checklist-block { border-top: 3px solid var(--amber); }

.tool-block--ink {
  border-color: #16324e;
  border-top: 3px solid var(--brand-hi);
  background: linear-gradient(160deg, #0d2138 0%, #123252 100%);
  color: var(--on-dark);
}

.tool-block.is-recommended {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px var(--moss-50), var(--shadow-1);
}

.tool-summary {
  display: grid;
  padding: 20px clamp(20px, 2.4vw, 30px);
  align-items: center;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  column-gap: var(--s4);
  row-gap: 2px;
  list-style: none;
  transition: background 150ms ease;
}

.tool-summary::-webkit-details-marker {
  display: none;
}

.tool-summary:hover {
  background: var(--surface-2);
}

.tool-block--ink .tool-summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tool-index {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: 1 / 4;
  grid-column: 1;
  place-items: center;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  font-weight: 800;
}

.tool-block--ink .tool-index {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
}

.tool-summary .kicker {
  margin: 0;
  grid-row: 1;
  grid-column: 2;
}

.tool-block--ink .kicker {
  color: #a9c3ee;
}

.tool-summary h3 {
  margin: 0;
  grid-row: 2;
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2vw, 1.86rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.14;
}

.tool-summary__note {
  grid-row: 3;
  grid-column: 2;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.tool-block--ink .tool-summary__note {
  color: var(--on-dark-2);
}

.tool-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  grid-row: 1 / 4;
  grid-column: 3;
  padding: 6px 12px;
  border: 1px solid var(--moss);
  border-radius: 999px;
  background: var(--moss-50);
  color: var(--moss);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tool-flag::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: currentColor;
}

.tool-summary__toggle {
  display: grid;
  width: 34px;
  height: 34px;
  grid-row: 1 / 4;
  grid-column: 4;
  place-items: center;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  color: var(--ink-2);
}

.tool-block--ink .tool-summary__toggle {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--on-dark);
}

.tool-summary__toggle::before {
  width: 8px;
  height: 8px;
  margin-top: -3px;
  content: "";
  transform: rotate(45deg);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: transform 180ms ease;
}

.tool-block[open] .tool-summary__toggle::before {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.tool-body {
  min-width: 0;
  padding: var(--s5) clamp(20px, 2.4vw, 30px) clamp(26px, 2.6vw, 34px);
  border-top: 1px solid var(--rule);
}

.tool-block--ink .tool-body {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.tool-form {
  display: grid;
  max-width: 560px;
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4);
}

/* A form legend is a field label here, not a display heading. */
.tool-form legend {
  display: block;
  width: 100%;
  margin-bottom: var(--s2);
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.tool-result {
  margin-top: var(--s6);
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
}

.notice-warning {
  display: flex;
  margin-bottom: var(--s5);
  padding: 13px 17px;
  gap: 8px;
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--red-50);
  font-size: var(--fs-small);
}

.notice-warning strong {
  flex: 0 0 auto;
  color: var(--red);
}

.coach-boundary {
  display: flex;
  margin: 0 0 var(--s5);
  align-items: start;
  gap: 11px;
  color: var(--on-dark-2);
  font-size: var(--fs-small);
}

.coach-boundary span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: 0.8rem;
}

.coach-boundary p {
  margin: 0;
}

/* Quote comparison coach */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.quote-card {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 160ms ease, background 160ms ease;
}

.quote-card:hover,
.quote-card:focus-within {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.08);
}

/* A legend is painted into the fieldset border by default. Floating it
   returns it to normal flow so it can sit inside a bordered card. */
.quote-card legend,
.paper-checklist legend {
  float: left;
  width: 100%;
  margin-bottom: var(--s4);
  padding-bottom: 10px;
}

.quote-card legend + *,
.paper-checklist legend + * {
  clear: both;
}

.quote-card legend {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: 1.44rem;
}

.quote-card legend small {
  margin-left: 6px;
  color: var(--on-dark-3);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-card > label {
  display: block;
  margin-bottom: var(--s3);
  color: var(--on-dark-2);
  font-size: var(--fs-micro);
  font-weight: 600;
}

.quote-card input,
.quote-card select {
  min-height: 42px;
  margin-top: 5px;
  border-color: var(--edge-dark);
  background-color: rgba(0, 0, 0, 0.26);
  color: var(--on-dark);
}

.quote-card select {
  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.5L6 6.5L11 1.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.quote-card input:hover,
.quote-card select:hover {
  border-color: rgba(255, 255, 255, 0.72);
}

.quote-card option {
  background: var(--navy-800);
  color: var(--on-dark);
}

.input-affix {
  position: relative;
  display: block;
}

.input-affix > span {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 12px;
  transform: translateY(-25%);
  color: var(--on-dark-3);
  font-size: var(--fs-small);
}

.input-affix input {
  padding-left: 26px;
}

.mini-checks {
  display: grid;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mini-checks label {
  display: flex;
  align-items: start;
  gap: 7px;
  color: var(--on-dark-2);
  font-size: 0.7rem;
  line-height: 1.35;
}

.mini-checks input {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--brand-hi);
}

.quote-result {
  margin-top: var(--s6);
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.comparison-wrap {
  overflow-x: auto;
  margin: var(--s5) 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.comparison-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.comparison-table th,
.comparison-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.comparison-table thead th {
  background: var(--surface-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comparison-table tbody th {
  font-weight: 700;
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--surface-2);
}

.questions-list {
  display: grid;
  margin: var(--s4) 0 0;
  padding: 0;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
  list-style: none;
}

.questions-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-small);
}

.questions-list li::before {
  position: absolute;
  left: 0;
  content: "?";
  color: var(--brand);
  font-weight: 800;
}

/* Checklists */
.save-control {
  display: flex;
  margin-bottom: var(--s5);
  padding: 18px 20px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--brand-50);
}

.save-control strong,
.save-control p {
  display: block;
  margin: 0;
}

.save-control p {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: var(--fs-micro);
}

.switch {
  display: flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch > span {
  position: relative;
  width: 50px;
  height: 28px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  transition: background 160ms ease, border-color 160ms ease;
}

.switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  content: "";
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform 160ms ease, background 160ms ease;
}

.switch input:checked + span {
  border-color: var(--moss);
  background: var(--moss-50);
}

.switch input:checked + span::after {
  transform: translateX(22px);
  background: var(--moss);
}

.switch input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--focus-halo);
}

.switch b {
  min-width: 22px;
  font-size: var(--fs-micro);
}

.checklist-progress {
  margin-bottom: var(--s5);
}

.checklist-progress > div {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.checklist-progress progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--surface-3);
}

.checklist-progress progress::-webkit-progress-bar { background: var(--surface-3); }
.checklist-progress progress::-webkit-progress-value { background: var(--brand); transition: width 200ms ease; }
.checklist-progress progress::-moz-progress-bar { background: var(--brand); }

.checklist-columns {
  display: grid;
  margin-bottom: var(--s5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.paper-checklist {
  padding: 22px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.paper-checklist legend {
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--serif);
  font-size: var(--fs-h3);
}

.paper-checklist label {
  display: flex;
  min-height: 46px;
  align-items: start;
  gap: 11px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.paper-checklist label:last-of-type {
  border-bottom: 0;
}

.paper-checklist input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--brand);
}

.paper-checklist input:checked + span {
  color: var(--ink-3);
  text-decoration: line-through;
}

/* 11 Library and glossary ================================================ */

.library-section {
  padding: var(--section) 0;
  background: var(--surface);
}

.library-controls {
  display: grid;
  margin-bottom: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  gap: var(--s3);
}

.library-controls > label {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.search-field {
  position: relative;
  max-width: 560px;
}

.search-field > span {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 15px;
  transform: translateY(-52%);
  color: var(--ink-2);
  font-size: 1.15rem;
}

.search-field input {
  padding-left: 42px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: var(--s1);
}

.filter-row button {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.filter-row button:hover {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand-dk);
}

.filter-row button.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-dark);
}

.search-status {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-micro);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4);
}

.article-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 24px 24px 22px;
  border: 1px solid var(--rule-2);
  border-top: 3px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.article-card:hover,
.article-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--edge);
  box-shadow: var(--shadow-2);
}

.article-card[data-category~="apply"] { border-top-color: #4a7fb5; }
.article-card[data-category~="sign"] { border-top-color: var(--brand); }
.article-card[data-category~="live"] { border-top-color: var(--moss); }
.article-card[data-category~="move"] { border-top-color: var(--amber); }
.article-card[data-category~="resolve"] { border-top-color: #5d4b8c; }
.article-card[data-category~="insurance"] { border-top-color: #2b7f88; }

.article-card--urgent {
  border-top-color: var(--red);
  background: linear-gradient(180deg, var(--red-50) 0%, var(--surface) 34%);
}

.article-card--safe {
  border-top-color: var(--moss);
  background: linear-gradient(180deg, var(--moss-50) 0%, var(--surface) 34%);
}

.article-meta {
  display: flex;
  margin-bottom: var(--s5);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-meta span:first-child {
  color: var(--brand-dk);
}

.article-card h3 {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.18;
}

.article-card > p {
  margin-bottom: var(--s4);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.article-card details {
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.article-card summary {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  color: var(--brand-dk);
  font-size: var(--fs-meta);
  font-weight: 700;
  list-style: none;
}

.article-card summary::-webkit-details-marker {
  display: none;
}

.article-card summary::before {
  width: 7px;
  height: 7px;
  content: "";
  transform: rotate(-45deg);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: transform 160ms ease;
}

.article-card details[open] summary {
  margin-bottom: var(--s4);
}

.article-card details[open] summary::before {
  transform: rotate(45deg);
}

.article-card details > div {
  font-size: var(--fs-small);
}

.article-card details p {
  margin-bottom: var(--s3);
}

.article-card details ul {
  margin-bottom: var(--s3);
  padding-left: 19px;
}

.article-card details li {
  margin-bottom: 5px;
}

.source-line {
  margin: var(--s4) 0 0;
}

.source-line a {
  font-weight: 700;
}

.empty-state {
  padding: var(--s7);
  border: 1px dashed var(--edge);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: center;
}

.empty-state p {
  margin: 6px 0 0;
  color: var(--ink-2);
}

.glossary {
  display: grid;
  margin-top: var(--section);
  padding-top: var(--s7);
  border-top: 1px solid var(--rule);
  grid-template-columns: 260px 1fr;
  gap: var(--s7);
}

.glossary-heading h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.glossary dl {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s3);
}

.glossary dl > div {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.glossary dt {
  margin-bottom: 5px;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
}

.glossary dd {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: 1.55;
}

/* 12 Resources, about, legal ============================================= */

.resources-section {
  padding: var(--section) 0;
  background: linear-gradient(160deg, #0b1d31 0%, #10263e 100%);
  color: var(--on-dark);
}

.resources-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 6vw, 88px);
}

.resources-section .kicker {
  color: #a9c3ee;
}

.resources-section h2 {
  max-width: 12ch;
}

.resources-grid > div:first-child > p:not([class]) {
  max-width: 42ch;
  margin-top: var(--s5);
  color: var(--on-dark-2);
}

.emergency-note {
  max-width: 44ch;
  margin: var(--s6) 0 0;
  padding: 16px 18px;
  border-left: 4px solid #e07b6f;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-dark-2);
  font-size: var(--fs-small);
}

.emergency-note strong {
  color: var(--on-dark);
}

.resource-list {
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.resource-list a {
  display: flex;
  min-height: 80px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--on-dark);
  text-decoration: none;
  transition: padding 160ms ease, background 160ms ease;
}

.resource-list a:hover {
  padding-right: 16px;
  padding-left: 16px;
  background: rgba(255, 255, 255, 0.06);
}

.resource-list strong,
.resource-list small {
  display: block;
}

.resource-list strong {
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 400;
}

.resource-list small {
  margin-top: 3px;
  color: var(--on-dark-2);
  font-size: var(--fs-micro);
}

.resource-list b {
  flex: 0 0 auto;
  color: #a9c3ee;
  font-size: 1.2rem;
  transition: transform 160ms ease;
}

.resource-list a:hover b {
  transform: translate(3px, -3px);
}

.about-section {
  padding: var(--section) 0;
  background: var(--surface-2);
}

.about-grid {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(36px, 5vw, 64px);
}

.maker-card {
  padding: var(--s6);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #0d2138 0%, #123252 100%);
  box-shadow: var(--shadow-2);
  color: var(--on-dark);
}

.maker-card img {
  width: 74px;
  height: 74px;
  margin-bottom: var(--s5);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  object-fit: cover;
}

.maker-card .kicker {
  color: #a9c3ee;
}

.maker-card h2 {
  margin-bottom: var(--s3);
  font-family: var(--serif);
  font-size: 1.94rem;
  font-weight: 400;
  letter-spacing: -0.028em;
}

.maker-card p {
  color: var(--on-dark-2);
  font-size: var(--fs-small);
}

.maker-card a {
  color: var(--on-dark);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.about-copy > p:nth-of-type(2) {
  max-width: 62ch;
  margin: var(--s5) 0 var(--s6);
  color: var(--ink-2);
  font-size: var(--fs-lead);
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.principle-grid > div {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.principle-grid span {
  display: grid;
  width: 28px;
  height: 28px;
  margin-bottom: var(--s5);
  place-items: center;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-dk);
  font-size: 0.68rem;
  font-weight: 800;
}

.principle-grid strong {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-small);
}

.principle-grid p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.legal-section {
  padding: var(--section) 0;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

.legal-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(36px, 5vw, 70px);
}

.legal-lede {
  margin-top: var(--s5);
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.legal-accordions {
  border-top: 1px solid var(--rule-2);
}

.legal-accordions details {
  border-bottom: 1px solid var(--rule-2);
}

.legal-accordions summary {
  position: relative;
  min-height: 62px;
  padding: 19px 46px 17px 0;
  font-family: var(--serif);
  font-size: var(--fs-h4);
  font-weight: 700;
  list-style: none;
  transition: color 150ms ease;
}

.legal-accordions summary:hover {
  color: var(--brand-dk);
}

.legal-accordions summary::-webkit-details-marker {
  display: none;
}

.legal-accordions summary::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 9px;
  height: 9px;
  content: "";
  transform: translateY(-70%) rotate(45deg);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: transform 180ms ease;
}

.legal-accordions details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.legal-accordions details > div {
  padding: 0 40px 22px 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.legal-accordions details > div p:last-child {
  margin-bottom: 0;
}

/* 13 Footer and floating UI ============================================== */

.site-footer {
  padding: var(--s7) 0;
  background: var(--navy-900);
  color: var(--on-dark);
}

.footer-grid {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s7);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.footer-brand .brand-logo {
  width: 42px;
  height: 42px;
}

.footer-brand strong,
.footer-brand small {
  display: block;
}

.footer-brand strong {
  font-family: var(--serif);
  font-size: 1.3rem;
}

.footer-brand small {
  margin-top: 2px;
  color: var(--on-dark-3);
  font-size: var(--fs-micro);
}

.site-footer nav {
  display: grid;
  gap: 8px;
}

.site-footer nav a {
  color: var(--on-dark);
  font-size: var(--fs-meta);
}

.footer-meta {
  text-align: right;
}

.footer-meta p {
  margin-bottom: 3px;
  color: var(--on-dark-3);
  font-size: var(--fs-micro);
}

.toast {
  position: fixed;
  z-index: 500;
  right: 22px;
  bottom: 22px;
  max-width: min(360px, calc(100% - 44px));
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--navy-900);
  box-shadow: var(--shadow-3);
  color: var(--on-dark);
  font-size: var(--fs-small);
  font-weight: 600;
  animation: toast-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.to-top {
  position: fixed;
  z-index: 400;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  font-size: 1.05rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease, background 150ms ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top:hover {
  background: var(--surface-2);
  transform: translateY(-2px);
}

.toast:not([hidden]) ~ .to-top.is-visible {
  transform: translateY(-72px);
}

/* Without JavaScript every interactive control is inert, so the page hides
   the dead controls and explains where the working content is. */
.js-required {
  display: none;
  max-width: 62ch;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--amber);
  border-left-width: 4px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--amber-50);
  font-size: var(--fs-small);
}

.no-js .js-required {
  display: block;
}

.no-js .guide-layout,
.no-js .urgent-grid,
.no-js .hero-help__topics,
.no-js .tool-tabs,
.no-js .tool-router,
.no-js .tool-block,
.no-js .library-controls,
.no-js .to-top {
  display: none !important;
}

.noscript-note {
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  max-width: 420px;
  padding: 17px;
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  background: var(--amber-50);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-small);
}

/* 14 Motion ============================================================== */

.reveal {
  animation: reveal-up 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.reveal--late {
  animation-delay: 110ms;
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 15 Responsive ========================================================== */

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(384px, 0.82fr);
  }
}

@media (max-width: 900px) {
  .tool-router {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .tool-router > .button {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
    margin-top: var(--s3);
  }

  .tool-flag {
    grid-row: 4;
    grid-column: 2;
    justify-self: start;
    margin-top: var(--s2);
  }
}

@media (max-width: 900px) {
  .shell {
    width: min(calc(100% - 36px), var(--shell));
  }

  .legal-ribbon__inner {
    justify-content: space-between;
  }

  .header-inner {
    grid-template-columns: 1fr auto auto;
    gap: var(--s3);
  }

  .menu-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--on-dark);
    font-size: var(--fs-micro);
    font-weight: 700;
  }

  .menu-button > span:first-child {
    width: 15px;
    height: 10px;
    border-top: 2px solid;
    border-bottom: 2px solid;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 18px;
    left: 18px;
    display: none;
    padding: 9px;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-3);
  }

  .site-nav.is-open {
    display: grid;
  }

  .site-nav a {
    min-height: 46px;
    padding: 12px;
    color: var(--ink);
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav a[aria-current="true"] {
    color: var(--brand-dk);
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
    padding-bottom: var(--s7);
  }

  .hero-help {
    width: min(100%, 700px);
  }

  .section-intro--compact {
    grid-template-columns: 176px 1fr;
  }

  .section-intro--compact > p:last-child {
    grid-column: 2;
  }

  .guide-layout {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  .guide-aside {
    position: static;
  }

  .step-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s2);
  }

  .step-list::before {
    top: 17px;
    right: 26px;
    bottom: auto;
    left: 26px;
    width: auto;
    height: 2px;
  }

  .step-list li {
    display: block;
    min-height: auto;
    padding-right: 8px;
  }

  .step-list li > span {
    margin-bottom: 8px;
  }

  .privacy-note {
    max-width: 620px;
  }

  .guide-panel {
    padding: var(--s5) var(--s5) var(--s6);
  }

  .resources-grid,
  .about-grid,
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .maker-card {
    display: grid;
    align-items: center;
    grid-template-columns: 96px 1fr;
    gap: var(--s5);
  }

  .maker-card img {
    margin: 0;
  }

  .glossary {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

@media (max-width: 680px) {
  .shell {
    width: min(calc(100% - 28px), var(--shell));
  }

  :root {
    --header-h: 64px;
  }

  .legal-ribbon__detail {
    display: none;
  }

  .brand small {
    display: none;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
  }

  .quick-exit {
    width: 42px;
    justify-content: center;
    padding: 8px;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(152, 41, 44, 0.9);
    color: transparent;
    font-size: 0;
  }

  .quick-exit span {
    color: var(--on-dark);
    font-size: 1.05rem;
  }

  .quick-exit:hover {
    background: var(--surface);
  }

  .quick-exit:hover span {
    color: var(--navy-800);
  }

  .hero h1 {
    letter-spacing: -0.036em;
  }

  .trust-list {
    gap: 10px 18px;
  }

  .chapter-strip {
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
  }

  .chapter-strip i {
    min-width: 18px;
  }

  .section-intro--compact {
    display: block;
  }

  .section-intro--compact > p:last-child {
    margin-top: var(--s4);
  }

  .urgent-grid {
    grid-template-columns: 1fr;
  }

  .urgent-card {
    min-height: 0;
  }

  .urgent-card__icon {
    margin-bottom: var(--s4);
  }

  .chapter-heading {
    margin-bottom: var(--s6);
    grid-template-columns: 44px 1fr;
    gap: var(--s3);
  }

  .chapter-number {
    width: 40px;
    height: 40px;
    font-size: 0.68rem;
  }

  .step-list li small {
    display: none;
  }

  .step-list li strong {
    font-size: 0.68rem;
  }

  .stage-grid,
  .choice-stack--compact,
  .result-columns,
  .checklist-columns,
  .quote-grid,
  .principle-grid,
  .questions-list {
    grid-template-columns: 1fr;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .stage-choice {
    min-height: 0;
  }

  .stage-choice span {
    padding-right: 56px;
  }

  .tool-summary {
    padding: 16px 16px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: var(--s3);
  }

  .tool-index {
    width: 36px;
    height: 36px;
    grid-row: 1 / 4;
  }

  .tool-summary__toggle {
    grid-column: 3;
  }

  .tool-body {
    padding: var(--s5) var(--s4) var(--s6);
  }

  .tool-form {
    grid-template-columns: 1fr;
  }

  .tool-form .button {
    justify-self: start;
  }

  .safety-bar,
  .result-continue,
  .save-control,
  .checklist-progress > div {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .filter-row button {
    flex: 0 0 auto;
  }

  .maker-card {
    display: block;
  }

  .maker-card img {
    margin-bottom: var(--s5);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  .footer-meta {
    text-align: left;
  }

  .toast {
    right: 14px;
    bottom: 14px;
  }

  .to-top {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 400px) {
  .header-inner {
    gap: 6px;
  }

  .menu-button {
    width: 42px;
    justify-content: center;
    padding: 8px;
  }

  .menu-button > span:last-child {
    display: none;
  }

  .hero h1 {
    font-size: 2.6rem;
  }

  .chapter-heading {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}

/* 16 Reduced motion, forced colours, print =============================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .button:hover,
  .urgent-card:hover,
  .article-card:hover,
  .to-top:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .hero-contours,
  .hero::after {
    display: none;
  }

  .result-status,
  .urgent-card,
  .tool-block,
  .checklist-block,
  .choice-card,
  .stage-choice span,
  .article-card,
  .filter-row button,
  .to-top {
    border: 1px solid ButtonText;
  }

  .filter-row button.is-active {
    border: 2px solid Highlight;
  }

  .switch > span,
  .switch > span::after {
    border: 1px solid ButtonText;
  }
}

@media print {
  @page {
    size: letter;
    margin: 0.65in;
  }

  *,
  *::before,
  *::after {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: #fff !important;
    font-size: 10pt;
  }

  body::before,
  .legal-ribbon,
  .site-header,
  .hero,
  .urgent-section,
  .chapter-heading,
  .guide-aside,
  .guide-panel__topline,
  .guide-step,
  .tool-tabs,
  .tool-router,
  .tool-block,
  .tool-summary,
  .library-section,
  .resources-section,
  .about-section,
  .legal-section,
  .site-footer,
  .save-control,
  .checklist-progress,
  .checklist-block .button,
  .result-actions,
  .result-continue,
  .result-tools,
  .safety-bar,
  .toast,
  .to-top,
  .noscript-note {
    display: none !important;
  }

  .guide-section {
    padding: 0;
  }

  .guide-layout,
  .guide-panel,
  .guide-result,
  .tools-section,
  .checklist-block {
    display: block !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .guide-result[hidden] {
    display: none !important;
  }

  .checklist-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .paper-checklist,
  .result-box,
  .result-escalation {
    border: 1px solid #000;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
    font-size: 8pt;
  }

  /* Only the requested artefact prints. */
  body.print-plan .checklist-block,
  body.print-checklist .guide-section,
  body.print-tool .guide-section,
  body.print-tool .checklist-block {
    display: none !important;
  }

  body.print-tool .tool-block:has(.tool-result.is-print-target) {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
  }

  body.print-tool .tool-block:has(.tool-result.is-print-target) > :not(.tool-body) {
    display: none !important;
  }

  body.print-tool .tool-block:has(.tool-result.is-print-target) .tool-body > :not(.tool-result) {
    display: none !important;
  }

  body.print-tool .tool-result {
    display: none !important;
  }

  body.print-tool .tool-result.is-print-target {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
  }
}